Loading…

Resizable

beta

Panels side by side or stacked, with handles to resize them by pointer or keyboard, limits per panel, and panels that collapse.

Layout
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add resizable

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ResizablePanelGroup } from "@/components/ui/resizable";

Examples

Every example the tests run, live and operable, side by side.

Default
Editor Layout

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ResizablePanelGroup>

Prop	Type	Default
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`
`onLayout` Called with every panel's size, in order, whenever a handle moves one.	`(sizes: number[]) => void`	—

Plus every attribute of <div>.

<ResizablePanel>

Prop	Type	Default
`collapsedSize` Size when collapsed, in percent. Default 0.	`number`	`0`
`collapsible` Can be closed to `collapsedSize` with Enter on its handle, or by dragging past its minimum.	`boolean`	`false`
`defaultSize` Starting size, as a percentage of the group. Panels without one share what is left.	`number`	—
`maxSize` Largest size, in percent. Default 100.	`number`	`100`
`minSize` Smallest size, in percent. Default 10.	`number`	`10`

Plus every attribute of <div>.

<ResizableHandle>

Prop	Type	Default
`keyboardStep` Percent moved per arrow key press; Shift moves ten times as far. Default 1.	`number`	`1`
`withHandle` Show a grip in the middle of the handle. Default false.	`boolean`	`false`

Plus every attribute of <div>.

Accessibility

Each handle is a window splitter: a focusable role="separator" whose value is the size of the panel before it, with that panel as aria-controls and its limits as the value range. Arrow keys resize in reading direction (Shift for ten times the step), Home and End go to the limits, and Enter collapses and restores a collapsible panel. Name a handle with aria-label when a page has more than one — "Resize sidebar".

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

direction

"horizontal" | "vertical"

"horizontal"

onLayout

Called with every panel's size, in order, whenever a handle moves one.

(sizes: number[]) => void

—

Prop

Type

Default

collapsedSize

Size when collapsed, in percent. Default 0.

number

0

collapsible

Can be closed to collapsedSize with Enter on its handle, or by dragging past its minimum.

boolean

false

defaultSize

Starting size, as a percentage of the group. Panels without one share what is left.

number

—

maxSize

Largest size, in percent. Default 100.

number

100

minSize

Smallest size, in percent. Default 10.

number

10

Prop

Type

Default

keyboardStep

Percent moved per arrow key press; Shift moves ten times as far. Default 1.

number

1

withHandle

Show a grip in the middle of the handle. Default false.

boolean

false