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"
export default function Disabled() {
return (
<div className="flex min-h-screen w-full items-center justify-center p-8">
<Accordion className="w-full max-w-md">
<Accordion.Item id="active">
<Accordion.Heading>
<Accordion.Trigger>
Active Item
<Accordion.Indicator />
</Accordion.Trigger>
</Accordion.Heading>
<Accordion.Panel>
<Accordion.Body>This item works normally and can be expanded.</Accordion.Body>
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item id="disabled" isDisabled>
<Accordion.Heading>
<Accordion.Trigger>
Disabled Item
<Accordion.Indicator />
</Accordion.Trigger>
</Accordion.Heading>
<Accordion.Panel>
<Accordion.Body>This content can't be reached because the item is disabled.</Accordion.Body>
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item id="another">
<Accordion.Heading>
<Accordion.Trigger>
Another Active Item
<Accordion.Indicator />
</Accordion.Trigger>
</Accordion.Heading>
<Accordion.Panel>
<Accordion.Body>This item is interactive as well.</Accordion.Body>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
</div>
)
}