Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React 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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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 Palette
Search for a command to run...
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React 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
React 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