Accordion

Installation

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

npx shadcn@latest add https://prototyper-ui.com/r/accordion.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/accordion.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/accordion.json

This will add the following files to your project:

• components/ui/accordion.tsx

Usage

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

<Accordion>
  <AccordionItem>
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA Accordion pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Anatomy

<Accordion>
  <AccordionItem>
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
</Accordion>

Examples

Disabled

Styling

Data Slots

Use data-slot attributes to target specific parts of the accordion:

Customization Examples

/* Remove border between items */
[data-slot="accordion-item"] {
  @apply border-b-0;
}

/* Custom trigger icon color */
[data-slot="accordion-trigger-icon"] {
  @apply text-primary;
}

{/* Override content padding via className */}
<AccordionContent className="pb-6">
  {/* ... */}
</AccordionContent>

API Reference

Accordion

Root component that manages the expanded/collapsed state of all items.

All Base UI Accordion.Root props are forwarded via ...props.

AccordionItem

Wrapper for a single collapsible section containing a trigger and content panel.

All Base UI Accordion.Item props are forwarded via ...props.

AccordionTrigger

Button that toggles the visibility of the associated content panel.

All Base UI Accordion.Trigger props are forwarded via ...props.

AccordionContent

Collapsible content panel that animates open and closed.

All Base UI Accordion.Panel props are forwarded via ...props.

Accessibility

Keyboard Interactions

ARIA Attributes

• Each trigger renders with role="button" inside a heading element.
• aria-expanded indicates whether the associated panel is open.
• aria-controls on each trigger links to its corresponding content panel.
• aria-disabled is set on disabled triggers.
• Each content panel renders with role="region".
• aria-labelledby on each panel links back to its corresponding trigger.

Related