Accordion

Add Accordions to your documentation

Usage

Based on Radix UI Accordion.

import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 
<Accordions>
  <Accordion title="My Title">My Content</Accordion>
</Accordions>

Accordions

PropTypeDefault
asChild
boolean
-
type
"single" | "multiple"
-
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 same as title by default. When an id presents, it will be used as the value instead.

Edit on GitHub

Last updated on

On this page