Accordion

<Accordion type="single">
<AccordionItem value="item-1">
  <AccordionTrigger>Is it accessible?</AccordionTrigger>
  <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
  <AccordionTrigger>Is it styled?</AccordionTrigger>
  <AccordionContent>Yes. It comes with default styles that match your theme.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
  <AccordionTrigger>Is it animated?</AccordionTrigger>
  <AccordionContent>Yes. It uses CSS animations for smooth transitions.</AccordionContent>
</AccordionItem>
</Accordion>

Installation

npx bearnie add accordion

import Accordion from "@/components/ui/accordion/Accordion.astro";
import AccordionItem from "@/components/ui/accordion/AccordionItem.astro";
import AccordionTrigger from "@/components/ui/accordion/AccordionTrigger.astro";
import AccordionContent from "@/components/ui/accordion/AccordionContent.astro";

Usage

import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"

<Accordion type="single">
<AccordionItem value="item-1">
  <AccordionTrigger>Is it accessible?</AccordionTrigger>
  <AccordionContent>
    Yes. It adheres to the WAI-ARIA design pattern.
  </AccordionContent>
</AccordionItem>
</Accordion>

Examples

Single

Only one item can be open at a time. Opening a new item automatically closes the previous one.

<Accordion type="single">
<AccordionItem value="item-1">
  <AccordionTrigger>What is your refund policy?</AccordionTrigger>
  <AccordionContent>We offer a 30-day money-back guarantee on all purchases.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
  <AccordionTrigger>How do I contact support?</AccordionTrigger>
  <AccordionContent>You can reach us via email at support@example.com.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
  <AccordionTrigger>Do you offer discounts?</AccordionTrigger>
  <AccordionContent>Yes, we offer seasonal promotions and bulk discounts.</AccordionContent>
</AccordionItem>
</Accordion>

Multiple

Multiple items can be open simultaneously. Useful when users may need to compare content across sections.

<Accordion type="multiple">
<AccordionItem value="item-1">
  <AccordionTrigger>Personal Information</AccordionTrigger>
  <AccordionContent>Name, email, and phone number details.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
  <AccordionTrigger>Billing Address</AccordionTrigger>
  <AccordionContent>Street address, city, state, and zip code.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
  <AccordionTrigger>Payment Method</AccordionTrigger>
  <AccordionContent>Credit card or PayPal account information.</AccordionContent>
</AccordionItem>
</Accordion>

Anatomy

Accordion - The root container that manages state
AccordionItem - Individual collapsible section wrapper
AccordionTrigger - The clickable header that toggles content
AccordionContent - The expandable content panel

Props

Prop	Type	Default	Description
type	single \| multiple	single	Allow one or multiple items open
class	string	-	Additional CSS classes

AccordionItem

Prop	Type	Default	Description
value	string	required	Unique identifier for the item
class	string	-	Additional CSS classes

AccordionTrigger

Prop	Type	Default	Description
class	string	-	Additional CSS classes

AccordionContent

Prop	Type	Default	Description
class	string	-	Additional CSS classes