---
title: Accordion
description: Add Accordions to your documentation
preview: accordion
---

<Installation name="accordion" />

## Usage

Based on
[Base UI Accordion](https://base-ui.com/react/components/accordion), useful for FAQ sections.

> For the Radix UI package, this is based on [Radix UI Accordion](https://www.radix-ui.com/primitives/docs/components/accordion) instead.

Use it in MDX files or as a normal React component.

```mdx tab="MDX"
---
title: Hello World
---

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

<Accordions type="single">
  <Accordion title="My Title">My Content</Accordion>
</Accordions>
```

```tsx tab="React.js"
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

export default function Page() {
  return (
    <Accordions type="single">
      <Accordion title="My Title">My Content</Accordion>
    </Accordions>
  );
}
```

### Accordions

<auto-type-table cwd path="content/docs/ui/props.ts" name="AccordionsProps" />

### Accordion

<auto-type-table cwd path="content/docs/ui/props.ts" name="AccordionProps" />

### 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.

```mdx
<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.
