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://neobrutalism.dev/r/accordion.json

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion 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>

Examples

Default

Basic

A basic accordion that shows one item at a time. The first item is open by default.

Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.

Multiple

Use the multiple prop to allow multiple items to be open at the same time.

Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.

Disabled

Use the disabled prop on AccordionItem to disable individual items.