Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Resizable

Adjustable panel layouts with draggable handles. Requires Alpine.js. Supports horizontal and vertical orientations.

Usage
Panel A
Panel B
example.blade.php 
<x-slate::resizable-panel-group class="h-full min-h-[200px] rounded-md border">
    <x-slate::resizable-panel :index="0" :default-size="40" class="flex items-center justify-center bg-muted/20 p-6">
        <span class="text-sm text-muted-foreground">Panel A</span>
    </x-slate::resizable-panel>
    <x-slate::resizable-handle :index="0" />
    <x-slate::resizable-panel :index="1" :default-size="60" class="flex items-center justify-center p-6">
        <span class="text-sm text-muted-foreground">Panel B</span>
    </x-slate::resizable-panel>
</x-slate::resizable-panel-group>

Vertical

Set orientation="vertical" on the group.

Top
Bottom
example.blade.php 
<x-slate::resizable-panel-group orientation="vertical" class="h-[240px] rounded-md border">
    <x-slate::resizable-panel :index="0" :default-size="35" class="flex items-center justify-center bg-muted/20 p-4">
        <span class="text-sm text-muted-foreground">Top</span>
    </x-slate::resizable-panel>
    <x-slate::resizable-handle :index="0" />
    <x-slate::resizable-panel :index="1" :default-size="65" class="flex items-center justify-center p-4">
        <span class="text-sm text-muted-foreground">Bottom</span>
    </x-slate::resizable-panel>
</x-slate::resizable-panel-group>

Three panels

Add another handle and panel — keep index sequential.

Nav
Main
Aside
example.blade.php 
<x-slate::resizable-panel-group class="h-full min-h-[200px] rounded-md border">
    <x-slate::resizable-panel :index="0" :default-size="25" class="flex items-center justify-center bg-muted/20 p-4">
        <span class="text-sm text-muted-foreground">Nav</span>
    </x-slate::resizable-panel>
    <x-slate::resizable-handle :index="0" />
    <x-slate::resizable-panel :index="1" :default-size="50" class="flex items-center justify-center p-4">
        <span class="text-sm text-muted-foreground">Main</span>
    </x-slate::resizable-panel>
    <x-slate::resizable-handle :index="1" />
    <x-slate::resizable-panel :index="2" :default-size="25" class="flex items-center justify-center bg-muted/20 p-4">
        <span class="text-sm text-muted-foreground">Aside</span>
    </x-slate::resizable-panel>
</x-slate::resizable-panel-group>

Composition
code 
ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel
Last updated .