Stats sectionPro
Headline numbers that count up when they scroll into view.
What's inside
- Count up in view
- Prefix, suffix and decimals
- Grid separators
- Descriptions
When to use
- Credibility numbers on landing pages.
When not to use
- Live metrics: use KPI cards in a dashboard.
Installation
Usage
Import it from @/components/blocks/stats-section after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { StatsSection } from "@/components/blocks/stats-section";
<StatsSection stats={[{ value: 12400, suffix: "+", label: "Teams" }, { value: 99.99, suffix: "%", decimals: 2, label: "Uptime" }]} />Built fromNumber ticker
API reference
StatsSection
Big numbers with labels that count up in view. Also the default export.
| Prop | Type | Default | Description |
|---|---|---|---|
| title / description | string | – | Heading. |
| stats | { value; label; prefix?; suffix?; decimals?; description? }[] | – | Two to four work best. |
Accessibility
- Numbers are read as their final values.
Motion
- Digits roll from zero when the grid enters the viewport; cells rise with a stagger.
Responsive behavior
- 1, 2 or 4 columns depending on width, with grid lines that adapt.
Performance
- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.
Notes for AI
- Only use numbers you can back up.
This page as Markdown, for assistants and coding agents:
/blocks/stats-section/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt