Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Installation

npx shadcn@latest add @scrollxui/accordion

Usage

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

<Accordion type='single' collapsible>
  <AccordionItem value='item-1'>
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

Accordion

Accordion is the root component.

Props

Property	Type	Default	Description
`type`	"single" \| "multiple"	`"single"`	Accordion type; single allows only one item open.
`defaultValue`	string \| string[]	`—`	Initial open item(s).
`value`	string \| string[]	`—`	Controlled open item(s).
`onValueChange`	(value: string \| string[]) => void	`—`	Callback triggered on value change.
`collapsible`	boolean	`false`	If true, allows closing the open item in 'single' mode.
`value (AccordionItem)`	string	`required`	Unique key for the accordion item.
`disabled (AccordionItem)`	boolean	`false`	Disables the accordion item.
`children`	ReactNode	`required`	Used in: Accordion, Trigger, Content — represents nested elements.