> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion

> A vertically stacked set of interactive headings that each reveal a section of content.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npx shadcn@latest add accordion
  ```

  ```bash yarn theme={null}
  yarn dlx shadcn@latest add accordion
  ```

  ```bash pnpm theme={null}
  pnpm dlx shadcn@latest add accordion
  ```
</CodeGroup>

## Usage

```tsx theme={null}
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
```

```tsx theme={null}
<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

## Component Code

```tsx theme={null}
"use client"

import * as React from "react"
import { ChevronDownIcon } from "lucide-react"
import { Accordion as AccordionPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Accordion({
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}

function AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn("border-b last:border-b-0", className)}
      {...props}
    />
  )
}

function AccordionTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
          className
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}

function AccordionContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
      {...props}
    >
      <div className={cn("pt-0 pb-4", className)}>{children}</div>
    </AccordionPrimitive.Content>
  )
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
```

## Examples

<Tabs>
  <Tab title="Basic">
    A basic accordion that shows one item at a time. The first item is open by default.

    ```tsx theme={null}
    <Accordion defaultValue={["item-1"]}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that matches your theme.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
    ```
  </Tab>

  <Tab title="Multiple">
    Use the `multiple` prop to allow multiple items to be open at the same time.

    ```tsx theme={null}
    <Accordion multiple defaultValue={["item-1", "item-2"]}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Item 1</AccordionTrigger>
        <AccordionContent>
          Content for item 1
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Item 2</AccordionTrigger>
        <AccordionContent>
          Content for item 2
        </AccordionContent>
      </AccordionItem>
    </Accordion>
    ```
  </Tab>

  <Tab title="Disabled">
    Use the `disabled` prop on `AccordionItem` to disable individual items.

    ```tsx theme={null}
    <Accordion defaultValue={["item-1"]}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Available Item</AccordionTrigger>
        <AccordionContent>
          This item is available.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2" disabled>
        <AccordionTrigger>Disabled Item</AccordionTrigger>
        <AccordionContent>
          This item is disabled.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
    ```
  </Tab>
</Tabs>

## API Reference

### Accordion

The root component that manages the accordion state.

| Prop           | Type       | Default |
| -------------- | ---------- | ------- |
| `defaultValue` | `string[]` | -       |
| `value`        | `string[]` | -       |
| `multiple`     | `boolean`  | `false` |
| `disabled`     | `boolean`  | `false` |

### AccordionItem

An individual accordion item.

| Prop       | Type      | Default |
| ---------- | --------- | ------- |
| `value`    | `string`  | -       |
| `disabled` | `boolean` | `false` |

### AccordionTrigger

The button that toggles the accordion item.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### AccordionContent

The content area of an accordion item.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |