Accordion

A vertically stacked set of interactive headings that each reveal a section of content when clicked. Think of it like a collapsible list where only one item might be open at a time.

Docs API Reference

This preview shows a live example of the Accordion component. You can interact with it to see how it works. The example below demonstrates an accordion with three distinct items.

Installation

To use the Accordion component in your project, you need to install it. You have two options: using the CLI (Command Line Interface) for a quick setup, or following the Manual steps for more control and understanding.

The CLI command is the easiest way to add the Accordion component. It automatically handles downloading the necessary code and dependencies for you. Running this command in your project's terminal will add the accordion component files.

npx shadcn@latest add accordion

Usage

Once installed, you can use the Accordion component in your application's pages or other components. First, import the necessary parts of the accordion from the file you created/installed.

  Accordion, // The main container for the accordion items
  AccordionContent, // The content area that expands/collapses
  AccordionItem, // A single item within the accordion (trigger + content)
  AccordionTrigger, // The clickable heading that toggles the content
} from "@/components/ui/accordion"; // Adjust this path based on your project structure

Here's a basic example of how to structure the Accordion in your TSX code.

Accordion wraps everything. type="single" means only one item can be open at once. collapsible allows closing the currently open item.
AccordionItem represents one section. value must be unique for each item.
AccordionTrigger is the part you click.
AccordionContent is the hidden part that appears on click.

<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, ensuring it's usable for
      everyone, including those using screen readers.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that match the other components in our
      library. You can customize these styles further using 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 needed via
      configuration or custom styling. The smooth animation is handled by the
      Tailwind CSS setup you configured during installation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Manual Alert