# Stats Row (Moonarc)

Shows big numbers that count up when scrolled into view, 120 ms apart, with labels and an optional bar under each, in a hairline row. No script of its own: CountUp and Progress do the counting.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/stats-row` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<StatsRow stats={[{ value, label }]}>`
- Browser support: newly (Chrome 91 · Firefox 128 · Safari 17); elsewhere: the final numbers, shown at once
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 12.4 kB raw)
- Page: https://moonarc.dev/components/stats-row/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `stats` | `{ value, label, prefix?, suffix?, decimals?, of? }[]` | none | Numbers; `of` adds a bar showing value / of. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Cell padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import StatsRow from '@/components/moonarc/pro/StatsRow.astro';
---
<StatsRow stats={[
  { value: 1240, label: 'teams on the platform' },
  { value: 38, label: 'regions live', of: 40 },
  { value: 4.9, label: 'average rating', decimals: 1 },
  { value: 12, label: 'years in business' },
]} />
```

## Reduced motion

Final numbers and full bars, shown at once.

## With ClientRouter

Inherits CountUp and Progress; nothing to wire.

## Craft

- Each number starts 120 ms after the previous, so the row reads left to right instead of exploding.
- Mono, tabular, 3 rem: numbers are the content here, and they must not jitter while counting.
- The bar is optional and thin (0.25 rem): a proportion, not a second chart.

## Replaces

- Stats sections (Tailwind Plus)
- NumberTicker rows (Magic UI)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/stats-row` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: count-up, progress.