The FadeIn component creates a smooth fade-in animation for its children when they enter the viewport.
This content will fade in when it enters the viewport
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/fade-in.jsonEverything Fade In accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | The content to be faded in |
| delay | number | 0 | Delay before the animation starts (in seconds) |
| duration | number | 0.5 | Duration of the animation (in seconds) |
| className | string | '' | Additional CSS classes for styling |
| once | boolean | true | Whether to trigger the animation only once |
Required.