Does Features Metrics 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.

Features Metrics

Outcome numbers that count up, each with a trend sparkline and a sourced footnote.

Type: Features section
Styles: Enterprise, Minimal
Licence: Charcoal UI Pro

About Features Metrics

Features Metrics puts your outcomes up front: four big numbers that count up, each with a sparkline of the trend underneath and a note on where the figure comes from, plus a footnote for the fine print.

It is a full-width features section for React and Tailwind CSS 4, in a enterprise and minimal style. Preview it at any width above, then install it with one command.

When to use Features Metrics

Case-study driven SaaS pages.
Infrastructure and performance claims.
Health and wellness results.
Investor and board-style pages.

How it is built

Numbers use Number Ticker with optional prefix, suffix and decimals, sparklines use your accent colour, and the footnote keeps claims honest.

It is composed from Number Ticker, Sparkline, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Features Metrics

Features Metrics is part of 6 full templates, so you can see it in a finished page.

Quill template: Ask your data, get answers.
Aperture template: Know what users do, and why.
Runway template: Push to deploy, in every region.
Vault template: Save without thinking about it.
Nocturne template: A bedside device that fixes your nights.
Nova template: Take pre-orders before you ship.
Features Grid: A React features grid of six cards with a pointer spotlight and staggered reveal
Features Bento: A React bento features section where every tile is a working component
Features Alternating: A free React alternating features section: image and text rows that slide in
Features Tabs: React feature tabs that auto-advance with a progress bar and swap visuals
Number Ticker: An animated React number ticker: each digit rolls on its own wheel
Sparkline: An animated React sparkline with fill, trend colour and a pulsing end dot

Install Features Metrics

npx shadcn@latest add @charcoal/features-metrics

Features Metrics 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 Features Metrics 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.
Sparkline: An inline sparkline that draws itself in, with a soft fill, a pulsing end dot and trend colouring. Pure SVG.

Features Metrics as Markdown