CommandPalette
A Cmd+K style command palette for searching and executing commands. Supports grouped items, keyboard navigation, fuzzy filtering, and keyboard shortcuts. Built on Radix Dialog.
Basic Usage
Preview
CommandPalette Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | CommandItem[] | - | Array of command items to display. Each item has id, label, onSelect, and optional description, icon, shortcut, and group. |
| open | boolean | - | Controlled open state. When provided, the component becomes controlled. |
| onOpenChange | (open: boolean) => void | - | Callback when the open state changes. |
| placeholder | string | "Type a command..." | Placeholder text shown in the search input. |
CommandItem Shape
| Prop | Type | Default | Description |
|---|---|---|---|
| id* | string | - | Unique identifier for the command item. |
| label* | string | - | Display label for the command. |
| description | string | - | Optional secondary text shown below the label. |
| icon | ReactNode | - | Optional icon displayed to the left of the label. |
| shortcut | string | - | Keyboard shortcut hint displayed on the right side. |
| group | string | "Commands" | Group heading under which this item appears. |
| onSelect* | () => void | - | Callback invoked when the command is selected. |
Accessibility
- Built on Radix Dialog with an accessible overlay and focus trap.
- Opens with Ctrl+K (or Cmd+K on macOS) globally, closes with Escape.
- Arrow Up/Down keys navigate between items, Enter selects the highlighted item.
- The dialog title and description are screen-reader-only for assistive technology.
- Search input is automatically focused when the palette opens.