Shadcn.io is not affiliated with official shadcn/ui
Command Dialog with Descriptions
A React CommandDialog with two-line command items using flex-col layout showing primary text and secondary descriptions with text-muted-foreground with shadcn/ui
Context speeds decisions—descriptions clarify choices. This React CommandDialog displays rich command items using flex-col container with primary span (John Doe, jane at example.com) and secondary text-muted-foreground text-xs description (Software Engineer, Email, Mobile) showing contact details with icons. Built with shadcn/ui Command and Dialog featuring vertical stacking of primary and metadata. The description pattern improves clarity—perfect for contact lists, complex commands, disambiguating similar items, or anywhere additional context helps users select confidently preventing wrong selections from ambiguous labels.
Command Dialog with Descriptions preview
Installation
Related Components
Simple Command Dialog
Single-line commands
With Badges
Badge status indicators
Combobox with Descriptions
Dropdown descriptions
With Icons and Shortcuts
Icon-enhanced commands
Command with Details
Detailed command items
With Status Indicators
Status dot indicators
FAQ
Was this page helpful?
Sign in to leave feedback.
Command Dialog with Badges
A React CommandDialog with Badge status indicators showing component stability using secondary and outline variants with ml-auto positioning with shadcn/ui
Command Dialog Actions Menu
A React CommandDialog actions menu with Lucide React action icons and CommandShortcut keyboard hints for quick file operations with shadcn/ui