Splitter

Name: Rad UI
Author: Rad UI Team

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

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 #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
            <Splitter.Panel index={0} style={{ padding: 16, background: '#f9fafb' }}>
                <p className="font-medium text-sm">Left Panel</p>
                <p className="text-sm text-gray-500 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-500 mt-1">Content goes here.</p>
            </Splitter.Panel>
        </Splitter.Root>
    )
}

export default SplitterExample

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[]	--
onSizesChange	function	--