Does Stats Live 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.

Stats Live

Dotted world map with live pings, a running counter and a feed of what just happened where.

Type: Social proof section
Styles: Dark, Futuristic
Licence: Charcoal UI Pro

About Stats Live

Stats Live shows activity happening right now: a dotted world map with pings on cities as events arrive, a running counter and a small feed of what just happened where.

It is a full-width social proof section for React and Tailwind CSS 4, in a dark and futuristic style. Preview it at any width above, then install it with one command.

When to use Stats Live

Payments and fintech platforms.
Deploy and monitoring tools.
Communities and radio stations.
Security products showing blocked threats.

How it is built

The map is drawn from rough continent outlines into an SVG dot grid, events are simulated on a timer you can replace with real data, and reduced motion keeps it still.

It is composed from Live Dot, 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 Live

Stats Live is part of 7 full templates, so you can see it in a finished page.

Sable template: Enterprise security without the theatre.
Runway template: Push to deploy, in every region.
Sentinel template: Know before your users do.
Frequency template: Listener-funded radio, live worldwide.
Tally template: Cards, receipts and budgets in one place.
Payline template: Accept money anywhere with one API.
Commons template: Bring your members home.
Logo Cloud: A React logo cloud: a muted marquee of customer wordmarks
Stats Counters: A React stats section: four big numbers that roll into place
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
Live Dot: A React presence dot with a pulsing halo for live, busy, away and offline
Number Ticker: An animated React number ticker: each digit rolls on its own wheel

Install Stats Live

npx shadcn@latest add @charcoal/stats-live

Stats Live 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 Live 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

Live Dot: A presence dot with a pulsing halo in the four states an indicator needs: live, busy, away, offline. CSS only.
Number Ticker: Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.

Stats Live as Markdown