Start building

Platform

Open Source

Resources

Sign in

Splitter

x-splitter

A draggable split layout with resizable panes. Lay panes out horizontally or vertically with a slim, grabbable gutter between them. Nest splitters for complex layouts.

php artisan components:add splitter

Examples

Horizontal

Drag the seam to resize two side-by-side panes.

<div class="w-full">
    <x-components.splitter class="h-72 w-full overflow-hidden rounded-large border border-foreground/10" :min-size="80">
        <x-components.splitter.pane :size="35">
            <div class="flex h-full items-center justify-center bg-card p-6 text-center">
                <div>
                    <p class="font-semibold text-foreground">Sidebar</p>
                    <p class="mt-1 text-sm text-foreground/60">Drag the seam →</p>
                </div>
            </div>
        </x-components.splitter.pane>
        <x-components.splitter.pane :size="65">
            <div class="flex h-full items-center justify-center bg-background p-6 text-center text-sm text-foreground/70">Main panel</div>
        </x-components.splitter.pane>
    </x-components.splitter>
</div>

Vertical

Stack panes top to bottom instead.

<div class="w-full">
    <x-components.splitter direction="vertical" class="h-72 w-full overflow-hidden rounded-large border border-foreground/10" :min-size="60">
        <x-components.splitter.pane>
            <div class="flex h-full items-center justify-center bg-card p-6 text-center text-sm text-foreground/70">Top panel</div>
        </x-components.splitter.pane>
        <x-components.splitter.pane>
            <div class="flex h-full items-center justify-center bg-background p-6 text-center text-sm text-foreground/70">Bottom panel</div>
        </x-components.splitter.pane>
    </x-components.splitter>
</div>

Props

Prop Type Default Description
direction select horizontal · vertical horizontal Lay panes side by side (horizontal) or stacked (vertical).
gutterSize text 8 Thickness of the draggable gutter in pixels.
minSize text 100 Minimum size (px) each pane can shrink to.
pane:minSize text — Per-pane minimum size in px (data-min-size); overrides the splitter-level minSize. Set 0 to allow full collapse.
storageKey text — localStorage key holding an array of pane percentages. When set, the splitter restores that layout at init (before Split.js loads), so persisted layouts render on the first paint. Persist sizes yourself from the 'splitter-resized' event.

Slots

Slot Description
slot Panes, composed of <x-splitter.pane>.