shadcn.io is not affiliated with official shadcn/ui
Sliding Number shows a number whose digits roll to each new value, like an odometer: only the digits that change move, each in its own column, with a small overshoot as it settles. It can also wait at zero and roll up once it scrolls into view.
Use it for a value that changes while people watch: a counter, a cart total, a live score, a statistic in a hero. To count through every value on the way instead, use Counting Number. Each digit is a column of 0 to 9 behind a one-digit window, moved by a CSS transition, with no animation library; with reduced motion the digits change in place.
Installation
Usage
import { SlidingNumber } from "@/components/ui/sliding-number";<SlidingNumber value={count} />Demos
Format
grouping adds thousands separators, decimals fixes the digits after the point, and pad keeps at least that many digits before it (07). The number is written with Intl.NumberFormat in locale, en-US by default, so the server and the browser write it alike; pass your locale for its own separators.
View
trigger="view" waits at zero, with a zero in every place the value will fill, and rolls up once the number scrolls into view. duration is one digit's roll, 600 ms by default.
Accessibility
Screen readers read the number once, formatted (128,450), from a visually hidden copy; the rolling columns are hidden from them. It doesn't announce changes by itself: wrap it in a live region (role="status") when a new value should be read out.
FAQ
Which way does a digit roll?
Up to a higher digit and down to a lower one, along its column of 0 to 9: from 9 to 0 it rolls back down through every digit. Each column moves on its own, so 1,099 to 1,100 rolls three of them.
What happens when the number gains a digit?
The new digit appears on the left and the others keep their columns: each column is keyed by its place, so the ones stay the ones.
Do the digits jump in width?
No. The number uses tabular figures, so every digit is as wide as a zero and the number doesn't shift as it rolls.
How do I use my locale's separators?
Pass locale, such as de-DE for 128.450,5. It's fixed to en-US by default so the page renders the same on the server and in the browser.
API Reference
SlidingNumber
<span> data-slot="sliding-number"
valuenumber
The number. Each change rolls the digits that changed.
decimals?number
How many digits after the decimal point, always shown. @default 0.
- Default
0
duration?number
How long a digit takes to roll to its new value, in milliseconds.
- Default
600
grouping?boolean
Thousands separators (12,480). @default false.
- Default
false
locale?string
The locale the number is written in (its decimal point and grouping). Fixed by default, so the server and the browser write it the same way.
- Default
"en-US"
pad?number
At least this many digits before the decimal point (05). @default 1.
- Default
1
trigger?"mount" | "view"
When it shows the value: at once, or rolling up from zero once it scrolls into view.
- Type
"mount" | "view"- Default
"mount"
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
--sliding-number-digitstring
The digit a column shows, 0 to 9 (set per digit).
--sliding-number-durationstring
A digit's roll to its new value (600ms).
Related
- 48,215048,215
Counting Number
NumbersCount through every value on the way
- Pro
Progress Text
NumbersA percentage that winds up on reels
- Pro
Rolling Text
CyclingLetters that roll like a drum
- Pro
LCD Text
DecorativeDigits that look like hardware
- Pro
Clock Text
NumbersLive clock digits that rise in
Rotating Text
CyclingWords that roll through like a reel