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, Ark UI does not lay out the icon and the two lines.
Installation
Anatomy
Usage
<Combobox
collection={collection}
onInputValueChange={handleInputValueChange}
onValueChange={handleValueChange}
positioning={{ getAnchorElement: () => triggerRef.current }}
selectionBehavior="clear"
value={value}
>
<ComboboxTrigger
className={cn(
buttonVariants({ variant: "outline" }),
"w-[300px] justify-between"
)}
ref={triggerRef}
>
{selected ? selected.label : "Select plan..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput
className="w-full"
placeholder="Search plans..."
showTrigger={false}
/>
<ComboboxEmpty>No plan found.</ComboboxEmpty>
<ComboboxList>
{collection.items.map((plan) => (
<ComboboxItem
className="items-start gap-3 py-3"
item={plan}
key={plan.value}
>
{/* 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 collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
