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:

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

Go to Settings → API Keys, click the key you want to rotate, and select Rotate. The old key keeps working for 24 hours.

Open by default

Add defaultOpen to render the accordion expanded:

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

Icons

Accordions accept the same icon names as Cards:

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

Tune build concurrency, cache TTLs, and webhook retries.

AccordionGroup

Group related accordions into a single fused stack with <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>

Custom domains are available on Pro and above.

No — certificates are provisioned automatically via Cloudflare.

Most sites build in under a minute.

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

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