shadcn.io is not affiliated with official shadcn/ui
Lighthouse Scores Changelog Block for React Aria
Four audit score rings on shared hairlines with the change since the last release, the three Core Web Vitals as a list of terms, and an accordion of the audits still failing.
Installation
Overview
An audit-scores block for React with React Aria, written for Auditlamp, a fictional site-audit tool. A centred header carries a title worked out from the data ("Three of four audit scores rose in v8.3"). Under it a band of four rings on shared hairlines, a 2 x 2 on a phone, for Performance, Accessibility, Best practices and SEO: the score rolls in the middle and the change since the release before sits under it as an arrow, a sign and a number. Next the three Core Web Vitals as a list of terms with a glyph and a word (a filled square for within the limit, a ring for over it), and last an accordion of the audits still failing, the first one open, that ends the block. It's built from Circular Progress, Accordion, Badge, Sliding Number and Guides, with your theme's tokens for every colour. For release reviews and quality reports. The audits are example data.
FAQ
How do I change the audits?
Edit AUDITS at the top of the file. Each audit has a category, a penalty in points, whether it failed in the release before and whether it fails now. No score is typed in: a score is 100 minus the penalties of the audits failing in that release, and the rings, the changes, the title and the accordion are all worked out from that one list.
How do the Core Web Vitals get their word?
Each vital has a reading and a limit in VITALS. A reading at or under its limit is Good and shows a filled square; one over it says Needs work and shows a ring. The limits are written beside every reading, so the word never depends on colour.
Which row opens first, and can several stay open?
The first audit, taken from the data. Opening another closes it.
Add allowsMultipleExpanded to the Accordion to let several stay open.
How does it work with a keyboard and a screen reader?
Each trigger is a button inside its own heading, so the headings list reads every audit. Enter or Space opens a row. The rings are decorative and hidden: each cell's heading is followed by its score and change in words ("94 out of 100, up 15 since v8.2"). Tab moves between the triggers; arrow keys do not.