Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content.
---

```astro live props={{ name: 'accordion' }}
---
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
---

<Accordion class="max-w-lg">
  <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 the other components'
      aesthetic.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. It&apos;s animated by default, but you can disable it if you prefer.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

## Installation

```bash
npx shadcn@latest add @fulldev/accordion
```

## Usage

```ts
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
```

```astro
<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

## Composition

Use the following composition to build an `Accordion`:

```text
Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent
```

## Examples

### Multiple

Use the `multiple` prop to allow multiple items to be open at the same time.

```astro live
---
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
---

<Accordion class="w-full max-w-sm" multiple>
  <AccordionItem value="item-1">
    <AccordionTrigger>Account</AccordionTrigger>
    <AccordionContent>
      Manage your profile, billing details, and email preferences.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Security</AccordionTrigger>
    <AccordionContent>
      Update your password, passkeys, and sign-in methods.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Notifications</AccordionTrigger>
    <AccordionContent>
      Choose which product updates and alerts you want to receive.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

### With Disabled

Use the `disabled` prop on `AccordionItem` to disable individual items.

```astro live
---
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
---

<Accordion class="w-full max-w-sm">
  <AccordionItem value="item-1">
    <AccordionTrigger>Available item</AccordionTrigger>
    <AccordionContent>
      This item can be opened and closed normally.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2" disabled>
    <AccordionTrigger>Disabled item</AccordionTrigger>
    <AccordionContent>
      This panel stays unavailable to keyboard and pointer interaction.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Another item</AccordionTrigger>
    <AccordionContent>
      You can still interact with the other items in the list.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

### With Borders

Add `border` to the `Accordion` and `border-b last:border-b-0` to the
`AccordionItem` to add borders to the items.

```astro live
---
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
---

<Accordion class="w-full max-w-sm rounded-lg border px-4">
  <AccordionItem class="border-b last:border-b-0" value="item-1">
    <AccordionTrigger>Design system</AccordionTrigger>
    <AccordionContent>
      Keep styles, spacing, and behavior consistent across your UI.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem class="border-b last:border-b-0" value="item-2">
    <AccordionTrigger>Accessibility</AccordionTrigger>
    <AccordionContent>
      Ensure controls are readable and keyboard friendly.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem class="border-b last:border-b-0" value="item-3">
    <AccordionTrigger>Performance</AccordionTrigger>
    <AccordionContent>
      Only reveal the content people need when they need it.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

### In Card

Wrap the `Accordion` in a `Card` component.

```astro live
---
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
---

<Card class="w-full max-w-sm">
  <CardHeader>
    <CardTitle>FAQ</CardTitle>
  </CardHeader>
  <CardContent>
    <Accordion>
      <AccordionItem value="item-1">
        <AccordionTrigger>Do you offer support?</AccordionTrigger>
        <AccordionContent>
          Yes. Support is included for all active subscriptions.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Can I cancel anytime?</AccordionTrigger>
        <AccordionContent>
          Yes. You can cancel your subscription whenever you want.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is there a free trial?</AccordionTrigger>
        <AccordionContent>
          A trial is available for eligible plans and new accounts.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  </CardContent>
</Card>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/accordion) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/accordion/README.md) for more information on interactivity.