Skip to main content
  • 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.