Number Ticker · paneui

Saved this year

Installation

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

Usage

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

<NumberTicker value={1284.5} locale="en-US" format={{ style: "currency", currency: "USD" }} />

Examples

Formats

Use for currency, percentages or compact counts.

Stagger and Transition

Use when the default roll feels too fast or too even.

Live Counter

Motion

Only digits roll; separators and symbols stay still. With reduced motion digits jump straight to their value. The formatted number is read from a visually hidden copy for screen readers.

Animated Number counts smoothly instead of rolling digits; Digit Swap.

API Reference

NumberTicker

A number whose digits roll like an odometer when value changes. Also accepts every prop of span.

value*: number; The number to show.
locale= runtime locale: string; Locale for Intl.NumberFormat.
format: Intl.NumberFormatOptions; Currency, percent, compact, fraction digits and so on.
startOnView= true: boolean; Hold every digit at 0 until half the number scrolls into view, then roll.
stagger= 0.045: number; Seconds between neighbouring digits, rippling from the right.
transition= { type: "spring", stiffness: 380, damping: 30, mass: 0.7 }: Transition; motion transition merged over the default spring.
digitClassName: string; Classes for each rolling digit column.

Prop	Type	Default	Description
value*	number	—	The number to show.
locale	string	runtime locale	Locale for `Intl.NumberFormat`.
format	Intl.NumberFormatOptions	—	Currency, percent, compact, fraction digits and so on.
startOnView	boolean	true	Hold every digit at 0 until half the number scrolls into view, then roll.
stagger	number	0.045	Seconds between neighbouring digits, rippling from the right.
transition	Transition	{ type: "spring", stiffness: 380, damping: 30, mass: 0.7 }	motion transition merged over the default spring.
digitClassName	string	—	Classes for each rolling digit column.

data-slot: "number-ticker" on the root, "number-ticker-digit" on each digit column.

Data attribute	Description
data-slot	"number-ticker" on the root, "number-ticker-digit" on each digit column.