Component

Splitter

Resizable panel layouts with drag and keyboard support. Supports horizontal and vertical orientations with configurable min sizes.

View component changelog

preview

Left Panel

Drag the handle to resize.

Right Panel

Content goes here.

React
"use client"

import Splitter from "@radui/ui/Splitter"

const SplitterExample = () => {
    return (
        <Splitter.Root orientation="horizontal" defaultSizes={[35, 65]} style={{ height: 200, width: 480, border: '1px solid var(--rad-ui-border-soft)', borderRadius: 8, overflow: 'hidden' }}>
            <Splitter.Panel index={0} style={{ padding: 16, background: 'var(--rad-ui-surface-subtle)' }}>
                <p className="font-medium text-sm">Left Panel</p>
                <p className="text-sm text-gray-950 mt-1">Drag the handle to resize.</p>
            </Splitter.Panel>
            <Splitter.Handle index={0} />
            <Splitter.Panel index={1} style={{ padding: 16 }}>
                <p className="font-medium text-sm">Right Panel</p>
                <p className="text-sm text-gray-950 mt-1">Content goes here.</p>
            </Splitter.Panel>
        </Splitter.Root>
    )
}

export default SplitterExample

Keyboard Interactions

Shortcut	Description
`ArrowLeft`	Decreases the leading panel size for horizontal splitters.
`ArrowRight`	Increases the leading panel size for horizontal splitters.
`ArrowUp`	Decreases the leading panel size for vertical splitters.
`ArrowDown`	Increases the leading panel size for vertical splitters.
`Home`	Moves the handle to the minimum allowed size for the leading panel.
`End`	Moves the handle to the maximum allowed size for the leading panel.

ARIA References

Reference	What Rad UI follows
Window Splitter pattern	Uses a focusable separator handle with orientation, accessible naming, and range values for the controlled panel size.

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Splitter from "@radui/ui/Splitter"

export default () => {
    return (
        <Splitter.Root orientation="horizontal">
            <Splitter.Panel index={0} />
            <Splitter.Handle index={0} />
            <Splitter.Panel index={1} />
        </Splitter.Root>
    )
}

Root

The root Splitter component.

Prop	Type	Default
orientation	enum	horizontal
defaultSizes	number[]	--
minSizes	number[]	--
maxSizes	number[]	--
disabled	boolean	false
dir	enum	--
onSizesChange	function	--