Usage

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

import {
  ArrowsRotateLeft,
  Box,
  ChevronDown,
  CreditCard,

Anatomy

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>
)

Examples

Surface

import {
  ArrowsRotateLeft,
  Box,
  ChevronDown,
  CreditCard,

Without Separator

Multiple Expanded

Disabled State

Entire accordion disabled

Individual items disabled

Controlled

Expanded: getting-started

Learn the basics of HeroUI and how to integrate it into your React project. This section covers installation, setup, and your first component.

Custom Indicator

Render Function

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

How much does shipping cost?

Do you ship internationally?

How do I request a refund?

FAQ Layout

Frequently Asked Questions

Everything you need to know about licensing and usage.

General

Licensing

Support

import {ChevronDown} from

Customization

Tailwind CSS

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

Global CSS

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;
  }
}

Styling Reference

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

Prop	Type	Default	Description
`allowsMultipleExpanded`	`boolean`	`false`	Whether multiple items can be expanded at once
`defaultExpandedKeys`	`Iterable<Key>`	-	The initial expanded keys
`expandedKeys`	`Iterable<Key>`	-	The controlled expanded keys
`onExpandedChange`	`(keys: Set<Key>) => void`	-	Handler called when expanded keys change
`isDisabled`	`boolean`	`false`	Whether the entire accordion is disabled
`variant`	`"default" \| "surface"`	`"default"`	The visual variant of the accordion
`hideSeparator`	`boolean`	`false`	Hide separator lines between accordion items
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The accordion items
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionRenderProps>`	-	Overrides the default DOM element with a custom render function.

Accordion.Item

Prop	Type	Default	Description
`id`	`Key`	-	Unique identifier for the item
`isDisabled`	`boolean`	`false`	Whether this item is disabled
`defaultExpanded`	`boolean`	`false`	Whether item is initially expanded
`isExpanded`	`boolean`	-	Controlled expanded state
`onExpandedChange`	`(isExpanded: boolean) => void`	-	Handler for expanded state changes
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The item content
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionItemRenderProps>`	-	Overrides the default DOM element with a custom render function.

Accordion.Trigger

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode \| RenderFunction`	-	Trigger content or render function
`onPress`	`() => void`	-	Additional press handler
`isDisabled`	`boolean`	-	Whether trigger is disabled
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TriggerRenderProps>`	-	Overrides the default DOM element with a custom render function.

Accordion.Panel

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Panel content
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionPanelRenderProps>`	-	Overrides the default DOM element with a custom render function.

Accordion.Indicator

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Custom indicator icon

Accordion.Body

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Body content

DisclosureGroup

Disclosure

Accordion

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

How much does shipping cost?

Do you ship internationally?

How do I request a refund?

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

How much does shipping cost?

Do you ship internationally?

How do I request a refund?

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

Getting Started

Core Concepts

Advanced Usage

Best Practices

Entire accordion disabled

Disabled Item 1

Disabled Item 2

Individual items disabled

Active Item

Disabled Item

Another Active Item

Getting Started

Core Concepts

Advanced Usage

Using Plus/Minus Icon

Using Caret Icon

Using Arrow Icon

Frequently Asked Questions

How do I place an order?

Can I modify or cancel my order?

How do I purchase a license?

What is the difference between a standard and a pro license?

How do I get support?

Set Up NotificationsReceive account activity updates

Set up Browser ExtensionConnect your browser to your account

Mint CollectibleCreate your first collectible

On this page

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

Getting Started

Core Concepts

Advanced Usage

Best Practices

Getting Started

Core Concepts

Advanced Usage

Entire accordion disabled

Disabled Item 1

Disabled Item 2

Individual items disabled

Active Item

Disabled Item

Another Active Item

Using Plus/Minus Icon

Using Caret Icon

Using Arrow Icon

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

How much does shipping cost?

Do you ship internationally?

How do I request a refund?

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

How much does shipping cost?

Do you ship internationally?

How do I request a refund?

Frequently Asked Questions

How do I place an order?

Can I modify or cancel my order?

How do I purchase a license?

What is the difference between a standard and a pro license?