labsUI

Stats Strip

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.

npx @kznlabs/labsui add stats-strip
Servers
1,284
+32 this week
Commands run
2.4M
Uptime
99.98%
last 90 days
Revenue
$48,290
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 },      ]}    />  );}

<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.

PropTypeDefault
stats*

Numbers in display order.

Stat[]—
type Stat
{ label: string; value: number; prefix?: string; suffix?: string; decimals?: number; hint?: string; }

* required. Every component also takes className.