An us versus them scorecard with two overall score rings and a list of benchmark metrics, each with paired bars that grow in and numbers that count up, plus a delta chip per row.
We ran both tools side by side for 30 days with 212 analysts at 18 companies. These are the medians.
Independent benchmark by Northgate Research, September 2026. Legacy BI is the average of three incumbent tools.
npx shadcn@latest add https://hyperblur.dev/r/comparison-scorecard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/comparison-scorecard.tsx.
import { ComparisonScorecard } from "@/components/hyperblur/comparison-scorecard"
<ComparisonScorecard us={{ name: "Acme", score: 9.1 }} them={{ name: "Others", score: 6.4 }} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Fieldnote vs the usual stack" | Label above the title. |
| title | string | "Same questions, answered nine times faster" | Section heading. |
| subtitle | string | How the benchmark was run | Supporting paragraph in the summary card. |
| us | { name: string; score: number } | { name: "Fieldnote", score: 9.2 } | Your product and its overall score out of 10. |
| them | { name: string; score: number } | { name: "Legacy BI", score: 6.1 } | The competitor and its overall score out of 10. |
| metrics | ComparisonScorecardMetric[] | Five benchmark rows | Rows with label, optional detail, us, them, max and unit. Set lowerIsBetter for times so the chip reads as a multiple instead of a percentage. |
| source | string | Benchmark source line | Fine print under the metrics. Pass an empty string to hide it. |
| cta | { label: string; href: string } | null | { label: "Read the full report", href: "#" } | Button in the summary card. Pass null to hide it. |
| duration | number | 1400 | Length of the count up and bar animation in milliseconds. |
| accent | string | "#10b981" | Color of your bars, ring and delta chips. |