Command Palette

Search commands from a compact keyboard shortcut trigger with fuzzy matching, nested actions, and a moving result highlight.

Find a project, open a document, or run an action.

Install with the shadcn CLI

npxnpx shadcn@4.21.5 add @cavemio/command-palette

First install? Configure @cavemio once

Run npx shadcn@4.21.5 init if shadcn is not set up, then merge this entry into the registries field in your existing components.json. Keep your other settings and registries.

components.json

{
  "registries": {
    "@cavemio": "https://registry.cavemio.dev/r/cavemio-{name}.json"
  }
}

Overview

Search commands from a compact keyboard shortcut trigger with fuzzy matching, nested actions, and a moving result highlight.

Demo commands run locally; callers supply items and navigation callbacks.

import { CommandPalette } from "@/components/command-palette";

<CommandPalette items={[{ id: "home", label: "Home", href: "/" }]} />

Props

Prop	Type	Description
`items`	`CommandItem[]`	Required. Commands and groups available in the palette.
`placeholder`	`string`	Optional. Placeholder shown in the search field.
`searchLabel`	`string`	Optional. Accessible name of the search field.
`hotkey`	`string`	Optional. The letter that opens it with ⌘ (or Ctrl). Empty string turns the hotkey off.
`open`	`boolean`	Optional. Controlled open state of the palette.
`defaultOpen`	`boolean`	Optional. Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	Optional. Called when the palette opens or closes.
`showTrigger`	`boolean`	Optional. Show the command menu trigger. Without it, open with the hotkey or the open prop.
`triggerLabel`	`string`	Optional. The pill's words.
`triggerIcon`	`React.ReactNode`	Optional. Leading trigger icon. Defaults to search; pass null to omit it.
`filters`	`CommandFilter[]`	Optional. Caller-owned active search scopes. The caller also filters items.
`filtersLabel`	`string`	Optional. Accessible name for the active search filters.
`onFilterRemove`	`(id: string) => void`	Optional. Called with the ID of a removed filter.
`footer`	`React.ReactNode`	Optional. Help copy, links, or actions alongside the keyboard hints.