Layout

Splitter

A resizable panel layout — two or more panels divided by a draggable divider, built on the same Pointer Events technique as Scheduler/KanbanBoard's drag, adapted to one-dimensional resize.

Splitter

Preview

Sidebar

Main content — drag the divider, or focus it and use Arrow Left/Right.

Usage

tsx

import { Splitter } from "@vesture/react";

function Example() {
  return (
    <div style={{ height: 320 }}>
      <Splitter defaultSizes={[30, 70]} minSize={15}>
        <div style={{ padding: 16 }}>Sidebar</div>
        <div style={{ padding: 16 }}>Main content</div>
      </Splitter>
    </div>
  );
}

Behavior

Each child of Splitter is one panel; a draggable divider is rendered between every adjacent pair. Dragging a divider live-resizes the two panels it sits between, as a percentage of the container's total size — not a laggy post-drop snap.
minSize is a percentage floor applied to both panels on either side of a divider; a drag past that point clamps rather than shrinking either panel further.
A focused divider responds to Arrow Left/Right (horizontal) or Arrow Up/Down (vertical) to nudge the adjacent panels' sizes by a fixed step — the keyboard-accessible equivalent of the drag.
onSizesChange fires with the full sizes array after a drag ends or a keyboard nudge, in the same order as the panels.

Props

Prop	Type	Default	Description
children	ReactNode[]	—	Required. Each child is one panel — at least 2.
direction	"horizontal" \| "vertical"	"horizontal"	"horizontal" places panels side by side with a vertical divider; "vertical" stacks them with a horizontal divider.
defaultSizes	number[]	—	Initial per-panel percentages, summing to 100. Evenly distributed when omitted.
minSize	number	10	Percentage floor per panel, enforced by both drag and keyboard resize.
onSizesChange	(sizes: number[]) => void	—	Fires after a drag ends or a keyboard nudge, with the updated sizes array.