shadcn.io is an independent project built on shadcn/ui
Each trigger has an icon, a title, a muted subtitle, and a plus that turns into a minus. The sections are Documents, Projects, Workspace settings, and Team members, and Documents starts open.
Use it on a dense workspace home where every cue helps. If the list is one topic deep, a Collapsible is enough. In Vue, Ark UI does not provide the icons or the subtitles.
Installation
Anatomy
Usage
<Accordion class="w-full max-w-md -space-y-px" :defaultValue='["documents"]'>
<AccordionItem
v-for="item in items"
class="overflow-hidden border bg-background px-4 first:rounded-t-lg last:rounded-b-lg"
:key="item.value"
:value="item.value"
>
<AccordionTrigger class="hover:no-underline **:data-[slot=accordion-trigger-icon]:hidden">
<span class="flex w-full items-center justify-between gap-3">
<span class="flex items-center gap-3">
<component
:is="item.icon"
aria-hidden="true"
class="size-4 shrink-0 text-muted-foreground"
/>
<span class="flex flex-col items-start text-start">
<span>{{ item.title }}</span>
<span class="text-muted-foreground text-sm">{{ item.subtitle }}</span>
</span>
</span>
<span class="relative size-4 shrink-0">
<PlusIcon
aria-hidden="true"
class="absolute inset-0 size-4 text-muted-foreground transition-opacity duration-200 group-aria-expanded/accordion-trigger:opacity-0"
/>
<MinusIcon
aria-hidden="true"
class="absolute inset-0 size-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-aria-expanded/accordion-trigger:opacity-100"
/>
</span>
</span>
<!-- The rest of the file is under Installation. -->FAQ
What is inside each trigger?
A gap-3 row holds the category icon and a stack of the title over the subtitle. justify-between pushes the plus and minus to the end. The icon is FileTextIcon, FolderIcon, SettingsIcon or UsersIcon, at size-4 with aria-hidden.
How does the plus turn into a minus?
**:data-[slot=accordion-trigger-icon]:hidden on AccordionTrigger hides the built-in chevron. PlusIcon and MinusIcon share one relative size-4 box, and group-aria-expanded/accordion-trigger fades the plus out and the minus in over duration-200. Both icons are aria-hidden and text-muted-foreground.
How is the subtitle marked up?
The subtitle is text-sm text-muted-foreground under the title, in flex flex-col items-start text-start. Documents uses Contracts, invoices and briefs.
Why is the answer indented?
ps-7 on AccordionContent matches the 16px icon plus the 12px gap-3, so the answer lines up under the title.
API Reference
Accordion
Sets defaultValue="[documents]", v-for="item in items", key="item.value" and value="item.value". The rest is on the Accordion page.
