Accordion

Import

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

Usage

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

Multiple Expanded

Controlled

Custom Indicator

Disabled State

FAQ Layout

Custom Styles

Without Separator

Custom Render Function

Styling

Passing Tailwind CSS classes

  {items.map((item, index) => (
    
      
        
          {item.iconUrl ? (
            <img
              alt={item.title}
              className="group-hover/item:scale-120 group-hover/item:-rotate-10 h-11 w-11 transition-[scale,rotate] duration-300 ease-out group-hover/item:drop-shadow-lg"
              src={item.iconUrl}
            />
          ) : null}
          
            {item.title}
            {item.subtitle}
          
          svg]:size-4">
            
          
        
      
      
        {item.content}
      
    
  ))}

); }`} />

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

Prop	Type	Default	Description
allowsMultipleExpanded	boolean	false	Whether multiple items can be expanded at once
defaultExpandedKeys	Iterable	-	The initial expanded keys
expandedKeys	Iterable	-	The controlled expanded keys
onExpandedChange	(keys: Set) => 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 Props

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 Props

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 Props

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 Props

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

Accordion.Body Props

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