Two panes with a draggable divider, percentage limits, keyboard resizing and optional collapse.
Files
Overview
Components
Tokens
A little room to work
Drag the divider to arrange your workspace. Focus it and use the arrow keys for a precise adjustment.
Enter collapses or restores the first pane.
pnpm dlx shadcn@latest add @latheui/resizable-panelsPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Resizable Panels is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| label* (required) | string | — | Names the panel group and divider. |
| primary / secondary* (required) | React.ReactNode | — | Content of the first and second pane. Overflow scrolls inside each pane. |
| value / defaultValue | number | 40 (defaultValue) | Controlled or initial percentage of pane space assigned to the first pane. Zero collapses it when collapsible. |
| onValueChange | (value: number) => void | — | Called during pointer or keyboard changes, with a percentage rounded to one decimal place. |
| min / max | number | 20 / 80 | Minimum and maximum first-pane percentages. Clamped to 5–95 with max at least min. |
| orientation | "horizontal" | "vertical" | "horizontal" | Horizontal places panes side by side; vertical stacks them. |
| collapsible | boolean | false | Allow zero size with Enter, Home, or dragging below half the minimum. |
| disabled | boolean | false | Disable resizing and remove the divider from the tab order. |
| className | string | — | Override the outer frame, including its default h-64 height. |
Keep the percentage in parent state and persist it using your app’s settings. Give stacked panels an explicit height.
<ResizablePanels
label="Editor and output"
orientation="vertical"
value={size}
onValueChange={setSize}
min={25}
max={75}
className="h-96"
primary={<Editor />}
secondary={<Output />}
/>