Accordion
Collapsible content sections for organizing information into expandable panels. Use Accordion for FAQs, grouped content, or any situation where you want to reduce page clutter while keeping information accessible. Unlike MethodAccordion, which is structured for API methods, Accordion supports any content.
API
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | One or more <AccordionItem> elements. |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The heading shown in the collapsed state. |
defaultOpen | boolean | false | Whether the item starts expanded. |
children | ReactNode | — | Content revealed when expanded. |
Example
Folio is a documentation engine with a native Rust core that uses Nextra and shadcn/ui to produce structured, interactive documentation sites.
Folio generates a modern React-based site with live search, dark mode, and responsive design out of the box. It parses the same Google/NumPy docstrings as Sphinx.
Yes. Folio includes a migration guide for moving existing pages and Sphinx conventions to Markdown.
<Accordion>
<AccordionItem title="What is Folio?">
Folio is a documentation engine with a native Rust core that
uses Nextra and shadcn/ui to produce structured,
interactive documentation sites.
</AccordionItem>
<AccordionItem title="How does it compare to Sphinx?">
Folio generates a modern React-based site with live
search, dark mode, and responsive design out of the box.
</AccordionItem>
<AccordionItem title="Can I migrate from Sphinx?" defaultOpen>
Yes. Folio includes a migration guide for moving existing
pages and Sphinx conventions to Markdown.
</AccordionItem>
</Accordion>Markdown details
For a single section, a plain <details> element with a <summary> collapses too, with no import.
Do I need to import anything?
No. <details> and <summary> are HTML elements, and Folio renders them as a collapsible section.
<details>
<summary>Do I need to import anything?</summary>
No. `<details>` and `<summary>` are HTML elements, and Folio
renders them as a collapsible section.
</details>