shadcn.io is an independent project built on shadcn/ui
Each row has an icon, the plan name, and a short description. Basic Plan uses a package, Pro Plan a lightning bolt, and Enterprise Plan a shield. The button shows the picked name.
Use it for plans, templates, or modes people read before they pick. A name alone fits a Select. In React, Base UI does not lay out the icon and the two lines.
Installation
Anatomy
Usage
<Combobox items={plans}>
<ComboboxTrigger
render={
<Button className="w-[300px] justify-between" variant="outline" />
}
>
<ComboboxValue placeholder="Select plan..." />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput placeholder="Search plans..." showTrigger={false} />
<ComboboxEmpty>No plan found.</ComboboxEmpty>
<ComboboxList>
{(plan: Plan) => (
<ComboboxItem
className="items-start gap-3 py-3"
key={plan.value}
value={plan}
>
<plan.icon
aria-hidden="true"
className="mt-0.5 size-5 text-muted-foreground"
/>
<div className="flex flex-col gap-0.5">
<div className="font-medium">{plan.label}</div>
<div className="text-muted-foreground text-xs">
{plan.description}
</div>
</div>
</ComboboxItem>
)}
</ComboboxList>
{/* The rest of the file is under 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).
API Reference
Combobox
Sets items={plans}, placeholder="Select plan...", placeholder="Search plans...", showTrigger={false} and value={plan}. The rest is on the Combobox page.
Button
Sets variant="outline". The rest is on the Button page.
