Number Ticker
Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Number Ticker
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | |
format | Intl.NumberFormatOptions | — | |
locale | string | "en-US" |
About Number Ticker
Number Ticker changes numbers by rolling each digit on its own wheel, so an update reads as motion rather than a flicker. Formatting follows the locale, with separators and decimals.
Number Ticker is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Number Ticker
- Revenue and KPI dashboards.
- Pricing that changes with a billing toggle.
- Live counters for users, downloads or sales.
- Stats sections on landing pages.
How it works
The number is formatted with Intl, then each character becomes a column that springs to its digit. Only digits that change move, and the final value is exposed as text for screen readers.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Number Ticker
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change label, locale live, and the Code tab updates to match, so the snippet you copy already carries your values.
- value (number).
- format (Intl.NumberFormatOptions).
- locale (string, default "en-US").
Goes well with Number Ticker
Number Ticker is already composed into 9 ready-made sections, so you can see it in context or install the whole block.
- Hero Dashboard: Hero section
- Features Bento: Features section
- Pricing Tiers: Pricing section
- Pricing Usage: Pricing section
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
- Copy Button: A React copy button whose icon blurs into a drawn check, then swaps back
Install Number Ticker
npx shadcn@latest add https://charcoalui.com/r/number-ticker.jsonNumber Ticker is free and MIT licensed. The command copies number-ticker.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Split Flap, a Pro piece: Airport departure board: every cell flips through the drum until it lands on its letter.
Frequently asked questions
- How do I install Number Ticker?
- Run npx shadcn@latest add https://charcoalui.com/r/number-ticker.json. The shadcn CLI copies number-ticker.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Number Ticker free for commercial use?
- Yes. Number Ticker is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Number Ticker work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Number Ticker?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Number Ticker's props and source and get_install_command returns the exact command.