Accordion
Collapsible content sections for FAQs and detailed information.
Use the Accordion component to hide content behind a toggle. Group multiple accordions together with AccordionGroup for a clean, bordered container.
<Accordion title="What formats does blodemd support?">
Blode.md uses MDX, which combines standard Markdown with JSX components. You
can also reference OpenAPI specs for auto-generated API docs.
</Accordion>Blode.md uses MDX, which combines standard Markdown with JSX components. You can also reference OpenAPI specs for auto-generated API docs.
Wrap multiple accordions in an AccordionGroup to render them in a single bordered container with dividers:
<AccordionGroup>
<Accordion title="How do I get started?">
Run `npx blodemd init` in your project directory, then `npx blodemd dev` to
preview locally.
</Accordion>
<Accordion title="Can I use custom domains?">
Yes. After deploying, add a custom domain in your project settings and
update your DNS records.
</Accordion>
<Accordion title="Is there a free tier?">
Blode.md offers a generous free tier for open-source and personal projects.
</Accordion>
</AccordionGroup>Run npx blodemd init in your project directory, then npx blodemd dev to
preview locally.
Yes. After deploying, add a custom domain in your project settings and update your DNS records.
Blode.md offers a generous free tier for open-source and personal projects.
Set defaultOpen to expand an accordion on page load:
<Accordion title="This section is open by default" defaultOpen>
You can use this for content that should be visible immediately but still
collapsible.
</Accordion>You can use this for content that should be visible immediately but still collapsible.
Add a description prop to display secondary text below the title:
<Accordion title="Deployment" description="How publishing works">
Run `blodemd push` to deploy your documentation. Changes go live in seconds.
</Accordion>Run blodemd push to deploy your documentation. Changes go live in seconds.
AccordionGroup accepts children (one or more Accordion components) and renders them in a bordered container.
icon |
| ReactNode |
| Icon displayed before the title. |
| Optional |
| — |
children | ReactNode | Content revealed when the accordion is open. | Yes | — |