Accordion

Component

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

Basic Usage

The Accordion component allows you to create collapsible sections of content. It supports both single and multiple item expansion.

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that you can override with Tailwind CSS.

Yes. It's animated by default, but you can disable it if you prefer.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./Accordion"

export default function App() {
  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 you can override with
            Tailwind CSS.
          </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>
    </>
  )
}

Open Sandbox