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: