# Resizable panels

> Panels with draggable, keyboard-resizable dividers and double-click reset.

Component · Pro · https://lodeui.com/components/resizable-panels

## When to use

- Editors, inboxes, IDE-like layouts and side-by-side comparisons.

## When not to use

- Phone layouts: stack panels instead.

## Installation

```bash
npx shadcn@latest add @lode/resizable-panels
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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 ↑ / ↓) | Move the focused divider 2% |
| Shift + arrows | Move 10% |
| Home / End | 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.

## Related

- [Image compare](https://lodeui.com/components/image-compare) — Before and after slider with drag, hover and keyboard control.
- [Drawer](https://lodeui.com/components/drawer) — A bottom sheet you drag down to dismiss, with focus trap and safe-area padding.
- [Tree view](https://lodeui.com/components/tree-view) — Folders and files with animated expand, indent guides and full tree keyboard support.