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)

This is the default style for the accordion. No variant prop is required.

Style Two

Set variant="style_two" on AccordionRoot for this visual style.

Style Three

Set variant="style_three" on AccordionRoot for this variation.

Style Four

Set variant="style_four" on AccordionRoot for this layout.

Style Five

Set variant="style_five" on AccordionRoot for this design.

Custom

Use className to give a custom look to the component.

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"