Accordion

Add Accordions to your documentation

Usage

Wrap accordions in the container, a type property is required by default.

Based on Radix UI Accordion.

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

<Accordions>
<Accordion title="My Title">

My Content

</Accordion>
</Accordions>

Accordions

PropTypeDefault
type
"single" | "multiple"
-
asChild
boolean
-
disabled
boolean
false
orientation
"horizontal" | "vertical"
vertical

Accordion

PropTypeDefault
asChild
boolean
-
disabled
boolean
false

Linking to Accordion

You can specify an id for accordion. The accordion will automatically open when the user is navigating to the page with the specified id in hash parameter.

<Accordions>
<Accordion title="My Title" id="my-title">

My Content

</Accordion>
</Accordions>

The value of accordion is title by default. When an id is specified, it will be used as the value instead.

Last updated on