Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Compliance Badge Grid Features Block for Vue

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A controls grid for Vue with Ark 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.

Does it work in dark mode and every theme?

Yes. The ring uses the foreground colour and the track the theme's input colour; the cards are your theme's card surface with a hairline frame. No green or red marks pass or fail: a check icon and a dashed icon do.

How does it fit on a phone?

The grid is two cards across with the badge wrapping under the ring when the card is narrow. The card's lines keep clear of the page's rails at 320 pixels.

All 170 features blocks