3.0.1

Components

Accordion

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

Installation

npx shadcn@latest add @blank/accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It follows the WAI-ARIA pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

The accordion is one bordered group: items are divided by hairlines and an open item takes a muted fill, so the reader always sees which answer they are in. For a flush list on a page section, pass className="rounded-none border-x-0" to the root.

Examples

Sizes

Size is set once on AccordionItem; the trigger and content read it back, so the parts cannot disagree.

Multiple

type="multiple" lets several items stay open at once. Use it when readers compare answers side by side.

Invoices are issued on the first of the month and sent to the billing contact.