Stats Counters
Four big numbers that roll into place when they enter view.
- Type: Social proof section
- Styles: Dark, Minimal
- Licence: Charcoal UI Pro
About Stats Counters
Stats Counters shows four big numbers that roll into place when they enter view, for users, uptime, revenue or anything worth bragging about.
It is a full-width social proof section for React and Tailwind CSS 4, in a dark and minimal style. Preview it at any width above, then install it with one command.
When to use Stats Counters
- Company milestones.
- Product traction.
- Impact reports.
- About pages.
How it is built
Number Ticker rolls each value once it is in view, with locale formatting.
It is composed from Number Ticker, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Stats Counters
Stats Counters is part of 10 full templates, so you can see it in a finished page.
- Ember template: An AI product site that glows.
- Ashfall template: Work first. Words second.
- Meridian template: The CRM for teams under fifty.
- Halcyon template: Support that answers in seconds.
- Hexwork template: The framework, and the people behind it.
- Fixwell template: Book a pro in two minutes.
- Keyhaven template: Homes, neighbourhoods and the people who know them.
- Seedling template: Raise money for something that grows.
- Forkcamp template: From zero to hired in 16 weeks.
- Tideline template: A nonprofit site that raises money.
- Logo Cloud: A React logo cloud: a muted marquee of customer wordmarks
- Stats Chart: A React growth section with stat cards beside an animated bar chart
- Logo Wall: A React customer logo grid that reveals each customer's result on hover
- Press Quotes: An as-seen-in React press section with outlet tabs and a rotating serif quote
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
Install Stats Counters
npx shadcn@latest add @charcoal/stats-countersStats Counters is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Stats Counters work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.
Built from
- Number Ticker: Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.