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"

const items = [
  { id: "getting-started", q: "Getting Started", a: "Learn the basics of HeroUI and how to integrate it into your React project. This section covers installation, setup, and your first component." },
  { id: "core-concepts", q: "Core Concepts", a: "Understand the core ideas behind HeroUI: variants, slots, theming tokens and accessibility." },
  { id: "advanced", q: "Advanced Usage", a: "Compose components, build custom variants, and integrate HeroUI with your design system." },
]

export default function Controlled() {
  const [keys, setKeys] = React.useState<Set<React.Key>>(new Set(["getting-started"]))
  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 p-8">
      <p className="text-sm text-muted-foreground">
        Expanded: {Array.from(keys).join(", ") || "none"}
      </p>
      <Accordion
        expandedKeys={keys}
        onExpandedChange={(k) => setKeys(k as Set<React.Key>)}
        className="w-full max-w-md"
      >
        {items.map((f) => (
          <Accordion.Item key={f.id} id={f.id}>
            <Accordion.Heading>
              <Accordion.Trigger>
                {f.q}
                <Accordion.Indicator />
              </Accordion.Trigger>
            </Accordion.Heading>
            <Accordion.Panel>
              <Accordion.Body>{f.a}</Accordion.Body>
            </Accordion.Panel>
          </Accordion.Item>
        ))}
      </Accordion>
    </div>
  )
}