Accordion

openMultiple

keepRendered

Installation

Usage

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

API Reference

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

The render and keepMounted props are not supported in the AccordionPanel component as it is used for animation.

Credits

Base UI Accordion

Accordion

What is Animate UI?

How is it different from other libraries?

Is Animate UI free to use?

On this page