shadcn.io is an independent project built on shadcn/ui
An Open Command Menu button opens the dialog. Suggestions lists Calendar, Search Emoji, and Calculator, and the field reads Type a command or search...
Use the dialog when the list should cover the page. Keep a short list next to its button in a Popover. In React, Base UI leaves the chosen action to you.
Installation
Anatomy
Usage
<>
<Button onClick={handleOpen}>Open Command Menu</Button>
<CommandDialog onOpenChange={setOpen} open={open}>
<Command>
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
{items.map((item) => (
<CommandItem key={item.value}>{item.label}</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</CommandDialog>
</>FAQ
How does this dialog open?
The Open Command Menu button sets an open state to true, and CommandDialog takes that state with its change handler, so Escape or a click outside sets it back. The dialog has a visually hidden title and description.
The Command goes straight inside CommandDialog.
What commands are in this menu?
One CommandGroup with the heading Suggestions holds three CommandItems: Calendar, Search Emoji and Calculator. Each item's text is its only content.
Should this be a Command or a Combobox?
Use a Command to run an action or jump somewhere. Use a Combobox when the choice is a value that stays in a form field.
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 dialog in React?
These items don't run anything yet.
Pass onSelect to each CommandItem. Close the dialog in the same handler.
How do the keys work in this dialog?
The arrow keys move through the items, Enter runs the highlighted one, and typing filters the list. Escape closes CommandDialog, 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
Button
Sets onClick={handleOpen}. The rest is on the Button page.
Command
Sets onOpenChange={setOpen}, open={open}, placeholder="Type a command or search..." and heading="Suggestions". The rest is on the Command page.
