Accordion

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

disclosure

interactive

content

Preview

Code

TSX

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

export function AccordionDemo() {
  return (
    <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 matches the other components' aesthetic.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It's animated by default, but you can disable it if you prefer.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

API Reference

Prop	Type	Default	Description
type	single \| multiple	single	Defines whether one or multiple items can be opened at the same time.
collapsible	boolean	false	When type is 'single', allows closing content when clicking the trigger for an open item.
value	string	-	The controlled value of the item to expand.
defaultValue	string	-	The value of the item to expand when initially rendered.

View Full Documentation