Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-accordion"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>
)
}