Command Palette

A powerful search and action interface accessible via keyboard shortcuts.

Examples

Basic Usage

Open with the button or press Cmd+K (Mac) / Ctrl+K (Windows).

blade

<x-plume::form 
    formData="{ 'commandOpen': false }">
    <x-plume::command id="command-basic-test" trigger="Open Command Palette" model="commandOpen">
        <x-plume::command.group title="Suggestions">
            <x-plume::command.item icon="icon-[fluent--calendar-24-regular]"
                shortcut="⌘C">Calendar</x-plume::command.item>
            <x-plume::command.item icon="icon-[fluent--emoji-24-regular]" shortcut="⌘E">Search
                Emoji</x-plume::command.item>
            <x-plume::command.item icon="icon-[fluent--flash-24-regular]" shortcut="⌘P">Launch
                App</x-plume::command.item>
        </x-plume::command.group>

        ...
    </x-plume::command>
</x-plume::form>

Custom Trigger

Use the trigger slot for custom button styles.

blade

<x-plume::command>
    <x-slot:trigger>
        <x-plume::button style="outline" icon="icon-[fluent--search-24-regular]">
            Quick Search...
        </x-plume::button>
    </x-slot:trigger>

    <x-plume::command.group title="Suggestions">
        <x-plume::command.item icon="icon-[fluent--calendar-24-regular]"
            shortcut="⌘C">Calendar</x-plume::command.item>
    </x-plume::command.group>
</x-plume::command>

Prop	Type	Default	Description
trigger	string	null	Text or slot for the element that opens the command palette.
placeholder	string	'Type a command or search...'	Placeholder text for the search input.
model	string	null	AlpineJS model name for the open/closed state.
id	string	null	Optional unique ID for the command palette.
onOpen	string	null	AlpineJS expression or function to call when the command palette opens.
onClose	string	null	AlpineJS expression or function to call when the command palette closes.

Usage

blade

<x-plume::command trigger="Open Palette">
    <x-plume::command.group title="Group Title">
        <x-plume::command.item icon="icon-..." shortcut="⌘K">
            Item Label
        </x-plume::command.item>
    </x-plume::command.group>
</x-plume::command>