Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - Items with Avatars
A React combobox displaying items with Avatar components showing user profile images and fallback initials with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Combobox - 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
React Combobox - 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