shadcn.io is not affiliated with official shadcn/ui
Scorecard Letter Grade Grid Features Block for React Aria
A site-audit report card: six areas in a hairline grid, each with a display letter grade, a sentence and five proficiency dots, and a foot band with the overall grade counted from the scores.
Installation
Overview
A report card for React with React Aria. A centred header says "Graded where it counts". Under it, a band of cells that run from rail to rail and share their hairlines (three across from lg, two from sm, one on a phone) holds six areas: performance, accessibility, SEO, best practices, security and privacy. Each cell has an icon, a display letter grade in your theme's heading font, a heading and a sentence, and five proficiency dots. A tinted band at the foot gives the overall grade, the average score, the strongest area, the weakest and the number of pages scanned. Every letter, every dot and the overall grade is counted from the six scores, so they always agree. It makes no claim about who graded: the scores are the tool's own. It's built from Guides and plain CSS, with the theme's tokens for every colour.
FAQ
How do I change the scores?
Edit AREAS: each has a name, an icon, a sentence and a score from 0 to 100. The letter comes from GRADES (97 and over is an A plus, 93 an A, 90 an A minus, and so on down to F), the dots from DOT_FLOORS (a dot for each of 0, 70, 80, 90 and 95 the score reaches), and the overall grade from the rounded mean of the six scores. Change those tables to change the scale.
How is the overall grade counted?
By whole-number maths: the six scores are added, divided by six and rounded, and that average is graded like any other score. The strongest and weakest areas are the highest and lowest score (the first one, in a tie). Nothing in the foot band is typed by hand except the page count.
Why does the grade use the heading font?
The letter is display type, set in your theme's heading font (font-heading), so it follows the preset you install: a serif in one, a grotesque in another. The sign beside a letter is half its size and raised, and a screen reader hears the grade in full ("Grade A minus") instead of a letter and a symbol.
How are the dots made accessible?
The five dots are one image with the label "4 of 5", so a screen reader doesn't walk five empty elements. The filled dots are foreground and the empty ones a faint foreground tint, so the count reads in any theme.