Benchmark Comparison Bars

Stats73: Benchmark Comparison Bars

A benchmarking section that pairs an accent bar for the platform median against a muted bar for the sector median on every metric, with a legend above and a sourcing note below.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/stats73?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/stats73?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/stats73.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports stats73Demo alongside the block: the exact props behind the preview above. Spread it to get a working comparison in one line.

import { Stats73, stats73Demo } from "@/components/beste/block/stats73";

export default function BenchmarksPage() {
  return <Stats73 {...stats73Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Stats73 } from "@/components/beste/block/stats73";

export default function BenchmarksPage() {
  return (
    <Stats73
      badge={{ label: "Against the field" }}
      heading="How a practice on the platform compares with one that is not"
      description="The lighter bar is the sector median from published sources."
      yoursLabel="On the platform"
      medianLabel="Sector median"
      benchmarks={[
        {
          metric: "Room utilisation",
          yours: "81%",
          yoursPercent: 81,
          median: "64%",
          medianPercent: 64,
          note: "Booked clinical hours as a share of the hours rooms were open.",
        },
        {
          metric: "Admin held in clinical rooms",
          yours: "11%",
          yoursPercent: 11,
          median: "23%",
          medianPercent: 23,
          note: "Lower is better here, which is why this bar is the short one.",
        },
      ]}
      method="Sector medians come from published industry surveys, not from our own customers."
      button={{ label: "See the sources", href: "/benchmarks" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type Benchmark = {
  metric: string;
  yours: string;
  yoursPercent: number;
  median: string;
  medianPercent: number;
  note: string;
};

Behavior notes

• Each metric carries a display string and a bar percentage separately, so yours can read "97.9%" while yoursPercent is 98. The bar is an illustration; the text beside it is the figure.
• Percentages are used directly as inline widths and are not normalised, so both should be on a 0 to 100 scale. A metric measured in another unit needs converting before it is passed.
• Bars are aria-hidden and every value is printed beside its bar, so the comparison reads without them.
• The block does not know which direction is better. The demo's last row makes that explicit in its note, since a shorter accent bar is the good result there.
• note is required on every metric, which is what keeps a bar chart from implying more than the data supports.
• Value labels sit in a fixed w-16 column with tabular-nums, so the two figures in a row line up under each other.
• The method row carries its own border-t, closing the list and separating the sourcing note from the metrics.