Accordion

Accordions let users expand and collapse content sections.

Basic Accordion

<Accordion title="Click to expand">

  This content is hidden until the accordion is expanded.

  You can include any content here: text, code, images, or other components.

</Accordion>

With Description

Add a subtitle with the description prop:

<Accordion title="API Reference" description="Authentication endpoints">

  Documentation for authentication API endpoints goes here.

</Accordion>

Default Open

Start expanded with defaultOpen:

<Accordion title="Already Expanded" defaultOpen>

  This accordion starts in the open state.

</Accordion>

With Icon

<Accordion title="Settings" icon="gear">

  Configuration options and settings.

</Accordion>

Accordion Group

Group related accordions together:

<AccordionGroup>
  <Accordion title="Getting Started">

    Introduction and setup instructions.

</Accordion>
  <Accordion title="Configuration">

    Configuration options and settings.

</Accordion>
  <Accordion title="Troubleshooting">

    Common issues and solutions.

</Accordion>
</AccordionGroup>

Properties