Documentation
Components

Accordion

Collapsible content sections for better organization

Pro Tip: Use accordions to reduce cognitive load by showing only relevant information when users need it.

Quick Start

Get up and running with accordions in under a minute:

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

<Accordions>
  <Accordion title="Your First Accordion">
    Content goes here - it can be text, components, or anything!
  </Accordion>
</Accordions>
<Accordions type="multiple" defaultValue={["item1"]}>
  <Accordion value="item1" title="Always Open by Default">
    This accordion starts expanded.
  </Accordion>
  <Accordion value="item2" title="Click to Expand">
    This one starts collapsed.
  </Accordion>
</Accordions>

Interactive Demo

Experience the accordion in action with this comprehensive example: