shadcn.io is not affiliated with official shadcn/ui
Compliance Badge Grid Features Block for React
Six 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.
Installation
Overview
A controls grid for React with Base UI. A left-aligned header says "Controls you can show, not just claim". Below it, six cards sit in a 3 by 2 grid (two across on a phone), each a cell with overshoot: its lines run a little past the corners, with a + on the start corner. A card holds a coverage ring in the foreground colour with its percent at the centre, the control's name, a sentence that counts what is in place ("46 of 48 requests answered in time") and a badge that says Passing or how many items are still open. Every figure is counted from one list, so the ring, the sentence and the badge agree. It's built from Circular Progress, Badge and Guides, with CSS transitions for the entrance. It names no certification and draws no shield. For privacy, security and operations tools that want proof of coverage, not logos.
FAQ
How do I change the controls?
Edit CONTROLS at the top of the file: each is a name, how many items are covered, the total and a unit that completes the sentence. The ring's percent, the "46 of 48" sentence and the badge are all computed from those numbers. Keep the count at a multiple of three, or of two for phones, so the grid fills its rows.
Why does 46 of 48 show 95% and not 96%?
The percent is rounded down on purpose, so a ring never reads 100% until every item is in place. A control with no open items shows "Passing"; any other shows how many are open.
Where are the compliance badges and certification names?
There are none, by design: this block shows coverage of your own controls, not claims about a standard. Name a framework in a control's name if you hold the certification and want to say so.
What does a screen reader get?
Each card is a list item with a heading, the counts as a sentence and the badge as text. The ring is a drawing of the same numbers, so it's hidden from assistive technology rather than read twice.
Related
- Pro
Ring Progress Metric Split Features
Metrics and chartsA split for a platform SLA monitor: copy, four ticks and a button at the start, and at the end one chart of three concentric rings with a legend, whose values a 7, 30 or 90 day toggle swaps.
- AABAABPro
Scorecard Letter Grade Grid Features
Metrics and chartsA 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.
- Pro
Achievement Trophy Wall Features
Metrics and chartsA wall of eight milestone badges for a language-learning app: unlocked ones solid, locked ones muted with a lock and a progress bar, a header count, and a tooltip with each unlock rule.
- 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
Left-Heavy Trust Compliance Hero
Logos and social proofA reverse split hero for a compliance tool: a trust center panel of six certifications in a hairline frame beside a checklist and two calls to action, with the copy first on a phone.
- Pro
Status Ops Board Features
Metrics and chartsAn error-budget board for an SLO monitor: five services in bands with a budget bar, a 24-point burn sparkline and a status each, a 1h, 6h, 24h and 30d toggle, and a summary counted from the rows.