shadcn.io is not affiliated with official shadcn/ui
Status Grouped Compliance Badges About Block for React
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 Base 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.
Related
- Pro
Domain Tabs Security Practices About
Security and platformSecurity practices for a password manager in four domain tabs, each a list of controls marked Done or Rolling out, under a security score worked out from the controls.
- Pro
Vertical Tabs Data Privacy About
Security and platformA data-flow explainer for a backup service: vertical tabs for what we collect, where it lives and your rights, each panel a four-column table, with a ghost link to request your data.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
Tabbed Plaque Shelf Awards About
Press and recognitionA recognition shelf for a grant platform in two tabs: six plaques with a drawn laurel, the prize, who gave it and the year won, or six certifications with a stamped ring and when each renews.
- Pro
Accordion Accessibility Pledge About
Security and platformAn accessibility pledge for a checker product: an accordion of the four principles with a conformance word and how each is met, beside an audit history rail of four audits.
- Pro
Audit Table Footer
Trust and complianceA footer for a backup vault with an audit table in a framed figure (the programme, its scope, how often it is audited and a link to request the report) beneath the brand and three link columns.