Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Audit Scorecard Success Block for Solid

A confirmation page for a finished control review: a ring of the checks that passed worked out from six control families, each family as a row of cells (filled for a pass, hollow for a check that did not), a short list of findings and dates, and a real one-page PDF summary to download.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show how a review went, family by family, with this confirmation page for Solid with Ark UI. It is the page Proofbarrow, a compliance-automation tool, shows when a review of a company's controls is finished: the page's side rails and one band, split in two with the scorecard first on screen and second in the page. The message has a success mark, the heading, a short list (the report number with a Copy Button, the day, the critical findings, the open ones, the next review), the one Shine Button, Open the full report, and a button that downloads a PDF summary. The scorecard is a Circular Progress ring of the checks that passed beside one row per control family, each with "19 of 20" and its checks as cells. For compliance tools, security reviews and any report with a score. It is sample data and certifies nothing.

FAQ

What stays in the page, and how do I wire it for real?

Nothing was scanned and nothing is certified. The six families, their checks and the findings are typed in FAMILIES and FINDINGS, and no standard is named. To wire it, build those from your review (each family's passed and total checks, and a finding for each check that did not pass), set the report number and the dates, and point the primary at the full report.

Where do the numbers come from?

From the rows. The ring's 94 and the "94 of 100" are the sums of the six families' passed and total checks, each row's percentage is rounded from its own two numbers, and the critical, low and medium counts come from the findings list, so the heading, the list, the ring and the PDF all say the same figures.

How is each family drawn, and is it readable without color?

As one cell per check, filled for a pass and hollow for a check that did not pass, and every row also says it in words ("19 of 20, 95%"). The ring is a drawing hidden from assistive technology, and the same score is written beside it in text.

Does Download summary really work?

Yes. The page builds a small one-page PDF in the browser from the same figures (the families, the counts and each open finding) and saves it through a Download Trigger. It is plain text in one font, named as a sample, and says in its second line that it certifies nothing. In your app, return the real document from your server instead. There is no print button.

Does it claim a certification?

No. The words say a sample review passed its own checklist and give the date of the next review; they name no standard, no auditor and no certificate.

How does it look on a phone?

The message comes first, with the primary beside a download button that shows only its icon, then the scorecard, with the ring at the start of its heading and the six rows under it. The report number and the day leave the list to keep the page short.