shadcn.io is an independent project built on shadcn/ui
VS Code and Figma sit under Favorites with a filled star. Slack, Notion, GitHub, and Linear follow under All Tools. A rule separates the two groups.
Use it where a few options get most of the picks and should stay at the top. A recent list, rather than a starred one, is the same Combobox with a clock. In Solid, Ark UI does not decide which rows are favorites.
Installation
Anatomy
Usage
<Combobox collection={_listCollection.collection()} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{
getAnchorElement: () => triggerRef
}} selectionBehavior="clear" value={value()}>
<ComboboxTrigger class={cn(buttonVariants({
variant: "outline"
}), "w-[250px] justify-between")} ref={triggerRef}>
{selected() ? selected()!.label : "Select tool..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search tools..." showTrigger={false} />
<ComboboxEmpty>No tool found.</ComboboxEmpty>
<ComboboxList>
{groups().map(([group, items], index) => <>
<ComboboxGroup heading={group}>
{items.map(item => <ComboboxItem class="gap-2" item={item}>
{item.group === "Favorites" ? <StarIcon aria-hidden="true" class="size-3 fill-warning text-warning" /> : null}
{item.label}
</ComboboxItem>)}
</ComboboxGroup>
{index < groups().length - 1 ? <ComboboxSeparator /> : null}
</>)}
</ComboboxList>
</ComboboxContent>
</Combobox>FAQ
How are the two sections built?
Two ComboboxGroups, Favorites and All Tools, with a ComboboxSeparator between them.
The heading text comes from heading on ComboboxGroup, and groupBy in useListCollection splits the items.
How is the star drawn?
A StarIcon at size-3 with fill-warning text-warning, rendered only in the Favorites rows. It has aria-hidden, since the heading already says Favorites.
Why don't favorites appear twice?
All Tools lists only the tools that aren't favorites. A tool can be in one group at a time, so it has one row and one value.
Does the search cover both groups?
Yes. Typing filters both, and a group with no matches is hidden. No tool found. shows when neither has one.
What does the button show?
Select tool... until a tool is picked, then its label, whichever group it came from.
How would people manage their favorites?
Keep the favorite list in state or user settings and build both groups from it. A star button on each row, as in Items with Action Buttons, can add and remove them.
API Reference
Combobox
Sets collection={_listCollection.collection()}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
