Command
Composable command menu built on cmdk — search input + filtered list with keyboard navigation. Use as an inline palette or, wrapped in CommandDialog, as a ⌘K-style launcher.
No results found.
Calendar
Search emoji
Calculator
Profile⌘P
Billing⌘B
Settings⌘S
Installation
pnpm
pnpm dlx @hex-core/cli add commandAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
shouldFilter | boolean | true | Built-in filtering. Set to false for fully-controlled filtering. |
filter | function | — | Custom scoring function: (value, search, keywords?) => number (0..1) |
value | string | — | Controlled active-item value |
onValueChange | function | — | Callback when the highlighted item changes |
loop | boolean | false | Loop arrow-key navigation at the ends of the list |
label | string | — | Accessible label for the menu (not shown visually) |
AI Guidance
When to use
Use for searchable menus, command palettes, ⌘K launchers, or as the list body of a Combobox. Built-in fuzzy filter + arrow-key nav + Enter-to-select.
When not to use
Don't use for small static lists (use plain DropdownMenu). Don't use for large data tables (use DataTable). If you need a select input with a single bound value, Combobox is the higher-level wrapper.
Common mistakes
- Forgetting CommandList — items won't be scrollable or grouped properly
- Giving CommandItem non-unique values (breaks filtering and controlled state)
- Overriding CommandInput className to remove the border/padding — breaks the ⌘K icon layout
- Not rendering CommandEmpty — the list looks broken when a search has no matches
Accessibility
cmdk wires role=listbox/option and aria-activedescendant. Use the `label` prop on Command for a screen-reader-only name when no visible heading exists.
Related components
Token budget: 900