A keyboard-first launcher. Search across grouped commands, move with the arrow keys, and run with Enter.
Nothing run yet
pnpm dlx shadcn@latest add @latheui/command-palettePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Command Palette is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| groups* (required) | CommandGroup[] | — | Commands, grouped under headings. |
| open | boolean | — | Controlled open state. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | — | Called when the palette opens or closes. |
| onSelect | (item: CommandItem) => void | — | Called for any selected item, after the item's own onSelect. |
| hotkey | string | null | "k" | Letter that toggles the palette with Cmd or Ctrl. null disables it. |
| placeholder | string | "Type a command or search…" | Input placeholder and accessible name. |
| label | string | "Command palette" | Accessible name of the dialog. |
| emptyMessage | ReactNode | "No results found." | Shown when nothing matches. |
| loading | boolean | false | Replaces the list with placeholder rows. |
| closeOnSelect | boolean | true | Closes the palette after a command runs. |
| className | string | — | Classes for the panel. |
| Prop | Type | Default | Description |
|---|---|---|---|
| id* (required) | string | — | Unique across all groups. |
| label* (required) | string | — | Visible text. The search matches it, the keywords and the shortcut keys. |
| icon | ReactNode | — | Shown before the label. |
| shortcut | string[] | — | Optional shortcut hint. Nothing is shown without it. Typing its keys finds the item; binding the keys is up to you. |
| keywords | string[] | — | Extra search terms. |
| disabled | boolean | — | Shown but not selectable. |
| onSelect | () => void | — | Runs when the item is chosen. |
Control the open state to add your own trigger alongside the shortcut.
const [open, setOpen] = React.useState(false)
<Button variant="outline" onClick={() => setOpen(true)}>Search</Button>
<CommandPalette open={open} onOpenChange={setOpen} groups={groups} />Search is a case-insensitive match of every typed word against the label and keywords, or of the typed keys against the start of the shortcut. Replace the matches function at the top of the file to plug in fuzzy search.
function matches(item: CommandItem, query: string) {
return fuzzyScore(item.label, query) > 0.4
}