Resizable
Split panels the user can drag to resize, horizontally or vertically.
@garn/ui/resizableDefault
Two horizontal panels with a grip handle.
Installation
garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.
npx garn-ui add resizable- Registry
resizable- Source
- resizable.tsx
- Deps
react-resizable-panelslucide-react- Registry deps
utils
Import
import { Resizable } from "@garn/ui/resizable";Props
Generated from the component's TypeScript types.
No component-specific props — this is a thin wrapper over its native element.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="resizable-panel-group"]Overview
Resizable lets users rebalance space between adjacent regions — a sidebar/content split, an editor/preview, a multi-pane layout. ResizablePanelGroup sets the direction, each ResizablePanel takes defaultSize/minSize/maxSize (percentages), and ResizableHandle is the draggable divider (withHandle shows a grip). Use it where users genuinely benefit from controlling proportions; for fixed structure, a normal grid/flex layout is simpler.
Guidelines
Add resizing only where users will actually want it. Power layouts — code editor + preview, list + detail — benefit; most pages don't, and a draggable seam everywhere adds complexity for no gain. Set sensible defaults so it's usable before anyone drags.
Constrain panels with min/max sizes. Floors and ceilings stop a pane from collapsing to nothing or swallowing the layout; pick limits that keep every region functional. Persist the user's chosen split where it makes sense.
Make the handle reachable and operable. Show a grip affordance, give the separator an accessible name, and support keyboard resizing (arrow keys) — not just pointer drag. Keep the hit area comfortable on touch.
Best practices
- Give the PanelGroup a height (panels fill it) and set
defaultSize/minSizeper panel. - Use
withHandleso the divider is visible and grabbable. - Persist sizes with the library's
autoSaveId/ onLayout when the split should be remembered.
- Don't ship a resizable layout the keyboard can't operate — the handle is keyboard-resizable; keep it reachable.
- Don't use it for overlay or collapsible patterns.
- Don't nest deep panel trees that confuse the resize model.
Content guidelines
- Label each pane by its content, and give the drag handle an aria-label that says what it resizes.
Accessibility
- Role
separator- Focus
- The handle shows a ring and accepts arrow-key resizing.
Keyboard
| ArrowLeftArrowRight | Resize a horizontal handle. |
| ArrowUpArrowDown | Resize a vertical handle. |
| Enter | Collapse / expand a collapsible panel. |
- • The handle is a focusable separator with aria-valuenow/min/max — it's resizable by keyboard, not just drag.
- • Use `withHandle` (or otherwise signal the divider) so the resize affordance is discoverable.
- Status
- Stable
- Version
v0.3.0- Introduced
v0.1.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.