shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Rich Content
Items with Icons and Descriptions Combobox for React
A combobox of plans, each row with an icon, a name and a description.
A plan picker with three parts per row: an icon, the plan name and a short description. Basic Plan has a package, Pro Plan a lightning bolt and Enterprise Plan a shield. Use it for plans, templates or modes, where people read an option before picking it.
Preview
Installation
FAQ
How is each row laid out?
ComboboxItem gets items-start gap-3 py-3. The icon is mt-0.5 size-5 text-muted-foreground, followed by a column with the name in font-medium and the description in muted text-xs.
Where do the icons come from?
Each plan keeps its icon component in the data: PackageIcon, ZapIcon and ShieldIcon. The row renders it with aria-hidden.
Which plans are listed?
Basic Plan (Essential features for small teams), Pro Plan (Advanced features and analytics) and Enterprise Plan (Custom solutions with priority support).
Related
- Items with Descriptions ComboboxA combobox of integrations with a
- Items with Avatars ComboboxA combobox of people with an avatar on
- Nested/Hierarchical Groups ComboboxA combobox that lists countries under
- Color-Coded Items ComboboxA combobox with a colored dot beside each
- Items with Metadata ComboboxA combobox of team members with an
- Simple Single Select ComboboxA single-select combobox that opens from