shadcn.io is an independent project built on shadcn/ui
Project Alpha and Project Beta sit under Recent with a clock icon. Project Charlie, Project Delta, and Project Echo follow under All Projects.
Use it in a switcher where people go back to the same few projects. Files, rather than projects, can use the same recent group on a Combobox. In Vue, Ark UI does not know which projects are recent.
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-[250px] justify-between"
)'
ref="triggerRef"
>
{{ selected ? selected.label : "Select project..." }}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search projects..." :showTrigger="false" />
<ComboboxEmpty>No project found.</ComboboxEmpty>
<ComboboxList>
<template v-for="([group, items], index) in groups" :key="group">
<ComboboxGroup :heading="group">
<ComboboxItem v-for="item in items" class="gap-2" :item="item" :key="item.value">
<ClockIcon v-if='item.group === "Recent"' aria-hidden="true" class="size-3 opacity-50" />{{ item.label }}
</ComboboxItem>
</ComboboxGroup>
<ComboboxSeparator v-if="index < groups.length - 1" />FAQ
How are Recent and All Projects built?
Two ComboboxGroups with a ComboboxSeparator between them. Each project belongs to one of them.
How is the clock drawn?
A ClockIcon at size-3 opacity-50, rendered only in the Recent rows and hidden from screen readers.
Why aren't recent projects listed twice?
All Projects lists only those that aren't recent, so each project has one row and one value.
Does the search cover both groups?
Yes. A group with no matches is hidden, and No project found. shows when neither has one.
How do I keep Recent up to date?
The demo's list is fixed. In an app, store the last few picks, newest first, and build both groups from them on each render. Recent Selections Section shows a version that updates as you pick.
API Reference
Combobox
Sets collection="collection", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. The rest is on the Combobox page.
