Why Build a Component Library?
- Reuse animations without rewriting code
- Keep your UI consistent across projects
- Make it easy for teammates (or your future self)
- Learn how to structure scalable React components
Step 1: Setup
Install React + Framer Motion:
npm install framer-motion
Create a folder structure like this:
animated-components/
│
├── src/
│ ├── components/
│ │ ├── AnimatedButton.jsx
│ │ ├── AnimatedCard.jsx
│ │ ├── AnimatedModal.jsx
│ │
│ └── index.js
│
├── example/ # Demo playground
│ ├── App.jsx
│ └── index.js
│
├── package.json
├── README.md
└── vite.config.js (or Next.js if you prefer)
Step 2: Create an Animated Button
// components/AnimatedButton.jsx
import { motion } from "framer-motion";
export default function AnimatedButton({ children, onClick }) {
return (
{children}
);
}
Step 3: Create an Animated Card
// components/AnimatedCard.jsx
import { motion } from "framer-motion";
export default function AnimatedCard({ children }) {
return (
{children}
);
}
Step 4: Create an Animated Modal
// components/AnimatedModal.jsx
import { motion, AnimatePresence } from "framer-motion";
export default function AnimatedModal({ isOpen, onClose, children }) {
return (
{isOpen && (
e.stopPropagation()}
>
{children}
)}
);
}
Step 5: Export from index.js
// index.js
export { default as AnimatedButton } from "./components/AnimatedButton";
export { default as AnimatedCard } from "./components/AnimatedCard";
export { default as AnimatedModal } from "./components/AnimatedModal";
Now you have a mini animated component library ready to import anywhere:
import { AnimatedButton, AnimatedCard, AnimatedModal } from "./components";
Step 6: Demo App (example/)
This is where users can see your components in action.
// example/App.jsx
import { useState } from "react";
import { AnimatedButton, AnimatedCard, AnimatedModal } from "../src";
export default function App() {
const [isOpen, setIsOpen] = useState(false);
return (
Hello from Animated Card 🎉
setIsOpen(true)}>
Open Modal
setIsOpen(false)}>
I am an Animated Modal 🚀
);
}
Step 7: Docs + GitHub
- Create a README.md with installation + usage instructions.
- Push to GitHub.
- Add a demo site using Vite or Next.js + GitHub Pages / Vercel.
Step 8: Publish to npm
You can even publish this as an npm package so others can install it:
npm login
npm publish --access public
Then developers can do:
npm install animated-components-lib
And use it like:
import { AnimatedButton } from "animated-components-lib";
