Collapsible
One disclosure: a trigger that shows or hides a single panel. Reach for Accordion when there are several, and Technical details for secondary facts.
bunx --bun shadcn@4.17.0 add @waimakers/collapsible- npm dependencies
- @base-ui/react@1.9.0lucide-react@1.33.0
From the registry
A single disclosure with aria-expanded, a connected content panel and the shared focus outline. Content is hidden while closed.
Examples
Basic
The trigger carries aria-expanded and controls the panel it opens.
Controlled
Hold the open state yourself to change the trigger's label or react to it.
Anna, Paul, Tamar and 3 more
Open by default
Start open with defaultOpen when the content usually matters.
Ship the new onboarding on Monday. Joost owns the rollout.
Disabled
A disabled trigger cannot toggle the panel.
Focus
The trigger takes the shared text-colour focus ring.