Accordion

InstallCopy Anchor Link

pnpm exec vegastack-design verify accordion

pnpm dlx shadcn@4.21.0 add @vegastack/accordion

UsageCopy Anchor Link

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

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>;

value and defaultValue are arrays, even when only one section can be open — the single-open rule is the default, and multiple lifts it.

AnatomyCopy Anchor Link

ExamplesCopy Anchor Link

CompositionCopy Anchor Link

An AccordionItem pairs a trigger with the panel it reveals, and the value on the item is what defaultValue and value on the root name.

Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

BasicCopy Anchor Link

One section at a time, with the first open. Closing the open section by clicking its own trigger is allowed — the accordion can rest with nothing expanded.

MultipleCopy Anchor Link

multiple on the root lets several sections stay open at once. Everything else is unchanged: the value is still the array of open items.

DisabledCopy Anchor Link

disabled on an AccordionItem takes that section out of play. The trigger keeps its pointer events (FRM-4), so a tooltip or a hover explanation can still say why it is unavailable.

BordersCopy Anchor Link

The accordion ships with a hairline between items and nothing around them. Add border to the root and border-b last:border-b-0 to each item to box the whole stack and keep the rules even.

CardCopy Anchor Link

Dropped into CardContent, the accordion inherits the card's padding, so the triggers line up with the card title above them.

RTLCopy Anchor Link

Wrap the subtree in DirectionProvider direction="rtl". The trigger's text alignment and the chevron's position are logical (text-start, ms-auto), so they follow the reading direction without a per-component override.

API ReferenceCopy Anchor Link

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, multiple, disabled, keepMounted and hiddenUntilFound on the root, value and disabled on an item, plus className, ref and render everywhere.

AccessibilityCopy Anchor Link

• Renders Base UI's Accordion: each trigger is a button inside a heading, carrying aria-expanded and aria-controls, and the panel it names is a labelled region.
• Tab moves between triggers, Enter and Space toggle the focused section. Base UI follows the 2024 APG update that removed roving focus from the pattern, so every trigger is its own tab stop.
• A disabled item's trigger is aria-disabled, not natively disabled, and keeps its pointer events (FRM-4) — it stays reachable and hoverable so the reason can be explained in place.
• Focus is the global :focus-visible background tint from base.css; there is no ring glow on a trigger, and forced colors retain their separate outline.
• The chevrons are decoration: they are swapped by an aria-expanded variant and never carry the state on their own.

Do / Don'tCopy Anchor Link

DeviationsCopy Anchor Link

Upstream's file plus packages/ui/upstream/patches/accordion.patch. Every hunk:

• FOC-1, FOC-6 — outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring goes from AccordionTrigger. base.css owns the no-ring focus tint and a separate forced-colors outline.
• FRM-4 — aria-disabled:pointer-events-none is dropped, so a disabled section header stays hoverable and a Tooltip can explain why it is unavailable. The opacity half stays.
• DOC-2 — import { cn } from "cn" becomes @vegastack/design; our npm layer owns cn.
• DOC-1 — prettier reflow plus the registry-stamp.mjs provenance header the three-copy model needs; no decision of its own.