Splitter

A component that divides your interface into resizable sections

Anatomy

<Splitter.Root>
  <Splitter.Panel />
  <Splitter.ResizeTrigger>
    <Splitter.ResizeTriggerIndicator />
  </Splitter.ResizeTrigger>
  <Splitter.Panel />
</Splitter.Root>

Examples

Context

The Splitter component allows you to pass a function as a child to gain direct access to its API. This provides more control and allows you to modify the size of the panels programmatically:

Vertical

By default, the Splitter component is horizontal. If you need a vertical splitter, use the orientation prop:

Collapsible Panels

To make a panel collapsible, set the collapsible prop to true on the panel you want to make collapsible. Additionally, you can use the collapsedSize prop to set the size of the panel when it's collapsed.

This can be useful for building sidebar layouts.

Multiple Panels

Here's an example of how to use the Splitter component with multiple panels.

Root Provider

An alternative way to control the splitter is to use the RootProvider component and the useSplitter hook. This way you can access the state and methods from outside the component.

Resize Indicator

Use the Splitter.ResizeTriggerIndicator component to show a visual indicator on the resize handle.

Dynamic Collapsible

Use the collapsePanel() and expandPanel() methods to programmatically control panel collapse based on viewport size. This is useful for responsive sidebar layouts that collapse on smaller screens.

API Reference

Props

Root

Renders a <div> element.

Prop	Default	Type
`panels`		`PanelData[]` The size constraints of the panels.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultSize`		`number[]` The initial size of the panels when rendered. Use when you don't need to control the size of the panels.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string resizeTrigger: (id: string) => string label: (id: string) => string panel: (id: string \| number) => string }>` The ids of the elements in the splitter. Useful for composition.
`keyboardResizeBy`		`number` The number of pixels to resize the panel by when the keyboard is used.
`nonce`		`string` The nonce for the injected splitter cursor stylesheet.
`onCollapse`		`(details: ExpandCollapseDetails) => void` Function called when a panel is collapsed.
`onExpand`		`(details: ExpandCollapseDetails) => void` Function called when a panel is expanded.
`onResize`		`(details: ResizeDetails) => void` Function called when the splitter is resized.
`onResizeEnd`		`(details: ResizeEndDetails) => void` Function called when the splitter resize ends.
`onResizeStart`		`() => void` Function called when the splitter resize starts.
`orientation`	`'horizontal'`	`'horizontal' \| 'vertical'` The orientation of the splitter. Can be `horizontal` or `vertical`
`size`		`number[]` The controlled size data of the panels

Attribute	Description
`[data-scope]`	splitter
`[data-part]`	root
`[data-orientation]`	The orientation of the splitter
`[data-dragging]`	Present when in the dragging state

Panel

Renders a <div> element.

Prop	Default	Type
`id`		`string`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	splitter
`[data-part]`	panel
`[data-orientation]`	The orientation of the panel
`[data-dragging]`	Present when in the dragging state
`[data-id]`
`[data-index]`	The index of the item

ResizeTrigger

Renders a <button> element.

Prop	Default	Type
`id`		`${string}:${string}`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`disabled`		`boolean`

Attribute	Description
`[data-scope]`	splitter
`[data-part]`	resize-trigger
`[data-id]`
`[data-orientation]`	The orientation of the resizetrigger
`[data-focus]`	Present when focused
`[data-dragging]`	Present when in the dragging state
`[data-disabled]`	Present when disabled

RootProvider

Renders a <div> element.

Prop	Default	Type
`value`		`UseSplitterReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Context

API

Property	Type
`dragging`	`boolean` Whether the splitter is currently being resized.
`orientation`	`"horizontal" \| "vertical"` The orientation of the splitter.
`getSizes`	`() => number[]` Returns the current sizes of the panels.
`setSizes`	`(size: number[]) => void` Sets the sizes of the panels.
`getItems`	`() => SplitterItem[]` Returns the items of the splitter.
`getPanels`	`() => PanelData[]` Returns the panels of the splitter.
`getPanelById`	`(id: string) => PanelData` Returns the panel with the specified id.
`getPanelSize`	`(id: string) => number` Returns the size of the specified panel.
`isPanelCollapsed`	`(id: string) => boolean` Returns whether the specified panel is collapsed.
`isPanelExpanded`	`(id: string) => boolean` Returns whether the specified panel is expanded.
`collapsePanel`	`(id: string) => void` Collapses the specified panel.
`expandPanel`	`(id: string, minSize?: number) => void` Expands the specified panel.
`resizePanel`	`(id: string, unsafePanelSize: number) => void` Resizes the specified panel.
`getLayout`	`() => string` Returns the layout of the splitter.
`resetSizes`	`VoidFunction` Resets the splitter to its initial state.
`getResizeTriggerState`	`(props: ResizeTriggerProps) => ResizeTriggerState` Returns the state of the resize trigger.

Accessibility

Complies with the Window Splitter WAI-ARIA design pattern.