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

Sheet

Extends the dialog pattern to slide in content from an edge of the screen. Requires Alpine.js.

Usage
example.blade.php 
<x-slate::sheet>
    <x-slate::sheet-trigger>
        <x-slate::button variant="outline">Open</x-slate::button>
    </x-slate::sheet-trigger>
    <x-slate::sheet-content
        side="end"
        title="Edit profile"
        description="Make changes to your profile here. Click save when you are done."
    >
        <div class="grid gap-3 py-2">
            <x-slate::input label="Name" value="Ada Lovelace" />
            <x-slate::input label="Username" value="@ada" />
        </div>
        <x-slot:footer>
            <x-slate::sheet-close>
                <x-slate::button type="submit">Save changes</x-slate::button>
            </x-slate::sheet-close>
        </x-slot:footer>
    </x-slate::sheet-content>
</x-slate::sheet>

Sides

Use logical sides: top, bottom, start, end.

Composition
code 
Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader / Title / Description
    ├── SheetClose
    └── SheetFooter
Last updated .