How to Add Animated Components to a React App
The fastest way to add animated components to a React app is to install a ready-made component from a shadcn registry. Run npx shadcn@latest add with the component URL, import it, and render it. The component brings its Motion and Tailwind CSS code with it, so you tune the animation in your own files.
Step by step
- Set up Tailwind CSS and shadcn in your project. See installation.
- Pick a component from animated components.
- Copy its install command, for example
npx shadcn@latest add https://registry.watermelon.sh/r/<name>.json. - Import the component from your components folder and render it.
- Adjust durations and easing in the component file to match your product.
Animate on mount or on scroll
With Motion, use initial and animate props to animate a component when it first renders, and whileInView to animate when it scrolls into view. Keep entrance animations short, around 200 to 400 milliseconds, so the page never feels slow.
Respect reduced motion
Some people turn off animation at the operating system level. Motion exposes a useReducedMotion hook, and Tailwind has motion-safe and motion-reduce variants. Use them to swap large movement for a simple fade.