Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Command Popover with Descriptions
A React command popover with two-line items using flex-col layout showing primary and secondary descriptions in anchored dropdown with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Ambiguity causes wrong selections—descriptions add clarity. This React command popover displays rich items using flex-col container with primary span (John Doe, jane at example.com) and text-muted-foreground text-xs description (Software Engineer, Email, Mobile) showing contact details in anchored Popover. Built with shadcn/ui Command and Popover featuring vertical stacking. The description popover pattern improves accuracy—perfect for contact pickers, complex options, disambiguating similar items, or anywhere additional context helps users select correctly in contextual menus preventing mistakes from ambiguous single-line labels.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Command Popover
Single-line items
Dialog with Descriptions
Full-screen descriptions
Combobox with Descriptions
Dropdown descriptions
With Badges
Badge metadata
With Icons and Shortcuts
Icon-enhanced items
Menu with Details
Dropdown details
Questions you might have
React Command Popover with Badges
A React command popover with Badge status indicators showing component stability using secondary and outline variants in anchored menu with shadcn/ui
React Command Popover Actions Menu
A React command popover actions menu with Lucide React icons and CommandShortcut hints for contextual quick operations in anchored dropdown with shadcn/ui