shadcn.io is not affiliated with official shadcn/ui
Command examples · Standard
Command with Descriptions for React
An inline command menu of contact details, each with a muted second line naming what it is.
Four contact details, each with a muted second line that says what it is: a job title, Email, Mobile or Location. Add a second line when the labels alone could be mistaken for one another. The menu sits in the page, always open, with no trigger. In React, Base UI handles the keyboard navigation.
Preview
Installation
FAQ
How is this menu placed on the page?
Command has h-auto w-full max-w-lg rounded-lg border shadow-md: it sits in the page flow, up to a max width, with a border and a shadow. The list is always open and there is no trigger.
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.
Related
- Command Dialog with DescriptionsA Search Contacts button that opens a
- Command Popover with DescriptionsA Search Contacts button that opens a
- Command with BadgesAn inline command menu of components
- Command Actions MenuAn inline command menu of quick and file
- Items with Descriptions ComboboxA combobox of integrations with a
- Command with Icons and ShortcutsAn inline command menu with icons on