build69
build69  /  Components  /  Motion — Transitions & Decorative  /  Fade

Fade

v1.0.2Updated 22 Sept 2026

Cross-fades its child's opacity in and out based on the `in` prop, using a pure-CSS transition driven by inline styles. Supports per-instance duration, delay and easing, plus `unmountOnExit` to remove the child from the DOM after the exit transition finishes. Combine with a `delay` per item to stagger a list or grid entrance.

View source← Back to catalog

Preview

Live · 3 stories
Fade DemoOpen ↗
▸Why this is recommendedfadetransitionanimationopacity+4

Fade — demo.

Recommended for+14
  • ✓Fading a panel in when a toggle is switched on
  • ✓Staggering dashboard stat cards in on page load
  • ✓Fading in an empty-state or loading message
  • ✓Cross-fading between two pieces of inline content
Tags+6
fadetransitionanimationopacitymotionmuirevealdemo
Features+4
  • Opacity cross-fade on a boolean `in` prop
  • Configurable duration / delay / easing per instance
  • unmountOnExit removes the child from the DOM after exit
  • Respects prefers-reduced-motion (snaps, no animation)
  • data-state attribute (entering/entered/exiting/exited) for debugging
  • Zero dependencies beyond React
Not recommended for−2
  • ✕Page-level route transitions (use a router-level transition)
  • ✕Scroll-triggered reveals (use BlurFade with inView)
  • ✕Animating size or layout (use Collapse)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Fade" })

Usage

import { Fade } from '@/components/motion/transitions/fade';

<Fade in={open} duration={250}>
  <Card>Details</Card>
</Fade>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
in

Whether the child is shown; drives the transition

booleanyes
duration

Duration in ms. Default 200

number—
delay

Delay in ms before the transition starts. Default 0

number—
easing

Timing function. Default 'ease-out'

'ease' | 'ease-out' | 'ease-in' | 'linear'—
unmountOnExit

Remove the child from the DOM after exit. Default false

boolean—
className

Extra classes merged onto the wrapper element

string—
style

Extra inline styles; transition-driven properties take precedence

React.CSSProperties—
ref

Ref to the wrapper element (React 19 ref-as-prop)

React.Ref<HTMLDivElement>—
children

Content to fade

React.ReactNodeyes

Related

Platform docsAll componentsSource files