Fade

Fade fades an element in and out. It is the gentlest presence motion.

All presence components (Fade, Scale, Slide, Collapse, Blur, Rotate) share the usePresence state machine (exited → entering → entered → exiting) and use CSS transitions. Durations come from the --duration* tokens; entering uses --curveDecelerateMid and exiting uses --curveAccelerateMid. Motion is skipped when people turn on prefers-reduced-motion. The child receives its classes through Slot, so it must be a single element.

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 { Fade } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

faster

normal

slow

Duration

duration: faster (100ms), fast, normal (default, 200ms), gentle, slow (300ms).

Not run yet

unmountOnExit & onMotionFinish

Removes the element from the DOM after the exit finishes; the callback reports which phase just ended.

Usage

Use Fade for content that appears in place (small notices, placeholders, images that finish loading).
Keep durations short (faster–normal) for small elements.

Don't

Don't wrap several direct children. Fade takes exactly one element.
Don't use Fade to signal an important state without text or an icon.

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.
childrenReactElement	Default: —	A single element. It receives the motion classes through Slot.
usePresence(visible, durationMs, options)hook	Default: —	The shared state machine. Returns { status, mounted, active } so you can build your own motion.