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.

Basic accordion


<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.

Accordion group

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 `blodemd new` in your project directory, then `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 blodemd new in your project directory, then 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.

Default open

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.

With a description

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.

Props

Accordion

Field	Type	Description	Required	Default
`title`	string	The heading text shown in the toggle button.	Yes	—
`description`	string	Secondary text displayed below the title.	Optional	—
`defaultOpen`	boolean	Whether the accordion starts expanded.	Optional	false
`id`	string	Custom anchor ID. Defaults to a slugified version of the title.	Optional	—
`icon`	ReactNode	Icon displayed before the title.	Optional	—
`children`	ReactNode	Content revealed when the accordion is open.	Yes	—

AccordionGroup

AccordionGroup accepts children (one or more Accordion components) and renders them in a bordered container.