CommandPalette
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| open * | boolean | — | |
| onOpenChange * | (open: boolean) => void | — | |
| query * | string | — | |
| onQueryChange * | (query: string) => void | — | |
| groups * | readonly CommandPaletteGroup[] | — | Already-matched, ready-to-render groups. Use `filterCommandItems` for the simple case. |
| onSelect * | (id: string) => void | — | Called with the item id when the user picks an item (click or Enter). |
| placeholder | string | undefined | Search… | Placeholder text for the search input. |
| footer | ReactNode | — | Footer hint row (kbd legend). Accepts free-form children. |
| emptyState | ReactNode | — | Empty-state node when groups resolve to zero items. |
| width | number | undefined | 540 | Pixel width of the palette panel. Default 540. |