Accordion

A composable accordion built on Base UI's Accordion primitive. Each item can be expanded to reveal its content panel, with smooth open/close animations and keyboard navigation.

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

export default function AccordionDemo() {
  return (
    <Accordion className="w-full max-w-md">
      <AccordionItem>
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that match your theme.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It&apos;s animated by default, but you can disable it.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Anatomy

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

<Accordion>
  <AccordionItem>
    <AccordionTrigger>Section title</AccordionTrigger>
    <AccordionContent>Section content</AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Basic accordion

<Accordion>
  <AccordionItem>
    <AccordionTrigger>What is this?</AccordionTrigger>
    <AccordionContent>
      A reusable accordion component built on Base UI primitives.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It follows the WAI-ARIA Accordion pattern and supports full keyboard navigation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Single open at a time

Pass openMultiple={false} to allow only one item to be expanded at a time.

<Accordion openMultiple={false}>
  <AccordionItem>
    <AccordionTrigger>First</AccordionTrigger>
    <AccordionContent>Content for the first item.</AccordionContent>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Second</AccordionTrigger>
    <AccordionContent>Content for the second item.</AccordionContent>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Third</AccordionTrigger>
    <AccordionContent>Content for the third item.</AccordionContent>
  </AccordionItem>
</Accordion>

Default expanded

Use the defaultValue prop on Accordion to expand specific items by default.

<Accordion defaultValue={[1]}>
  <AccordionItem>
    <AccordionTrigger>Collapsed by default</AccordionTrigger>
    <AccordionContent>This section starts collapsed.</AccordionContent>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Expanded by default</AccordionTrigger>
    <AccordionContent>This section starts expanded.</AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

Accordion

The root container. Renders a vertical flex column of accordion items.

Prop	Type	Default	Description
`openMultiple`	`boolean`	`true`	Whether multiple items can be open simultaneously.
`defaultValue`	`number[]`	—	Indices of items that are open by default.
`value`	`number[]`	—	Controlled open state.
`onValueChange`	`(value: number[]) => void`	—	Callback when the open state changes.
`className`	`string`	—
`children`	`ReactNode`	—

AccordionItem

Wraps a single collapsible section. Renders a bottom border between items.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

AccordionTrigger

The clickable header that toggles the corresponding content panel. Renders a chevron icon that rotates on expand/collapse.

Prop	Type	Default
`disabled`	`boolean`	`false`
`className`	`string`	—
`children`	`ReactNode`	—

AccordionContent

The collapsible content panel. Animates open and closed with accordion-down / accordion-up keyframes.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—