Accordion

A collapsible component used to group and hide content sections.

Usage

Import the Accordion, AccordionItem, AccordionTrigger, and AccordionContent components from @bun-ui/react and use them in your project:

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@bun-ui/react"

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content for section 1.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content for section 2.</AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Single Accordion

Use the type="single" prop to allow only one section to be open at a time.

Multiple Accordion

Use the type="multiple" prop to allow multiple sections to be open simultaneously.

Disabled

Disable specific accordion items using the disabled prop.

Customization

The Accordion components can be customized using the className prop or by extending their styles with your design system.