Stats Chart
Growth story: stat cards beside an animated bar chart.
- Type: Social proof section
- Styles: Enterprise, Dark
- Licence: Charcoal UI Pro
About Stats Chart
Stats Chart tells a growth story with stat cards beside an animated bar chart.
It is a full-width social proof section for React and Tailwind CSS 4, in a enterprise and dark style. Preview it at any width above, then install it with one command.
When to use Stats Chart
- Investor and traction pages.
- Annual reports.
- SaaS results.
- Case studies.
How it is built
Stat Card counts and draws sparklines, and Bar Chart springs up with an accessible table.
It is composed from Stat Card, Bar Chart, 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 Chart
Stats Chart is part of 2 full templates, so you can see it in a finished page.
- Cinder template: Serious numbers, calmly presented.
- Aperture template: Know what users do, and why.
- 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
- 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
- Stat Card: A React KPI stat card with a counting number, delta pill and drawn sparkline
- Bar Chart: An animated React bar chart that springs up in sequence with an accessible table
Install Stats Chart
npx shadcn@latest add @charcoal/stats-chartStats Chart 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 Chart 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.