Docs
Counter Card

Counter Card

Displays a beautiful Counter Card.

Installation

Install the following dependencies:

npm install framer-motion

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))
}

Copy and paste the Counter Card code into your project.

API Reference

Props

PropTypeDescription
format(value: number) => stringA function to format the counter value. By default, it will format the number with commas.
targetValuenumberThe target value of the counter.
directionstring"up" | "down"
delaynumberThe delay in milliseconds before the counter starts counting.
classNamestringAdditional classes for the counter.

Usage

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>
  )
}
Gallery CardTwitter Display