Collapsible
Collapsible shows or hides a region with a toggle control, animating its height.
A single block, unlike Accordion, which groups several items. Closed content is hidden from screen readers and from the Tab order. The animation uses grid-template-rows and turns off when reduced motion is on.
- Q3 report.docx
- 2027 plan.xlsx
- Meeting notes.docx
- Budget.xlsx
- Design.fig
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Collapsible, CollapsibleTrigger, CollapsibleContent } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Order #1024 details
2 × Mechanical keyboard — $258.001 × Wireless mouse — $49.00Total: $307.00
Open by default, icon button
No state needed: the chevron rotates based on the trigger's data-state.
Usage
Do
- The button label says what will happen (“Show 3 more items”, “Collapse”).
- Use it for secondary content or extra details of a block.
Don't
- Don't stack several Collapsibles as a list. Use Accordion.
- Don't hide the primary action in the collapsed area.
Props
| Prop · Type | Default | Description |
|---|---|---|
| open / defaultOpen / onOpenChangeboolean / boolean / (open) => void | Default: — | Open state. |
| disabledboolean | Default: false | Disables the trigger. |
| CollapsibleTrigger | Default: — | Uses your Button as the trigger (it receives data-state). |
| CollapsibleContent | Default: — | Applies to the inner block; set padding / layout here. |