shadcn.io is an independent project built on shadcn/ui
Home and Dashboard, then Settings and Profile, then Help and Logout. The sections have no headings. Thin rules are the only split, and a search that misses says No page found.
Use it for a short list with an obvious break, such as navigation. Named groups need a heading, which a Select group can carry too. In React, Base UI draws the rules. It does not name the sections.
Installation
Anatomy
Usage
<Combobox items={pages}>
<ComboboxTrigger
render={
<Button className="w-[200px] justify-between" variant="outline" />
}
>
<ComboboxValue placeholder="Select page..." />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput placeholder="Search..." showTrigger={false} />
<ComboboxEmpty>No page found.</ComboboxEmpty>
<ComboboxList>
{(group: Group, index: number) => (
<ComboboxGroup
aria-label={group.value}
items={group.items}
key={group.value}
>
<ComboboxCollection>
{(item: Item) => (
<ComboboxItem key={item.value} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxCollection>
{index < pages.length - 1 ? <ComboboxSeparator /> : null}
</ComboboxGroup>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>FAQ
How are the sections built?
Each section is a ComboboxGroup and a ComboboxSeparator sits between two groups.
The data is a list of groups, each with its own items.
Why don't the groups show a heading?
The original layout has none, so the groups only get an aria-label (Primary, Secondary, Other) that screen readers announce. Add a group label when the sections need a name on screen, as in Multiple Groups with Labels.
What happens to the separators during a search?
A group with no matches is hidden. Each separator belongs to the group above it, so it goes away with that group.
API Reference
Combobox
Sets items={pages}, placeholder="Select page...", placeholder="Search...", showTrigger={false}, aria-label={group.value} and items={group.items}. The rest is on the Combobox page.
Button
Sets variant="outline". The rest is on the Button page.
