SmoothUI is an open-source React component library focused on smooth animations and interactions. I built it to solve a specific pain: copying a nice animation from a tutorial usually means hours fighting with Motion, timings and state. SmoothUI hands you the component already solved — ready to copy and paste.
The project has grown past 850 stars on GitHub, becoming a go-to resource for developers who want to add motion to their interfaces without starting from scratch.
The problem it solves
Most component libraries prioritize structure and treat animation as an afterthought. The result is that microinteractions — the thing that makes an interface feel alive — end up being the first thing cut when time runs short.
SmoothUI flips that priority: every component exists to demonstrate a specific animation technique, with the code on display so you can understand it, copy it, and adapt it.
What I built
- A collection of animated components ready to copy and paste, each focused on a specific interaction (transitions, gestures, loading states, feedback).
- A modern technical base: React, Tailwind CSS, shadcn/ui as the foundation, and Motion (formerly Framer Motion) as the animation engine.
- Visible, copyable code on every example, so learning is active rather than a black box.
- A dedicated site (
smoothui.dev) that works as documentation, showcase and playground at once.
Key decisions
The real challenge wasn't animating — it was making the animations feel good on any device without hurting performance. Every component is designed to be smooth on both desktop and mobile, and respects the system's reduced-motion preferences for accessibility.
Results
- Over 850 stars on GitHub and an active community that uses and iterates on it.
- A resource that shrinks the gap between "I want this animation" and "it's already in my project."
- The foundation I later built UI Craft on — my design-taste system for AI agents.
Project link: smoothui.dev