Accordion

Installation

npx baseui-cn add accordion

The CLI installs styles/navigation.styles.css alongside the component. For manual installation, copy that stylesheet from the registry and keep the component import. It uses the existing semantic theme variables.

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.