---
title: "Accordion"
description: "Collapsible sections that can be linked to."
url: https://docscn.dev/docs/components/accordion
lastModified: 2026-10-08T07:15:56.000Z
---

# Accordion (/docs/components/accordion)

> Collapsible sections that can be linked to.

<Accordions>
  <Accordion title="What is docscn?" id="what-is-docscn">
    A shadcn/ui registry of documentation components, built on Fumadocs Core.
  </Accordion>

  <Accordion title="Do I need Fumadocs UI?">
    No. docscn replaces it, and only needs Fumadocs Core and Fumadocs MDX.
  </Accordion>
</Accordions>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/docs-accordion
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/docs-accordion
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/docs-accordion
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/docs-accordion
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

```mdx
import { Accordion, Accordions } from "@/components/docs/components/accordion";

<Accordions>
  <Accordion title="What is docscn?" id="what-is-docscn">
    A shadcn/ui registry of documentation components.
  </Accordion>
  <Accordion title="Do I need Fumadocs UI?">No.</Accordion>
</Accordions>
```

The `docs` block adds `Accordions` and `Accordion` to your MDX components.

An `Accordion` with an `id` can be linked to: a link to `#id` opens it, and it shows a button that copies the link. Closed content stays searchable with the browser's find-in-page, which opens the matching item.

## Props [#props]

| Component    | Prop    | Type        | Description                                                         |
| ------------ | ------- | ----------- | ------------------------------------------------------------------- |
| `Accordion`  | `title` | `ReactNode` | The item's title.                                                   |
| `Accordion`  | `id`    | `string`    | Makes the item linkable, with a copy-link button.                   |
| `Accordion`  | `value` | `string`    | The item's value. Defaults to the title.                            |
| `Accordions` | ...     |             | shadcn/ui `accordion` props, such as `defaultValue` and `multiple`. |

Built on shadcn/ui `accordion`.