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 Svelte, 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 }} selectionBehavior="clear" value={value}><ComboboxTrigger class={cn(
buttonVariants({ variant: "outline" }),
"w-[300px] justify-between"
)} bind:ref={triggerRef}>{#if selected}{selected.label}{:else}{"Select plan..."}{/if}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search plans..." showTrigger={false} /><ComboboxEmpty>No plan found.</ComboboxEmpty><ComboboxList>{#each collection.items as plan (plan.value)}<ComboboxItem class="items-start gap-3 py-3" item={plan}><plan.icon aria-hidden="true" class="mt-0.5 size-5 text-muted-foreground" /><div class="flex flex-col gap-0.5"><div class="font-medium">{plan.label}</div><div class="text-muted-foreground text-xs">{plan.description}</div></div></ComboboxItem>{/each}</ComboboxList></ComboboxContent></Combobox>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.
