Interactive horizontal split
Drag the handle or focus it and use arrow keys (Shift for larger steps).
Panel A
Drag the divider →
Panel B
Three columns
Nav
Content
Inspector
Vertical split
Top pane
Bottom pane
Drag up/down
Sidebar workspace
Sidebar
Editor
Thin handle (1px divider)
handleVariant="thin" — hairline split with no padded grip rail.
Outline
Canvas
1px handle
Thin vertical split
Editor
Terminal
Handle only (static chrome)
Use ResizableHandle alone when your app wires pointer logic. For working splits, use ResizablePanelGroup.
List
Detail
Vertical handle (static)
Preview
Timeline
Thin handle (static)
Files
Preview
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| ResizablePanelGroup | Optional | component | — | Panels array + drag handles between them. |
| defaultSizes | Optional | number[] | — | Initial panel widths in percent. |
| orientation | Optional | horizontal | vertical | horizontal | Drag axis. |
| handleVariant | Optional | default | thin | default | Wide grip rail vs 1px hairline divider. |
| variant | Optional | default | thin | default | On ResizableHandle — same as handleVariant. |