The keyboard-first jump-anywhere palette.
| Prop / event | Type | Notes |
|---|---|---|
| open / onOpenChange | boolean | Controlled; toggled by ⌘K |
| Item.onSelect | () => void | Runs the command and closes |
| icon / shortcut | ReactNode / string | Leading glyph, trailing key hint |
| Group.label | string | Mono section heading |
| ⌘K · ↑↓ · ↵ · esc | — | Open, move, run, close; typing filters |
The palette jumps anywhere and runs any command from the keyboard. For choosing one value use a Combobox; for a per-object action list use a Menu.
Group commands and show their shortcuts so people learn them.
Don't dump one flat, unranked list. Group and fuzzy-rank.
Give the no-match case a calm, specific message.
Don't hide it behind a click only. Bind it to ⌘K everywhere.
Navigate anywhere without touching the mouse.
Trigger any registered command by name.
Blend commands with live search results.
| Token | Value | Role |
|---|---|---|
| --cmd-w | 440px | Palette width |
| --cmd-bg | #141519 | Panel surface |
| --cmd-active | #1E1F25 | Keyboard-active row |
| --cmd-list-h | 244px | Scroll cap on the list |
| --cmd-group | mono · #565A62 | Group heading |
| --cmd-trigger | ⌘K / Ctrl-K | Global open shortcut |
<div class="o-cmd" role="dialog" aria-label="Command menu">
<div class="o-cmd__search"><SearchIcon />
<input class="o-cmd__input" placeholder="Type a command or search…" /><kbd>ESC</kbd>
</div>
<div class="o-cmd__list" role="listbox">
<div class="o-cmd__group">Navigation</div>
<button role="option" class="o-cmd__item is-active"><HomeIcon /> Go to Overview <kbd>G O</kbd></button>
</div>
<div class="o-cmd__foot">↑↓ navigate · ↵ select · esc close</div>
</div>