---
title: Accordions
description: Accordion and AccordionGroup components for collapsible content sections.
icon: list-ordered
---

# Accordions

Accordions hide secondary content behind an animated, expandable header. Use them for FAQs, advanced options, or any detail that most readers can skip.

## Accordion

Wrap collapsible content in `<Accordion>` with a `title`:

```mdx
<Accordion title="How do I rotate an API key?">
  Go to **Settings → API Keys**, click the key you want to rotate, and select
  **Rotate**. The old key keeps working for 24 hours.
</Accordion>
```

<Accordion title="How do I rotate an API key?">
  Go to **Settings → API Keys**, click the key you want to rotate, and select
  **Rotate**. The old key keeps working for 24 hours.
</Accordion>

### Open by default

Add `defaultOpen` to render the accordion expanded:

```mdx
<Accordion title="Prerequisites" defaultOpen>
  You need a Syntext account and the `stx` CLI installed.
</Accordion>
```

### Icons

Accordions accept the same `icon` names as [Cards](/components/cards):

```mdx
<Accordion title="Advanced configuration" icon="settings">
  Tune build concurrency, cache TTLs, and webhook retries.
</Accordion>
```

<Accordion title="Advanced configuration" icon="settings">
  Tune build concurrency, cache TTLs, and webhook retries.
</Accordion>

## AccordionGroup

Group related accordions into a single fused stack with `<AccordionGroup>`:

```mdx
<AccordionGroup>
  <Accordion title="Which plans include custom domains?">
    Custom domains are available on Pro and above.
  </Accordion>
  <Accordion title="Can I bring my own SSL certificate?">
    No — certificates are provisioned automatically via Cloudflare.
  </Accordion>
  <Accordion title="How long do builds take?">
    Most sites build in under a minute.
  </Accordion>
</AccordionGroup>
```

<AccordionGroup>
  <Accordion title="Which plans include custom domains?">
    Custom domains are available on Pro and above.
  </Accordion>
  <Accordion title="Can I bring my own SSL certificate?">
    No — certificates are provisioned automatically via Cloudflare.
  </Accordion>
  <Accordion title="How long do builds take?">
    Most sites build in under a minute.
  </Accordion>
</AccordionGroup>

## Props

| Prop | Type | Description |
|------|------|-------------|
| `title` | `string` | Header text shown in the toggle button (required) |
| `icon` | `string` | Optional icon name or emoji shown before the title |
| `defaultOpen` | `boolean` | Render expanded on page load |

<Tip>
Prefer `<Accordion>` over `<Expandable>` for reader-facing FAQ content — accordions
have a full-width header, icon support, and grouped styling.
</Tip>