Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Compliance Audit Changelog Block for React

A control audit split by a divider: a ring of how many controls pass, a Passing, Failing and Pending list, and Tabs for three control families over a table of the most recently checked controls.

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

A control audit for React with Base UI, written for Controlkit, a fictional trust-automation product. A divider splits the block. At the start sit the header, a Circular Progress ring reading 42 of 48 controls passing (summed from the three families' counts) and a list of Passing, Failing and Pending. At the end, in an inset frame, Tabs pick a control family (Security, Privacy, Availability) over a table of the five controls checked most recently in it: the id in mono, what it checks, the kind of evidence, a status as an icon and a word, and the day it was last checked. An unseen copy of every panel holds the frame's height. It's built from Circular Progress, Tabs, Guides and a native table. These are the product's own checks, shown as example data: the block claims no certification and shows no seal.

FAQ

How do the numbers add up?

Each family in FAMILIES holds its counts of passing, failing and pending controls and its five most recent controls. The ring, the list and the summary sum those counts, so 17 + 14 + 11 passing gives 42 of 48. The table shows five controls per family and says so under the table.

Does this show a certification?

No. It shows a product's internal checks as example data, with fictional control ids and no seal, logo or named audit body. Add a standard's name only as plain text, and only if your own evidence supports it.

How do the tabs behave?

Arrow keys move between the three tabs, and the table under the selected tab is a labelled, focusable region. Every panel is also present unseen in the same grid cell, so switching never changes the frame's height.

What changes on a phone and in a right-to-left layout?

The ring and the list come first, the tabs and table under them. Below sm the evidence and the day move under each control. In a right-to-left layout the split and the tabs mirror; counts and ids keep their reading order.

What moves?

The two halves fade up once on load, and the ring's stroke draws with the catalog's own transition; reduced motion turns the entrance off. Nothing is saved or sent.

  • Pro

    Release Band SLA Compliance

    Incidents and uptime

    A band of three release cells for a managed-service reporting product: uptime, p95 response and first reply with the target beside the actual, a check or a ring for each, and a breach count in each foot.

  • Pro

    A rail-to-rail table of security advisories with a four-bar severity glyph and word, the affected and fixed versions as inline code, a state as a shape and a word, a patch rate that counts up and a toggle group that filters by state.

  • Pro

    An accessibility scorecard split by a divider: a ring with the chosen release's score and its change since the release before, and Tabs for four releases over a table of audit items.

  • Pro

    Compliance Updates Changelog

    Security and audits

    Regulation changes as rows rail to rail: the law as a title, what changed, its effective date and stage, and a readiness bar that opens a list of its tasks.

  • Pro

    Tabbed Window Uptime History

    Incidents and uptime

    A tabbed window of ninety-day uptime for an uptime monitor: one tab per service, a large uptime figure that rolls to the new service, a strip of ninety daily bars and a three-row table of incidents.

  • Pro

    Enterprise Updates Changelog

    Spotlights and media

    Six enterprise capabilities as a three-by-two grid of cells with overshoot, each with an icon plate, a lock badge and the release it shipped in, and a closing band with a Talk to sales Shine Button.