Accordion
A vertically stacked set of interactive headings that each reveal a section of content. Built on Base UI Accordion primitive.
Installation
npx shadcn add accordion --registry https://ui.ch.sh/r
Usage
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@/components/ui/accordion"
export default function Example() {
return (
<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>
)
}