shadcn.io is an independent project built on shadcn/ui
Every row has two lines. GitHub, Slack, and Notion are the names, and a smaller muted line says what each one does. The button shows only the name after a pick.
Use it when the names alone are not enough to choose. A single line per option is a plain Select. In React, Ark UI does not write the second line.
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-[280px] justify-between"
)}
ref={triggerRef}
>
{selected ? selected.label : "Select integration..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput
className="w-full"
placeholder="Search integrations..."
showTrigger={false}
/>
<ComboboxEmpty>No integration found.</ComboboxEmpty>
<ComboboxList>
{collection.items.map((item) => (
<ComboboxItem className="py-3" item={item} key={item.value}>
<div className="flex flex-col gap-0.5">
<div className="font-medium">{item.label}</div>
<div className="text-muted-foreground text-xs">
{item.description}
{/* The rest of the file is under Installation. */}FAQ
How are the two lines laid out?
A flex flex-col gap-0.5 block inside ComboboxItem: the name in font-medium, the description in text-muted-foreground text-xs. The item gets py-3 for room.
Which integrations are listed?
GitHub (Connect your GitHub repositories), Slack (Send notifications to Slack channels) and Notion (Sync data with Notion databases).
Does the search look at the descriptions?
No, only the names. Typing notifications finds nothing.
Pass itemToString to useListCollection to search both.
API Reference
Combobox
Sets collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
