Split-pane layout with drag-to-resize handles. Compose ResizablePanelGroup with ResizablePanel children and ResizableHandle between them.
Two-pane horizontal split.
Stack panels with direction="vertical".
Nested groups with visible drag handles via withHandle on each ResizableHandle.
Three panels split by two visible handles, each with the withHandle grip.
| 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. |