Components

Resizable

Accessible, draggable panel groups for building split layouts — sidebars, editors, and dashboards — that the user can resize horizontally or vertically.

Basic usage

Wrap panels in a ResizablePanelGroup with a fixed height, and drag the divider to resize.

Sidebar

Content

Vertical

Set direction="vertical" to stack panels and resize along the y-axis.

Header

Body

With handle

Pass withHandle to render a visible grip affordance that makes the divider easier to find and grab.

One

Two

Nested groups

Nest a vertical group inside a horizontal panel to compose full IDE-style layouts.

Nav

Editor

Terminal

Props

ResizablePanelGroup

Prop	Type	Default	Description
`direction`required	'horizontal' \| 'vertical'	`—`	Axis the panels are laid out and resized along.
`autoSaveId`	string	`—`	Persists panel sizes to localStorage under this id across reloads.
`onLayout`	(sizes: number[]) => void	`—`	Fires with the new percentage sizes whenever the layout changes.
`className`	string	`—`	Additional Tailwind classes — set a fixed height here.
`...rest`	PanelGroupProps	`—`	All react-resizable-panels PanelGroup props are forwarded.

ResizablePanel

Prop	Type	Default	Description
`defaultSize`	number	`—`	Initial size as a percentage (0–100) of the group.
`minSize`	number	`10`	Smallest size the panel can be dragged to, as a percentage.
`maxSize`	number	`100`	Largest size the panel can be dragged to, as a percentage.
`collapsible`	boolean	`false`	Allows the panel to collapse below minSize to a collapsedSize.
`collapsedSize`	number	`0`	Size the panel snaps to when collapsed.
`order`	number	`—`	Explicit order when panels are conditionally rendered.
`...rest`	PanelProps	`—`	All react-resizable-panels Panel props are forwarded.

ResizableHandle

Prop	Type	Default	Description
`withHandle`	boolean	`false`	Renders a visible grip handle in the center of the divider.
`disabled`	boolean	`false`	Prevents the handle from being dragged or focused.
`className`	string	`—`	Additional Tailwind classes to merge onto the divider.
`...rest`	PanelResizeHandleProps	`—`	All react-resizable-panels PanelResizeHandle props are forwarded.

Accessibility

Each handle is a focusable role="separator" exposing aria-valuenow, aria-valuemin, and aria-valuemax so assistive tech announces panel sizing.
Handles are keyboard-operable — focus with Tab and resize with the arrow keys; Home / End jump to the min and max sizes.
A focus-visible ring using the brand gold ring token appears on keyboard focus so the active divider is always visible.
The visible grip rendered by withHandle is decorative; the larger invisible hit area keeps the pointer target comfortable without enlarging the visual divider.