shadcn.io is not affiliated with official shadcn/ui
Lighthouse Scores Changelog Block for React
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 Base UI, 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 multiple 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.
Related
- Pro
Accessibility Score Changelog
Security and auditsAn accessibility scorecard split by a divider: a ring with the chosen release's score and its change since the release before, and Tabs for four releases over a table of audit items.
- Pro
Capacity Planning Changelog
Incidents and uptimeFour resource cells on shared hairlines, each with a ring for how full it is, what it was a release ago and how long until it is full at this rate, with a toggle that picks the release.
- Pro
Bundle Size Changelog
Metrics and chartsFive releases as stacked horizontal bars split into four chunks, told apart by weight and pattern, with a budget tick, each release's total and change, and a toggle that rolls the sizes between gzip, brotli and raw.
- Pro
Performance Log Changelog
Metrics and chartsFive load metrics as rows sorted by improvement, each with the old reading struck through, the new one, the change as an arrow and a percentage, and paired bars, with a toggle that picks the release to compare against.
- Pro
Automated Test Report Changelog
Code and commitsSix test suites as rows with a segmented outcome bar (solid, hatched, outlined, dotted), counts as words and a popover per suite that lists its flaky tests with retry counts.
- Pro
Compliance Audit Changelog
Security and auditsA control audit split by a divider: a ring of how many controls pass, a Passing, Failing and Pending list, and Tabs for three control families over a table of the most recently checked controls.