Shadcn.io is not affiliated with official shadcn/ui
Items with Metadata
A React combobox combining Avatar with multiple metadata lines displaying name, email, and role in three-line item layout with shadcn/ui
Context builds trust—metadata informs decisions. This React combobox combines size-8 Avatar with three text lines (name with font-medium, email and role with text-xs text-muted-foreground) in flex-col layout. Built with shadcn/ui Command and Popover featuring py-3 tall items and items-start alignment for rich member information. The metadata pattern supports informed selection—perfect for team member pickers, contact selectors, author assignments, or anywhere user details matter enabling confident choices through comprehensive profile information distinguishing between similar names.
Items with Metadata preview
Installation
Related Components
Items with Avatars
Simple avatar display
Items with Descriptions
Two-line text layout
Items with Icons and Descriptions
Icon plus text combination
Standard Avatar
Basic avatar component
Standard Combobox
Simple text-only combobox
Items with Status Indicators
Badge status display
FAQ
Was this page helpful?
Sign in to leave feedback.
Items with Status Indicators
A React combobox with Badge components displaying status indicators using variant mapping for visual task state differentiation with shadcn/ui
Items with Icons and Descriptions
A React combobox combining Lucide React icons with label and description text in three-column layout featuring category-based visual indicators with shadcn/ui