Sivir UI
Studio 64

Command

A command palette with fuzzy search and grouped results. Often opened with .

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add command

Usage

Import and use the Command components:

import * as Command from '$lib/sivir/components/command';

<Command.Root>
  <Command.Trigger>Open palette</Command.Trigger>
  <Command.Content>
    <Command.Header>
      <span>Command</span>
    </Command.Header>
    <Command.Search placeholder="Search..." />
    <Command.Results>
      <Command.Item name="search">Item</Command.Item>
    </Command.Results>
  </Command.Content>
</Command.Root>

Examples

With groups

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.