Accordion

Overview

The Accordion and AccordionGroup components let you hide and reveal content on demand. They are ideal for FAQs, optional details, and progressive disclosure of complex information.

• Accordion: A single collapsible section with a title and toggle.
• AccordionGroup: A wrapper for grouping multiple accordions together.

Example

Usage

Basic accordion

<Accordion title="What is this?">
  This is the content inside the accordion.
</Accordion>

Open by default

Use defaultOpen to have an accordion expanded on initial render:

<Accordion title="Already open" defaultOpen>
  This accordion starts expanded.
</Accordion>

Grouped accordions

Wrap multiple Accordion components in AccordionGroup for consistent spacing:

<AccordionGroup>
  <Accordion title="First question">
    Answer to the first question.
  </Accordion>
  <Accordion title="Second question">
    Answer to the second question.
  </Accordion>
  <Accordion title="Third question">
    Answer to the third question.
  </Accordion>
</AccordionGroup>

Accordion with rich content

Accordion content supports any valid MDX including code blocks and other components:

    <Accordion title="How do I install the package?">
        Run the following command
        ```bash
            npm install my-package
        ```
 
            Then import it in your project:
 
        ```ts
        import { something } from "my-package";
        ```
    </Accordion>

Props

Accordion

AccordionGroup

Accessibility Notes

• The toggle is a <button> element and is fully keyboard accessible.
• Use clear, descriptive titles so users can anticipate the content before expanding.
• Avoid nesting accordions inside other accordions as this creates confusing hierarchy.