blatui

Components

Command Dialog

A command menu rendered inside a dialog.

php artisan blatui:add command-dialog 
<x-ui.command-dialog>
    <x-slot:trigger>
        <button type="button" class="text-muted-foreground inline-flex items-center gap-1 text-sm">
            Press
            <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium select-none">
                <span class="text-xs">⌘</span>J
            </kbd>
        </button>
    </x-slot:trigger>

    <x-ui.command class="rounded-lg">
        <x-ui.command-input placeholder="Type a command or search..." />
        <x-ui.command-list>
            <x-ui.command-empty>No results found.</x-ui.command-empty>
            <x-ui.command-group heading="Suggestions">
                <x-ui.command-item>
                    <x-lucide-calendar />
                    <span>Calendar</span>
                </x-ui.command-item>
                <x-ui.command-item>
                    <x-lucide-smile />
                    <span>Search Emoji</span>
                </x-ui.command-item>
                <x-ui.command-item>
                    <x-lucide-calculator />
                    <span>Calculator</span>
                </x-ui.command-item>
            </x-ui.command-group>
            <x-ui.command-separator />
            <x-ui.command-group heading="Settings">
                <x-ui.command-item>
                    <x-lucide-user />
                    <span>Profile</span>
                    <x-ui.command-shortcut>⌘P</x-ui.command-shortcut>
                </x-ui.command-item>
                <x-ui.command-item>
                    <x-lucide-credit-card />
                    <span>Billing</span>
                    <x-ui.command-shortcut>⌘B</x-ui.command-shortcut>
                </x-ui.command-item>
                <x-ui.command-item>
                    <x-lucide-settings />
                    <span>Settings</span>
                    <x-ui.command-shortcut>⌘S</x-ui.command-shortcut>
                </x-ui.command-item>
            </x-ui.command-group>
        </x-ui.command-list>
    </x-ui.command>
</x-ui.command-dialog>

Button

<x-ui.command-dialog>
    <x-slot:trigger>
        <x-ui.button variant="outline" class="text-muted-foreground w-64 justify-between font-normal">
            <span class="inline-flex items-center gap-2"><x-lucide-search aria-hidden="true" /> Search…</span>
            <span class="text-xs">⌘J</span>
        </x-ui.button>
    </x-slot:trigger>

    <x-ui.command class="rounded-lg">
        <x-ui.command-input placeholder="Type a command or search..." />
        <x-ui.command-list>
            <x-ui.command-empty>No results found.</x-ui.command-empty>
            <x-ui.command-group heading="Suggestions">
                <x-ui.command-item><x-lucide-calendar /><span>Calendar</span></x-ui.command-item>
                <x-ui.command-item><x-lucide-smile /><span>Search Emoji</span></x-ui.command-item>
                <x-ui.command-item><x-lucide-calculator /><span>Calculator</span></x-ui.command-item>
            </x-ui.command-group>
            <x-ui.command-separator />
            <x-ui.command-group heading="Settings">
                <x-ui.command-item><x-lucide-user /><span>Profile</span><x-ui.command-shortcut>⌘P</x-ui.command-shortcut></x-ui.command-item>
                <x-ui.command-item><x-lucide-settings /><span>Settings</span><x-ui.command-shortcut>⌘S</x-ui.command-shortcut></x-ui.command-item>
            </x-ui.command-group>
        </x-ui.command-list>
    </x-ui.command>
</x-ui.command-dialog>

API Reference

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

Props

Prop Type Default Description
title string 'Command Palette' Accessible name for the dialog, rendered visually hidden and used as the dialog's aria-labelledby heading.
description string 'Search for a command to run...' Visually hidden description for the dialog, used as its accessible description.

Slots

Slot Description
default The dialog body — place a <x-ui.command> palette here. It is teleported to <body> and shown in a modal overlay when open.
trigger Optional <x-slot:trigger> holding the element that opens the dialog (e.g. a search button). Often paired with a global keyboard shortcut. Omit it to open the dialog only programmatically.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method Description
open Reactive boolean on the dialog's Alpine scope. Set open = true to show the palette (e.g. from a ⌘K key handler) and open = false to close it.