Accordion

InstallationCopy Anchor Link

{
  "registries": {
    "@rabtx": "http://localhost:3002/r/{name}.json"
  }
}

npx shadcn@latest add @rabtx/accordion

npx shadcn@latest add http://localhost:3002/r/accordion.json

The accordion is built on Collapsible, which the command installs with it.

UsageCopy Anchor Link

Installed from the registry, import from @/components/ui/accordion; inside this monorepo, from @rabtx/ui/accordion. The API is shadcn's.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@rabtx/ui/accordion";

export function Faq() {
  return (
    <Accordion type="single" collapsible defaultValue="refunds">
      <AccordionItem value="plans">
        <AccordionTrigger>Can I change plans later?</AccordionTrigger>
        <AccordionContent>Yes. Upgrades apply at once and are prorated.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="refunds">
        <AccordionTrigger>Do you offer refunds?</AccordionTrigger>
        <AccordionContent>Within 14 days of any charge, no questions asked.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Every item is a <details> and its trigger the <summary>, so the trigger must be the item's first child and everything after it is what folds. A single accordion gives its items one name, so the browser itself keeps one open, even before the page hydrates.

VariantsCopy Anchor Link

separated (the default) is one joined stack: the open item lifts out with a gap on either side and the rows around it round the corners that face it. cards makes every item its own card, and flush is a plain list divided by lines.

MultipleCopy Anchor Link

type="multiple" lets any number of items open; value and defaultValue are arrays.

FlushCopy Anchor Link

Collapsible and disabledCopy Anchor Link

A single accordion keeps its open item open unless it is collapsible (as in Radix and the WAI-ARIA pattern); that trigger reports aria-disabled while it cannot close. A disabled item is dimmed, leaves the Tab order and is skipped by the arrow keys.

ControlledCopy Anchor Link

value and onValueChange control it. "" means none open (single).

Find in pageCopy Anchor Link

Closed content is still in the page. Find in page (Ctrl+F), a link to text inside it (#:~:text=) or a link to an id inside it opens the item, because the browser opens a <details> itself (Chromium; other browsers keep it closed). The accordion takes that as a request like a press: a single accordion moves to the item, and a controlled one sees onValueChange. Native <details> does this without hidden="until-found".

APICopy Anchor Link

Accordion takes everything a div takes, plus:

AccordionItem takes everything a details takes except open and name, plus a required value and disabled. AccordionTrigger takes everything a summary takes, plus icon (a decorative icon before the title). AccordionContent takes everything a div takes; it is a region named by its trigger.

Outside React, the class names are exported from @rabtx/ui/accordion/styles (accordionClass(), accordionParts). It works with no script:

<div class="rx-accordion rx-accordion-separated">
  <details class="rx-collapsible rx-accordion-item" name="faq" open>
    <summary class="rx-collapsible-trigger rx-accordion-trigger">
      <span class="rx-accordion-title">Do you offer refunds?</span>
      <span class="rx-collapsible-chevron" aria-hidden="true"></span>
    </summary>
    <div class="rx-collapsible-content rx-accordion-content">Within 14 days of any charge.</div>
  </details>
</div>

ThemingCopy Anchor Link

The accordion reads only the theme tokens.

How the motion worksCopy Anchor Link

AccessibilityCopy Anchor Link

• Each trigger is a <summary>: a button with its expanded state, toggled by Enter and Space, reported by the browser. Each panel is a region named by its trigger.
• Up and down arrows move between triggers and wrap; Home and End jump to the ends; disabled items are skipped. Tab moves through triggers and the content of open items.
• Closed content is out of the accessibility tree and the Tab order (the browser hides it).
• Keyboard focus shows a 2px ring on the trigger.
• With reduced motion nothing grows, turns or blurs; content fades in 100ms. With data-motion="off" every state changes at once.