Resizable
A layout container that splits content into resizable panels separated by draggable handles. Supports horizontal and vertical layouts, keyboard navigation, and optional persistence of panel sizes.
Props
| Name | Default | Type |
|---|---|---|
vertical | — | boolean Stacks panels vertically with horizontal handles |
storageKey | — | string When provided, panel sizes are persisted to localStorage under this key |
hideHandles | — | boolean Hides the resize handles until a handle is hovered or focused |
minSize | — | number Minimum size, in pixels, each panel can be resized to along the active axis |
Slots
| Name | Props | Description |
|---|---|---|
default | — | The panel content. Each top-level child becomes a resizable panel |
Examples
Use the vertical prop to stack panels with horizontal handles. The minSize
prop keeps every panel above a pixel threshold while dragging.
Top
Middle
Bottom
Nest a Resizable inside another to build mixed horizontal and vertical
layouts. Each container can set its own minSize.
Sidebar
Editor
Terminal