Skip to contentSkip to Content
Feedback
ComponentsAccordion

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

PropTypeDefaultDescription
childrenReactNode—One or more <AccordionItem> elements.

AccordionItem

PropTypeDefaultDescription
titlestring—The heading shown in the collapsed state.
defaultOpenbooleanfalseWhether the item starts expanded.
childrenReactNode—Content revealed when expanded.

Example

Folioh is a documentation engine with a native Rust core that uses Nextra and shadcn/ui to produce structured, interactive documentation sites.

Folioh 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. Folioh includes a migration guide for moving existing pages and Sphinx conventions to Markdown.

<Accordion> <AccordionItem title="What is Folioh?"> Folioh 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?"> Folioh 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. Folioh 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 Folioh renders them as a collapsible section.

<details> <summary>Do I need to import anything?</summary> No. `<details>` and `<summary>` are HTML elements, and Folioh renders them as a collapsible section. </details>