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"
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>
)
}