Number Ticker

Animated number counting effect.

• Location: sabo/src/components/ui/number-ticker.tsx

When to use

• Show KPI counts that animate into place (e.g., “12,345 users”).
• Prefer short ranges to avoid long-running animations.

Usage

sabo/src/components/ui/number-ticker.tsx

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

export function Example() {
  return (
    <NumberTicker
      value={12345}
      startValue={0}
      decimalPlaces={0}
      className="text-4xl font-extrabold"
    />
  );
}

Key props

value · number

The target number to animate to.

startValue · number · default: "0"

The number to start the animation from.

direction · 'up' | 'down' · default: "'up'"

Animation direction: count up or down to the target value.

delay · number · default: "0"

Delay in seconds before starting the animation.

decimalPlaces · number · default: "0"

Number of decimal places to display.

className · string

Additional CSS classes applied to the span element.

Styling tip

• Use large, bold typography and monospace figures for consistent width (tabular-nums).
• Avoid combining with other animations in the same viewport to reduce motion overload.