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, Base UI does not write the second line.
Installation
Anatomy
Usage
<Combobox items={integrations}>
<ComboboxTrigger
render={
<Button className="w-[280px] justify-between" variant="outline" />
}
>
<ComboboxValue placeholder="Select integration..." />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput placeholder="Search integrations..." showTrigger={false} />
<ComboboxEmpty>No integration found.</ComboboxEmpty>
<ComboboxList>
{(item: Integration) => (
<ComboboxItem className="py-3" key={item.value} value={item}>
<div className="flex flex-col gap-0.5">
<div className="font-medium">{item.label}</div>
<div className="text-muted-foreground text-xs">
{item.description}
</div>
</div>
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>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 a filter to Combobox that checks the description too.
API Reference
Combobox
Sets items={integrations}, placeholder="Select integration...", placeholder="Search integrations...", showTrigger={false} and value={item}. The rest is on the Combobox page.
Button
Sets variant="outline". The rest is on the Button page.
