Number Ticker

When to useCopy Anchor Link

Use it to draw attention to a few key figures: metrics on a landing page, totals in a dashboard header, results after an action. One row of numbers per section is enough; a page full of counting numbers turns into noise.

PlaygroundCopy Anchor Link

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @cadence/number-ticker

UsageCopy Anchor Link

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

export function Revenue() {
  return (
    <NumberTicker
      value={48250}
      format={{ style: "currency", currency: "EUR", maximumFractionDigits: 0 }}
      className="text-5xl font-semibold"
    />
  )
}

The count starts once, the first time the number scrolls into view.

PropsCopy Anchor Link

ExamplesCopy Anchor Link

Stats rowCopy Anchor Link

Stagger several tickers with delay and add units around them.

AccessibilityCopy Anchor Link

• Screen readers always hear the final, formatted value. The animated digits are hidden from the accessibility tree, so nobody hears dozens of intermediate numbers.
• With reduced motion the final value appears immediately.
• Digits use tabular figures so the number does not jitter in width while it counts.

PerformanceCopy Anchor Link

• Digits are written straight to the DOM on each frame; React does not re-render during the count.
• locale defaults to en-US so the server and the browser format the number identically and hydration never mismatches. Pass your own locale for localized sites.