Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Code

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/Accordion';
<Accordion type='single' collapsible>
  <AccordionItem value='item-1'>
    <AccordionTrigger>
      <p>Is it accessible?</p>
    </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 matches the other components&apos;
      aesthetic.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value='item-3'>
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. Its animated by default, but you can disable it if you prefer.
    </AccordionContent>
  </AccordionItem>
</Accordion>