shadcn.io is an independent project built on shadcn/ui
A Browse Components button opens the dialog. Components lists Button, Input, Table, and DataGrid. The first two say Stable, and Table and DataGrid say Beta.
Reach for a badge when the state matters more than a second line of text. A Dropdown Menu is enough when the list is short and nobody needs to search. In React, Base UI leaves the action to you.
Installation
Anatomy
Usage
<CommandItem key={item.value}>
<Icon aria-hidden="true" />
<span className="flex-1">{item.label}</span>
<Badge variant={item.variant}>{item.status}</Badge>
</CommandItem>FAQ
How does this dialog open?
The Browse Components 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.
How does Stable or Beta sit at the end of the row?
The name's span has flex-1, so it fills the row and pushes the Badge to the end. Button and Input read Stable with variant="secondary", and Table and DataGrid read Beta with variant="outline". The status and the variant sit in the data beside each name.
Which icon goes with each component?
FileText is Button, Code is Input, Database is Table, and Package is DataGrid. The icon is the first child of CommandItem and is hidden from screen readers, since the name says the same thing.
What appears when nothing matches the search?
CommandEmpty in the list says "No components 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 "Search components..." 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.
Badge
Sets variant={item.variant}. The rest is on the Badge page.
