Splitter

A component that divides your interface into resizable sections

Preview Component

Please note, the API of this component is currently in a preview phase and is subject to change.

A
B

Anatomy

To set up the splitter correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Splitter component in your project. Let’s take a look at the most basic example:

Using Render Props

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:

Handling Events

Splitter also provides onSizeChangeStart and onSizeChangeEnd events which can be useful to perform some actions during the start and end of the resizing process:

Vertical Splitter

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

API Reference

Root

PropTypeDefault
asChild
boolean
defaultSize
PanelSizeData[]
dir
'ltr' | 'rtl'"ltr"
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string resizeTrigger(id: string): string label(id: string): string panel(id: string | number): string }>
onSizeChange
(details: SizeChangeDetails) => void
onSizeChangeEnd
(details: SizeChangeDetails) => void
orientation
'horizontal' | 'vertical'
size
PanelSizeData[]

Panel

PropTypeDefault
id
PanelId
asChild
boolean
snapSize
number

ResizeTrigger

PropTypeDefault
id
type ONLY_FOR_FORMAT = | `${string}:${string}` | `${string}:${number}` | `${number}:${string}` | `${number}:${number}`
asChild
boolean
disabled
boolean
step
number

Previous

Slider