A headline and summary figure beside a ranked bar chart. On view the bars race out to their values, larger ones running longer, while the numbers count up in step.
Live network
Traffic is served from the region closest to each visitor, with automatic failover in under two seconds.
npx shadcn@latest add https://hyperblur.dev/r/stats-bar-race.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-bar-race.tsx.
import { StatsBarRace } from "@/components/hyperblur/stats-bar-race"
<StatsBarRace title="Where our users are" bars={[{ label: "Berlin", value: 1200 }, { label: "Austin", value: 860 }]} unit="users" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Live network" | Label with a dot above the heading. Hidden when empty. |
| title | string | "Six regions. One edge that never sleeps." | Section heading. |
| subtitle | string | sample text | Supporting paragraph under the heading. |
| summary | { value: string; label: string } | null | { value: "177k", label: "requests per second at peak, October 2026" } | Large figure under the copy. Pass null to hide it. |
| chartTitle | string | "Requests per second by region" | Heading inside the chart card. |
| chartCaption | string | "30-day peak" | Muted note at the top right of the chart card. |
| bars | { label: string; detail?: string; value: number }[] | 6 sample regions | Bars, sorted from largest to smallest. The largest one is highlighted. |
| unit | string | "req/s" | Unit shown on the axis and read by screen readers. |
| duration | number | 2600 | Milliseconds for the longest bar to finish. |
| accent | string | "#ff6b4a" | Color of the leading bar and eyebrow dot. |