Number Ticker

FreeNewSample

Animates between numbers digit by digit, with locale formatting, prefixes and suffixes. Good for stats, pricing and dashboards.

Community Inspired

text
numbers
stats

1,284

Components installed this week

Customize

Accent

Radius12px

Motion

Speed

These controls show a few ways to adapt it. The source is fully editable.

Install

Not published yet

npx shadcn@latest add @uicoolkit/number-ticker

Install commands go live when this item ships to the registry.

Dependencies

motion

Use with an agent

Copy a prompt with this component, your current preview settings and links to its docs.

Add the UICoolKit "Number Ticker" component (number-ticker) to this project.
Docs: https://uicoolkit.com/components/number-ticker
Agent docs: https://uicoolkit.com/components/number-ticker.md
Install: npx shadcn@latest add @uicoolkit/number-ticker
Preview settings to match: accent Ember, radius 12px, motion on.
Use the documented props and className hooks rather than editing internals, and wire it to this app's real state.
(Note: this is a sample item from the UICoolKit website shell and is not published yet.)

number-ticker.tsx

<NumberTicker value={12840} format={{ notation: "compact" }} />

Prop	Type	Default
`value` Target value; changes animate from the current value.	`number`	`—`
`format` Passed to Intl.NumberFormat.	`Intl.NumberFormatOptions`	`—`
`startOnView` Wait until visible before counting.	`boolean`	`true`
`className` Merged onto the root after defaults, so consumer styles win.	`string`	`—`
`motion` Disable animation or tune duration, easing and spring values. Reduced motion is honored by default.	`boolean \| MotionOptions`	`true`

Every part accepts className, and consumer classes are merged last so they win. Control state from your own data, replace any content, and tune or disable motion.

A substantially restyled instance

<NumberTicker
  className="rounded-none border-2 border-black bg-yellow-300 font-mono"
  motion={{ duration: 0.2 }}
/>