# Stats Strip

- Page: <https://kznlabs.github.io/labsUI/components/stats-strip>

## Stats Strip (`stats-strip`, block)

Headline numbers, each card a <dl>: cards rise in turn with Reveal, then each number springs up with CountTo. Final values are in the HTML.

- Install: `npx @kznlabs/labsui add stats-strip`
- Docs: <https://kznlabs.github.io/labsUI/components/stats-strip>
- Brings: card, count-to, reveal, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<StatsStrip>`: A row of headline numbers: each card rises in turn, then its number springs up. Each card is a <dl>.
  - `stats: Stat[]`: Numbers in display order.

- `type Stat = { label: string; value: number; prefix?: string; suffix?: string; decimals?: number; hint?: string; }`

### Usage

```tsx
<StatsStrip stats={[{ label: "Servers", value: 1284, hint: "+32 this week" }, { label: "Revenue", value: 48290, prefix: "$" }]} />
```

### Example: landing-stats.tsx

```tsx
import { StatsStrip } from "@/components/blocks/stats-strip";

export function LandingStats({ users, uptime }: { users: number; uptime: number }) {
  return (
    <StatsStrip
      stats={[
        { label: "Active users", value: users, hint: "last 30 days" },
        { label: "Uptime", value: uptime, suffix: "%", decimals: 2 },
        { label: "Requests", value: 2.4, suffix: "M", decimals: 1 },
      ]}
    />
  );
}
```