## Metric Strip (S—480)

A row of large figures that roll up digit by digit when scrolled into view, each with a sparkline that draws in after it.

- URL: https://sundaeui.dev/components/metric-strip
- Category: Page sections · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/metric-strip.json`
- Tags: numbers, stats, section, animated, sparkline, react, metrics, landing-page

For the proof section of a landing page or an annual report. Each figure is set large in tabular numerals and, when the strip first enters the viewport, every digit rolls from zero to its value through its own column, left to right and figure by figure.
Prefixes and suffixes ($, %, min, B) sit in a lighter, smaller weight, so the number stays the hero. An optional series draws a thin sparkline under each figure once its digits land. Hairline dividers separate the cells and turn into a two-column grid on phones.
The real values are rendered as text for screen readers, and the rolling digits are hidden from them. Light and dark (.dark), one CSS file, and reduced motion shows the final values immediately.

### Usage

```tsx
import { MetricStrip } from '@/components/sundae/metric-strip'

<MetricStrip
  title="In numbers"
  metrics={[
    { value: 4812, label: 'Teams reporting weekly', series: [12, 15, 19, 27, 36, 48] },
    { value: 99.98, decimals: 2, suffix: '%', label: 'Sync uptime' },
  ]}
/>
```

### Props

- `metrics` (`Metric[]`, required): value, label, prefix?, suffix?, decimals?, detail?, series?
- `title` (`string`): Small label above the strip.

### Accessibility

- Each figure is a <dt>/<dd> pair; the value is real text for screen readers.
- Rolling digits and sparklines are aria-hidden.
- Reduced motion shows final values at once.