Command

Fuzzy-matches items as you type. Arrow keys move the highlight, Enter runs the item, and choosing an item closes the palette.

<script lang="ts">
    import CircleDot from '@lucide/svelte/icons/circle-dot';
    import FolderPlus from '@lucide/svelte/icons/folder-plus';
    import Inbox from '@lucide/svelte/icons/inbox';
    import MapIcon from '@lucide/svelte/icons/map';
    import Moon from '@lucide/svelte/icons/moon';
    import Search from '@lucide/svelte/icons/search';
    import SquarePen from '@lucide/svelte/icons/square-pen';
    import Users from '@lucide/svelte/icons/users';
    import * as Command from '@sivir-ui/svelte/components/command';
    import Shortcut from '@sivir-ui/svelte/components/shortcut';
</script>

<div class="flex w-full items-center justify-center">
    <Command.Root>
        <Command.Trigger
            variant="outline"
            class="w-[16rem] max-w-full justify-between gap-2 px-3 py-2 text-muted-foreground"
        >
            <div class="flex min-w-0 items-center gap-2">
                <Search size={16} />
                <span class="truncate">Search or jump to…</span>
            </div>
            <Shortcut shortcut="cmd+K" class="shrink-0" />
        </Command.Trigger>
        <Command.Content>
            <Command.Search placeholder="Type a command or search…" />
            <Command.Results>
                <Command.Group heading="Jump to">
                    <Command.Item name="Inbox">
                        <Inbox size={16} />
                        Inbox
                    </Command.Item>
                    <Command.Item name="My Issues">
                        <CircleDot size={16} />
                        My Issues
                    </Command.Item>
                    <Command.Item name="Roadmap">
                        <MapIcon size={16} />
                        Roadmap
                    </Command.Item>
                </Command.Group>
                <Command.Group heading="Create">
                    <Command.Item name="New issue">
                        <SquarePen size={16} />
                        <span class="flex-1">New issue</span>
                        <Shortcut shortcut="C" />
                    </Command.Item>
                    <Command.Item name="New project">
                        <FolderPlus size={16} />
                        New project
                    </Command.Item>
                </Command.Group>
                <Command.Group heading="Settings">
                    <Command.Item name="Switch team">
                        <Users size={16} />
                        Switch team
                    </Command.Item>
                    <Command.Item name="Theme">
                        <Moon size={16} />
                        Theme
                    </Command.Item>
                </Command.Group>
            </Command.Results>
            <Command.Footer class="max-sm:hidden">
                <span class="flex items-center gap-1.5">
                    <Shortcut shortcut="up" />
                    <Shortcut shortcut="down" />
                    navigate
                </span>
                <span class="flex items-center gap-1.5">
                    <Shortcut shortcut="enter" />
                    open
                </span>
                <span class="ml-auto flex items-center gap-1.5">
                    <Shortcut shortcut="esc" />
                    close
                </span>
            </Command.Footer>
        </Command.Content>
    </Command.Root>
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add command

Usage

Each Item needs a name (or value) for search. Run an action with onclick or navigate with href. Command registers no key binding; put a Shortcut inside Command.Trigger to open it from the keyboard. Command.Header and Command.Footer add optional rows above the search and below the results, pinned while the results scroll. Use them for a title or key hints.

import * as Command from '@sivir-ui/svelte/components/command';
import Shortcut from '@sivir-ui/svelte/components/shortcut';

<Command.Root>
  <Command.Trigger>
    Search or jump to…
    <Shortcut shortcut="cmd+K" />
  </Command.Trigger>
  <Command.Content>
    <Command.Header>Commands</Command.Header>
    <Command.Search />
    <Command.Results>
      <Command.Group heading="Jump to">
        <Command.Item name="Inbox" href="/inbox">Inbox</Command.Item>
        <Command.Item name="Settings" href="/settings">Settings</Command.Item>
      </Command.Group>
      <Command.Group heading="Create">
        <Command.Item name="New issue" onclick={createIssue}>New issue</Command.Item>
      </Command.Group>
    </Command.Results>
    <Command.Footer>
      <Shortcut shortcut="enter" /> open
      <Shortcut shortcut="esc" /> close
    </Command.Footer>
  </Command.Content>
</Command.Root>

With surface paneling on, the palette sits centered in an inset frame and group headings hide while you search. Turn paneling off in your theme and it becomes a wider palette anchored near the top, with a taller search row, roomier items, headings that stay visible while searching, and hairline rules setting off the header and footer.

Anatomy

Command.Root - Provides command menu state.

Command.Content - Contains command menu controls.

Command.Trigger - Opens the command menu.

Command.Separator - Separates command menu items.

Command.Results - Lists matching commands.

Command.Search - Filters command items.

Command.Item - Defines a command action.

Command.Group - Groups command items.

Command.Header - Renders a row in the modal frame above the palette.

Command.Footer - Renders a row in the modal frame below the results.