shadcn.io is not affiliated with official shadcn/ui
Scorecard Letter Grade Grid Features Block for React
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 Base UI. 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.
Related
- Pro
Compliance Badge Grid Features
Metrics and chartsSix control cards for a privacy-operations tool, each with a coverage ring counted from the data, a sentence of counts and a Passing or open-items badge.
- Pro
Gauge Cluster Features
Metrics and chartsThree semicircle gauges in one framed band, driven by a single "Simulate load" slider: CPU, memory and queue wait, each with a needle, an arc, a reading and a state.
- Pro
Stat Paired Feature Quad Features
Metrics and chartsFour stat and feature pairs in a 2 by 2 grid that shares its hairlines: a giant number counted from its own was and now figures, a pair of bars, an icon, a heading and the sentence that explains it.
- Pro
Metric Hero Strip Features
Metrics and chartsFour metric-over-feature columns for a data-pipeline tool: a giant tabular figure and label, then the feature that makes it true, in one divided band under a centred header.
- Pro
Lab Report Specimen Cards Features
Documents and objectsFour specimen cards in a two by two of framed cells: each with a mono code, a verdict badge, a small drawing plate of its measurements and a data list of three readings.
- Pro
Scanner Beam Sweep Grid Features
Metrics and chartsA security-posture scanner: eight checks in a hairline grid with a beam that sweeps across it, a Pause scan toggle, and the chosen check's finding, fix and last scan in a band under it.