║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Accordion description: A vertically stacked set of interactive headings that each reveal an associated section of content. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-headless-accordion" />

Installation

<ComponentInstallation name="components-headless-accordion" />

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

<TypeTable type={{ '...props': { description: 'The props of the accordion.', type: 'React.ComponentProps<"div">', required: false, }, }} />

AccordionItem

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/headless/disclosure#disclosure" text="Animate UI API Reference - Disclosure Primitive" />

<ExternalLink href="https://headlessui.com/react/disclosure#disclosure" text="Headless UI API Reference - Disclosure" />

</div>

AccordionButton

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/headless/disclosure#disclosurebutton" text="Animate UI API Reference - Disclosure Button Primitive" />

<ExternalLink href="https://headlessui.com/react/disclosure#disclosure-button" text="Headless UI API Reference - DisclosureButton" />

</div>

<TypeTable type={{ showArrow: { description: 'Whether to show the arrow icon.', type: 'boolean', required: false, default: 'true', }, }} />

AccordionPanel

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/headless/disclosure#disclosurepanel" text="Animate UI API Reference - Disclosure Panel Primitive" />

<ExternalLink href="https://headlessui.com/react/disclosure#disclosure-panel" text="Headless UI API Reference - DisclosurePanel" />

</div>

<TypeTable type={{ transition: { description: 'The transition of the accordion panel', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 150, damping: 22 }", }, keepRendered: { description: 'Whether to keep the accordion panel rendered (useful for SEO)', type: 'boolean', required: false, default: 'false', }, '...props': { description: 'The props of the accordion panel.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

Credits

• Headless UI Accordion
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║