CommandPalette
kumo-svelte

CommandPalette

A composable command palette component for search and command dialogs.

Installation

Barrel

import { CommandPalette } from 'kumo-svelte';

Granular

import { CommandPalette } from 'kumo-svelte/components/command-palette';

Usage

CommandPalette is a compound component built on Bits UI's Command primitive. It provides accessible keyboard navigation and customizable styling for command palette interfaces.

<script lang="ts">  import { CommandPalette } from 'kumo-svelte';  interface Item {    id: string;    title: string;  }  const items: Item[] = [    { id: '1', title: 'Create Project' },    { id: '2', title: 'Open Settings' }  ];  let open = $state(false);  let search = $state('');  const filteredItems = $derived(    items.filter((item) => item.title.toLowerCase().includes(search.toLowerCase()))  );</script><button onclick={() => (open = true)}>Open</button><CommandPalette.Root bind:open shouldFilter={false}>  <CommandPalette.Input bind:value={search} placeholder="Search..." />  <CommandPalette.List>    {#each filteredItems as item (item.id)}      <CommandPalette.Item value={item.title} onSelect={() => (open = false)}>        {item.title}      </CommandPalette.Item>    {/each}    <CommandPalette.Empty>No results</CommandPalette.Empty>  </CommandPalette.List></CommandPalette.Root>

Keyboard Navigation

Built-in keyboard navigation is provided automatically:

  • ↑ ↓ Move highlight between items
  • Enter Select highlighted item
  • ⌘/Ctrl Enter Select with newTab: true
  • Escape Close the dialog

Examples

With Grouped Items

Group related commands together with labels.

Simple Flat List

For simpler use cases, use a flat array of items without grouping.

Loading State

Show a loading spinner while fetching results.

Disabling Browser Autocomplete

Pass input attributes through inputProps to suppress browser and password manager autocomplete overlays.

ResultItem with Breadcrumbs

Use ResultItem for rich items with breadcrumbs, icons, and optional text highlighting.

Component Parts

CommandPalette.Root

The main wrapper that combines Dialog + Panel. Manages open state and Autocomplete functionality.

CommandPalette.Dialog

Modal dialog wrapper. Use with Panel for swappable content (e.g., drill-down navigation).

CommandPalette.Panel

Autocomplete panel without dialog. Use inside Dialog for content that can swap without re-mounting.

CommandPalette.Input

Search input field with auto-focus and keyboard handling.

CommandPalette.List

Scrollable container for results.

CommandPalette.Results

Render prop iterator for items/groups.

CommandPalette.Group

Category grouping container.

CommandPalette.GroupLabel

Section header text within a group.

CommandPalette.Items

Render prop iterator for items within a group.

CommandPalette.Item

Basic selectable item.

CommandPalette.ResultItem

Rich item with breadcrumbs, icons, and text highlighting.

CommandPalette.HighlightedText

Renders text with highlighted portions based on match indices.

CommandPalette.Empty

Empty state when no results match.

CommandPalette.Loading

Loading spinner state.

Footer for keyboard hints or other content.

API Reference

CommandPalette.Root Props

interface CommandPaletteRootProps<TGroup, TItem> {  // Dialog state  open?: boolean;  onOpenChange?: (open: boolean) => void;  onBackdropClick?: (event: MouseEvent) => void;  container?: HTMLElement | string;  // Simple shortcut API  commands?: CommandPaletteCommand[];  placeholder?: string;  value?: string;  onValueChange?: (value: string) => void;  onSelect?: (command: CommandPaletteCommand, options: { newTab: boolean }) => void;  inputProps?: Record<string, unknown>;  // Bits UI command options  label?: string;  loop?: boolean;  shouldFilter?: boolean;  // Compound API  children?: Snippet;}

CommandPalette.ResultItem Props

interface CommandPaletteResultItemProps<T> {  value: T;  title: string;  breadcrumbs?: string[];  titleHighlights?: [number, number][];  breadcrumbHighlights?: [number, number][][];  description?: string;  icon?: Snippet;  onclick?: (event?: MouseEvent) => void;  onSelect?: (value: T) => void;  showArrow?: boolean; // default: true  external?: boolean; // shows external link icon  nonInteractive?: boolean;}