Benchmark Percentile Bar

A single metric’s percentile rank against a peer benchmark on a quartile-shaded scale, with an auto-generated plain-English comparison sentence.

Stats & Numbers · Astro · Subscription · commercial licence · v1.0.0 · updated 2026-10-21 · Live demo

Install

velocityx add benchmark-percentile-bar

Subscription component. Run velocityx login with your key first — get one.

---
import BenchmarkPercentileBar from '../components/velocity/benchmark-percentile-bar/BenchmarkPercentileBar.astro';
---
<BenchmarkPercentileBar />

Props

Prop	Type	Default	Description
label	string	'Page load time'	—
percentile	number	required	Your position on the 0–100 percentile scale. Clamped into range.
formattedValue	string	—	Pre-formatted override for your own value, shown beside the “You” marker.
benchmarkPercentile	number	50	Where the peer benchmark sits on the same scale. Defaults to 50 (the median, by definition).
benchmarkLabel	string	'Industry median'	—
benchmarkFormattedValue	string	—	Pre-formatted override for the benchmark’s own value.
quartileLabels	[string, string, string, string]	['Bottom 25%', 'Below average', 'Above average'…	—
summary	string	—	Overrides the auto-generated comparison sentence.
className	string	''	—

Files written

velocityx drops these into your project:

• components/velocity/benchmark-percentile-bar/BenchmarkPercentileBar.astro

Peer dependencies

None.

Theming

Colours come from the primary-* / accent-* Tailwind scales, so this drops into a project that is not Velocity without dragging our brand in. Install the contract once:

velocityx theme

Then set your whole brand in one place — raw RGB channels, not hex (a hex here silently breaks every opacity variant):

:root {
  --vx-brand: custom;
  --vx-primary-600: 220 38 38;
}

There is no component-level font-family anywhere in the library — your font cascade wins.

Licence

Commercial, for the duration of an active Velocity X subscription. The source is served by the licence-gated endpoint, never by the public CDN.