Accordion

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

shadcn/ui docs

Installation

pnpm dlx shadcn@latest add https://neobrutal-ui.andongmin.com/r/accordion.json

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
<Accordion type="single" collapsible className="w-full max-w-xl">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>