HeroUI Accordion

Component

About

HeroUI v3 Accordion — a collapsible content panel built with the real @heroui/react package. Default and surface variants, single or multiple expanded, controlled and default-expanded keys, custom indicator, disabled items, hidden separators, grouped FAQ layout and custom styles. Works in light and dark themes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Accordion to your project and fits it to your theme.

Code

How HeroUI Accordion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { Accordion } from "@/components/ui/heroui-accordion"
import { Plus, Minus, ChevronsDown, ChevronDown } from "lucide-react"

export default function CustomIndicator() {
  const [expandedKeys, setExpandedKeys] = React.useState<Set<React.Key>>(new Set([""]))
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-8">
      <Accordion
        variant="surface"
        className="w-full max-w-md"
        expandedKeys={expandedKeys}
        onExpandedChange={(k) => setExpandedKeys(k as Set<React.Key>)}
      >
        <Accordion.Item id="1">
          <Accordion.Heading>
            <Accordion.Trigger>
              Using Plus/Minus Icon
              <Accordion.Indicator className="[&>svg]:size-4">
                {expandedKeys.has("1") ? <Minus className="size-4" /> : <Plus className="size-4" />}
              </Accordion.Indicator>
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body>
              This accordion uses a plus icon that switches to a minus icon when expanded.
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>

        <Accordion.Item id="2">
          <Accordion.Heading>
            <Accordion.Trigger>
              Using Caret Icon
              <Accordion.Indicator className="[&>svg]:size-4">
                <ChevronDown className="size-4" />
              </Accordion.Indicator>
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body>
              This item uses a caret icon for the indicator. The rotation animation is applied automatically.
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>

        <Accordion.Item id="3">
          <Accordion.Heading>
            <Accordion.Trigger>
              Using Arrow Icon
              <Accordion.Indicator className="[&>svg]:size-4">
                <ChevronsDown className="size-4" />
              </Accordion.Indicator>
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body>
              This item uses an arrow icon. Any icon you pass receives the rotation animation when the item expands.
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>
      </Accordion>
    </div>
  )
}