# Stats Ticker Odometer — React Stats Section

> A live counter built from rolling digit columns: each digit springs to its new value as the total ticks up, with three smaller odometers underneath.

- Category: [Stats](https://pixelpapa.com/components/stats.md)
- Tags: stats, odometer, ticker, live, digits
- Dependencies: motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/stats/stats-ticker-odometer

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/stats-ticker-odometer
```

The file is written to `components/pixelpapa/stats-ticker-odometer.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/stats/stats-ticker-odometer.

## AI prompt

```text
Add the "Stats Ticker Odometer" component from PixelPapa UI to this project.

What it is: A live counter built from rolling digit columns: each digit springs to its new value as the total ticks up, with three smaller odometers underneath.
Category: Stats. Depends on: motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/stats-ticker-odometer
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/stats-ticker-odometer.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/stats-ticker-odometer.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/stats-ticker-odometer" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More stats

- [Stats Bar Race](https://pixelpapa.com/components/stats/stats-bar-race.md) (Pro): A bar-chart race: horizontal bars grow and re-rank with layout springs as the year advances on its own, with a play/pause control and a year scrubber.
- [Stats Count Up Row](https://pixelpapa.com/components/stats/stats-count-up-row.md): Four headline numbers in a divided row that count up from zero out of a blur when scrolled into view, each under a hairline that fills as it counts.
- [Stats Grid Bordered](https://pixelpapa.com/components/stats/stats-grid-bordered.md): A minimal hairline grid of serif numerals that rise through a mask on view; hovering a cell floods it with the foreground colour from the bottom edge and reveals a footnote.
- [Stats Radial Progress](https://pixelpapa.com/components/stats/stats-radial-progress.md): Four concentric rings sweep to their values with spring easing beside a legend; hovering a row thickens its ring, dims the rest and swaps the centre readout.
- [Stats Split Quote](https://pixelpapa.com/components/stats/stats-split-quote.md) (Pro): A split section: an oversized serif stat counts up on the left with a before/after bar, while the customer quote on the right reveals word by word.
- [Stats With Sparklines](https://pixelpapa.com/components/stats/stats-with-sparklines.md) (Pro): Four stat cards whose sparklines draw in on view; move the pointer across a card to scrub its history and the headline number follows the marker.