Skip to content
Twentyfirst UIPro

Resizable Panels

Foundations · ResizablePanels

View as Markdown

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.
FoldersInbox, Sent, Archive
MessagesDrag a handle, or focus it and use the arrow keys.
ThreadNorthwind · Seat upgrade
ReplyWrite a reply…

Props

ResizablePanels

PropTypeNotes
panelsReactNode[]Required
defaultSizes?number[]Start sizes in percent (default: equal).
min?numberSmallest size of a panel in percent (default 10).
orientation?"horizontal" | "vertical"
storageKey?stringRemembers the sizes in localStorage under this key.
labels?string[]Accessible names of the panels, used for the resize handles.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.