shadcn.io is not affiliated with official shadcn/ui
Benchmark Scale Stats Block for Vue
Five support metrics, each on a scale line with three markers (your team as a solid dot, the industry average as a ring, the top 10% as a tick), a verdict with a glyph and words, and the three values as text.
Installation
Overview
Benchmarks for Vue with Ark UI. A start-aligned header says on how many of five metrics the team beats the industry average, "You beat the industry average on 4 of 5 support metrics", with a key of the three markers at its end. Under it, five metrics are rows of a band that runs from rail to rail and ends the block. Each row has three cells divided by hairlines from md: the metric's name with a verdict (a check and "Better than average", or a dash and "Behind the average"), a scale line with the three markers placed on it, and the three values as text. Two metrics are better when lower, and say so. The positions, the verdicts and the headline are computed at module scope from the three readings per metric. On a phone the cells stack and the values wrap. For peer comparison, support and sales benchmarks and any result against a market.
FAQ
How do I change the metrics?
Edit METRICS at the top of the file. Each has a name, your reading (you), the industry average, the top 10% reading, the scale's min and max, a unit (%, min, h, or empty for a bare count) and whether lower is better. The markers' places, the verdicts and the headline are computed from those. The "1,200 peer teams" in the header is example text: edit it with your own sample size.
Why these three markers?
Each is a different shape so the row reads without colour: a solid dot for you (the largest, on top), a hollow ring for the average and a thin tick for the top 10%. The scale is a plain line with its two ends labelled, and the values are written beside it, so a close pair of markers never hides a number.
How are metrics where lower is better handled?
Set lower: true. The verdict then says "Better than average" when your reading is at or under the average, and the row adds "Lower is better". The markers stay where the readings are on the scale, so the better end is the start for those rows, and the text says so.
Is it accessible?
The scales are hidden from assistive technology, because each row says the same in text: the metric, the verdict, and the three values in a description list ("You 14 min", "Average 22 min", "Top 10% 6 min"). The rows are a list with a heading each, values sit in bdi elements and the scale is forced left to right.