Four oversized numbers that count up when the row scrolls into view, separated by hairlines, each with a label, a sparkline that draws itself and a small change note.
● Meridian in numbers
Every figure below is pulled from production systems and refreshed on the first of each month.
$4.2B
Payment volume processed in 2026
+38% year over year38,000+
Teams running payroll on Meridian
+9,400 since January99.995%
API uptime over the last 12 months
26 min total downtime142
Countries with paying customers
+17 new marketsFigures as of October 31, 2026.
npx shadcn@latest add https://hyperblur.dev/r/stats-counters.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-counters.tsx.
import { StatsCounters } from "@/components/hyperblur/stats-counters"
<StatsCounters stats={[{ value: 12.4, decimals: 1, prefix: "$", suffix: "M", label: "ARR", delta: "+48%", trend: [3, 5, 8, 12] }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Meridian in numbers" | Mono label above the heading. Hidden when empty. |
| title | string | "Quietly moving money for teams in 142 countries" | Section heading. |
| subtitle | string | sample text | Short paragraph on the right of the header. |
| stats | { value: number; decimals?: number; prefix?: string; suffix?: string; label: string; delta?: string; trend?: number[] }[] | 4 sample stats | Numbers to count up. A `delta` starting with + or - gets an up or down arrow; `trend` draws the sparkline. |
| duration | number | 2200 | Milliseconds for the count-up. |
| footnote | string | "Figures as of October 31, 2026." | Small note under the row. Hidden when empty. |
| accent | string | "#f5a524" | Color of the sparklines, arrows and top rule. |