shadcn.io is an independent project built on shadcn/ui
An icon, a title, and a muted subtitle on every trigger, with the chevron on the right. Documents starts open, and its subtitle reads Contracts, invoices and briefs.
Use it when people need a few words before they open a section. If they always need the body, use Tabs. In Svelte, Ark UI does not remember the open section.
Installation
Anatomy
Usage
<Accordion class="w-full max-w-md -space-y-px" defaultValue={["documents"]}>{#each items as item (item.value)}<AccordionItem class="overflow-hidden border bg-background px-4 first:rounded-t-lg last:rounded-b-lg" value={item.value}><AccordionTrigger class="hover:no-underline"><span class="flex items-center gap-3"><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>{/each}</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.
How is the subtitle marked up?
The title and subtitle stack in flex flex-col items-start text-start beside the icon. The subtitle is text-sm text-muted-foreground. 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.
Why does Documents start open?
defaultValue={["documents"]} opens Documents on first render. The string matches that item's value.
API Reference
Accordion
Sets defaultValue={["documents"]} and value={item.value}. The rest is on the Accordion page.
