Number Ticker Growth Metrics Counter

Component 5

About

An animated percentage counter that shifts color and swaps direction icons to signal positive or negative growth trends, ideal for KPIs, stock changes, and quarterly metrics.

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

Code

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

Usage.tsx

"use client";

import NumberTicker from "@/components/ui/number-ticker-04";
import { useEffect, useState } from "react";

const NumberTickerDemo = () => {
  const [val, setVal] = useState(0.184); // +18.4%

  useEffect(() => {
    const interval = setInterval(() => {
      setVal((prev) => (prev > 0 ? -0.057 : 0.184));
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flex items-center gap-2">
      <NumberTicker
        value={val}
        className="font-medium lg:text-5xl sm:text-4xl text-3xl "
      />
    </div>
  );
};

export default NumberTickerDemo;