Accordion

Create collapsible content sections with MDX Accordion components for FAQs, tutorials, and documentation.

Overview

The Accordion component creates expandable/collapsible sections to organize content hierarchically. Ideal for:

FAQs
Step-by-step guides
Detailed documentation
Feature explanations

Usage

<Accordion defaultValue="what">
  <AccordionItem value="what">
    <AccordionTrigger>What's Quotion</AccordionTrigger>
    <AccordionContent>
      Quotion is a blogging platform for **Apple Notes**.
      Quotion publish your notes to a subdomain or your domain automatically, with fast page loads, SEO ready, built-in analytics, unlimited newsletters, and looks great. No design or coding skills required.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="why">
    <AccordionTrigger>why should I choose Quotion</AccordionTrigger>
    <AccordionContent>
      Quotion is the easiest service to start a blog with just Apple Notes.

      And you can start a newsletter with *unlimited* subscribers.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Preview

Accordion demo

Component API

Accordion

Container component that manages the accordion state.

Property	Type	Default	Description
`defaultValue`	`string`	`undefined`	Initially expanded item
`type`	`'single' \| 'multiple'`	`'single'`	Expansion behavior
`collapsible`	`boolean`	`true`	Allow closing expanded items

AccordionItem

Individual section containing a trigger and content.

Property	Type	Default	Description
`value`	`string`	Required	Unique identifier

Accordion

Can I use Markdown syntax in Accordion components?

How does Accordion work in newsletters?

On this page