shadcn.io is an independent project built on shadcn/ui
An outline Open Command Menu button opens the popover. Calendar, Search Emoji, and Calculator have icons. Profile, Billing, and Settings show shortcut hints.
Keep this beside the control that opened it. Move the same list into a Dialog when it should cover the page. In React, Base UI does not carry out the command.
Installation
Anatomy
Usage
<CommandItem key={item.value}>
<Icon aria-hidden="true" />
<span>{item.label}</span>
{!!item.shortcut && (
<CommandShortcut>{item.shortcut}</CommandShortcut>
)}
</CommandItem>FAQ
How is this menu anchored to the button?
The Open Command Menu button is the trigger, and the panel opens below it, lined up with its start edge. The panel is 400px wide, never wider than the screen, and has no padding, so the Command fills it. A visually hidden PopoverTitle names it.
PopoverTrigger renders the button through render, and PopoverContent sets align="start".
Which items show an icon, and which show a shortcut?
Every item has an icon. The Suggestions group holds Calendar, Search Emoji and Calculator. The Settings group holds Profile, Billing and Settings, each with a shortcut label: ⌘P, ⌘B and ⌘S.
Do those shortcut hints fire the keys?
No. CommandShortcut is a label at the end of the row, and the item's check mark stays hidden while it's there. Listen for those keys yourself if Profile, Billing or Settings should run from the keyboard.
What appears when nothing matches the search?
CommandEmpty in the list says "No results found." It shows only when the search leaves nothing.
How do I run an item from this menu in React?
These items don't run anything yet.
Pass onSelect to each CommandItem.
How do the keys work in this menu?
The arrow keys move through the items, Enter runs the highlighted one, and typing filters the list. Escape or a click outside closes the popover, and focus goes back to the button. CommandInput shows "Type a command or search..." until someone types.
Command filters and ranks the items by their text on its own.
API Reference
Command
No extra props in this demo. The rest is on the Command page.
