CommandPalette

Command palette UI built on cmdk and shadcn/ui.

Props

CommandPaletteProps

Prop	Type	Required	Description
open	boolean	Yes	Whether palette is open
onOpenChange	(open: boolean) => void	Yes	Open state change handler
commands	Command[]	Yes	All registered commands
groupedCommands	Map<string, Command[]>	Yes	Commands grouped by group
onSelect	(command: Command) => void	Yes	Called when command selected
placeholder	string	No	Search input placeholder (default: 'Type a command or search...')
emptyText	string	No	Text when no matches (default: 'No commands found.')

Command

Property	Type	Required	Description
id	string	Yes	Unique identifier
label	string	Yes	Display label
action	() => void | Promise<void>	Yes	Action to execute
keywords	string[]	No	Search keywords
icon	ReactNode	No	Icon element
group	string	No	Group name
shortcut	string	No	Shortcut display text
disabled	boolean	No	Whether disabled

Example

const palette = useCommandPalette({ initialCommands: [...] })

<CommandPalette
  open={palette.isOpen}
  onOpenChange={(open) => open ? palette.open() : palette.close()}
  commands={palette.commands}
  groupedCommands={palette.groupedCommands}
  onSelect={(cmd) => palette.execute(cmd.id)}
/>

See also

• CommandPalette (Conceptual)
• useCommandPalette Hook