CtrlK

Command Palette

Docs

Run actions quickly via search and shortcuts.

Example

Install

The Command Palette is built using a composition of the Command and Dialog components.

API Reference

Prop	Type	Default	Description
`actions`	`CommandPaletteAction[]`	`[]`	Array of action objects (required)
`trigger`	`React.ReactNode`	—	Custom trigger element (optional, defaults to Button)
`placeholder`	`string`	`"Type a command or search..."`	Placeholder text for the search input
`emptyText`	`string`	`"No results found."`	Text to show when no results found
`showRecentCommands`	`boolean`	`true`	Show recent commands section
`maxRecentCommands`	`number`	`5`	Maximum number of recent commands to show
`recentCommandsStorageKey`	`string`	`"command-palette-recent"`	localStorage key for storing recent commands

CommandPaletteAction Property	Type	Required	Description
`id`	`string`	✓	Unique identifier for the action (required)
`label`	`string`	✓	Display text for the action (required)
`keywords`	`string[]`	—	Array of search keywords for filtering
`shortcut`	`string`	—	Keyboard shortcut display (e.g., "⌘N")
`icon`	`React.ReactNode`	—	Icon element to display before the label
`group`	`string`	—	Group name for organizing actions
`onSelect`	`() => void`	—	Callback function when action is selected
`children`	`CommandPaletteAction[]`	—	Nested actions for hierarchical commands