Command

Spotlight-style command palette with real-time search filtering, grouped results, keyboard navigation, and optional ⌘K dialog wrapper.

Anatomy

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command…" />
  <CommandList>
    <CommandEmpty />
    <CommandGroup heading="Navigation">
      <CommandItem icon={…} shortcut="G H" onSelect={…}>Go to dashboard</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Actions">
      <CommandItem onSelect={…}>New file</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

Examples

Dialog (⌘K)

Props

CommandDialog

open

boolean

Controlled open state.

onOpenChange

(open: boolean) => void

Called when open state changes.

title= 'Command palette'

string

Accessible dialog title (visually hidden).

children*

ReactNode

CommandInput, CommandList, etc.

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean) => void	—	Called when open state changes.
title	string	'Command palette'	Accessible dialog title (visually hidden).
children*	ReactNode	—	CommandInput, CommandList, etc.

CommandInput

placeholder= 'Search…'

string

Placeholder text.

Prop	Type	Default	Description
placeholder	string	'Search…'	Placeholder text.

CommandItem

onSelect

() => void

Called when the item is selected by click or Enter.

value

string

String used for filtering. Defaults to the text content of children.

disabled

boolean

Prevents interaction and hides from filtered results.

icon

ReactNode

Icon rendered before the label.

shortcut

string

Keyboard shortcut hint shown right-aligned.

children*

ReactNode

Item label.

Prop	Type	Default	Description
onSelect	() => void	—	Called when the item is selected by click or Enter.
value	string	—	String used for filtering. Defaults to the text content of children.
disabled	boolean	—	Prevents interaction and hides from filtered results.
icon	ReactNode	—	Icon rendered before the label.
shortcut	string	—	Keyboard shortcut hint shown right-aligned.
children*	ReactNode	—	Item label.

CommandGroup

heading

string

Group label rendered above the items. Hidden when the group has no visible items.

children*

ReactNode

CommandItem elements.

Prop	Type	Default	Description
heading	string	—	Group label rendered above the items. Hidden when the group has no visible items.
children*	ReactNode	—	CommandItem elements.

PreviousAlert Dialog NextContext Menu