Collapsible
Show/hide a single block of content. A simpler primitive than Accordion when you do not need multiple panels or item-level state.
Default
Single togglable block.
Usage
Import the parts you need from the component's folder.
ts
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";Basic
The classic pattern: a summary row stays visible while the rest tucks behind a ghost icon trigger.
Settings card
Reveal advanced options inside a card. The trigger row flips a chevron as it opens.
File tree
Nest collapsibles to build a disclosure tree with folders and files.
Controlled
Drive open state externally with v-model:open.
Disabled
Set disabled to lock the block so the trigger cannot toggle it.