shadcn.io is not affiliated with official shadcn/ui
Generation Benchmark Compare Reviews Block for Radix UI
A running watch scored against its own previous generation in a sortable table: Gen 1 and Gen 2 scores each over a thin bar, the signed change with an arrow, and header buttons that sort by criterion or by biggest change.
Installation
Overview
A benchmark compare table for React with Radix UI, for the Hobnailfold Stride 2, a fictional running watch set against its own first generation. A start-aligned header carries a derived sentence naming the biggest gain and the biggest drop; under a rule with plus marks, a real table gives each criterion's Gen 1 score and Gen 2 score, each above a thin bar from the score out of five, the signed change with an arrow, and a closing row with the average of the six. The Criterion and Change headers are buttons that sort the rows (A to Z, or biggest change first) and set aria-sort, and a polite line says the order. Every score and change is worked out from the twenty-two typed reviews at the top of the file. It's built from a native table, the button styles and Guides.
FAQ
How are the scores and changes worked out?
Each review in REVIEWS has a generation and six scores from 1 to 5. A cell's score is the average of that generation's reviews for the criterion, to one decimal; the change is the Gen 2 score minus the Gen 1 score as shown, so the sign always matches the numbers in the row. The closing row averages the six shown scores. The two sentences in the header pick the largest rise and the largest fall from the same numbers.
How does the sorting work?
Press Criterion to sort A to Z and again for Z to A; press Change to sort by the biggest change first, either direction, and again for the smallest first. The header of the sorted column carries aria-sort and an arrow, the others say "none", and a polite line reads the new order. Ties fall back to the criterion's name. Sorting happens on the press, never under the pointer, and the table keeps its height.
Why a native table on every library?
A caption, column and row scopes and aria-sort are plain HTML, and a native table keeps them on all of the libraries and ports; the catalog tables of two of them are grids that do not carry a caption. The sort buttons use the catalog button's styles on a plain button.
How are the bars read, and without colour?
Both bars run from 0 to 5 over the same width: Gen 1 in a lighter weight of the foreground, Gen 2 in the full weight, and each sits under its own number. The change is an arrow, a sign and a word for a screen reader ("up 1.4", "down 1.1"), never green or red.