shadcn.io is not affiliated with official shadcn/ui
Status Grouped Compliance Badges About Block for Radix UI
A compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.
Installation
Overview
A compliance list for React with Radix UI, written for Safeharbor Desk, a fictional vendor-risk tool. A start-aligned header carries a ghost link to request the report. Under it two bands run from rail to rail: In force, with four programmes, and In progress, with two. Each row has a status dot, the programme's name and what it covers, then two small facts, the last audit in the company's own years ("Year 5") and the next step ("Renews in 5 months", "Audit starts in 4 months"). A filled dot means in force and a hollow one means in progress, and each band's heading says which, so the state never depends on the dot or on colour. It's built from Guides, Status and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For an about page, a trust page or a security review. The programmes are generic examples: no real certifier, logo or seal is named, and nothing here claims a real certification.
FAQ
How do I change the programmes and their status?
GROUPS holds the two bands, each with its label, whether it is in force and its rows. A row has a name, a scope, the last audit and the next step. The count in each band's heading is the length of its list. Replace the example programmes with yours, and keep the dates relative ("Renews in 5 months") so the page never goes stale.
Can I name a real standard here?
You can write a standard's name as plain text in a row, but only if you hold it. The block ships generic names on purpose and the header says they are examples, so the demo never claims a certification it does not have. Leave out logos and seals unless the certifier's own rules allow them.
How is the status shown without colour?
A filled dot is in force and a hollow ring is in progress, and the band heading above the rows says the same in words. The dot is decoration; a screen reader hears the band's name, then the row.
What does the Request the report link do?
It is a plain link with a placeholder address. Point it at your trust centre or a form where buyers ask for the audit report. Nothing is sent from the block.