Accordion
Collapsible sections for FAQs, optional details, and content that benefits from progressive disclosure.
For isolated previews, theme switching, and sandbox editing, open the Accordion playground on holydocs.com .
When to use
Use this component when you need stronger document structure, annotation, or narrative pacing inside a page.
Live Examples
Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.
Collapsed
Default closed state.
HolyDocs is an AI-native documentation platform built for modern teams.
mdx<Accordion title="What is HolyDocs?"> HolyDocs is an AI-native documentation platform built for modern teams.</Accordion>
Default Open
Starts expanded on page load.
This accordion is open by default so readers see the content immediately.
mdx<Accordion title="Quick answer" defaultOpen> This accordion is open by default so readers see the content immediately.</Accordion>
Group
Multiple accordions wrapped in a group.
Plans are billed monthly or annually. You can upgrade or downgrade at any time.
Yes — export to PDF or Markdown with one click from the dashboard.
Absolutely. The free tier includes up to 3 projects and 50 AI requests per month.
mdx<AccordionGroup> <Accordion title="How does billing work?"> Plans are billed monthly or annually. You can upgrade or downgrade at any time. </Accordion> <Accordion title="Can I export my docs?"> Yes — export to PDF or Markdown with one click from the dashboard. </Accordion> <Accordion title="Is there a free plan?"> Absolutely. The free tier includes up to 3 projects and 50 AI requests per month. </Accordion></AccordionGroup>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | Section title | Label shown on the collapsed header. |
defaultOpen | boolean | false | Whether the accordion starts in the expanded state. |
Usage
Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.
mdx<Accordion title="What is HolyDocs?"> HolyDocs is an AI-native documentation platform built for modern teams.</Accordion>
Tips
- Keep the surrounding copy short so the component remains the focal point instead of becoming redundant chrome.
- Prefer one clear job per component instance. If a block is trying to explain, navigate, and warn at the same time, split it up.
- Check the page in both light and dark mode when you stack multiple content components together. Dense compositions can feel heavier than expected.
Related Components
Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
More
- Interactive playground: Accordion on holydocs.com
- Component library index: /components