Animate UI

Accordion

A set of collapsible panels with headings.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

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

API Reference

Accordion

Animate UI API Reference - Accordion PrimitiveBase UI API Reference - Accordion.Root

AccordionItem

Animate UI API Reference - Accordion Item PrimitiveBase UI API Reference - Accordion.Item

AccordionTrigger

Animate UI API Reference - Accordion Trigger PrimitiveBase UI API Reference - Accordion.Trigger
PropTypeDefault
showArrow?
boolean
true

AccordionPanel

Animate UI API Reference - Accordion Panel PrimitiveBase UI API Reference - Accordion.Panel
PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 22 }
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

Built by Skyleen. The source code is available on GitHub.