✨ If you like Ebon UI, please give us a star on GitHub.

Number Ticker

A Number counter featuring animations

Open in

Active users

0.00M

Revenue generated

0.0%

Uptime this year

import { NumberTicker } from "@/registry/ebonui/number-ticker"

export function NumberTickerDemo() {
  return (
    <section className="from-white to-gray-50 py-24 dark:from-black dark:to-neutral-950">
      <div className="mx-auto max-w-6xl px-6 text-center">
        <div className="grid grid-cols-1 gap-12 md:grid-cols-3">
          <div>
            <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">
              <NumberTicker value={12750} decimalPlaces={0} delayMs={300} />
              <span className="text-4xl">+</span>
            </p>
            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
              Active users
            </p>
          </div>

          <div>
            <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">
              <NumberTicker value={4.82} decimalPlaces={2} delayMs={600} />
              <span className="text-4xl">M</span>
            </p>
            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
              Revenue generated
            </p>
          </div>

          <div>
            <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">
              <NumberTicker value={99.7} decimalPlaces={1} delayMs={900} />
              <span className="text-4xl">%</span>
            </p>
            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
              Uptime this year
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}

Installation


pnpm dlx shadcn@latest add https://ebonui.com/r/number-ticker.json

Example

Big Animated Number

Open in

import { NumberTicker } from "@/registry/ebonui/number-ticker"

export function NumberTickerDemo() {
  return (
    <section className="relative overflow-hidden py-32 text-white">
      <div className="relative mx-auto max-w-4xl px-6 text-center">
        <NumberTicker
          value={1000000}
          className="bg-gradient-to-r from-purple-400 to-purple-800 bg-clip-text text-6xl text-transparent md:text-8xl"
          delayMs={800}
          springConfig={{ damping: 35, stiffness: 70 }}
        />
      </div>
    </section>
  )
}

Live Counter Dashboard

Open in

Total Sales

New Users

Success Rate

Avg. Score

0.00/5

import { cn } from "@/lib/utils"
import { NumberTicker } from "@/registry/ebonui/number-ticker"

export function NumberTickerDemo() {
  return (
    <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
      {[
        {
          label: "Total Sales",
          value: 84250,
          prefix: "$",
          color: "text-white",
        },
        { label: "New Users", value: 1832, suffix: "+", color: "text-white" },
        {
          label: "Success Rate",
          value: 97.3,
          suffix: "%",
          color: "text-white",
        },
        {
          label: "Avg. Score",
          value: 4.89,
          decimalPlaces: 2,
          suffix: "/5",
          color: "text-white",
        },
      ].map((stat) => (
        <div
          key={stat.label}
          className="rounded-xl bg-white p-6 shadow-lg dark:bg-neutral-900"
        >
          <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
            {stat.label}
          </p>
          <p className={cn("mt-2 text-2xl font-bold", stat.color)}>
            {stat.prefix}
            <NumberTicker
              value={stat.value}
              decimalPlaces={stat.decimalPlaces ?? 0}
              triggerOnce={false}
              delayMs={200}
            />
            {stat.suffix}
          </p>
        </div>
      ))}
    </div>
  )
}

Usage

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

<NumberTicker
  value={1000000}
  className="bg-gradient-to-r from-purple-400 to-purple-800 bg-clip-text text-6xl text-transparent md:text-8xl"
  delayMs={800}
  springConfig={{ damping: 35, stiffness: 70 }}
/>

Props

Prop	Type	Default	Description
`value`	`int`	`0`	The value to count to
`direction`	`up \| down`	`"up"`	The direction to count in
`delay`	`number`	`0`	The delay before counting
`decimalPlaces`	`number`	`0`	The number of decimal places to show
`startValue`	`number`	`0`	The value to start counting from

Morphing Text Popover

On This Page

Installation Example Big Animated Number Live Counter Dashboard Usage Props

Contribute

Number Ticker

A Number counter featuring animations

Open in

Active users

0.00M

Revenue generated

0.0%

Uptime this year

import { NumberTicker } from "@/registry/ebonui/number-ticker"

export function NumberTickerDemo() {
  return (
    <section className="from-white to-gray-50 py-24 dark:from-black dark:to-neutral-950">
      <div className="mx-auto max-w-6xl px-6 text-center">
        <div className="grid grid-cols-1 gap-12 md:grid-cols-3">
          <div>
            <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">
              <NumberTicker value={12750} decimalPlaces={0} delayMs={300} />
              <span className="text-4xl">+</span>
            </p>
            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
              Active users
            </p>
          </div>

          <div>
            <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">
              <NumberTicker value={4.82} decimalPlaces={2} delayMs={600} />
              <span className="text-4xl">M</span>
            </p>
            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
              Revenue generated
            </p>
          </div>

          <div>
            <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">
              <NumberTicker value={99.7} decimalPlaces={1} delayMs={900} />
              <span className="text-4xl">%</span>
            </p>
            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
              Uptime this year
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}

Installation


pnpm dlx shadcn@latest add https://ebonui.com/r/number-ticker.json

Example

Big Animated Number

Open in

import { NumberTicker } from "@/registry/ebonui/number-ticker"

export function NumberTickerDemo() {
  return (
    <section className="relative overflow-hidden py-32 text-white">
      <div className="relative mx-auto max-w-4xl px-6 text-center">
        <NumberTicker
          value={1000000}
          className="bg-gradient-to-r from-purple-400 to-purple-800 bg-clip-text text-6xl text-transparent md:text-8xl"
          delayMs={800}
          springConfig={{ damping: 35, stiffness: 70 }}
        />
      </div>
    </section>
  )
}

Live Counter Dashboard

Open in

Total Sales

New Users

Success Rate

Avg. Score

0.00/5

import { cn } from "@/lib/utils"
import { NumberTicker } from "@/registry/ebonui/number-ticker"

export function NumberTickerDemo() {
  return (
    <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
      {[
        {
          label: "Total Sales",
          value: 84250,
          prefix: "$",
          color: "text-white",
        },
        { label: "New Users", value: 1832, suffix: "+", color: "text-white" },
        {
          label: "Success Rate",
          value: 97.3,
          suffix: "%",
          color: "text-white",
        },
        {
          label: "Avg. Score",
          value: 4.89,
          decimalPlaces: 2,
          suffix: "/5",
          color: "text-white",
        },
      ].map((stat) => (
        <div
          key={stat.label}
          className="rounded-xl bg-white p-6 shadow-lg dark:bg-neutral-900"
        >
          <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
            {stat.label}
          </p>
          <p className={cn("mt-2 text-2xl font-bold", stat.color)}>
            {stat.prefix}
            <NumberTicker
              value={stat.value}
              decimalPlaces={stat.decimalPlaces ?? 0}
              triggerOnce={false}
              delayMs={200}
            />
            {stat.suffix}
          </p>
        </div>
      ))}
    </div>
  )
}

Usage

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

<NumberTicker
  value={1000000}
  className="bg-gradient-to-r from-purple-400 to-purple-800 bg-clip-text text-6xl text-transparent md:text-8xl"
  delayMs={800}
  springConfig={{ damping: 35, stiffness: 70 }}
/>

Props

Prop	Type	Default	Description
`value`	`int`	`0`	The value to count to
`direction`	`up \| down`	`"up"`	The direction to count in
`delay`	`number`	`0`	The delay before counting
`decimalPlaces`	`number`	`0`	The number of decimal places to show
`startValue`	`number`	`0`	The value to start counting from

Morphing Text Popover

On This Page

Installation Example Big Animated Number Live Counter Dashboard Usage Props

Contribute