Shadcn.io is not affiliated with official shadcn/ui
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
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.
Command Popover with Descriptions preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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