Accordion
Group supporting details into concise, expandable sections.
MDX lets documentation combine Markdown, JSX, and interactive components.
<Accordion title="Why use MDX?" defaultOpen>
MDX lets documentation combine Markdown, JSX, and interactive components.
</Accordion>Accordion keeps secondary information close to the main explanation without
making the page difficult to scan. Use its concise form for a single disclosure,
or combine it with AccordionItem when readers should be able to open several
related sections independently.
Multiple sections
Use multiple when readers may need to compare answers. Without it, opening one
item closes the previously open item. Give each item a stable value when its
identity matters outside the current page.
Keep essential instructions visible in the article itself. Accordions work best for optional context, troubleshooting notes, or answers to common questions.
Build a release checklist
An accordion can hold rich MDX when readers need to drill into one part of a process at a time. This keeps a launch checklist approachable without losing the useful implementation detail.
<Accordion multiple>
<AccordionItem title="Before launch" value="before-launch">
<Callout type="tip" title="Freeze the copy">
Ask reviewers to approve the final content before publishing.
</Callout>
</AccordionItem>
<AccordionItem title="During launch" value="during-launch">
Keep the status page and release notes open in separate tabs.
</AccordionItem>
<AccordionItem title="After launch" value="after-launch">
Monitor feedback, then capture follow-up work in the next sprint.
</AccordionItem>
</Accordion>Properties
A concise Accordion heading. Providing it creates a single
disclosure from the component's children.
Opens the simple disclosure initially. It defaults to false. In
a multi-item accordion, items manage their own initial state.
Allows more than one AccordionItem to be open at once. It
defaults to false.
The disclosure body in concise mode, or direct AccordionItem
elements in multi-item mode.
An AccordionItem heading. It defaults to
Details when omitted.
An optional stable identifier for an AccordionItem. A unique
value is generated when it is omitted.