Accordion

A vertically stacked set of interactive headings that each reveal an associated panel. Built on @base-ui/react/accordion. Panels open and close with animated transitions.

Anatomy

The root <Accordion> wraps one or more <AccordionItem> elements. Each item contains an <AccordionTrigger> (the clickable header) and an <AccordionContent> (the collapsible body).

Basic Usage

Multiple items stack vertically. Each item collapses independently.

FAQ Pattern

A common use case for accordions is FAQ sections on marketing or help pages.

Design Guidelines

Do

  • Use for progressive disclosure. Accordions are ideal when users need some details but not all at once.
  • Keep trigger labels concise. The trigger should describe the content clearly so users know whether to expand it.
  • Group related items. All accordion items should belong to the same conceptual category.

Don't

  • Don't hide critical information. If users need content to complete a task, show it directly rather than behind a trigger.
  • Don't nest accordions inside accordions. It creates confusing depth and is hard to navigate with a keyboard.
  • Don't use for primary navigation. Use tabs or a sidebar instead — accordions are for secondary, optional details.

Developer Reference

Accessibility

  • Built on the WAI-ARIA Accordion pattern — aria-expanded and aria-controls are managed automatically.
  • Keyboard navigation: Space / Enter toggle the focused item; ↑ / ↓ move between triggers.
  • The AccordionTrigger renders as a <button> inside an <h3> header — no additional heading markup needed.

Usage

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

<Accordion className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles.
    </AccordionContent>
  </AccordionItem>
</Accordion>