shadcn.io is an independent project built on shadcn/ui
Picking a row selects the repository. The external-link button at the end of the row opens it in a new tab and does not select it.
Use it when people may want to inspect an option before choosing it. A row with one job only is a plain Combobox item. In React, Base UI does not open that second link.
Installation
Anatomy
Usage
<Combobox items={repositories}>
<ComboboxTrigger
render={
<Button className="w-[300px] justify-between" variant="outline" />
}
>
<ComboboxValue placeholder="Select repository..." />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput placeholder="Search repositories..." showTrigger={false} />
<ComboboxEmpty>No repository found.</ComboboxEmpty>
<ComboboxList>
{(repo: Repository) => (
<ComboboxItem
className="items-start gap-2 py-3"
key={repo.value}
value={repo}
>
<div className="flex flex-1 flex-col gap-0.5">
<div className="font-medium">{repo.label}</div>
<div className="text-muted-foreground text-xs">
{repo.description}
</div>
</div>
<Button
aria-label={`Open ${repo.label}`}
data-url={repo.url}
onClick={handleOpen}
size="icon-xs"
variant="ghost"
>
{/* The rest of the file is under Installation. */}FAQ
How is each row laid out?
ComboboxItem gets items-start gap-2 py-3. The name in font-medium and the description in muted text-xs fill the row, and the button sits at the end.
Why doesn't the button select the row?
Its click handler calls stopPropagation, so the click never reaches the item.
Then it opens the URL in a new tab.
Can the button be reached from the keyboard?
Not with the arrow keys, which move between rows. Enter on a row selects it. If the second action matters to keyboard users, offer it somewhere else too, such as after the pick.
API Reference
Combobox
Sets items={repositories}, placeholder="Select repository...", placeholder="Search repositories...", showTrigger={false} and value={repo}. The rest is on the Combobox page.
Button
Sets variant="outline", aria-label, Open, repo, label and data-url={repo.url}. The rest is on the Button page.
