Accordion

A set of collapsible panels with headings.

API Reference

Preview

Installation

Usage

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

API Reference

Accordion

Root component. Alias for Accordion.Root from Base UI.

AccordionItem

Individual accordion item container. Styled wrapper for Accordion.Item from Base UI with bottom border styling.

AccordionTrigger

Trigger button that toggles the accordion panel. Styled wrapper for Accordion.Trigger from Base UI. Includes a built-in chevron icon that rotates when expanded.

AccordionPanel

Collapsible content panel. Styled wrapper for Accordion.Panel from Base UI with animated height transitions. Also exported as AccordionContent.

Examples

Single Accordion

Multiple Accordion

Controlled Accordion