Docs
PageView Card
PageView Card
A card component designed to display page view statistics, including interactive animations to enhance user engagement and provide a visually appealing way to present data.
Installation
Copy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Update tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
moveDot: {
"0%": { top: "10%", right: "10%" },
"100%": { top: "10%", right: "10%" },
"25%": { top: "10%", right: "calc(100% - 35px)" },
"50%": { top: "calc(100% - 30px)", right: "calc(100% - 35px)" },
"75%": { top: "calc(100% - 30px)", right: "10%" },
},
},
animation: {
moveDot: "moveDot 6s linear infinite",
},
},
},
}