CommandPalette Composition
Search over actions. The palette ranks, renders, and runs; what a command does is entirely the app's business.
Usage
or press ⌘K
<CommandPalette open={open} onOpenChange={setOpen} commands={[ { id: 'invoice', label: 'New invoice', group: 'Create', shortcut: '⌘N', onRun: createInvoice }, { id: 'signout', label: 'Sign out', keywords: ['logout'], onRun: signOut }, ]}/>How it ranks
An exact label beats a label prefix, which beats a word start, which beats a bare substring, which
beats a keyword hit. Ties keep the order you supplied, so a curated list stays curated — and
keywords is how "Sign out" is found by someone typing logout.
Do
Give commands keywords for the words people actually type, not the words your UI uses.
Don't
Put destructive commands in the palette without a confirmation; a palette is one keystroke from Enter.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| open / onOpenChange | boolean | fn | — | Controlled — the shortcut that opens it is yours to bind. |
| commands | PaletteCommand[] | — | id, label, onRun, plus optional icon, group, shortcut, keywords. |
| placeholder / emptyMessage | ReactNode | — | Copy for the input and for the no-match state. |
Keyboard
| Key | Behaviour |
|---|---|
↑ / ↓ | Moves the highlight through the ranked list |
Enter | Runs the highlighted command and closes |
Esc | Closes, and the query resets — a reopened palette is empty, not half-typed |