CommandPalette
The ⌘K dialog. Hand it an array of commands with groups, keywords and callbacks; it handles the search, the grouping and the keyboard.
import
import { CommandPalette } from '@joshicodes/cock';Palette
The shortcut works anywhere on the page, not just when this demo has focus.
Keyboard
- ⌘K / Ctrl+K
- Opens and closes it, unless `shortcut` says otherwise
- ↑ ↓
- Moves through the results
- Enter
- Runs the highlighted command
- Esc
- Closes
Behaviour
- Search matches labels and keywords; a plain substring ranks above a scattered match, and a match at the start of a word ranks highest.
- Built as a combobox: focus stays in the input and the active option is announced through `aria-activedescendant`.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of CommandPalette
| Prop | Type | Default |
|---|---|---|
open bindable | boolean | false |
commands required | Command[] | — |
placeholder | string | 'Type a command or search…' |
shortcut Toggles the palette from anywhere. `false` turns it off. | string | false | 'mod+k' |
empty | string | 'Nothing matches that.' |
class | string | — |