React Command Palette
Once an app has more than a handful of screens, the fastest path between any two of them is a keyboard. ⌘K opens a fuzzy, grouped search over every action the app exposes — navigate with the arrows, run with Enter, never touch the mouse.
Press ⌘K (or Ctrl-K), or click the bar. Arrows to move, Enter to run.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| commands | Command[] | { id, label, group?, hint?, keywords?, shortcut?, icon?, run } |
| placeholder | string | Search input placeholder |
| open | boolean | Controlled open state |
| onOpenChange | (open: boolean) => void | Open-state callback |
| trigger | boolean | Show the built-in trigger bar (uncontrolled) |
Search, keys, and keywords
The match is a simple, forgiving AND-of-terms across each command's label, group, hint, and keywords — type "open alarm" and the alarm console surfaces even though the label is "Open Alarm Console". Use keywords for the synonyms people actually type: an operator searching "scada" should still find the alarm screen.
Keyboard handling is the whole point, so it is complete: ⌘K/Ctrl-K toggles from anywhere, arrows move the selection across group boundaries, the active row scrolls into view, Enter runs it, and Esc closes. Mouse movement also sets the active row, so hover and keyboard never disagree about what "Enter" will do.
run is a plain callback — navigate, dispatch, open a modal, whatever. Keep labels imperative ("Start batch", not "Batch") so the list reads as a set of actions, and the palette will feel less like a menu and more like a command line for your app.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.