Accordion

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that matches the other components' aesthetic.

Yes. It's animated by default, but you can disable it if you prefer.

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

npx shadcn@latest add @fulldev/accordion

Usage

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

<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:

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

Examples

Multiple

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

Manage your profile, billing details, and email preferences.

Update your password, passkeys, and sign-in methods.

Choose which product updates and alerts you want to receive.

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

This item can be opened and closed normally.

This panel stays unavailable to keyboard and pointer interaction.

You can still interact with the other items in the list.

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

Keep styles, spacing, and behavior consistent across your UI.

Ensure controls are readable and keyboard friendly.

Only reveal the content people need when they need it.

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

FAQ

Yes. Support is included for all active subscriptions.

Yes. You can cancel your subscription whenever you want.

A trial is available for eligible plans and new accounts.

---
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 for more information on props. See the data-slot docs for more information on interactivity.

Sidebar

Search