213 free + 82 pro animated React components built with Framer Motion. No npm install. Own the code. Ship in seconds.
Every component runs live. Hover to interact — no demo videos, no mockups.
HOVER TO FEEL THE PULL
No CLI tools, no configuration, no dependencies to manage.
Explore 110+ components across 7 categories. Each card shows a live preview with hover effects.
Click any component → Code tab → copy. The full TypeScript source is yours in one click.
Drop it into your project. Change colors, timing, sizes. You own the code completely.
// 1. Copy from gallery
// 2. Paste into your project
// 3. Ship!
import MagneticButton from "@/components/blocks/button/MagneticButton";
export default function Page() {
return <MagneticButton>Click me ✨</MagneticButton>;
}
UIBlocks gives you the raw TypeScript source. No runtime dependency, no version conflicts, no black boxes. It's your code the moment you paste it.
Built for production from day one.
From buttons to full globe animations. New ones added every week.
Every animation uses the latest Framer Motion v11 APIs — spring physics, gestures, scroll-driven.
Copy the source. No peer dependencies to manage, no version hell.
All components are fully typed. Get autocomplete and type safety out of the box.
Every component works on both dark and light backgrounds. Inline styles make theming trivial.
110+ more waiting for you in the gallery.
"Saved me 3 days of animation work. Just copied the GlobeWireframe and it was perfect."
"The tilt cards and magnetic buttons are insane. My portfolio went from boring to stunning."
"UIBlocks made our landing page look like we hired a motion design agency. 10/10."
"Finally a component library where I OWN the code. No black boxes. Copy, paste, customize."