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

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.

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

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

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

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