Splitter

A component used to resize adjacent panels with a draggable handle.

Usage

Allows users to resize panels in a layout. It supports both horizontal and vertical orientations.

import { Splitter } from "@elemnts-ui/react";

<Splitter.Root
  panels={[
    { id: "left", size: 50 },
    { id: "right", size: 50 },
  ]}
>
  <Splitter.Panel id="left">Left Panel</Splitter.Panel>
  <Splitter.ResizeTrigger id="left:right">
    <Splitter.ResizeTriggerSeparator />
    <Splitter.ResizeTriggerIndicator />
  </Splitter.ResizeTrigger>
  <Splitter.Panel id="right">Right Panel</Splitter.Panel>
</Splitter.Root>;

Vertical

Set the orientation prop to "vertical" to stack panels vertically.

Multiple Panels

You can create layouts with multiple resizable panels by defining more panel data and adding corresponding triggers.

Disabled Resize

Use the disabled prop on a Splitter.ResizeTrigger to prevent resizing.

Separator Only

You can choose to only render the separator line for a more minimal look.

API Reference

SplitterRoot

The root container that manages the splitter panels and resize triggers.

Prop	Type	Default
panels	`PanelData[]`	required
asChild	`boolean`	`false`
defaultSize	`PanelSize[]`	-
keyboardResizeBy	`number`	-
nonce	`string`	-
onCollapse	`(details: ExpandCollapseDetails) => void`	-
onExpand	`(details: ExpandCollapseDetails) => void`	-
onResize	`(details: ResizeDetails) => void`	-
onResizeEnd	`(details: ResizeEndDetails) => void`	-
onResizeStart	`() => void`	-
orientation	`'horizontal'`	`'vertical'`
registry	`SplitterRegistry`	-
size	`PanelSize[]`	-

SplitterRootProvider

Provides a splitter state machine to its children.

Prop	Type	Default
value	`UseSplitterReturn`	required
asChild	`boolean`	`false`

SplitterPanel

A resizable panel within the splitter.

Prop	Type	Default
id	`string`	required
asChild	`boolean`	`false`

SplitterResizeTrigger

The handle used to resize adjacent panels.

Prop	Type	Default
id	`ResizeTriggerId`	required
asChild	`boolean`	`false`
disabled	`boolean`	-

SplitterResizeTriggerSeparator

A visual separator line within the resize trigger.

Prop	Type	Default
asChild	`boolean`	`false`

SplitterResizeTriggerIndicator

A visual handle indicator within the resize trigger.

Prop	Type	Default
asChild	`boolean`	`false`