ProComponents, templates & AI tooling
HeroUI
27.7k
Getting Started
Components
Releases
Migration

Accordion

A collapsible content panel for organizing information in a compact space

FigmaStorybookReact AriaSourceStyles source

Usage

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

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

Without Separator

Multiple Expanded

Disabled State

Controlled

Custom Indicator

Render Function

FAQ Layout

Customization

Tailwind CSS

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

PropTypeDefaultDescription
allowsMultipleExpandedbooleanfalseWhether multiple items can be expanded at once
defaultExpandedKeysIterable<Key>-The initial expanded keys
expandedKeysIterable<Key>-The controlled expanded keys
onExpandedChange(keys: Set<Key>) => void-Handler called when expanded keys change
isDisabledbooleanfalseWhether the entire accordion is disabled
variant"default" | "surface""default"The visual variant of the accordion
hideSeparatorbooleanfalseHide separator lines between accordion items
classNamestring-Additional CSS classes
childrenReactNode-The accordion items
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionRenderProps>-Overrides the default DOM element with a custom render function.

Accordion.Item

PropTypeDefaultDescription
idKey-Unique identifier for the item
isDisabledbooleanfalseWhether this item is disabled
defaultExpandedbooleanfalseWhether item is initially expanded
isExpandedboolean-Controlled expanded state
onExpandedChange(isExpanded: boolean) => void-Handler for expanded state changes
classNamestring-Additional CSS classes
childrenReactNode-The item content
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionItemRenderProps>-Overrides the default DOM element with a custom render function.

Accordion.Trigger

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode | RenderFunction-Trigger content or render function
onPress() => void-Additional press handler
isDisabledboolean-Whether trigger is disabled
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, TriggerRenderProps>-Overrides the default DOM element with a custom render function.

Accordion.Panel

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode-Panel content
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionPanelRenderProps>-Overrides the default DOM element with a custom render function.

Accordion.Indicator

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode-Custom indicator icon

Accordion.Body

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode-Body content

All Components (React)

Explore the full list of components available in the library. More are on the way.

Alert

Display important messages and notifications to users with status indicators

On this page

UsageAnatomyExamplesSurfaceWithout SeparatorMultiple ExpandedDisabled StateControlledCustom IndicatorRender FunctionFAQ LayoutCustomizationTailwind CSSGlobal CSSStyling ReferenceCSS ClassesInteractive StatesAPI ReferenceAccordionAccordion.ItemAccordion.TriggerAccordion.PanelAccordion.IndicatorAccordion.BodyRelated Components