Command menu

Searchable action and navigation listbox with grouped items, keyboard navigation, shortcuts, loading, and empty states.

Command menu is the shared substrate for palettes, / commands, @ suggestions, quick switchers, and model/action pickers.

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

Default

Palette with search, grouped results, active row, shortcuts, and footer hints.

Empty

No-result state with the same shell and keyboard contract.

Loading

Pending remote results without changing layout.

Props

Name	Type	Default	Description
`items *`	`readonly CommandMenuItem[]`	-	Grouped command items with labels, metadata, shortcuts, and disabled state.
`query`	`string`	-	Controlled search query.
`defaultActiveId`	`string`	-	Initial active item id for uncontrolled navigation.
`activeId`	`string`	-	Controlled active item id.
`searchable`	`boolean`	`true`	Renders the search input header.
`loading`	`boolean`	`false`	Shows a pending remote results row.
`onSelect`	`(item: CommandMenuItem) => void`	-	Called when Enter, Tab, or click selects an enabled item.
`onEscape`	`() => void`	-	Called when Escape closes the menu.