Installation
Install dependencies
npm i framer-motion clsx tailwind-merge react-icons
Add util file
lib/utils.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Modify Tailwind Config File
tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
animation: {
move: "move 5s linear infinite",
},
keyframes: {
move: {
"0%": { transform: "translateX(-200px)" },
"100%": { transform: "translateX(200px)" },
},
},
},
},
plugins: [],
};
export default config;
Feature Block Animated Card
Damn good card
A card that showcases a set of tools that you use to create your product.
Background Overlay Card
Background Overlays
This card is for some special elements, like displaying background gifs on hover only.
Content Card
Manu Arora
2 min read
Author Card
Card with Author avatar, complete name and time to read - most suitable for blogs.