shadcn.io is not affiliated with official shadcn/ui
Performance Scores Dashboard Block for Radix UI
Two lab audit runs compared on six metrics, each drawn as a dumbbell with a budget tick, the values, a direction in words and a count of regressions against the budget.
Installation
Overview
Find out whether a build made the site slower with this performance scores dashboard for React with Radix UI. A toolbar with two Native Selects, Baseline and Candidate, picks from four lab runs inside a hairline frame with a plus mark on each corner. Six metrics, the performance score, LCP, TBT, CLS, FCP and TTFB, are ruled rows. Each draws a dumbbell: a hollow dot for the baseline and a solid one for the candidate with a line between, and a tick for the budget. Beside it sit both values, a direction in words such as "Faster" or "Slower", and whether the candidate is over or within its budget. A polite line counts the regressions, such as "Regressions: 2 of 6 against the budget (TBT and CLS)." It's built from Native Select, Badge and Guides. For release reviews and performance budgets.
FAQ
How do I fill it with my audit runs?
Edit RUNS: an id, a label and values, one number per metric in the order of METRICS. In METRICS set each metric's budget, the low and high ends of its scale, whether a higher number is better, and the two words for a better and a worse result. The dumbbells, the words and the count are worked out from them.
What counts as a regression?
A metric that got worse from the baseline to the candidate and also misses its budget. A metric that got worse but still sits inside its budget is shown as "Slower" or "Lower, within the budget", without a Regression badge.
What if I pick the same run on both sides?
It can't happen: choosing the run shown on the other side puts the one you replaced there instead, so the two sides are always different runs.