Accordion

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

multiple

collapsible

showArrow

keepRendered

Installation

Usage

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

API Reference

Prop	Type	Default
`showArrow?`	`boolean`	`true`

AccordionContent

Animate UI API Reference - Accordion Content Primitive Radix UI API Reference - Accordion.Content

Prop	Type	Default
`transition?`	`Transition`	`{ type: 'spring', stiffness: 150, damping: 22 }`
`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
Credit to shadcn/ui for style inspiration.

Accordion

What is Animate UI?

How is it different from other libraries?

Is Animate UI free to use?

On this page