Accordion

Installation

npx baseui-cn add accordion

Usage

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

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>
      Yes. Built on Base UI with full ARIA and keyboard support.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Examples

Basic

A single-open accordion. The first item is open by default.

Multiple

Use the multiple prop to allow multiple items open at once.

Disabled

Use the disabled prop on AccordionItem to disable individual items.