Resizable

A split-pane layout primitive: drag a handle between two panels to resize the sized one, with min/max clamping and full keyboard support. Composed from Resizable, ResizablePanel, and ResizableHandle.

Installation

npx dafink-ui add resizable

Demo

Sidebar

Editor

Terminal

Composition

<ResizablePanel />/* defaultSize (sized) or omitted (flexible), minSize (120), maxSize */

<ResizableHandle />/* keyboard-operable drag grip between two panels; aria-label */

</Resizable>

Props

Name	Type	Default	Description
direction	'horizontal' \| 'vertical'	-	Axis panels split and resize along. horizontal renders a row and resizes widths; vertical renders a column and resizes heights.
className	string	''	Additional classes merged onto the root flex container.
children	ReactNode	-	ResizablePanel and ResizableHandle elements, alternating.

Accessibility

ResizableHandle is a real focusable widget, not a mouse-only drag affordance: the visible knob carries role="separator", aria-orientation, and aria-valuenow/aria-valuemin/aria-valuemaxreflecting the sized panel's current size and bounds, and it is the single tab stop per handle regardless of the larger pointer-only hit-area around it. There is no focus trap and nothing to Escape out of — it participates in normal document tab order like any other in-page control.

Key	Function
`right arrow`	Grows or shrinks the sized panel by 16px, following whichever side of the handle is sized (mirrors drag behavior). Down arrow does the same in a vertical layout.
`left arrow`	The opposite-direction step from Right arrow. Up arrow does the same in a vertical layout.
`shift`+`right arrow`	Same as Right/Down arrow, but with a larger 64px step.
`home`	Jumps the sized panel straight to its minSize.
`end`	Jumps the sized panel straight to its maxSize; no-op if maxSize isn't set.