shadcn.io is not affiliated with official shadcn/ui
Benchmark Table Technology Awards Block for React Aria
Benchmarks as awards for an API gateway: a table with a row for each test, the award and year, two bars against the next best result, the measured figure and a derived lead such as 2.3x faster.
Installation
Overview
A benchmark table for React with React Aria. A centred header gives the range of the leads, counted from the rows ("by 2.3x to 2.6x"), and a table ends the block with one row for each benchmark the product won. The first cell names the award and its year and, under the name, sets two bars against each other: the measured figure and the next best result in the same test. Beside them are the measured figure on its own and the lead, derived from the two: "2.3x faster", "2.5x higher", "2.3x smaller". Some tests are won by going lower and some by going higher, and each row says which. The page's rails and top rule come from the Guides spine. It's built from Guides, a native table with hairlines between its cells, CSS bars and your theme's tokens. The Islewell Index, Jocasta and the results are made up for the example: they are not real measurements.
FAQ
How do I add or change a benchmark?
Edit BENCHMARKS at the top of the file. Each has the award, the year, the measured ours and the next best figure in one unit, a qualifier such as p95, whether lower or higher is better, and the word after the factor. The factor, the bar lengths and the range in the header are computed from those, so they cannot disagree with the table.
How are the bars scaled?
Each row is scaled to its own larger figure, so a bar is the share of the longer one. A shorter bar is a lower figure, which wins latency and size tests and loses throughput, so every row also says in words which direction wins. The bars are a drawing hidden from assistive technology; both figures are in the row as text.
Are these real results?
No. The Islewell Index, the product and every figure are made up for the example. Publish your own method with real numbers, and say what was measured and how.
Why a native table?
It gives the table a caption, column headers and a row header in each row, which is how a screen reader announces a cell with its award. Below sm it stays three columns, and the table scrolls in a keyboard-reachable region if you add more.
How does it fit on a phone?
The three columns stay: the first holds the award and the bars and takes the free width, the measured figure and the lead sit beside it. Nothing scrolls sideways at 320 pixels, and the bars keep their direction in a right-to-left layout because they are drawn in a left-to-right box.