A light section with three radial progress rings that sweep in on view, with tick marks that light up behind the arc, counting center numbers and a short description under each.
Helpline customer report 2026
Three numbers we track every week, measured the same way since our first customer.
Up from 81% in the first quarter after switching, measured across 2,400 teams.
Average score from 11,300 support agents on independent review sites.
Help center answers and guided flows close most questions on their own.
Survey of 2,400 support teams, July to September 2026.
npx shadcn@latest add https://hyperblur.dev/r/stats-radial.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-radial.tsx.
import { StatsRadial } from "@/components/hyperblur/stats-radial"
<StatsRadial stats={[{ value: 98, suffix: "%", caption: "Uptime", label: "Always on" }, { value: 4.9, max: 5, decimals: 1, suffix: "/5", label: "Rated" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Helpline customer report 2026" | Pill label above the heading. Hidden when empty. |
| title | string | "Support that customers rate, and agents enjoy" | Section heading. |
| subtitle | string | sample text | Supporting line under the heading. |
| stats | { value: number; max?: number; decimals?: number; prefix?: string; suffix?: string; caption?: string; label: string; description?: string }[] | 3 sample stats | Rings in order. The arc fills to value / max, where max defaults to 100. |
| footnote | string | "Survey of 2,400 support teams, July to September 2026." | Small note under the rings. Hidden when empty. |
| duration | number | 1800 | Milliseconds for the sweep and count. |
| accent | string | "#2f7bff" | Color of the arcs and lit ticks. |