---
title: Accordion
description: Collapsible content sections that let users expand only what they need. Ideal for FAQs, feature lists, and configuration options.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Collapsible sections -- readers see the heading and expand for details. Supports icons, descriptions, and grouping.

Use Accordions when:
- **FAQs** - Users scan questions and expand answers
- **Feature lists** - Each feature gets a section with details
- **Configuration options** - Group settings by category
- **Step-by-step guides** with expandable detail

## Usage

```mdx
<Accordion title="Advanced Configuration">
  Optional details go here.
</Accordion>
```

## 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>

```mdx
<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>

```mdx
<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>

```mdx
<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>

```mdx
<Accordion title="Settings" icon="gear">
  Configuration options and settings.
</Accordion>
```

## Accordion vs Expandable

| Feature | Accordion | Expandable |
|---------|-----------|------------|
| Icons | Yes | No |
| Descriptions | Yes (subtitle) | No |
| Grouping | AccordionGroup | Standalone |
| Visual weight | Heavier, section-like | Lighter, inline |
| Best for | FAQs, feature lists | Supplementary content |

**Rule of thumb:** Use Accordion when sections are equally important and users choose between them. Use Expandable for "nice to have" details that don't need visual prominence.

## Props

<ParamField name="title" type="string" required>
  Accordion header text.
</ParamField>

<ParamField name="description" type="string">
  Subtitle displayed below the title.
</ParamField>

<ParamField name="icon" type="string">
  Font Awesome icon name (e.g., "gear", "settings").
</ParamField>

<ParamField name="iconType" type="string" default="light">
  Icon style variant: light, regular, or solid.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Start in expanded state.
</ParamField>

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>