Resizable
Accessible resizable panel groups and layouts with keyboard support, built on react-resizable-panels.
Install
npx shadcn@latest add https://atomx.acau.net/r/resizable.jsonUsage
Wrap your layout in ResizablePanelGroup with orientation="horizontal" or "vertical". Place ResizablePanel children with defaultSize (a percentage 0–100), separated by ResizableHandle. Pass withHandle on the handle to render a draggable grip indicator.
<ResizablePanelGroup orientation="horizontal" className="min-h-[200px] rounded-lg border">
<ResizablePanel defaultSize={40}>Sidebar</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={60}>Content</ResizablePanel>
</ResizablePanelGroup>Resize is keyboard-accessible: focus a handle and use the arrow keys. Layouts can be persisted by reading the onLayoutChange callback on ResizablePanelGroup and restoring with defaultLayout.
Preview
Horizontal
Vertical
Props
ResizablePanelGroup extends GroupProps from react-resizable-panels.
| Prop | Type | Notes |
|---|---|---|
orientation | "horizontal" | "vertical" | Layout direction. Defaults to "horizontal". (Renamed from direction in react-resizable-panels v4.) |
defaultLayout | Record<string, number> | Map of panel id → percentage; lets you restore a persisted layout. |
onLayoutChange | (layout) => void | Fires on every resize — persist this to remember user layouts. |
disabled | boolean | Disables all resize handles in the group. |
ResizablePanel extends PanelProps.
| Prop | Type | Notes |
|---|---|---|
defaultSize | number | Initial percentage size (0–100). |
minSize / maxSize | number | Bounds for the panel size. |
collapsible / collapsedSize | boolean / number | Allow the panel to collapse to a small size. |
id | string | Stable id for persisted layouts and imperative APIs. |
ResizableHandle extends SeparatorProps and adds withHandle?: boolean — when true, renders a centered drag grip.