Accordion

A vertically stacked set of interactive headings that each reveal a section of content. Supports single or multiple open items.

Default

Single open item with type="single" and collapsible.

Installation

CLI

npx @sonojs/ui@latest add accordion

Also needsnpm i lucide-react

Usage

accordion.tsx

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

export function Example() {
  return (
    <Accordion type="single" collapsible defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It follows the WAI-ARIA accordion pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Props

Prop	Type	Default	Description
type	"single" · "multiple"	"single"	Whether one or several items can be open at once.
collapsible	boolean	false	When type is single, allows closing the open item.
defaultValue	string · string[]	—	Initially open item value(s).
disabled	boolean	false	On AccordionItem: disables that item’s trigger.