Components
Command
A fast, composable command menu built on cmdk — fuzzy-searchable items, grouping, keyboard shortcuts, and full keyboard navigation out of the box.
Basic usage
Compose Command with an input, list, and one or more groups. Type to filter the items live.
No results found.
Calendar
Search emoji
New file
Groups & shortcuts
Organise items with CommandGroup headings, divide sections with CommandSeparator, and trail each item with a right-aligned CommandShortcut.
No results found.
Calendar
Search emoji
Profile⌘P
Billing⌘B
Settings⌘S
Disabled & empty states
Mark an item disabled to skip it during navigation, and provide a CommandEmpty fallback for when no item matches the search.
No results found.
New file
Archived (disabled)
Export
Props
Command root props (forwarded to cmdk):
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled selected value. Pair with onValueChange. Omit for uncontrolled behaviour managed by cmdk. |
onValueChange | (value: string) => void | — | Fires when the highlighted item changes. |
filter | (value, search, keywords) => number | fuzzy match | Custom scoring function controlling which items match the current search. |
shouldFilter | boolean | true | Whether the list filters automatically. Set false to filter server-side. |
loop | boolean | false | Whether arrow-key navigation wraps from the last item back to the first. |
className | string | — | Additional Tailwind classes to merge onto the root element. |
CommandItem props:
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | text content | The value used for filtering and matching. Defaults to the item’s text. |
onSelect | (value: string) => void | — | Called when the item is chosen via click or Enter. |
disabled | boolean | false | Removes the item from keyboard navigation and dims it. |
keywords | string[] | — | Extra terms that should match this item during search. |
Accessibility
- The menu implements the
combobox/listboxARIA pattern — the input owns the list and announces the active option to screen readers. - Full keyboard support: ↑ / ↓ move between items, Enter selects, and typing filters the list.
- Disabled items expose
data-disabledand are skipped by arrow-key navigation, never receiving focus. - Group headings are linked to their options via
aria-labelledby, giving assistive tech the section context.