Number Ticker

Text 67

About

Animate numbers to count up or down to a target number

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Number Ticker to your project and fits it to your theme.

Code

How Number Ticker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

function NumberTickerDemo() {
  return (
    <p className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white">
      <NumberTicker value={100} />
    </p>
  )
}

function NumberTickerWithDecimal() {
  return (
    <p className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white">
      <NumberTicker value={5.67} decimalPlaces={2} />
    </p>
  )
}

export default {
  NumberTickerDemo,
  NumberTickerWithDecimal,
}