Command menu
A React component in Beamline's Overlays category.
Search-first list of every action: ranked matching, groups, keycap shortcuts and nested pages; inline as CommandPalette or in a ⌘K dialog as CommandMenu.
Use it for
- App-wide ⌘K search and actions with groups, nested pages and shortcuts.
Not for
- Searching one list on a page (search-field).
- One object's actions (dropdown-menu).
Anatomy
- field (search icon or page chip)
- list: group headings, options (icon, label with match, description, shortcut, ›)
- empty state
- key hints
States
- empty query
- filtered
- no match
- in a page
- option active
- option disabled
Keyboard
- Type to filter
- ↑ ↓ move (wrapping), Home / End
- Enter runs or opens a page
- Backspace on an empty field goes back
- Escape goes back, then closes
- ⌘K / Ctrl K toggles the dialog
Motion
The highlight is one plate that glides between rows for the arrow keys and the pointer (--pui-duration-fast); it appears in place when the list's question changes. A nested page slides in from the side it comes from (forward from the inline end, back from the start) while the palette eases to its new height and the back chip pops in. Typing never moves anything. Opened by a press it grows out of what was pressed and closes back into it (_shared/use-open-from.ts); opened by ⌘K it appears in place. Reduced motion places everything at once.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | CommandItem[] ({ id, label, group?, icon?, shortcut?, keywords?, description?, disabled?, children?, onSelect? }) | — | |
onSelect | (item) => void | — | |
placeholder | string | — | |
emptyText | (query) => ReactNode | — | |
CommandMenu open / onOpenChange / hotkey | boolean | — | |
style / ref | CSSProperties / native Ref | — | |
classNames | CommandPaletteClassNames | — | |
overlayClassNames | Partial<Record<"root" | "scrim" | "title", string>> | — |
Dependencies
@radix-ui/react-dialog, lucide-react
Import
import { CommandPalette, CommandMenu } from "@/components/command-menu/command-menu";Get it
Command menu is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Overlays
- Alert Dialog: A blocking confirmation that must be answered: the scrim does not dismiss it, focus starts on the safe choice, and an async action keeps it open until…
- Bottom sheet: A phone panel that rests at a peek and follows the finger to full height; a flick down closes it, and the handle works from the keyboard.
- Context menu: Actions for an object on right-click, long-press, Shift+F10 or the menu key, opened at the pointer, with the same rows as the dropdown menu.
- Dialog: A focused task over the page (create, invite, rename) with a title, body and footer; focus moves in, is trapped and returns on close.
- Dropdown menu: A list of actions behind a trigger, with shortcuts, check items, headings and submenus; one highlight glides under the pointer and jumps with the keyboard.
- Hover card: A preview of a person, link or record on hover or keyboard focus, without leaving the page; HoverCardProfile is the standard person preview.
- Popover: A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close.
- Sheet: A panel that slides in from an edge with the page still visible behind it: header and footer stay put while the body scrolls.
- Toast: Short results of an action stacked at an edge: point at the stack to fan it out and pause the timers; undo or retry in place; Alt+T, Escape and a swipe…
- Tooltip: Short supporting text for a control: opens after a moment on hover and at once on keyboard focus; inside a toolbar group the next one opens instantly.