Component

Accordion

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

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>

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