Resizable Panels

Foundations · ResizablePanels

Two or more panes with drag handles between them, side by side or stacked; panels can nest.

Handles are separators with a value: ←/→ (↑/↓ when stacked) resize by 2%, Home/End jump to the limits, double-click resets to equal sizes.
min keeps every pane above a share of the whole; storageKey remembers the sizes.

PreviewCode

FoldersInbox, Sent, Archive

MessagesDrag a handle, or focus it and use the arrow keys.

ThreadNorthwind · Seat upgrade

ReplyWrite a reply…

Props

Prop	Type	Notes
`panels`	`ReactNode[]`	Required
`defaultSizes?`	`number[]`	Start sizes in percent (default: equal).
`min?`	`number`	Smallest size of a panel in percent (default 10).
`orientation?`	`"horizontal" \| "vertical"`
`storageKey?`	`string`	Remembers the sizes in localStorage under this key.
`labels?`	`string[]`	Accessible names of the panels, used for the resize handles.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.