Count-Up Stat Grid
A free logo and stats section for React: a grid of metrics that count up on scroll.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
Count-Up Stat Grid is a free animated stats section for Next.js and React, styled with Tailwind. The first time the grid scrolls into view, every metric counts from zero to its final value with Motion, stats starting 100 milliseconds apart while each label fades and rises into place.
The final formatted value of every stat, including prefix, suffix and Intl.NumberFormat grouping, is rendered in the server HTML, so crawlers, no-JS visitors and reduced-motion users always read the real numbers. The count writes directly into the DOM through a Motion value subscription with zero React re-renders per frame, tabular numerals and a reserved width keep layout perfectly stable, and screen readers only ever hear the final value.
Trusted in production
24,631+
Installs last month
99.95%
Uptime last quarter
$3.8M
Revenue attributed
142
Countries served
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/stat-count-gridUsage
import { StatCountGrid } from "@/components/stat-count-grid";
const stats = [
{ value: 24631, suffix: "+", label: "Installs last month" },
{
value: 99.95,
suffix: "%",
decimals: 2,
label: "Uptime last quarter",
},
{
value: 3.8,
prefix: "$",
suffix: "M",
decimals: 1,
label: "Revenue attributed",
},
{ value: 142, label: "Countries served" },
];
export function Example() {
return <StatCountGrid stats={stats} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| stats | { value: number; label: string; prefix?: string; suffix?: string; decimals?: number }[] | required | 2 to 6 stats; each final value is rendered formatted in the SSR HTML. |
| duration | number | 1.2 | Count-up duration in seconds per stat (--dur-4). |
| className | string | undefined | Additional classes merged onto the section. |
Customisation
Count-Up Stat Grid deliberately ships without component-level CSS variables. Each stat is shaped through its own entry: decimals, prefix and suffix control formatting, duration paces every count against your motion system, and className restyles the section, for example to change the gap or constrain the width:
<StatCountGrid
stats={stats}
duration={2}
className="max-w-4xl gap-y-14"
/>Frequently asked questions
- Is Count-Up Stat Grid free for commercial use?
- Yes. Count-Up Stat Grid is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Do the counters hurt SEO or accessibility?
- No. The server HTML contains every final formatted value, so crawlers and no-JS visitors read the real numbers without JavaScript. The animated presentation is hidden from assistive technology while a visually hidden copy of the final value is always exposed, so screen readers never hear an intermediate frame. With reduced motion enabled nothing counts or moves and the final values render immediately.
- How do I format a stat as a currency or percentage?
- Use the prefix and suffix fields on each stat for symbols and the decimals field for fraction digits. Values are formatted with Intl.NumberFormat in a fixed en-US locale, so server and client output always match and the count keeps the same grouping and decimals on every frame.