Shadcn.io is not affiliated with official shadcn/ui
Items with Avatars
A React combobox displaying items with Avatar components showing user profile images and fallback initials with shadcn/ui
Names need faces—avatars humanize selection. This React combobox adds Avatar component from shadcn/ui with AvatarImage and AvatarFallback showing GitHub profile pictures with size-5 styling. Built with shadcn/ui Command and Popover featuring avatar display in both dropdown items and selected trigger state. The avatar pattern adds personalization—perfect for user pickers, team member selectors, assignee dropdowns, or anywhere human identity matters making selections feel personal through visual recognition replacing abstract names with familiar faces.
Items with Avatars preview
Installation
Related Components
Items with Metadata
Avatar plus multiple text fields
Items with Descriptions
Two-line item layout
Items with Icons and Descriptions
Icon-based visual indicators
Standard Avatar
Basic avatar component
Standard Combobox
Simple text-only combobox
Multiple Groups with Labels
Grouped combobox structure
FAQ
Was this page helpful?
Sign in to leave feedback.
Selected Items List Below
A React multi-select combobox displaying selected items as Badge list below the trigger using space-y-2 wrapper and conditional rendering with shadcn/ui
Items with Descriptions
A React combobox with two-line items displaying label with font-medium and description with text-xs text-muted-foreground styling with shadcn/ui