Command

React command palette built on cmdk with fuzzy search, groups, shortcuts, and a CommandDialog that wires Cmd+K and Ctrl+K. Works inline or as an overlay.

Open in Storybook ↗

Command lists actions behind a search input; each CommandItem fires onSelect. CommandDialog is the same palette in an overlay and wires ⌘K itself.

When to use

Use Command to let power users jump to pages and actions by typing: opening a request by number, switching a service, or running an admin action. Mount CommandDialog once for a global palette, or use Command inline for a searchable action list.

For searching content rather than commands, use SearchBox.

Examples

Inline palette

Command menu

⌘K dialog

Press ⌘K (or Ctrl+K) anywhere.

Custom shortcut (Arabic)

Props

Props declared by Command. Native attributes of the underlying element pass through.

<Command>

Prop	Type	Description
`children`	`ReactNode`
`asChild`	`boolean`
`label`	`string`	Accessible label for this command menu. Not shown visibly.
`shouldFilter`	`boolean`	Optionally set to `false` to turn off the automatic filtering and sorting. If `false`, you must conditionally render valid items based on the search query yourself.
`filter`	`CommandFilter`	Custom filter function for whether each command menu item should matches the given search query. It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely. By default, uses the `command-score` library.
`defaultValue`	`string \| (readonly string[] & string)`	Optional default item value when it is initially rendered.
`value`	`string`	Optional controlled state of the selected command menu item.
`onValueChange`	`(value: string) => void`	Event handler called when the selected item of the menu changes.
`loop`	`boolean`	Optionally set to `true` to turn on looping around when using the arrow keys.
`disablePointerSelection`	`boolean`	Optionally set to `true` to disable selection via pointer events.
`vimBindings`	`boolean`	Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.

<CommandInput>

Prop	Type	Description
`asChild`	`boolean`
`value`	`string`	Optional controlled state for the value of the search input.
`onValueChange`	`(search: string) => void`	Event handler called when the search value changes.

<CommandList>

Prop	Type	Description
`children`	`ReactNode`
`asChild`	`boolean`
`label`	`string`	Accessible label for this List of suggestions. Not shown visibly.

<CommandEmpty>

Prop	Type	Default	Description
`children`	`ReactNode`
`asChild`	`boolean`

<CommandGroup>

Prop	Type	Description
`children`	`ReactNode`
`asChild`	`boolean`
`heading`	`ReactNode`	Optional heading to render for this group.
`value`	`string`	If no heading is provided, you must provide a value that is unique for this group.
`forceMount`	`boolean`	Whether this group is forcibly rendered regardless of filtering.

<CommandSeparator>

Prop	Type	Default	Description
`asChild`	`boolean`
`alwaysRender`	`boolean`		Whether this separator should always be rendered. Useful if you disable automatic filtering.

<CommandItem>

Prop	Type	Description
`value`required	`string`	Stable value for filtering + the `onSelect` payload. Required: cmdk would otherwise derive it from the rendered text, so a label / translation / icon change would silently change what `onSelect` receives.
`startIcon`	`react.ReactNode`	Leading icon - mirrors Menubar / DropdownMenu item icons.
`shortcut`	`react.ReactNode`	Right-aligned keyboard hint, e.g. `"⌘P"` - mirrors Menubar / DropdownMenu.
`onSelect`	`(value: string) => void`	Fires when the item is chosen (click / Enter). Receives the item's `value` (cmdk defaults it to the text content when `value` is omitted). Action-oriented: items run a command and don't track selection. Inside `CommandDialog` the consumer closes the dialog here, e.g. `onSelect={() => { setOpen(false); run(); }}`.
`children`	`ReactNode`
`asChild`	`boolean`
`disabled`	`boolean`	Whether this item is currently disabled.
`keywords`	`string[]`	Optional keywords to match against when filtering.
`forceMount`	`boolean`	Whether this item is forcibly rendered regardless of filtering.

<CommandDialog>

Prop	Type	Description
`open`	`boolean`	Controlled open state.
`defaultOpen`	`boolean`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`
`shortcut`	`string \| false`	Key for the built-in document shortcut (with Cmd on macOS / Ctrl elsewhere). Defaults to `'k'` (⌘K / Ctrl+K). Pass `false` to bind no listener and wire your own. The modifier is fixed; only the key is configurable.
`label`	`react.ReactNode`	Accessible name → visually-hidden `DialogTitle`. Defaults to `"Command palette"`.
`description`	`react.ReactNode`	Optional visually-hidden `DialogDescription`.
`className`	`string`
`children`required	`react.ReactNode`	`CommandInput` + `CommandList` + groups / items.
`shouldFilter`	`boolean`	Optionally set to `false` to turn off the automatic filtering and sorting. If `false`, you must conditionally render valid items based on the search query yourself.
`filter`	`CommandFilter`	Custom filter function for whether each command menu item should matches the given search query. It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely. By default, uses the `command-score` library.
`loop`	`boolean`	Optionally set to `true` to turn on looping around when using the arrow keys.

Accessibility

The input is a role="combobox" tied to a role="listbox" of results, so arrow keys move through matches, Enter runs the highlighted item, and Escape closes. Give the input an aria-label.

The dialog variant traps focus and returns it on close. Shortcuts shown next to items are hints; every item also works by mouse and keyboard.