Resizable
Resizable panel groups with draggable handles for flexible layouts.
Usage
Vertical
Use direction="vertical" for vertically stacked panels.
Three Panels with Min Size
Panels support minSize and maxSize constraints.
Sub-components
ResizablePanelGroup
Root container that manages panel layout.
| Prop | Type | Default | Description |
|---|---|---|---|
direction* | 'horizontal' | 'vertical' | - | Layout direction of the panels. |
autoSaveId | string | - | Auto-save panel arrangement to localStorage with this key. |
keyboardResizeBy | number | - | Step size in pixels/percent for arrow key resizing. |
ResizablePanel
Individual resizable panel.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number | - | Initial panel size as a percentage. |
minSize | number | - | Minimum size constraint. |
maxSize | number | - | Maximum size constraint. |
collapsible | boolean | - | Allow panel to collapse when resized below minSize. |
collapsedSize | number | - | Size when collapsed. |
ResizableHandle
Draggable handle between panels.
| Prop | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | - | Show a visible grip icon on the handle. |
disabled | boolean | - | Disable drag functionality. |