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
Open in
Damn good card
A card that showcases a set of tools that you use to create your product.
Background Overlay Card
Open in
Background Overlays
This card is for some special elements, like displaying background gifs on hover only.
Content Card
Open in
Manu Arora
2 min read
Author Card
Card with Author avatar, complete name and time to read - most suitable for blogs.
Get beautiful, hand-crafted templates and components with Aceternity UI Pro
Professional, beautiful and elegant templates for your business. Get the best component packs and templates with Aceternity UI Pro.
Manu is a genius. He is open-minded, curious and deeply invested in the projects he chooses to work on. He takes your vision and brings it to life -- and is a true partner in th...
Meru Gokhale
Founder at Editorially, Editrix