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 
    open={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") },
    ]}
  />

solid variant

solid-variant.tsx

<CommandPalette variant="solid" open={open} onClose={() => setOpen(false)} commands={commands} />

outline variant

outline-variant.tsx

<CommandPalette variant="outline" open={open} onClose={() => setOpen(false)} commands={commands} />

glass variant

glass-variant.tsx

<CommandPalette variant="glass" open={open} onClose={() => setOpen(false)} commands={commands} />

primary theme

primary-theme.tsx

<CommandPalette theme="primary" open={open} onClose={() => setOpen(false)} commands={commands} />

secondary theme

secondary-theme.tsx

<CommandPalette theme="secondary" open={open} onClose={() => setOpen(false)} commands={commands} />

tertiary theme

tertiary-theme.tsx

<CommandPalette theme="tertiary" open={open} onClose={() => setOpen(false)} commands={commands} />

quaternary theme

quaternary-theme.tsx

<CommandPalette theme="quaternary" open={open} onClose={() => setOpen(false)} commands={commands} />

success state

success-state.tsx

<CommandPalette state="success" open={open} onClose={() => setOpen(false)} commands={commands} />

warning state

warning-state.tsx

<CommandPalette state="warning" open={open} onClose={() => setOpen(false)} commands={commands} />

error state

error-state.tsx

<CommandPalette state="error" open={open} onClose={() => setOpen(false)} commands={commands} />

info state

info-state.tsx

<CommandPalette state="info" open={open} onClose={() => setOpen(false)} commands={commands} />

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.
`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.
`listAriaLabel`	`string`	No	props	`"Command suggestions"`	Accessible label for the command results list.