Shadcn.io is not affiliated with official 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
Icons accelerate recognition—visual symbols beat text scanning. This React combobox combines Lucide React icons (Package, Zap, Shield) with font-medium label and text-xs description using size-5 icons with text-muted-foreground. Built with shadcn/ui Command and Popover featuring items-start gap-3 layout for icon, text columns. The icon plus description pattern supports quick identification—perfect for plan selectors, feature pickers, tool choosers, or anywhere visual categorization helps combining symbolic recognition with textual explanation enabling faster browsing through dual-channel information encoding.
Items with Icons and Descriptions preview
Installation
Related Components
Items with Descriptions
Text-only two-line layout
Items with Avatars
Avatar-based visual indicators
Nested/Hierarchical Groups
ChevronRight icon indicators
Color-Coded Items
Colored dot indicators
Items with Metadata
Multi-line metadata display
Standard Combobox
Simple text-only combobox
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Color-Coded Items
A React combobox with color-coded items using size-3 rounded-full colored dots for visual category differentiation with Tailwind background colors and shadcn/ui