Resizable
Draggable split-panel layouts.
shadcn/ui · new-york-v4 · synced Aug 29, 2026shadcn/uinew-york-v4 · synced Aug 29, 2026
Installation
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@aspyn-io/kit";List + detail split
Drag the handle to resize. Keyboard accessible (arrows).
Detail
List
Nested groups
Nest a group inside a panel to mix directions: here a vertical split lives in the right-hand panel.
Navigation
Canvas
Activity
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).