AG Design System

Component

Accordion

Collapsible panels for showing and hiding content sections. Smooth height animation on open/close.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/accordion

Usage

Use accordions to progressively disclose content and reduce visual clutter. Prefer single mode for FAQs.

Playground

Preview

Configure

No

Allow multiple panels to be open simultaneously

Code

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

Variants & States

Supported variants, sizes, and interaction states for this component.

Modes

  • Single (one panel open)
  • Multiple

States

  • Collapsed
  • Expanded

Do

  • Use single mode for FAQs so only one answer is visible at a time
  • Keep trigger labels short and scannable

Don't

  • Don't hide critical information in accordions, use cards instead
  • Don't nest accordions inside accordions