blatui

Components

Sheet

Extends the dialog to display content that complements the main content of the screen.

php artisan blatui:add sheet 
<x-ui.sheet>
    <x-ui.sheet-trigger>
        <x-ui.button variant="outline">Open</x-ui.button>
    </x-ui.sheet-trigger>
    <x-ui.sheet-content side="right">
        <x-ui.sheet-header>
            <x-ui.sheet-title>Edit profile</x-ui.sheet-title>
            <x-ui.sheet-description>
                Make changes to your profile here. Click save when you're done.
            </x-ui.sheet-description>
        </x-ui.sheet-header>
        <div class="grid flex-1 auto-rows-min gap-6 px-4">
            <div class="grid gap-2">
                <x-ui.label for="sheet-name">Name</x-ui.label>
                <x-ui.input id="sheet-name" value="Pedro Duarte" />
            </div>
            <div class="grid gap-2">
                <x-ui.label for="sheet-username">Username</x-ui.label>
                <x-ui.input id="sheet-username" value="@peduarte" />
            </div>
        </div>
        <x-ui.sheet-footer>
            <x-ui.button type="submit">Save changes</x-ui.button>
            <x-ui.button variant="outline" class="w-full" x-on:click="open = false">Close</x-ui.button>
        </x-ui.sheet-footer>
    </x-ui.sheet-content>
</x-ui.sheet>

Menu

<x-ui.sheet>
    <x-ui.sheet-trigger>
        <x-ui.button variant="outline" size="icon" aria-label="Open menu"><x-lucide-panel-left aria-hidden="true" /></x-ui.button>
    </x-ui.sheet-trigger>
    <x-ui.sheet-content side="left">
        <x-ui.sheet-header>
            <x-ui.sheet-title>Menu</x-ui.sheet-title>
            <x-ui.sheet-description>Navigate your workspace.</x-ui.sheet-description>
        </x-ui.sheet-header>
        <nav class="grid gap-1 px-4">
            <a href="#" class="hover:bg-accent flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium"><x-lucide-house class="size-4" aria-hidden="true" /> Home</a>
            <a href="#" class="hover:bg-accent flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium"><x-lucide-inbox class="size-4" aria-hidden="true" /> Inbox</a>
            <a href="#" class="hover:bg-accent flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium"><x-lucide-calendar class="size-4" aria-hidden="true" /> Calendar</a>
            <a href="#" class="hover:bg-accent flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium"><x-lucide-settings class="size-4" aria-hidden="true" /> Settings</a>
        </nav>
    </x-ui.sheet-content>
</x-ui.sheet>

Scroll

<x-ui.sheet>
    <x-ui.sheet-trigger>
        <x-ui.button variant="outline">Release notes</x-ui.button>
    </x-ui.sheet-trigger>
    <x-ui.sheet-content side="right">
        <x-ui.sheet-header>
            <x-ui.sheet-title>Release notes</x-ui.sheet-title>
            <x-ui.sheet-description>Everything new in this version.</x-ui.sheet-description>
        </x-ui.sheet-header>
        <div class="text-muted-foreground flex flex-1 flex-col gap-3 overflow-y-auto px-4 text-sm">
            <p>We rebuilt the component engine for faster first paint and smaller bundles.</p>
            <p>Every overlay now traps focus and restores it to the trigger on close.</p>
            <p>The theme customizer gained six new base colors and an export button.</p>
            <p>Tables support row selection, sticky headers, and inline row actions.</p>
            <p>Forms compose accessible fields with descriptions and error messages.</p>
            <p>Charts ship with thirty ready-made variations across six chart types.</p>
        </div>
        <x-ui.sheet-footer>
            <x-ui.button x-on:click="open = false">Got it</x-ui.button>
        </x-ui.sheet-footer>
    </x-ui.sheet-content>
</x-ui.sheet>

Sides

<div class="grid grid-cols-2 gap-2">
    @foreach (['top', 'right', 'bottom', 'left'] as $side)
        <x-ui.sheet>
            <x-ui.sheet-trigger>
                <x-ui.button variant="outline" class="w-full capitalize">{{ $side }}</x-ui.button>
            </x-ui.sheet-trigger>
            <x-ui.sheet-content :side="$side">
                <x-ui.sheet-header>
                    <x-ui.sheet-title>Edit profile</x-ui.sheet-title>
                    <x-ui.sheet-description>
                        Make changes to your profile here. Click save when you're done.
                    </x-ui.sheet-description>
                </x-ui.sheet-header>
                <x-ui.sheet-footer>
                    <x-ui.button type="submit">Save changes</x-ui.button>
                </x-ui.sheet-footer>
            </x-ui.sheet-content>
        </x-ui.sheet>
    @endforeach
</div>

API Reference

Props, slots and exposed methods for <x-ui.sheet>.

Props

Prop Type Default Description
open bool false Initial open state of the sheet on first render.
id string — Enables "dispatchable" mode: the sheet also opens/closes from anywhere via $dispatch('open-sheet-{id}') / $dispatch('close-sheet-{id}'). Use <x-ui.sheet-trigger for="{id}"> from inside a loop or partial.
side string 'right' Set on <x-ui.sheet-content>. Which edge of the viewport the panel slides in from.
right left top bottom
showClose bool true Set on <x-ui.sheet-content>. Render the built-in top-right close (X) button.
for string — Set on <x-ui.sheet-trigger>. Opens a dispatchable sheet defined elsewhere (matching its id) instead of one in the same scope.

Slots

Slot Description
default Holds the <x-ui.sheet-trigger> and <x-ui.sheet-content>. The root only manages open state.
trigger The clickable element that opens the sheet, wrapped in <x-ui.sheet-trigger>.
content The sliding panel (<x-ui.sheet-content>), teleported to <body>. Compose it from <x-ui.sheet-header> (with <x-ui.sheet-title> + <x-ui.sheet-description>), your body, and <x-ui.sheet-footer>. Dismisses on overlay click, Escape, or the close button.