Displays a beautiful Counter Card.
npm install framer-motionimport { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
| Prop | Type | Description |
|---|---|---|
| format | (value: number) => string | A function to format the counter value. By default, it will format the number with commas. |
| targetValue | number | The target value of the counter. |
| direction | string | "up" | "down" |
| delay | number | The delay in milliseconds before the counter starts counting. |
| className | string | Additional classes for the counter. |
export function CounterCard() {
return (
<BentoCard className="relative flex flex-col overflow-visible bg-gray-100 dark:bg-zinc-700 sm:col-span-2">
<strong className="text-4xl font-semibold">
<Counter targetValue={200} format={(v) => +Math.ceil(v) + "k+ Users"} />
</strong>
</BentoCard>
)
}