Actions & Navigation

Command

A command palette for searching and running actions with keyboard navigation.

Dialog#

Use CommandDialog to display the command palette in a modal overlay. Control visibility with the isOpen and onOpenChange props.

Component props#

Command#

Name	Type	Description
value	string	Controlled value of the selected item
onValueChange	(value: string) => void	Called when the selected item changes
filter	(value, search, keywords) => number	Custom filter function for ranking items
shouldFilter	boolean	Disable built-in filtering when false
loop	boolean	Loop keyboard navigation from last item to first

CommandInput#

Name	Type	Description
placeholder	string	Input placeholder text
value	string	Controlled search value
onValueChange	(search: string) => void	Called when the search value changes

CommandGroup#

Name	Type	Description
heading	ReactNode	Group heading displayed above items

CommandItem#

Name	Type	Description
icon	ReactNode	Icon displayed before the label
isDisabled	boolean	Disables the item (`disabled` is also accepted)
value	string	Value used for filtering (defaults to text content)
keywords	string[]	Additional keywords used when filtering
onSelect	(value: string) => void	Called when the item is selected

CommandList#

Name	Type	Description
maxHeight	string \| number	Wraps the list in a `ScrollArea` capped at this height. Without it the list scrolls natively at `max-h-[300px]`

CommandShortcut#

Renders a right-aligned muted <span> for keyboard shortcut hints inside a CommandItem.

<CommandItem>
  Settings
  <CommandShortcut>⌘S</CommandShortcut>
</CommandItem>

CommandDialog#

Name	Type	Description
open	boolean	Whether the dialog is open (`isOpen` is an accepted alias)
onOpenChange	(open: boolean) => void	Called when the open state changes

Anatomy#

Every part exposes a data-slot attribute: command, command-input-wrapper, command-input, command-list, command-empty, command-group, command-separator, command-item, and command-shortcut. Inside CommandDialog the input wrapper grows to h-12.

PreviousButton group NextContext menu