Splitter

Pass a panels array and matching default percentages. The machine manages resize math, keyboard controls, and panel constraints.

import { Splitter } from '@manti-ui/react';

const pane = (label: string) => (
  <div className="grid place-items-center h-[calc(var(--manti-space-16)*3)] text-text-muted">{label}</div>
);

export default function SplitterBasic() {
  return (
    <div className="w-full">
      <Splitter
        panels={[
          { id: 'a', content: pane('Sidebar') },
          { id: 'b', content: pane('Main') },
        ]}
        defaultSize={[30, 70]}
      />
    </div>
  );
}

Several panels

Left

Center

Right

API

Prop	Type	Default	Description
`panels`	`SplitterPanel[]`	—	The resizable panels, in order. Each: { id, content, minSize?, maxSize?, collapsible? }.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction of the split.
`size`	`number[]`	—	Controlled panel sizes, as percentages.
`defaultSize`	`number[]`	—	Initial panel sizes for uncontrolled usage.
`onResize`	`(size: number[]) => void`	—	Called while resizing, with the new sizes.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="splitter"][data-part="root"]`	The split-layout container.
`panel`	`[data-scope="splitter"][data-part="panel"]`	A single resizable region.
`resize-trigger`	`[data-scope="splitter"][data-part="resize-trigger"]`	The draggable divider between panels.

Tokens

Token	Controls
`--manti-splitter-handle-size`	handle size
`--manti-splitter-line-size`	line size
`--manti-splitter-line-size-active`	line size active

Last updated 13 September 2026