Accordion

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

multiple

collapsible

keepRendered

Installation

Usage

<Accordion>
  <AccordionItem>
    <AccordionHeader>
      <AccordionTrigger>Accordion Item 1</AccordionTrigger>
    </AccordionHeader>
    <AccordionContent>
      <div>Accordion Content 1</div>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>
      <AccordionTrigger>Accordion Item 2</AccordionTrigger>
    </AccordionHeader>
    <AccordionContent>
      <div>Accordion Content 2</div>
    </AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.35, ease: 'easeInOut' }`
`keepRendered?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"div">`	-

The asChild and forceMount props are not supported in the AccordionContent component as it is used for animation.

Credits

Radix UI Accordion

Accordion

What is Animate UI?

How is it different from other libraries?

Is Animate UI free to use?

On this page