Resizable panelsPro
Panels with draggable, keyboard-resizable dividers and double-click reset.
Explorer
app
components
lib
page.tsx
export default function Page() {
return (
<Dock items={apps} />
);
}Preview
Drag the handles
When to use
- Editors, inboxes, IDE-like layouts and side-by-side comparisons.
When not to use
- Phone layouts: stack panels instead.
Installation
Usage
Import it from @/components/ui/resizable-panels after installing.
example.tsx
import { ResizablePanels } from "@/components/ui/resizable-panels";
<div className="h-[600px]">
<ResizablePanels
panels={[
{ id: "nav", label: "Sidebar", defaultSize: 22, minSize: 15, content: <Sidebar /> },
{ id: "main", label: "Editor", content: <Editor /> },
]}
onResize={(sizes) => save("layout", sizes)}
/>
</div>API reference
ResizablePanels
A row or column of panels separated by draggable dividers.
| Prop | Type | Default | Description |
|---|---|---|---|
| panels | ResizablePanel[] | – | { id, label, content, defaultSize?, minSize? } in percent. |
| direction | "horizontal" | "vertical" | "horizontal" | Layout axis. |
| onResize | (sizes: number[]) => void | – | Final sizes after a drag or key press, for saving. |
Keyboard interactions
| Keys | Action |
|---|---|
| ←or→ (or ↑or↓) | Move the focused divider 2% |
| Shift + arrows | Move 10% |
| HomeorEnd | Collapse to a minimum |
| Enter | Reset to the default sizes |
Accessibility
- Dividers are focusable separators with value, min and max, named after the panels they resize.
- Double-click or Enter resets.
Motion
- Keyboard and reset changes spring into place; drags track the pointer exactly.
Responsive behavior
- Needs a height on its parent; consider stacking below 768px.
Performance
- Sizes are percentages on flex-basis; only the two neighbours change per drag.
Notes for AI
- Persist sizes from onResize and pass them back as defaultSize.
This page as Markdown, for assistants and coding agents:
/components/resizable-panels/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt