Horizontal
Panel A
Panel B
Vertical
Top
Bottom
Three-Panel Layout
A sidebar-content-inspector layout with minimum size constraints.
Sidebar
Content
Inspector
Without Handle
The divider is still draggable but has no visible grip icon.
Main
Side
Sub-components
| Component | Description |
|---|---|
| Resizable | Root panel group (pass direction prop here) |
| Resizable.Panel | A single resizable panel |
| Resizable.Handle | Draggable divider between panels |
Props
| Prop | Type | Description |
|---|---|---|
| direction | "horizontal" | "vertical" | Layout direction of the panel group |
| defaultSize | number | Default size of a panel as a percentage (0-100) |
| minSize | number | Minimum size of a panel as a percentage |
| maxSize | number | Maximum size of a panel as a percentage |
| withHandle | boolean | Show a visible grip handle on the resize bar |
| className | string | Additional classes on the element |
Usage
<Resizable direction="horizontal">
<Resizable.Panel defaultSize={50}>
<div>Left panel</div>
</Resizable.Panel>
<Resizable.Handle withHandle />
<Resizable.Panel defaultSize={50}>
<div>Right panel</div>
</Resizable.Panel>
</Resizable>