Sivir UI
73

Command

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

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.

Examples

With groups

In a modal

Command can open from inside a Modal, for example as a searchable picker. Escape closes the palette first and a second press closes the modal.

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.