Resizable

Split-pane layout with drag-to-resize handles. Compose ResizablePanelGroup with ResizablePanel children and ResizableHandle between them.

Default

Two-pane horizontal split.

One

Two

Import the parts you need from the component's folder.

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

Stack panels with direction="vertical".

Top

Bottom

Nested groups with visible drag handles via withHandle on each ResizableHandle.

Sidebar

Header

Content

Three panels split by two visible handles, each with the withHandle grip.

Nav

Main

Aside

Prop	Type	Default	Description
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	Split axis.
`autoSaveId`	`string`	—	Persist layout to localStorage under this key.

Event	Description
`layout`	Fires with the array of panel sizes whenever the layout changes.

Prop	Type	Default	Description
`defaultSize`	`number`	—	Initial size percentage (0-100).
`minSize`	`number`	—	Minimum size percentage.
`maxSize`	`number`	—	Maximum size percentage.
`collapsible`	`boolean`	`false`	Allow the panel to collapse past minSize.

Event	Description
`resize`	Fires with the new size when this panel is resized.
`collapse`	Fires when the panel collapses.
`expand`	Fires when the panel expands from a collapsed state.

Prop	Type	Default	Description
`withHandle`	`boolean`	`false`	Render a visible drag handle marker.

Event	Description
`dragging`	Fires with a boolean as the handle starts and stops dragging.