shadcn.io is an independent project built on shadcn/ui
A Search Contacts button opens the dialog. The rows are John Doe, an email address, a mobile number, and San Francisco, CA, each with a muted line such as Software Engineer or Location.
Use the extra line for details people need before they choose. A Listbox fits when the choice is a value, not a command. In React, Ark UI does not run the item.
Installation
Anatomy
Usage
<CommandItem item={item} key={item.value}>
<Icon aria-hidden="true" />
<div className="flex flex-col">
<span>{item.label}</span>
<span className="text-muted-foreground text-xs">
{item.description}
</span>
</div>
</CommandItem>FAQ
How does this dialog open?
The Search Contacts 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 inside CommandDialogContent. When the dialog closes, the demo clears the filter so the whole list is back next time.
How does each contact get a second line?
The name and the detail sit in a div with flex flex-col. The detail is a span with text-muted-foreground text-xs: Software Engineer under John Doe, Email under jane@example.com, Mobile under the phone number, and Location under San Francisco, CA. The search matches the first line only.
What are the icons beside the contacts?
User, Mail, Phone and MapPin, the first child of each CommandItem. They're decorative and hidden from screen readers, and the item centers each one against the two lines.
What appears when nothing matches the search?
CommandEmpty in the list says "No contacts 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.
Handle onValueChange on Command, which receives the chosen item's value, and keep value empty so every choice fires. 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 contacts..." until someone types.
The filtering is the demo's: it builds the items with useListCollection and a contains filter, and calls filter with the input's value as it changes.
API Reference
Command
Sets item={item}. The rest is on the Command page.
