Resizable
Draggable split panes built on react-resizable-panels v4. Horizontal or vertical, with keyboard-accessible handles and persistable layout.
Installation
pnpm dlx @hex-core/cli add resizableAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | string | horizontal | Group orientation: 'horizontal' | 'vertical' |
defaultLayout | object | — | Array of initial panel sizes in order (percentages summing to 100) |
onLayoutChange | function | — | Fires when the user drags a handle; receives the new layout array |
disabled | boolean | false | Disable resizing for the whole group |
AI Guidance
When to use
Use for editor-style layouts (file tree + editor), dashboards with configurable panels, or any UI where users need to trade space between regions. Layouts can be persisted to localStorage via the group's id.
When not to use
Don't use for responsive layouts — use CSS grid/flex with breakpoints. Don't use for modal layouts (use Dialog/Sheet). Don't nest deeply (>2 levels) — it hurts a11y and perception. Don't use if panels need to collapse/expand as a single action (use Collapsible).
Common mistakes
- Forgetting ResizableHandle between panels — they won't resize
- Using 'cols'/'rows' instead of orientation='horizontal'/'vertical' (old v1 API)
- Not providing defaultSize on each panel — initial layout will be uneven
- Rendering panel content that changes DOM size during drag — react-resizable-panels performance suffers
- Omitting a group id when you want layout to persist via localStorage
Accessibility
ResizableHandle is focusable and resizable via keyboard arrows. role='separator' is set, with aria-valuenow/min/max wired by react-resizable-panels. The grab-grip is aria-hidden (decorative).
Related components
Token budget: 700