Overlay

Command

Searchable ⌘K palette. Pure Svelte — no headless dep. Mount inline (this page) or inside a Dialog for a modal palette. Keyboard nav: ↑↓ to move, ↩ to select.

Examples

Inline palette

<Command
  items={[
    {value: 'open', label: 'Open file', kbd: '⌘O', group: 'File'},
    {value: 'save', label: 'Save', kbd: '⌘S', group: 'File'},
    …
  ]}
  onSelect={(v) => …}
/>

Inside a Dialog

<Button onclick={() => open = true}>Open palette</Button>
<Dialog bind:open title="Quick actions" size="md">
  <Command items={…} onSelect={…} />
</Dialog>

CommandItem type

type CommandItem<V extends string = string> = {
  value: V;
  label: string;
  hint?: string;
  kbd?: string;
  group?: string;
  icon?: Snippet;
  disabled?: boolean;
};

Props

Prop	Type	Default	Description
`items`	`CommandItem[]`	`—`	List of items with optional groups, hints, kbd shortcuts.
`placeholder`	`string`	`'Search…'`	Search input placeholder.
`onSelect`	`(value: T) => void`	`—`	Fires when an item is chosen via click or Enter.
`autoFocus`	`boolean`	`true`	Focus the search input on mount.
`emptyLabel`	`string`	`'No results'`	Shown when the filter yields zero items.

Install

CLI

npx @a3tai/mittsu add command