I built 79+ animated React components with Motion and Tailwind v4 (free, MIT, shadcn-style)

Description and use

Developers can quickly integrate 79+ animated components, 18 blocks, 4 backgrounds, and 16 hooks into their projects, accelerating UI development.

Problem

Frontend developers need reusable, animated UI components that can be customized without waiting for package updates.

Outcome

Developers can quickly integrate 79+ animated components, 18 blocks, 4 backgrounds, and 16 hooks into their projects, enabling fast UI development and customization.

Workflow

• 1. Create a Next.js project with React 19, Tailwind CSS v4, Motion, Radix, and TypeScript.
• 2. Install a component via shadcn CLI: npx shadcn@latest add <registry url> or copy source into the project.
• 3. Import and use the component in JSX, customizing props or overriding styles as needed.
• 4. Run the app; animations work immediately without waiting for package updates.

Evidence

I built 79+ animated React components with Motion and Tailwind v4 (free, MIT, shadcn-style)

Source

You install a component like this: npx shadcn@latest add <registry url>

Source

The code lives in your repo. You can change anything, there's no runtime dependency, and you never wait for me to merge a PR to fix your animation timing.

Source