AccordionUpdated

Import

import { Accordion } from '@heroui/react';

Usage

import {
  ArrowsRotateLeft,
  Box,
  ChevronDown,
  CreditCard,

Anatomy

Import the Accordion component and access all parts using dot notation.

import { Accordion } from '@heroui/react';

export default () => (
  <Accordion>
    <Accordion.Item>
      <Accordion.Heading>
        <Accordion.Trigger>
          <Accordion.Indicator />
        </Accordion.Trigger>
      </Accordion.Heading>
      <Accordion.Panel>
        <Accordion.Body/>
      </Accordion.Panel>
    </Accordion.Item>
  </Accordion>
)

Surface

import {
  ArrowsRotateLeft,
  Box,
  ChevronDown,
  CreditCard,

Multiple Expanded

import {Accordion} from "@heroui/react";

export function Multiple() {
  return (
    <Accordion allowsMultipleExpanded className="w-full max-w-md">

Custom Indicator

"use client";

import type {Key} from "@heroui/react";

import {ChevronsDown, CircleChevronDown, Minus, Plus} from "@gravity-ui/icons";

Disabled State

import {Accordion} from "@heroui/react";

export function Disabled() {
  return (
    <div className="flex w-full flex-col items-center gap-8">

FAQ Layout

import {ChevronDown} from "@gravity-ui/icons";
import {Accordion} from "@heroui/react";

export function FAQ() {
  const categories = [

Custom Styles

import {ChevronDown} from "@gravity-ui/icons";
import {Accordion, cn} from "@heroui/react";

const items = [
  {

Without Separator

import {ChevronDown, CreditCard, Receipt, ShoppingBag} from "@gravity-ui/icons";
import {Accordion} from "@heroui/react";

const items = [
  {

Styling

Passing Tailwind CSS classes

"use client";

import { Accordion, cn } from "@heroui/react";
import {Icon} from "@iconify/react";

Customizing the component classes

To customize the Accordion component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .accordion {
    @apply rounded-xl bg-gray-50;
  }

  .accordion__trigger {
    @apply font-semibold text-lg;
  }

  .accordion--outline {
    @apply shadow-lg border-2;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Accordion component uses these CSS classes (View source styles):

Base Classes

• .accordion - Base accordion container
• .accordion__body - Content body container
• .accordion__heading - Heading wrapper
• .accordion__indicator - Expand/collapse indicator icon
• .accordion__item - Individual accordion item
• .accordion__panel - Collapsible panel container
• .accordion__trigger - Clickable trigger button

Variant Classes

• .accordion--outline - Outline variant with border and background

State Classes

• .accordion__trigger[aria-expanded="true"] - Expanded state
• .accordion__panel[aria-hidden="false"] - Panel visible state

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

• Hover: :hover or [data-hovered="true"] on trigger
• Focus: :focus-visible or [data-focus-visible="true"] on trigger
• Disabled: :disabled or [aria-disabled="true"] on trigger
• Expanded: [aria-expanded="true"] on trigger

API Reference

Accordion Props

Accordion.Item Props

Accordion.Trigger Props

Accordion.Panel Props

Accordion.Indicator Props

Accordion.Body Props