Accordion

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

Installation

bash
npx shadcn@latest add accordion

Import

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

Single (collapsible)

<Accordion type="single" collapsible className="w-full">  <AccordionItem value="item-1">    <AccordionTrigger>Is it accessible?</AccordionTrigger>    <AccordionContent>      Yes. It adheres to the WAI-ARIA design pattern.    </AccordionContent>  </AccordionItem>  <AccordionItem value="item-2">    <AccordionTrigger>Is it styled?</AccordionTrigger>    <AccordionContent>      Yes. It comes with default styles that match the rest of the design system.    </AccordionContent>  </AccordionItem>  <AccordionItem value="item-3">    <AccordionTrigger>Is it animated?</AccordionTrigger>    <AccordionContent>      Yes. It uses CSS transitions for smooth open/close animations.    </AccordionContent>  </AccordionItem></Accordion>

Multiple open

<Accordion type="multiple">  <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>

Default open item

<Accordion type="single" defaultValue="item-2" collapsible>  <AccordionItem value="item-1">...</AccordionItem>  <AccordionItem value="item-2">    <AccordionTrigger>Open by default</AccordionTrigger>    <AccordionContent>This item starts open.</AccordionContent>  </AccordionItem></Accordion>

Props

PROPTYPEDEFAULTDESCRIPTION
type"single" | "multiple""single"Whether one or many items can be open
collapsiblebooleanfalseWhen type="single", allows closing the open item
defaultValuestring | string[]—Initially open item(s)
valuestring | string[]—Controlled open item(s)
onValueChange(value) => void—Called when open items change
disabledbooleanfalseOn AccordionItem — disables expand/collapse

Accessibility

  • Space/Enter toggles the focused item
  • Arrow Up/Down moves focus between triggers