Collapsible

Installation

npx shadcn@latest add @fujin/collapsible

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger
    render={<Button variant="ghost">Advanced options</Button>}
  />
  <CollapsibleContent>...</CollapsibleContent>
</Collapsible>

The trigger is unstyled - render a Button (or any control) through render. It gets aria-expanded and aria-controls from Base UI, so an icon-only trigger only needs an aria-label that names the section, not its state.

What's different from shadcn/ui

• CollapsibleContent animates its height with Base UI's --collapsible-panel-height variable (shadcn's collapsible is unstyled). The animation is skipped under prefers-reduced-motion.
• render replaces asChild.

API Reference

Every other prop is forwarded to the Base UI Collapsible.