ResizableLayout

A three-column drag-to-resize layout. Column widths are proportional (flex-based) by default so the layout responds to any container size, but the left and middle columns can each opt into a fixed pixel mode via leftFixedPx and middleFixedPx. Widths are persisted to localStorage via storageKey. Each divider reveals a cursor-following frosted pill on hover/drag.

Demo

Drag the dividers to resize. All three columns are resizable by default. Hover a divider to see the pill track the cursor.

left

middle

right

Without divider indicator

showDivider={false} hides the pill entirely. The drag area remains active — hover and drag work as before.

left

middle

right

Custom gap

gap controls the visual space between columns in pixels (default 24). With gap={0} columns sit flush; the divider's hit area stays at least 20px wide so the resize handle is always grabbable.

left

middle

right

Hidden columns + fullscreen

leftHidden, middleHidden, and rightHidden each collapse a column to zero width with an opacity fade. To make one column take the full viewport ("fullscreen"), hide the other two together — there's no dedicated fullscreen prop because two hidden columns already express the intent.

left

middle

right

Props

Prop	Type	Default	Description
`left`	`ReactNode`	—	Content for the left column.
`middle`	`ReactNode`	—	Content for the middle column.
`right`	`ReactNode`	—	Content for the right column.
`top`	`ReactNode`	—	Optional content rendered above all columns (e.g. a toolbar).
`showDivider`	`boolean`	`true`	Show the cursor-following pill on dividers. The drag area is always active.
`gap`	`number`	`24`	Visual width of the space between columns in px. The divider's interactive hit area stays at least 20px wide even when `gap` is smaller, so the resize handle is always grabbable.
`padding`	`number`	`12`	Outer padding from the layout's container edges in px. Set to `0` for designs where the layout sits flush with the viewport.
`defaultWidths`	`{ left?: number; middle?: number; right?: number }`	`2/3/5`	Initial flex weights for each column. Ignored for any column that opts into a fixed-px mode (`leftFixedPx`, `middleFixedPx`).
`minWidths`	`{ left?: number; middle?: number; right?: number }`	`80px`	Minimum pixel width per column, enforced during drag-resize.
`leftFixedPx`	`number`	—	Pin the left column to a fixed pixel width. The column ignores its flex ratio and never grows with the viewport.
`middleFixedPx`	`number`	—	Pin the middle column to a fixed-but-resize-adjustable pixel width. The middle-right drag mutates the value 1:1 (clamped by `minWidths.middle`); the right column takes the remaining width. Pair with `storageKey` to persist the px value.
`storageKey`	`string`	—	`localStorage` key to persist column widths across sessions.
`leftHidden`	`boolean`	`false`	Collapse the left column.
`middleHidden`	`boolean`	`false`	Collapse the middle column.
`rightHidden`	`boolean`	`false`	Collapse the right column.
`leftResizable`	`boolean`	`true`	Enable drag-to-resize on the left divider.
`rightResizable`	`boolean`	`true`	Enable drag-to-resize on the right divider.
`className`	`string`	—	Extra classes on the root element.