0%

scroll

FadeIn

Fade in on mount or scroll.

Playground

Scroll-based previews need you to scroll into view.

Live preview

Fade in content

Code

<FadeIn delay={0} duration={1} variant="normal">
  <div className="rounded-xl border bg-card p-6">Fade in content</div>
</FadeIn>

shadcn add

npx shadcn@latest add @void/fade-in

# Or URL (no .json):
npx shadcn@latest add https://void.ui.unsanity.ai/r/fade-in

Props

PropTypeDefaultDescription
presetstringfadeInOverride entrance preset
delaynumberDelay in seconds
variantsubtle | normal | dramaticnormalIntensity