Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Multi-Level Nested Accordion for React

Help topics in one stack. Account starts open, and each article expands with its own chevron.

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 React, Base UI does not open an article with its topic.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Accordion anatomy: root, item, item trigger, item content, item indicator

Usage

<Accordion className="w-full max-w-md -space-y-px" defaultValue={["account"]}>
  {topics.map((topic) => (
    <AccordionItem
      className="overflow-hidden border bg-background first:rounded-t-lg last:rounded-b-lg"
      key={topic.value}
      value={topic.value}
    >
      <AccordionTrigger className="px-4 py-3 hover:no-underline">
        {topic.title}
      </AccordionTrigger>
      <AccordionContent className="p-0">
        {topic.articles.map((article) => (
          <Collapsible
            className="border-t bg-accent px-4 py-3"
            key={article.title}
          >
            <CollapsibleTrigger className="group flex gap-2 text-start font-medium">
              <ChevronDownIcon
                aria-hidden="true"
                className="mt-0.5 size-4 shrink-0 opacity-60 transition-transform duration-200 group-aria-expanded:rotate-180"
              />
              {article.title}
            </CollapsibleTrigger>
            <CollapsibleContent>
              <div className="ps-6 pt-1 text-muted-foreground text-sm">
                {article.content}
              </div>
            </CollapsibleContent>
          </Collapsible>
        ))}
      </AccordionContent>
{/* The rest of the file is under Installation. */}

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.

Do the articles start open?

No. Each Collapsible renders closed until its own trigger is pressed. Opening Account shows the article titles.

How do I let several parent sections stay open at once?

One open item is the default. Add multiple to Accordion to let several stay open, and list every item that should start open in the defaultValue array.

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.

All 21 accordion examples