1 variant

Number Ticker

A number that counts to its value the first time it is seen, formatted by Intl, and read out once rather than forty times.

$48,210

99.98%

1.3M

usage.tsx

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

export function Revenue() {
  return <NumberTicker value={48210} prefix="$" compact />;
}

"use client";

import { motion, useInView, useReducedMotion } from "motion/react";
import { useEffect, useMemo, useRef, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface NumberTickerProps {
  /** Where the count lands. */
  value: number;
  /** Where it starts. Default 0. */
  from?: number;

120 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/number-ticker