Number Ticker

Animate numbers to count up or down to a target number

import { NumberTicker } from "@/components/vritti/number-ticker";

export function NumberTickerExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <NumberTicker
        value={100}
        className="text-8xl font-medium tracking-tighter whitespace-pre-wrap text-black dark:text-white"
      />
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/number-ticker"

Dependencies


pnpm add motion