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

npx @tailgrids/cli add accordion

Anatomy

Import the component parts and combine them.

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

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

Examples

Style One (Default)

Style Two

Style Three

Style Four

Style Five

Custom

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.

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"