Command Palette

The Command Palette component allows users to quickly find and execute commands via keyboard navigation or search, with optional async search support.

Usage & Examples

Default

default.tsx

<CommandPalette 
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  commands={[
    { label: "Open Dashboard", action: () => alert("Dashboard opened") },
    { label: "View Settings", action: () => alert("Settings opened") },
    { label: "Log Out", action: () => alert("Logged out") },
  ]}
/>

Props API

Command Palette props API
				Default	Description
`asyncSearch`	`((query: string) => Promise<CommandItem[]>)`	No	events	`—`	Callback to handle the search input asynchronously.
`className`	`string`	No	styling	`—`	Custom classname for the command palette.
`commands`	`CommandItem[]`	Yes	props	`—`	Array of available command options.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`debounceMs`	`number`	No	props	`300`	Optional debounce time (in ms) for the search input.
`emptyMessage`	`string`	No	props	`"No matching results"`	Message announced when there are no matching commands.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	If true, applies a translucent glass surface using the selected theme/state. Defaults to `false`.
`inputAriaDescribedBy`	`string`	No	props	`—`	Accessible description reference for the search input.
`inputAriaLabel`	`string`	No	props	`—`	Accessible label for the search input.
`inputAriaLabelledBy`	`string`	No	props	`—`	Accessible label reference for the search input.
`inputId`	`string`	No	props	`—`	Optional ID for the input element.
`inputLabel`	`string`	No	props	`—`	Optional visible or screen-reader-only label for the input.