Number Ticker

Counts up to a number once, when it scrolls into view. The final value is rendered on the server.

Dependenciesmotion

12,480
Developers: 99.99%
Uptime

Installation#

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

Or pass the full URL: https://ui.balick.me/r/number-ticker.json

Usage#

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

export function Uptime() {
  return <NumberTicker value={99.99} decimals={2} suffix="%" />
}

Props#

Prop	Type	Default	Description
`value` The number to count up to. Required.	`number`	—	The number to count up to. Required.
`from` Number the count starts from.	`number`	0	Number the count starts from.
`decimals` Digits after the decimal point.	`number`	0	Digits after the decimal point.
`prefix` Text before the number, such as "$" or "<".	`string`	—	Text before the number, such as "$" or "<".
`suffix` Text after the number, such as "%" or "M+".	`string`	—	Text after the number, such as "%" or "M+".
`duration` Duration of the count, in seconds.	`number`	1.2	Duration of the count, in seconds.
`delay` Delay before the count starts once in view, in seconds.	`number`	0	Delay before the count starts once in view, in seconds.