Accordion

Install

pnpm dlx shadcn@latest add @vegastack/accordion

Usage

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

<Accordion defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>Shipping</AccordionTrigger>
    <AccordionContent>Ships in 2–3 business days.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns">
    <AccordionTrigger>Returns</AccordionTrigger>
    <AccordionContent>30-day return window.</AccordionContent>
  </AccordionItem>
</Accordion>;

Anatomy

Accordion is a compound component built on Base UI Accordion. Compose the parts inside the root, pairing each AccordionTrigger with its AccordionContent inside a single AccordionItem:

<Accordion multiple defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>Shipping</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns" disabled>
    <AccordionTrigger>Returns</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

• Accordion — the root that groups the items and owns single/multiple open behavior (data-slot="accordion"). Single-open by default; pass multiple when several items may stay open. Controlled via value/onValueChange (an array), or uncontrolled via defaultValue.
• AccordionItem — a single collapsible section identified by value (data-slot="accordion-item"). Pass disabled to lock it. Renders a bottom rule between stacked items.
• AccordionTrigger — the header button that toggles the panel (data-slot="accordion-trigger"). Open state is exposed as data-panel-open, which rotates the trailing chevron. Wrapped in an AccordionHeader heading for accessible structure.
• AccordionContent — the collapsible panel shown when its trigger is open (data-slot="accordion-content"). Animates its height between 0 and the measured content height.

Examples

Single-open is the default: opening one section collapses the previously open section.

Multiple-open via multiple — several sections can stay expanded at once, and a section can be disabled:

Controlled

Drive the open state yourself with value (an array of open item ids) and onValueChange. Use this when the open section needs to stay in sync with other state — deep-linking, a wizard step, or mutually exclusive panels you coordinate externally. Pass defaultValue instead for the uncontrolled case.

const [value, setValue] = useState<string[]>(["account"]);

<Accordion value={value} onValueChange={(next) => setValue(next)}>
  <AccordionItem value="account">
    <AccordionTrigger>Account</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
  <AccordionItem value="billing">
    <AccordionTrigger>Billing</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>;

API Reference

Accordion, AccordionItem, AccordionTrigger, and AccordionContent add no props of their own — each accepts everything the corresponding Base UI Accordion part accepts (Root, Item, Trigger, Panel): value / defaultValue / onValueChange and multiple on the root, value and disabled on an item, plus className, ref, and render everywhere.

Accessibility

• Built on Base UI Accordion: each AccordionTrigger is a <button> wrapped in a heading, wired to its panel with aria-controls/aria-expanded; each panel is labelled by its trigger.
• The panel animates height with the --accordion-panel-height CSS variable on Base UI's data-starting-style/data-ending-style transition hooks — no layout-thrashing measurement loops.
• Each trigger is keyboard-focusable and relies on the browser's default focus indicator — the component never sets outline: none, so the platform focus ring stays visible.
• Disabled items carry data-disabled, are not focusable for activation, and cannot be expanded.

Do / Don't