Accordion

Installation

Anatomy

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionPanel,
} from "@/components/ui/accordion";

<Accordion>
  <AccordionItem>
    <AccordionHeader>
      <AccordionTrigger />
    </AccordionHeader>
    <AccordionPanel />
  </AccordionItem>
</Accordion>;

Variants

You can use the variant prop to change the variant of the accordion.

<Accordion
  variant="default"
>
  ...rest content...
</Accordion>

Default

Swiss

Usage

Multiple Expanded

Use the multiple prop to allow multiple items to be expanded at the same time.

Custom Indicator

Disabled State

Reduce Motion

Animation Presets

Fade

Perspective

Perspective Blur

Scale

Slide

API Reference

Accordion

Groups all parts of the accordion. Renders a <div> element.