A searchable list of commands.
<flux:command> <flux:command.input placeholder="Search..." /> <flux:command.items> <flux:command.item wire:click="..." icon="user-plus" kbd="⌘A">Assign to…</flux:command.item> <flux:command.item wire:click="..." icon="document-plus">Create new file</flux:command.item> <flux:command.item wire:click="..." icon="folder-plus" kbd="⌘⇧N">Create new project</flux:command.item> <flux:command.item wire:click="..." icon="book-open">Documentation</flux:command.item> <flux:command.item wire:click="..." icon="newspaper">Changelog</flux:command.item> <flux:command.item wire:click="..." icon="cog-6-tooth" kbd="⌘,">Settings</flux:command.item> </flux:command.items></flux:command>Open a command palette as a modal for quick access to frequently used commands.
<flux:modal.trigger name="search" shortcut="cmd.k"> <flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" /></flux:modal.trigger><flux:modal name="search" variant="bare" class="w-full max-w-[30rem] my-[12vh] max-h-screen overflow-y-hidden" x-on:keydown.cmd.k.document="$el.showModal()"> <flux:command class="border-none shadow-lg inline-flex flex-col max-h-[76vh]"> <flux:command.input placeholder="Search..." closable /> <flux:command.items> <flux:command.item icon="user-plus" kbd="⌘A">Assign to…</flux:command.item> <flux:command.item icon="document-plus">Create new file</flux:command.item> <flux:command.item icon="folder-plus" kbd="⌘⇧N">Create new project</flux:command.item> <flux:command.item icon="book-open">Documentation</flux:command.item> <flux:command.item icon="newspaper">Changelog</flux:command.item> <flux:command.item icon="cog-6-tooth" kbd="⌘,">Settings</flux:command.item> </flux:command.items> </flux:command></flux:modal>