shadcn.io is an independent project built on shadcn/ui
Each trigger has an icon, a title, and a muted subtitle, with the chevron on the right. Documents starts open, and its subtitle names contracts, invoices, and briefs.
Use it when the title alone is not enough to pick a section. A single block of details can be a Collapsible. In Vue, Ark UI does not write 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">
<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>
</AccordionTrigger>
<AccordionContent class="ps-7">
<p class="text-muted-foreground">{{ item.content }}</p>
</AccordionContent>
</AccordionItem>
</Accordion>FAQ
Where do the category icons come from?
Each item stores FileTextIcon, FolderIcon, SettingsIcon or UsersIcon. The trigger renders it at size-4 with text-muted-foreground, shrink-0 and aria-hidden, in a gap-3 row before the text.
Where is the chevron?
AccordionTrigger draws its own chevron on the right. This trigger does not hide accordion-trigger-icon, and hover:no-underline is set on the trigger.
How is the subtitle marked up?
Title and subtitle stack in flex flex-col items-start text-start. The subtitle is text-sm text-muted-foreground.
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.
