A dashboard-style bento with counting stat tiles, a plan donut, a sparkline strip, goal progress bars, an NPS gauge and a 30-day uptime bar.
Metrics
Revenue, usage and reliability on one board that refreshes every minute, with goals everyone can see.
Expansion revenue is up $9.4k this month, led by Business upgrades.
npx shadcn@latest add https://hyperblur.dev/r/bento-metrics.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-metrics.tsx.
import { BentoMetrics } from "@/components/hyperblur/bento-metrics"
<BentoMetrics accent="#10b981" nps={58} uptime={99.95} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Metrics" | Small label above the title. |
| title | string | "Numbers the whole company can read at a glance" | Section heading. |
| subtitle | string | "Revenue, usage and reliability..." | Supporting paragraph under the title. |
| stats | { label: string; value: number; prefix?: string; suffix?: string; decimals?: number; delta: string; positive?: boolean }[] | 3 stats | The first three stat tiles. Values count up when the section scrolls into view; `positive: false` paints the delta red. |
| slices | { label: string; value: number }[] | Team, Business, Enterprise | Donut segments. The center shows their total. |
| sparks | { label: string; value: string; data: number[] }[] | 4 sparklines | Cells of the sparkline strip, up to four. |
| goals | { label: string; target: string; progress: number }[] | 4 goals | Progress rows. `progress` is a percentage from 0 to 100. |
| nps | number | 64 | Net promoter score from -100 to 100. Drives the gauge needle. |
| uptime | number | 99.98 | Uptime percentage shown above the status bars. |
| accent | string | "#10b981" | Accent color for charts, bars and the eyebrow. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |