ResizablePanelGroup

Container that lays out resizable panels along a single axis. Wraps react-resizable-panels Group, exposing shadcn's direction prop (mapped to the library's orientation). Compose with ResizablePanel children separated by ResizableHandle.

Sidebar

Canvas

Usage

import { resizableAnatomy, ResizableDirection, ResizableHandle, ResizableHandleProps, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupProps } from "@instruments/materia-ui/components/resizable";

Best practices

Compose ResizablePanel children separated by ResizableHandle - a handle between panels is what makes them draggable.
Set the axis with direction (horizontal/vertical); it maps to the library's orientation, which is intentionally not exposed.

Props

ResizableHandle

Prop	Type	Default	Description
withHandle	`boolean \| undefined`	`false`	Render a centred grip affordance on the divider.

ResizablePanelGroup

Prop	Type	Default	Description
direction	`ResizableDirection \| undefined`	`"horizontal"`	Axis the panels split along.

Also exports

constresizableAnatomy
typeResizableDirection
interfaceResizableHandleProps
componentResizablePanel
interfaceResizablePanelGroupProps

Anatomy

ResizablePanelGroup

resizable-panel-group

Panels split along an axis with a draggable divider

ResizablePanel

resizable-panel

Resizable region

ResizableHandle

resizable-handle

Draggable divider between panels

Composition

Builds on

Center, Icon