AccordionGroup
Group related accordions into a single, neatly stacked disclosure set for FAQs, rollout notes, or onboarding checklists.
For isolated previews, theme switching, and sandbox editing, open the AccordionGroup 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.
FAQ Stack
Common product questions grouped into one compact surface.
Yes. HolyDocs works well when overview pages are hand-written and endpoint pages are generated.
For large component libraries, yes. It improves search, linking, and content ownership.
Yes. Each accordion still toggles independently, but the borders and spacing read as one unit.
mdx<AccordionGroup> <Accordion title="Can I mix hand-written and generated pages?"> Yes. HolyDocs works well when overview pages are hand-written and endpoint pages are generated. </Accordion> <Accordion title="Should every component get its own page?"> For large component libraries, yes. It improves search, linking, and content ownership. </Accordion> <Accordion title="Do grouped accordions keep their own open state?"> Yes. Each accordion still toggles independently, but the borders and spacing read as one unit. </Accordion></AccordionGroup>
Launch Checklist
Great for progressive rollout notes or release-readiness gates.
Confirm screenshots, changelog entries, and migration notes are published before release.
Gate production exposure behind a feature flag and monitor logs during the first hour.
Share a canned response with support so they can answer setup questions immediately.
mdx<AccordionGroup> <Accordion title="Documentation"> Confirm screenshots, changelog entries, and migration notes are published before release. </Accordion> <Accordion title="Rollout"> Gate production exposure behind a feature flag and monitor logs during the first hour. </Accordion> <Accordion title="Support"> Share a canned response with support so they can answer setup questions immediately. </Accordion></AccordionGroup>
Props
This component has no configurable props. Use its child content to shape the output.
Usage
Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.
mdx<AccordionGroup> <Accordion title="Can I mix hand-written and generated pages?"> Yes. HolyDocs works well when overview pages are hand-written and endpoint pages are generated. </Accordion> <Accordion title="Should every component get its own page?"> For large component libraries, yes. It improves search, linking, and content ownership. </Accordion> <Accordion title="Do grouped accordions keep their own open state?"> Yes. Each accordion still toggles independently, but the borders and spacing read as one unit. </Accordion></AccordionGroup>
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
Collapsible sections for FAQs, optional details, and content that benefits from progressive disclosure.
More
- Interactive playground: AccordionGroup on holydocs.com
- Component library index: /components