Collapse
Collapse smoothly expands or collapses the height (or width) of a content region.
Uses the CSS grid-template-rows 0fr → 1fr technique, so there is no height to measure in JavaScript. Collapse renders its own wrapper, so children can be any content. Unlike Collapsible (Layout), Collapse is only the motion: it has no trigger or state of its own.
Collapse animates grid-template-rows from 0fr to 1fr, so it never measures content height. Long text, images and lists all expand smoothly.
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 { Collapse } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Horizontal
orientation="horizontal" collapses and expands the width, e.g. for a collapsible navigation panel.
- Open: slow (300ms), decelerate
- Close: fast (150ms), accelerate
- Opacity unchanged
Duration & no opacity
Opens slowly (slow) and closes quickly (fast); animateOpacity={false} changes only the size.
Usage
Do
- Set aria-expanded on the control button.
- Use it for secondary content: details, advanced filters, notes.
Don't
- Don't put content people must read in a region that is collapsed by default.
- Don't nest several Collapses that run at the same time. The layout jumps.
Props
| Prop · Type | Default | Description |
|---|---|---|
| visibleboolean | Default: — | true runs the enter motion; false runs the exit motion. |
| appearboolean | Default: false | Runs the enter motion on the first render (when visible = true). |
| unmountOnExitboolean | Default: false | Removes the element from the DOM once the exit finishes. When false, the element is hidden (visibility: hidden). |
| duration"faster" | "fast" | "normal" | "gentle" | "slow" | Default: "normal" | Enter duration, mapped to the --durationFaster … --durationSlow tokens; easing --curveDecelerateMid. |
| exitDuration"faster" | "fast" | "normal" | "gentle" | "slow" | Default: = duration | Exit duration; easing --curveAccelerateMid. |
| onMotionFinish(direction: "enter" | "exit") => void | Default: — | Called when a motion phase ends. |
| orientation"vertical" | "horizontal" | Default: "vertical" | Collapses the height or the width. |
| animateOpacityboolean | Default: true | Fades as well. |
| childrenReactNode | Default: — | Any content (Collapse adds the wrapper). |
| className / …div propsHTMLAttributes<HTMLDivElement> | Default: — | Passed to the outer wrapper. |