Bonsai Design System

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

On this page