Shadcn Accordion

The shadcn accordion is a stacked list of headings. Click a heading and the panel under it opens. Use it for FAQs, settings groups, and any page where the labels are enough to scan and the details can wait.

Usage

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

<Accordion defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>What are your shipping options?</AccordionTrigger>
    <AccordionContent>Standard is 5–7 days. Express is 2–3.</AccordionContent>
  </AccordionItem>
</Accordion>

defaultValue is a string[]. One panel starts open. Add multiple if several can stay open. Every AccordionItem needs a unique value. Switch Base / Radix / Aria on the preview — the APIs differ, the file still lands in components/ui.

Composition

Basic

One item at a time. The first one starts open.

Multiple

multiple — the value is a string[]. Two groups can stay open while someone compares them.

Disabled

disabled on AccordionItem greys out that row. The trigger stays in the list so the gap is obvious.

Borders

border on the Accordion, px-4 on each item. Same keyboard model, just a box around the list.

Card

Wrap it in a Card when the accordion is a section, not the whole page.

RTL

Wrap with DirectionProvider and dir="rtl". Triggers use text-start so the chevron stays on the end.

API

AccordionItem

AccordionTrigger and AccordionContent take className.

Keyboard

Notes

Write the trigger as the question or the group name, not a sentence of explanation.

With other components

Questions

Related