Command palette

A searchable list of commands.

Assign to…

⌘A

Create new file

Create new project

⌘⇧N

Documentation

Changelog

Settings

⌘,

No results found

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="min-h-[30rem] w-full max-w-[30rem] px-6" x-on:keydown.cmd.k.document="$el.showModal()">
    <flux:command class="border-none shadow-lg">
        <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>

Built with by
Caleb Porzio and Hugo Sainte-Marie

Command palette

As a modal