ResizablePanels.
Two independently scrollable surfaces with drag-to-resize and arrow-key resizing.
Inbox
Projects
Archive
Drag the handle or focus it and use arrow keys to resize.
Selected content
The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.
Props & API reference
Parameters available in the shared component, including value types, requirements and accepted options.
| Parameter | Type | Required | Default | Possible values | Description |
|---|---|---|---|---|---|
first | ReactNode | Yes | — | — | Contents of the first panel. |
second | ReactNode | Yes | — | — | Contents of the second panel. |
direction | "horizontal" | "vertical" | No | horizontal | horizontal · vertical | Split orientation. |
defaultSize | number | No | 45 | — | Initial percentage allocated to the first panel. |
minSize | number | No | 20 | — | Minimum first-panel percentage. |
maxSize | number | No | 80 | — | Maximum first-panel percentage. |
onSizeChange | (percent: number) => void | No | — | — | Called after resizing. |
firstLabel | string | No | First panel | — | Accessible first-panel label. |
secondLabel | string | No | Second panel | — | Accessible second-panel label. |
className | string | No | — | — | Additional CSS class on the outer component element. |