Design · Components · Navigation

Accordion

Stacked headings that reveal or hide content sections.

Radix UI Accordion (Radix styles)Base UI Accordion (base styles)

Yes. It follows the WAI-ARIA accordion pattern.

Installation

npx shadcn@latest add @assistant-ui/accordion

The @assistant-ui namespace resolves the Radix or Base UI flavor from your project's style through the style-aware registry entry in components.json. Without that entry, add by direct URL instead:

npx shadcn@latest add https://r.assistant-ui.com/base/accordion.json

Usage

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

export function Example() {
  return (
    <Accordion defaultValue={["item-1"]}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Section 1</AccordionTrigger>
        <AccordionContent>Content for section 1.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Section 2</AccordionTrigger>
        <AccordionContent>Content for section 2.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Base UI represents the open value as an array and uses the multiple prop. Radix uses type="single" or type="multiple" and represents a single open value as a string.

Examples

Multiple items open

With icons

Add icons or custom content inside the trigger.

Controlled

Use value and onValueChange for controlled accordion state.

This is the overview section content.

Current value: item-1

FAQ section

Frequently asked questions

API Reference

Composable API

ComponentDescription
AccordionThe root component that manages open items.
AccordionItemA collapsible section container.
AccordionTriggerThe control that toggles a section.
AccordionContentThe collapsible content panel.

Accordion

AccordionProps
defaultValue?string[] | string

The initial open value. Base UI uses an array; single-value Radix accordions use a string.

value?string[] | string

The controlled open value for the selected flavor.

onValueChange?(value: string[] | string) => void

Called when the open items change.

multipleboolean= false

Base UI: whether multiple items can be open.

type?"single" | "multiple"

Radix: whether one or multiple items can be open.

collapsible?boolean

Radix single mode: whether the open item can close.

className?string

Additional CSS classes.

AccordionItem

AccordionItemProps
valuestring

The unique value for the item.

disabled?boolean

Whether the item is disabled.

className?string

Additional CSS classes.

AccordionTrigger

AccordionTriggerProps
className?string

Additional CSS classes.

AccordionContent

AccordionContentProps
className?string

Additional CSS classes for the panel content.