038
Collapsible
Layoutopen: false
Customize
Scramble
Code
<Collapsible>
<CollapsibleTrigger>Show details</CollapsibleTrigger>
<CollapsibleContent>
<p className="text-muted-foreground">
Installed as source under components/collapsible.
</p>
</CollapsibleContent>
</Collapsible>Install
npx shadcn@latest add https://components.haedong.dev/r/collapsible.json
Props
Collapsible extends the native div props, CollapsibleTrigger the button props, CollapsibleContent the div props. The trigger carries aria-expanded and aria-controls; the content is role="region" labelled by the trigger and unmounts when closed.
| Prop | Type | Description |
|---|---|---|
| open / defaultOpen | boolean | Controlled / uncontrolled state. Closed by default. |
| onOpenChange | (open: boolean) => void | Called on every toggle. |
| scramble | boolean | Replay the character decode on the trigger label on hover. Defaults to true. |