The latest articles on DEV Community by Priyanshu Kumar (@28priyanshu2001). https://dev.to/28priyanshu2001 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4218876%2F038a9e1e-ca1f-48cc-ab4c-5846b4ae5344.jpg https://dev.to/28priyanshu2001 en Priyanshu Kumar Sat, 31 Oct 2026 10:58:06 +0000 https://dev.to/28priyanshu2001/i-built-79-animated-react-components-with-motion-and-tailwind-v4-free-mit-shadcn-style-48g5 https://dev.to/28priyanshu2001/i-built-79-animated-react-components-with-motion-and-tailwind-v4-free-mit-shadcn-style-48g5 <p>Hi, I'm Priyanshu, a frontend engineer from Bengaluru. For the past 3+ years<br> I've built React and Next.js apps, mostly complex interfaces: canvas annotation<br> tools, custom video players and role-based dashboards.</p> <p>On the side, I've been building <strong><a href="https://ui.devsloka.in" rel="noopener noreferrer">Devsloka UI</a></strong>: a<br> library of animated React components for landing pages. Its tagline is<br> <em>"Build something that moves."</em> Here's what's inside and how it's built.</p> <h2> What's in it </h2> <ul> <li> <strong>41 components:</strong> Morphing Nav, Morphing Card, Morphing Modal, Text Effect, Product Tour, Expanding Cards, Content Carousel and more</li> <li> <strong>18 blocks:</strong> Hero, Features, Pricing, Testimonials, FAQ, Team, Contact, Newsletter, Changelog, Blog, CTA, plus auth screens (Sign In, Sign Up, OTP, Forgot Password) and a 404 page</li> <li> <strong>4 backgrounds</strong> and <strong>16 hooks</strong> </li> <li>Playful ones, like a laptop that closes as you scroll, an animated smartwatch, a receipt printer and arc scroll steps</li> </ul> <h2> The stack </h2> <p>React 19, Next.js, Tailwind CSS v4, Motion, Radix and TypeScript.</p> <h2> Why copy-paste instead of an npm package </h2> <p>The library follows shadcn conventions. You install a component like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npx shadcn@latest add &lt;registry url&gt; </code></pre> </div> <p>Or you copy the source straight into your project.</p> <p>The code lives in <em>your</em> repo. You can change anything, there's no runtime<br> dependency, and you never wait for me to merge a PR to fix your animation<br> timing. The tradeoff is that you don't get automatic updates.</p> <h2> What's free and what's coming </h2> <ul> <li> <strong>Free (MIT):</strong> every component, background and hook</li> <li> <strong>Pro (coming soon):</strong> more complex components, full-page templates, new components every month and an AI skill for customizing components. It will be a one-time purchase, with no subscription.</li> </ul> <h2> Need a site built? </h2> <p>I also run a small web studio, <strong><a href="https://devsloka.in" rel="noopener noreferrer">Devsloka</a></strong>. We build<br> websites and web apps with Next.js and TypeScript, add AI features to<br> products, and do UI/UX and motion design. You can see more of my work at<br> <a href="https://priyanshukr.com" rel="noopener noreferrer">priyanshukr.com</a>.</p> <h2> Try it </h2> <p>👉 <a href="https://ui.devsloka.in" rel="noopener noreferrer">https://ui.devsloka.in</a></p> <p>Which animated component do you rebuild most often? I'll consider adding it<br> next.</p> opensource react webdev tailwindcss