Accordion

The <Accordion> component creates expandable sections with searchable, SEO-friendly content that remains accessible even when collapsed. Use accordions for FAQs, documentation sections, settings panels, or any content where progressive disclosure improves readability.

You can use single accordions or group multiple accordions together with <AccordionGroup>.

Usage

Section 1

Content for section 1, expanded by default

Section 2

Content for section 2

Markdown

1 <AccordionGroup>
2   <Accordion title="Section 1" defaultOpen={true}>
3     Content for section 1, expanded by default
4   </Accordion>
5   <Accordion title="Section 2">
6     Content for section 2
7   </Accordion>
8 </AccordionGroup>

Variants

Within each accordion, you can embed images, videos, and other components (callouts, code blocks, etc) within accordions for rich interactive content.

Multimedia

Text content with multimedia

Markdown

1 <Accordion title="Text content with multimedia">
2 <Frame caption="Sample image">
3   <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
4 </Frame>
5 </Accordion>

Nested components

Here’s a callout nested in an accordion

Markdown

1 <Accordion title="Nested components">
2 <Note>
3   Here's a callout nested in an accordion
4 </Note>
5 </Accordion>

Default open

Accordion open by default

Use the defaultOpen property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.

Markdown

1 <Accordion title='Accordion open by default' defaultOpen={true}>
2   Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
3 </Accordion>

Properties

title

stringRequired

The title shown in the accordion header

children

string | JSXRequired

The content to be displayed when the accordion is expanded. Can include text, markdown, and components.

defaultOpen

boolean

Whether the accordion should be open when the page loads. If not specified, the accordion will be collapsed by default.

string

The unique ID for the accordion. Used for linking and navigation. If not specified, an ID will be generated automatically.

className

string

Additional CSS classes to apply to the accordion

1	<AccordionGroup>
2	<Accordion title="Section 1" defaultOpen={true}>
3	Content for section 1, expanded by default
4	</Accordion>
5	<Accordion title="Section 2">
6	Content for section 2
7	</Accordion>
8	</AccordionGroup>

1	<Accordion title="Text content with multimedia">
2	<Frame caption="Sample image">
3	<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
4	</Frame>
5	</Accordion>

1	<Accordion title="Nested components">
2	<Note>
3	Here's a callout nested in an accordion
4	</Note>
5	</Accordion>

1	<Accordion title='Accordion open by default' defaultOpen={true}>
2	Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
3	</Accordion>