127 Components
Command Menu
NavigationSpotlight-style Cmd+K command palette portaled above the viewport with grouped actions, live keyword filtering, and full keyboard navigation.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/command-menu.json"
Props
TypeScript props supported by <CommandMenu />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | CommandItem[] | — | Array of command items ({ id, label, group, shortcut, keywords, icon, onSelect }). |
| placeholder | string | "Type a command or search..." | Placeholder text inside the command search input. |
| triggerLabel | string | "Search commands..." | Label displayed inside the trigger button. |
| enableGlobalShortcut | boolean | true | Listens for global Cmd+K / Ctrl+K keyboard shortcut when true. |
| open | boolean | — | Controlled open state for the command menu dialog. |
| onOpenChange | (open: boolean) => void | — | Callback fired when the command menu opens or closes. |
| onSelect | (item: CommandItem) => void | — | Callback fired when a command item is executed. |
| emptyMessage | string | "No matching commands found." | Message displayed when no commands match the search query. |
| className | string | — | Additional Tailwind CSS classes for the trigger wrapper. |
Key Features
- Portaled to document.body at z-[9999] so it always renders above navbars and page layouts.
- Global Cmd+K / Ctrl+K shortcut listener plus customizable search trigger button.
- Grouped command sections with keyword search, ArrowUp/ArrowDown navigation, and auto-scroll.
Keyboard & Accessibility
- Renders with role='dialog' and aria-modal='true' with automatic search input focus.
- Supports full keyboard operation (ArrowUp, ArrowDown, Enter, Escape).
- Locks background page scroll while open and respects prefers-reduced-motion.