Animate UI

Accordion

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

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

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

API Reference

Accordion

PropTypeDefault
...props?
React.ComponentProps<"div">
-

AccordionItem

Animate UI API Reference - Disclosure PrimitiveHeadless UI API Reference - Disclosure

AccordionButton

Animate UI API Reference - Disclosure Button PrimitiveHeadless UI API Reference - DisclosureButton
PropTypeDefault
showArrow?
boolean
true

AccordionPanel

Animate UI API Reference - Disclosure Panel PrimitiveHeadless UI API Reference - DisclosurePanel
PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 22 }
keepRendered?
boolean
false
...props?
HTMLMotionProps<"div">
-

Credits

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