# Stats section

> Headline numbers that count up when they scroll into view.

Block · Pro · https://lodeui.com/blocks/stats-section

## When to use

- Credibility numbers on landing pages.

## When not to use

- Live metrics: use KPI cards in a dashboard.

## Installation

```bash
npx shadcn@latest add @lode/stats-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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 from: Number 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.

## Related

- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.