Number Ticker

Odometer digits that roll to new values

Each digit sits on a vertical reel and rolls to its next value on a spring, always taking the shortest path around the loop. Handles grouping separators, prefixes and suffixes.

Preview

Revenue

↑ 8.4% from the previous period

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/number-ticker.json

Usage

Import the component:

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

Use it in your code:

<NumberTicker
  value={12847}
  prefix="$"
  className="text-4xl font-semibold"
/>

Props

Property	Type	Default	Description
value	number	—	The number to display. Digits roll whenever it changes.
separator	string	","	Thousands separator. Pass "" to disable grouping.
prefix	string	—	Rendered before the digits, e.g. "$".
suffix	string	—	Rendered after the digits, e.g. "%".
className	string	—	Classes for the wrapper. Font size and color are inherited.

Components