Getting Started
Templates
Components
Blocks
A horizontal stats section with staggered animations, vertical dividers, and descriptions for each metric.
A horizontal stats display with staggered entrance animations and vertical dividers between metrics. Each stat can include a description for additional context. Ideal for showcasing key performance metrics in a clean, inline layout.
Key Features:
import { StatsRow } from "@/components/ui/stats-row"
export default function Example() {
return (
<StatsRow
title="Numbers that speak"
subtitle="Performance metrics we're proud of"
stats={[
{ value: 99.9, suffix: "%", label: "Uptime", description: "Enterprise-grade reliability", decimals: 1 },
{ value: 2.5, suffix: "M+", label: "Users", description: "Across 120+ countries", decimals: 1 },
{ value: 50, suffix: "ms", label: "Latency", description: "Lightning-fast response", decimals: 0 },
]}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
stats | StatsRowStat[] | 3 default stats | Array of stat objects to display |
title | string | "Numbers that speak" | Section heading text |
subtitle | string | "Performance metrics we're proud of" | Text below the title |
className | string | undefined | Additional CSS classes |
Each stat in the stats array accepts:
interface StatsRowStat {
value: number // The number to animate to
suffix?: string // Text after the number (e.g., "%", "M+", "ms")
label: string // Bold label below the number
description?: string // Smaller text below the label
decimals?: number // Decimal places (default: 0)
}| Feature | Stats Row | Stats Counter |
|---|---|---|
| Layout | Horizontal with dividers | 2x2 / 4-column grid |
| Descriptions | Per-stat descriptions | Single bottom description |
| Animation | Staggered entrance + counter | Counter only |
| Dividers | Vertical lines | Grid gaps |
| Best for | 3-4 key metrics | 4+ metrics |