Accordion

A collapsible component for displaying content in a vertical stack.

React is a JavaScript library for building user interfaces.

import { AccordionRoot, AccordionItem, AccordionItemTrigger, AccordionItemContent } from '@/components/accordion'

function Example() {
  return (
    <AccordionRoot defaultValue={["React"]} collapsible>
      {["React", "Solid", "Vue"].map((item) => (
        <AccordionItem key={item} value={item}>
          <AccordionItemTrigger>What is {item}?</AccordionItemTrigger>
          <AccordionItemContent>
            {item} is a JavaScript library for building user interfaces.
          </AccordionItemContent>
        </AccordionItem>
      ))}
    </AccordionRoot>
  )
}