Accordion

React Accordion components let users show and hide sections of related content on a page. They are often used for FAQs, menus and submenus, settings panels, and other layouts where content needs to stay organized.

This Accordion component is styled using Tailwind CSS, giving developers control over structure, layout, and styling.

Installation

Anatomy

Import the component parts and combine them.

import {
  AccordionRoot,
  AccordionItem,
  AccordionTrigger,
  AccordionContent
} from "@/components/accordion";

export default () => (
  <AccordionRoot>
    <AccordionItem>
      <AccordionTrigger />
      <AccordionContent />
    </AccordionItem>
  </AccordionRoot>
);

API Reference

AccordionRoot

Wraps all accordion items and controls the overall layout and style.

AccordionItem

A single accordion item that groups a trigger and its content.

AccordionTrigger

Toggles the visibility of the accordion content.

AccordionContent

Holds the collapsible content for an accordion item.

Variants

The component comes with five pre-styled variants:

• style_one: Bordered items with rounded corners
• style_two: Items with a bottom border
• style_three: Neutral background with rounded corners
• style_four: Light background with a chevron icon
• style_five: Light background with compact spacing

<AccordionRoot variant="style_four">{/* items */}</AccordionRoot>

Accessibility

• Uses semantic HTML with a clear heading structure (h3 elements)
• Applies ARIA attributes (aria-controls, aria-expanded, aria-labelledby)
• Supports keyboard interaction with focus handling
• Associates each trigger with its content using role="region"