Components

Command

Fast, composable, command menu for your app.

php artisan blatui:add command

<x-ui.command class="max-w-md rounded-lg border shadow-md">
    <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>

Checkable

{{-- Selectable command with trailing check marks and a disabled item. --}}
<x-ui.command class="max-w-md rounded-lg border shadow-md">
    <x-ui.command-input placeholder="Select frameworks..." />
    <x-ui.command-list>
        <x-ui.command-empty>No results found.</x-ui.command-empty>
        <x-ui.command-group heading="Frameworks">
            <x-ui.command-item>
                <span>Next.js</span>
                <x-lucide-check class="text-primary ml-auto" aria-hidden="true" />
            </x-ui.command-item>
            <x-ui.command-item>
                <span>SvelteKit</span>
            </x-ui.command-item>
            <x-ui.command-item>
                <span>Nuxt</span>
                <x-lucide-check class="text-primary ml-auto" aria-hidden="true" />
            </x-ui.command-item>
            <x-ui.command-item>
                <span>Remix</span>
            </x-ui.command-item>
            <x-ui.command-item disabled>
                <span>Astro</span>
                <span class="text-muted-foreground ml-auto text-xs">Soon</span>
            </x-ui.command-item>
        </x-ui.command-group>
    </x-ui.command-list>
</x-ui.command>

Simple

<x-ui.command class="max-w-md rounded-lg border shadow-md">
    <x-ui.command-input placeholder="Search framework..." />
    <x-ui.command-list>
        <x-ui.command-empty>No results found.</x-ui.command-empty>
        <x-ui.command-group heading="Frameworks">
            <x-ui.command-item><span>Next.js</span></x-ui.command-item>
            <x-ui.command-item><span>SvelteKit</span></x-ui.command-item>
            <x-ui.command-item><span>Nuxt</span></x-ui.command-item>
            <x-ui.command-item><span>Remix</span></x-ui.command-item>
            <x-ui.command-item><span>Astro</span></x-ui.command-item>
        </x-ui.command-group>
    </x-ui.command-list>
</x-ui.command>

API Reference

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

Props

Prop	Type	Default	Description
`placeholder`	`string`	`'Type a command or search...'`	Set on <x-ui.command-input>. Placeholder text and accessible label for the search field.
`heading`	`string`	—	Set on <x-ui.command-group>. Optional section heading shown above the group's items.
`value`	`string`	—	Set on <x-ui.command-item>. The keyword the item filters on. Defaults to the item's text content when omitted.
`href`	`string`	—	Set on <x-ui.command-item>. Renders the item as a link (<a>) to this URL instead of a div.
`disabled`	`bool`	`false`	Set on <x-ui.command-item> to make it non-selectable and dimmed; it is also excluded from keyboard navigation.

Slots

Slot	Description
`default`	Compose the palette: <x-ui.command-input>, then a <x-ui.command-list> containing <x-ui.command-empty>, <x-ui.command-group> sections, <x-ui.command-item> rows, and <x-ui.command-separator>.
`list`	Content of <x-ui.command-list> — the scrollable listbox of groups and items.
`empty`	Content of <x-ui.command-empty>, shown only when the query matches no items (e.g. "No results found.").
`item`	Content of <x-ui.command-item> — typically an icon, a label, and an optional <x-ui.command-shortcut>.

Methods

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

Method	Description
`move(dir)`	Moves the active option to the next (1) or previous (-1) visible item, wrapping around.
`edge(pos)`	Jumps the active option to the first or last visible item. Pass 'first' or 'last'.
`selectActive()`	Activates (clicks) the currently highlighted item, as the Enter key does.