CommandPalette

Open it from a shortcut with `useKeyboardShortcuts`. Arrow keys move, Enter runs, Escape closes.

For server-side search pass onQueryChange, loading and the fetched commands (each can have a group); the palette then does not filter them again unless you set filter. highlight marks the matched text.

Last command: none

Props

CommandPalette

onQueryChange(query: string) => void
Called with the search text on every change, and with an empty string on open; use it to fetch results.
filterboolean
Default: true
Filter commands by the search text here. Defaults to false when onQueryChange is set.
loadingboolean
Default: false
Shows a "Searching…" row and aria-busy while results load.
highlightboolean
Default: false
Wrap the matched text of each label and description in <mark>.
openboolean
Whether the palette is shown.
onClose() => void
Called on Escape, backdrop click, and after a command runs.
commandsCommand[]
Commands to search. See the Command table below.
placeholderstring
Default: 'Type a command…'
Search box placeholder.
emptystring
Default: 'No matching commands'
Shown when nothing matches.

CommandPalette props
Prop	Type	Default	Description
`onQueryChange`	(query: string) => void	–	Called with the search text on every change, and with an empty string on open; use it to fetch results.
`filter`	boolean	`true`	Filter `commands` by the search text here. Defaults to false when `onQueryChange` is set.
`loading`	boolean	`false`	Shows a "Searching…" row and `aria-busy` while results load.
`highlight`	boolean	`false`	Wrap the matched text of each label and description in `<mark>`.
`open`	boolean	–	Whether the palette is shown.
`onClose`	() => void	–	Called on Escape, backdrop click, and after a command runs.
`commands`	Command[]	–	Commands to search. See the Command table below.
`placeholder`	string	`'Type a command…'`	Search box placeholder.
`empty`	string	`'No matching commands'`	Shown when nothing matches.

Command

keystring
Unique key of the command.
labelstring
Name of the command, searched as you type.
descriptionstring
Smaller text under the label, also searched.
groupstring
Heading the command is listed under, also searched.
shortcutstring
A keyboard shortcut hint at the end (display only).
onSelect() => void
Called when the command is chosen.

Command props
Prop	Type	Default	Description
`key`	string	–	Unique key of the command.
`label`	string	–	Name of the command, searched as you type.
`description`	string	–	Smaller text under the label, also searched.
`group`	string	–	Heading the command is listed under, also searched.
`shortcut`	string	–	A keyboard shortcut hint at the end (display only).
`onSelect`	() => void	–	Called when the command is chosen.

Related hooks and theme:useDialogFocus useEscapeKey useKeyboardShortcuts