Beta
Animate UI

Accordion

A set of collapsible panels with headings.

Made by imskyleen
Edit on GitHub

Installation

Usage

<Accordion>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 1</AccordionTrigger>
    <AccordionPanel>Accordion Panel 1</AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 2</AccordionTrigger>
    <AccordionPanel>Accordion Panel 2</AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 3</AccordionTrigger>
    <AccordionPanel>Accordion Panel 3</AccordionPanel>
  </AccordionItem>
</Accordion>

Props

DocsAPI Reference

Animate UI Props

AccordionTrigger

PropTypeDefault
chevron?
boolean
true
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 17 }

AccordionPanel

PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 22 }

Credits

  • We use Base UI for the accordion component.
  • We take our inspiration from Shadcn UI for the accordion style.

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

On this page