A band of four metrics with sparklines that share one crosshair. Hovering or pressing the arrow keys scrubs every metric to the same day at once, and a range switch redraws all lines for 7, 30 or 90 days.
Updated every 15 minutes
Monthly recurring revenue
Active workspaces
Net revenue retention
Median time to value
npx shadcn@latest add https://hyperblur.dev/r/stats-scrub-band.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-scrub-band.tsx.
import { StatsScrubBand } from "@/components/hyperblur/stats-scrub-band"
<StatsScrubBand metrics={[{ label: "Revenue", base: 120000, trend: 0.2, prefix: "$" }, { label: "Churn", base: 2.1, trend: -0.3, suffix: "%", decimals: 1, lowerIsBetter: true }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Updated every 15 minutes" | Line with a live dot above the heading. |
| title | string | "Growth you can scrub through, day by day" | Section heading. |
| metrics | { label: string; base: number; trend: number; volatility?: number; prefix?: string; suffix?: string; decimals?: number; lowerIsBetter?: boolean }[] | 4 sample metrics | base is the latest value, trend the change over 90 days as a fraction. The daily series is derived from these values the same way on every render. |
| ranges | number[] | [7, 30, 90] | Day ranges offered in the switch. |
| defaultRange | number | 1 | Index of the range selected first. |
| endDate | string | "2026-11-07" | Date of the latest point, as YYYY-MM-DD. Used for the date labels. |
| accent | string | "#2f7bff" | Color of the lines and markers. |
| onRangeChange | (days: number) => void | undefined | Called with the number of days when the range changes. |