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 Vue, Ark UI draws the rules. It does not name the sections.
Installation
Anatomy
Usage
<Combobox
:collection="collection"
@input-value-change="handleInputValueChange"
@value-change="handleValueChange"
:positioning="{ getAnchorElement: () => triggerRef }"
selectionBehavior="clear"
:value="value"
>
<ComboboxTrigger
:class='cn(
buttonVariants({ variant: "outline" }),
"w-[200px] justify-between"
)'
ref="triggerRef"
>
{{ selected ? selected.label : "Select page..." }}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search..." :showTrigger="false" />
<ComboboxEmpty>No page found.</ComboboxEmpty>
<ComboboxList>
<template v-for="([group, items], index) in groups" :key="group">
<ComboboxGroup :aria-label="group">
<ComboboxItem v-for="item in items" :item="item" :key="item.value">
{{ item.label }}
</ComboboxItem>
</ComboboxGroup>
<ComboboxSeparator v-if="index < groups.length - 1" />FAQ
How are the sections built?
Each section is a ComboboxGroup and a ComboboxSeparator sits between two groups.
The items carry a group field and groupBy in useListCollection splits them, so collection.group() returns the sections in order.
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. Separators are drawn only between the groups that are left.
API Reference
Combobox
Sets collection="collection", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. The rest is on the Combobox page.
