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

Command

A searchable command palette list. Filters items as you type. Requires Alpine.js.

Usage
No results found.
Suggestions
Calendar
Search
Settings
Settings
Profile
Billing
example.blade.php 
<x-slate::command class="rounded-lg border shadow-md">
    <div class="flex items-center border-b px-3">
        <x-slate::command-input placeholder="Type a command..." />
    </div>
    <x-slate::command-list>
        <x-slate::command-empty>No results found.</x-slate::command-empty>
        <x-slate::command-group heading="Suggestions">
            <x-slate::command-item value="calendar">Calendar</x-slate::command-item>
            <x-slate::command-item value="search">Search</x-slate::command-item>
            <x-slate::command-item value="settings">Settings</x-slate::command-item>
        </x-slate::command-group>
        <x-slate::command-separator />
        <x-slate::command-group heading="Settings">
            <x-slate::command-item value="profile">Profile</x-slate::command-item>
            <x-slate::command-item value="billing">Billing</x-slate::command-item>
        </x-slate::command-group>
    </x-slate::command-list>
</x-slate::command>

Composition
code 
Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   └── CommandItem
    └── CommandSeparator
Last updated .