shadcn.io is an independent project built on shadcn/ui
Account, Billing, Integrations, and Security in one bordered stack. Account starts open. Each article inside has a chevron and opens on its own.
Use it for topics and articles in one block. The inner rows are a Collapsible, so they do not share the topic toggle. In Solid, Ark UI does not open an article with its topic.
Installation
Anatomy
Usage
<Accordion class="w-full max-w-md -space-y-px" defaultValue={["account"]}>
{topics.map(topic => <AccordionItem class="overflow-hidden border bg-background first:rounded-t-lg last:rounded-b-lg" value={topic.value}>
<AccordionTrigger class="px-4 py-3 hover:no-underline">
{topic.title}
</AccordionTrigger>
<AccordionContent class="p-0">
{topic.articles.map(article => <Collapsible class="border-t bg-accent px-4 py-3">
<CollapsibleTrigger class="group flex gap-2 text-start font-medium">
<ChevronDownIcon aria-hidden="true" class="mt-0.5 size-4 shrink-0 opacity-60 transition-transform duration-200 group-aria-expanded:rotate-180" />
{article.title}
</CollapsibleTrigger>
<CollapsibleContent class="ps-6 pt-1 text-muted-foreground text-sm">
{article.content}
</CollapsibleContent>
</Collapsible>)}
</AccordionContent>
</AccordionItem>)}
</Accordion>FAQ
Why are the articles a Collapsible?
Each article is a Collapsible inside AccordionContent, with its own CollapsibleTrigger. The parent rows stay an Accordion, so each level toggles on its own.
How does an article chevron rotate?
The CollapsibleTrigger has className="group". Its ChevronDownIcon uses group-aria-expanded:rotate-180 and duration-200, with opacity-60 and aria-hidden.
How are the article rows styled?
AccordionContent is p-0, so the rows run to the item edges. Each Collapsible has border-t and bg-accent, and CollapsibleContent uses ps-6 with text-sm text-muted-foreground.
Why does Account start open?
defaultValue={["account"]} opens Account on first render. The string matches that item's value.
API Reference
Accordion
Sets defaultValue={["account"]} and value={topic.value}. The rest is on the Accordion page.
Collapsible
No extra props in this demo. The rest is on the Collapsible page.
