Splitter

FreeNew

Resizable panels with minimum, maximum and collapsible sizes, keyboard separators that report their size, and drag that reverses in right-to-left layouts.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

orientation

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/splitter

Usage

import { Splitter } from "@/components/ui/splitter"

<Splitter
  panels={[
    {
      id: "files",
      label: "Files",
      defaultSize: 28,
      min: 15,
      collapsible: true,
      content: <FileList />,
    },
    { id: "editor", label: "Editor", content: <Editor /> },
  ]}
/>

Props

Prop	Type	Default	Description
`panels`	`SplitterPanelConfig[]`	`-`	id, content, defaultSize, min, max, collapsible, label.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the split.
`sizes`	`number[]`	`-`	Controlled sizes in percent.
`onSizesChange`	`(sizes: number[]) => void`	`-`	Called on every change.

Accessibility

Role: separator.

Each handle is a focusable separator with aria-valuenow, aria-valuemin, aria-valuemax and aria-controls pointing at the panel it sizes.
A collapsed panel is hidden from the accessibility tree.
Dragging uses pointer capture so mouse, touch and pen all work.

Keyboard

Arrow keys move the handle by 2%, Shift by 10%.
Home and End jump to the limits.
Enter collapses or restores a collapsible panel before the handle.
Double click does the same with a pointer.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/splitter

Usage

import { Splitter } from "@/components/ui/splitter"

<Splitter
  panels={[
    {
      id: "files",
      label: "Files",
      defaultSize: 28,
      min: 15,
      collapsible: true,
      content: <FileList />,
    },
    { id: "editor", label: "Editor", content: <Editor /> },
  ]}
/>

Props

Prop	Type	Default	Description
`panels`	`SplitterPanelConfig[]`	`-`	id, content, defaultSize, min, max, collapsible, label.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the split.
`sizes`	`number[]`	`-`	Controlled sizes in percent.
`onSizesChange`	`(sizes: number[]) => void`	`-`	Called on every change.

Accessibility

Role: separator.

Each handle is a focusable separator with aria-valuenow, aria-valuemin, aria-valuemax and aria-controls pointing at the panel it sizes.
A collapsed panel is hidden from the accessibility tree.
Dragging uses pointer capture so mouse, touch and pen all work.

Keyboard

Arrow keys move the handle by 2%, Shift by 10%.
Home and End jump to the limits.
Enter collapses or restores a collapsible panel before the handle.
Double click does the same with a pointer.