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

import { Accordion } from "@/components/ui/heroui-accordion"
import { ShoppingBag, Receipt, CreditCard, ChevronDown } from "lucide-react"

const items = [
  { icon: <ShoppingBag className="size-4" />, title: "How do I place an order?", content: "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase." },
  { icon: <Receipt className="size-4" />, title: "Can I modify or cancel my order?", content: "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes." },
  { icon: <CreditCard className="size-4" />, title: "What payment methods do you accept?", content: "We accept all major credit cards, including Visa, Mastercard, and American Express." },
]

export default function WithoutSeparator() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-8">
      <Accordion hideSeparator className="w-full max-w-md">
        {items.map((item, i) => (
          <Accordion.Item key={i}>
            <Accordion.Heading>
              <Accordion.Trigger>
                <span className="mr-3 flex size-4 shrink-0 items-center justify-center text-muted [&>svg]:size-4">{item.icon}</span>
                {item.title}
                <Accordion.Indicator className="[&>svg]:size-4">
                  <ChevronDown className="size-4" />
                </Accordion.Indicator>
              </Accordion.Trigger>
            </Accordion.Heading>
            <Accordion.Panel>
              <Accordion.Body>{item.content}</Accordion.Body>
            </Accordion.Panel>
          </Accordion.Item>
        ))}
      </Accordion>
    </div>
  )
}