Command Menu

A keyboard-driven palette for quick actions, navigation, and search. Composed from CommandMenu sub-components — CommandMenuSearch, CommandMenuList, CommandMenuSection, CommandMenuItem, and CommandMenuFooter.

Actions

Icon-driven commands with optional keyboard shortcuts. Each shortcut is rendered as a sequence of key badges separated by arrows.

Users — compact

Small inline-layout items using Avatar size="xs" with the handle shown inline. Grouped into Recent and All users sections, with a keyboard-hint footer.

Users — stacked

Larger Avatar size="md" with stacked layout — the handle appears below the name. The footer includes an optional settings action button.

Actions — featured icons

Items with a bordered icon box (CommandMenuItemIcon) and stacked label + description layout, grouped under section titles.

Empty state

Use CommandMenuEmptyState inside CommandMenuList when a search yields no results. Pass action buttons via the actions prop.

Users — with profile panel

Selecting a user from the list reveals a CommandMenuPanel on the right with the user's profile details and actions.

Integrations — with detail panel

Logo images as startContent, with a side panel showing the selected integration's details, a toggle to enable/disable, and action buttons.