Primitive · CLI
Collapsible
Single disclosure with height:auto settle and chevron rotate.
Preview
npx shadcn@latest add @atroui/collapsibleReveal depth only when it is relevant — one focused section at a time. Height settles with revealTween.
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/collapsibleSource lands in your repo. Installation · Registry
Usage
Use for a single optional section. Panel height settles with revealTween; Accordion is for multi-item FAQs.
tsx
import {
Collapsible,
CollapsiblePanel,
CollapsibleTrigger,
} from "@/components/ui/collapsible"
<Collapsible defaultOpen>
<CollapsibleTrigger>Advanced options</CollapsibleTrigger>
<CollapsiblePanel>
Reveal depth only when it is relevant — one focused section at a time.
</CollapsiblePanel>
</Collapsible>Collapsible