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-accordionimport { Accordion } from "@/components/ui/heroui-accordion"
import { ChevronDown } from "lucide-react"
const items = [
{ iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/bell-small.png", title: "Set Up Notifications", subtitle: "Receive account activity updates", content: "Stay informed about your account activity with real-time notifications." },
{ iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/compass-small.png", title: "Set up Browser Extension", subtitle: "Connect your browser to your account", content: "Enhance your browsing experience by installing our official browser extension." },
{ iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/mint-collective-small.png", title: "Mint Collectible", subtitle: "Create your first collectible", content: "Begin your journey into the world of digital collectibles by creating your first NFT." },
]
export default function CustomStyles() {
return (
<div className="flex min-h-screen w-full items-center justify-center p-8">
<Accordion variant="surface" className="w-full max-w-md rounded-2xl">
{items.map((item, i) => (
<Accordion.Item key={i} className="group/item">
<Accordion.Heading>
<Accordion.Trigger className="group flex items-center gap-2">
<img
alt={item.title}
src={item.iconUrl}
className="h-11 w-11 transition-[scale,rotate] duration-300 ease-out group-hover/item:scale-110 group-hover/item:-rotate-6 group-hover/item:drop-shadow-lg"
/>
<div className="flex flex-col gap-0 text-left">
<span className="font-medium leading-5">{item.title}</span>
<span className="font-normal leading-6 text-muted/80">{item.subtitle}</span>
</div>
<Accordion.Indicator className="text-muted/50 [&>svg]:size-4">
<ChevronDown className="size-4" />
</Accordion.Indicator>
</Accordion.Trigger>
</Accordion.Heading>
<Accordion.Panel>
<Accordion.Body className="text-muted/80">{item.content}</Accordion.Body>
</Accordion.Panel>
</Accordion.Item>
))}
</Accordion>
</div>
)
}