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.

Last updated: 10/4/2025