# Resizable

> Draggable split-panel layouts.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/resizable.json`

## Install

```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@aspyn-io/kit";
```

### List + detail split

Drag the handle to resize. Keyboard accessible (arrows).

```tsx
<ResizablePanelGroup orientation="horizontal" className="min-h-48 rounded-lg border">
  <ResizablePanel defaultSize={70} minSize={40}>Detail</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={30} minSize={20}>List</ResizablePanel>
</ResizablePanelGroup>
```

### Nested groups

Nest a group inside a panel to mix directions: here a vertical split lives in the right-hand panel.

```tsx
<ResizablePanelGroup orientation="horizontal" className="min-h-48 rounded-lg border">
  <ResizablePanel defaultSize={35} minSize={20}>Navigation</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={65}>
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel defaultSize={65}>Canvas</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={35}>Activity</ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>
```

## Notes

- Size the group with min-h-* (or a sized parent), not h-*: react-resizable-panels sets height:100% inline, which wins over height utilities and collapses the group.
- Persist layouts with the autoSaveId prop (localStorage).