Accordion

Use Prosefly’s MDX component editor to edit expandable sections and FAQ content while keeping your Fumadocs or Prosefly component syntax.

Supported profiles

The same editor supports the Astro, Starlight, Fumadocs, and Prosefly profiles. Select the profile that matches your site to see the component syntax and controls available for that integration.

Edit in Visual

Expand an item to work on its body and edit its title in the component. Use the group’s add-item action to create another item. Item controls let you move or remove an item. Group and item properties depend on the profile.

accordion.mdx

FumadocsProsefly

VisualSource

Reset example

Loading editor…

An interactive example. Changes stay on this page.

Source example

import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

<Accordions type="multiple">
  <Accordion title="Where are drafts saved?" value="drafts">
    Drafts stay in the Content Space until you publish them.
  </Accordion>
  <Accordion title="Can I keep my existing site?" value="site">
    Your current app and build pipeline continue to serve the published content.
  </Accordion>
</Accordions>

Profile differences

Keep item values unique where used. Expanding an item for editing is distinct from setting its published default-open properties. Starlight’s HTML details content is a separate form, not the Accordion component shown here.

Starlight Details

Starlight uses the native HTML <details> element for disclosure content. Use the example below when your page needs a simple expandable note rather than a Fumadocs or Prosefly Accordion group.

details.mdx

Starlight

VisualSource

Reset example

Loading editor…

An interactive example. Changes stay on this page.

Source example

<details open>
  <summary>What does the editor preserve?</summary>

The body remains editable in Visual mode.

</details>

Related MDX guides

Read next: Callout · Tabs · Steps.