2 variants

Number Ticker

Numbers that move. One counts up to its value when first seen, the other rolls its digits like an odometer whenever it changes.

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;

110 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Slot number

Digits that roll like an odometer whenever the value changes, each column on its own beat, for live counters and prices.

$48,210

1,284people online

usage.tsx

import { SlotNumber } from "@/components/registry/slot-number";

export function Revenue({ total }) {
  return <SlotNumber value={total} format={{ style: "currency", currency: "USD" }} />;
}

"use client";

import { useReducedMotion } from "motion/react";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export interface SlotNumberProps {
  value: number;
  /** Intl options, such as `{ style: "currency", currency: "USD" }`. */
  format?: Intl.NumberFormatOptions;
  /** Rolls up from zero when it first appears. Default true. */
  rollOnMount?: boolean;

67 more lines ship with an easeUI Pro license.

Buy a license

Install

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