Command Palette

Search for a command to run...

Accordion

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

DocsAPI Reference

Click to expand/collapse sections

Installation

npx shadcn@latest add 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 adheres to the WAI-ARIA design pattern.
  </AccordionContent>
</AccordionItem>
</Accordion>