A dark full-bleed band with one oversized featured figure on top and two rows of metrics scrolling in opposite directions underneath, each with a value and a colored change arrow.
Live, updated every minute
Ledgerline moves money for 61,000 businesses across 46 countries. These are the numbers our operations team watches all day.
npx shadcn@latest add https://hyperblur.dev/r/stats-ticker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-ticker.tsx.
import { StatsTicker } from "@/components/hyperblur/stats-ticker"
<StatsTicker featured={{ value: "1.2M", label: "orders shipped this year" }} metrics={[{ label: "Orders today", value: "3,410", change: "8%", direction: "up" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Live, updated every minute" | Mono label with a pulsing dot. Hidden when empty. |
| featured | { value: string; label: string; change?: string; caption?: string } | { value: "$2.84B", ... } | The large figure above the ticker, with its label and an optional change chip. |
| description | string | sample text | Paragraph on the right of the featured figure. |
| primaryCta | { label: string; href: string } | null | { label: "Open the status page", href: "#" } | Solid pill button. Pass null to hide it. |
| secondaryCta | { label: string; href: string } | null | { label: "Read the Q3 report", href: "#" } | Outline pill button. Pass null to hide it. |
| metrics | { label: string; value: string; change?: string; direction?: "up" | "down"; good?: boolean }[] | 12 sample metrics | Ticker items. The arrow is green when `good`, which defaults to true for up and false for down. Use enough items to fill a wide screen. |
| speed | number | 48 | Seconds for one loop of the first row. The second row runs slower. |
| rows | 1 | 2 | 2 | Number of ticker rows. The second row scrolls the other way. |
| accent | string | "#22c55e" | Color of the live dot, glow and featured change chip. |