Component

Resizable Layout

A flex container of panes separated by draggable dividers, using pointer events for mouse and touch. Built on the headless @refraction-ui/resizable-layout core.

Horizontal

Drag the divider to resize. Each pane is addressed by its index, and the divider sits between two panes.

Sidebar (40%)

Content (60%)

Installation

$pnpm add @refraction-ui/react-resizable-layout

Usage

tsx

import {
  ResizableLayout,
  ResizablePane,
  ResizableDivider,
} from '@refraction-ui/react'

export function MyComponent() {
  return (
    <ResizableLayout defaultSizes={[40, 60]} minSizes={[20, 20]} className="h-56">
      <ResizablePane index={0}>Sidebar</ResizablePane>
      <ResizableDivider index={0} className="w-1.5 cursor-col-resize bg-border" />
      <ResizablePane index={1}>Content</ResizablePane>
    </ResizableLayout>
  )
}

Vertical

Set orientation="vertical" to stack panes and drag vertically.

Editor

Terminal

Multiple panes & persistence

Add more panes and dividers, and pass persistKey to remember sizes across reloads via localStorage.

One

Two

Three

ResizableLayout props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Whether panes are arranged in a row or a column.
`defaultSizes`	`number[]`	`[50, 50]`	Initial size of each pane, as a percentage. Length must match the pane count.
`minSizes`	`number[]`	--	Minimum percentage each pane may shrink to while dragging.
`maxSizes`	`number[]`	--	Maximum percentage each pane may grow to while dragging.
`persistKey`	`string`	--	localStorage key to persist sizes across reloads.
`onSizesChange`	`(sizes: number[]) => void`	--	Called with the new size array whenever a divider is dragged.
`className`	`string`	--	Additional CSS classes for the container.

ResizablePane props

Prop	Type	Default	Description
`index`	`number`	--	Zero-based position of the pane in the layout. Required.
`className`	`string`	--	Additional CSS classes for the pane.

ResizableDivider props

Prop	Type	Default	Description
`index`	`number`	--	Index of the divider, sitting between pane[index] and pane[index + 1]. Required.
`className`	`string`	--	Additional CSS classes for the draggable handle.