Accordion
Collapsible content sections built on Radix UI Accordion
Preview
Usage
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It follows the WAI-ARIA Accordion pattern.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it animated?</AccordionTrigger>
<AccordionContent>
Yes. It uses CSS animations for smooth open/close transitions.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Can multiple items be open?</AccordionTrigger>
<AccordionContent>
Yes. Set type="multiple" to allow multiple items open at once.
</AccordionContent>
</AccordionItem>
</Accordion>Install
npx shadcn add @bonsai/accordion