Resizable

Panels that share a row or a column and can be resized by dragging the divider between them — a list beside its detail, an editor over its output.

tsx

1import {
2  ResizablePanelGroup,
3  ResizablePanel,
4  ResizableHandle,
5} from "@pestoui/core"

Two panels

defaultSize takes a string for a percentage — a bare number is read as pixels. withHandle draws the grip; without it the divider is a bare hairline. The handle is focusable and moves with the arrow keys.

Agents

Run detail

Props

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	On ResizablePanelGroup. Panels side by side, or stacked.
defaultSize	number \| string	—	On ResizablePanel. Starting size. A number is pixels; a string is a percentage ("40%", or "40") or any CSS length.
minSize / maxSize	number \| string	—	On ResizablePanel. Limits the drag. Same units as defaultSize.
collapsible	boolean	—	On ResizablePanel. Lets the panel snap shut when dragged below its minimum.
withHandle	boolean	—	On ResizableHandle. Draws the visible grip on the divider.

PreviousRating Next Reveal

Pesto UI · 117 documented components