Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

SOC 2 Checklist Dashboard Block for React Aria

Audit readiness by trust criterion: five tabs with how many controls have evidence, ruled rows with the control code, owner, due day, an evidence box and an auditor note, and an overall bar that updates as you tick.

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

Get a team ready for the audit window, with this SOC 2 readiness panel for React with React Aria. A hairline frame with a plus mark on each corner opens with a bar of how many of the 35 controls have evidence. Tabs follow, one for each trust criterion (Security, Availability, Confidentiality, Processing integrity and Privacy), each trigger carrying how many of its controls are done ("7 of 10"). The panel under a tab lists that criterion's controls as ruled rows: the control code, what it says, the owner's initials and the due day, a Checkbox for "evidence attached" and a note from the auditor that unfolds in place. Unchecking updates the tab, the bar and the header sentence at once ("20 of 35 controls have evidence. Audit window opens on 2 Nov."). It's built from Tabs, Checkbox, Badge, Button and Guides. For compliance tools and security reviews.

FAQ

How do I load my controls?

Edit CRITERIA and ROWS. Each row is the criterion, the control code, its wording, the owner's initials, an ISO due day, whether evidence is attached ("1" or "0") and the auditor's note, joined by |. The counts on the tabs, the bar and the header sentence are all derived from them, so a control added to a row appears in every total.

Why is the list a fixed height?

The five criteria have different numbers of controls. Each list scrolls inside the same-height frame, so changing tab or unfolding a note never moves the page. The frame is a labelled region you can scroll with the keyboard.

How do the auditor notes work?

Each row has a Note button that unfolds one line in place and says whether it is open. Several can be open at once, and they stay open when you change tabs and come back. The notes are typed advice about what evidence the control needs.

What stays local, and how do I wire it for real?

Ticking a box only changes this page, and no file is uploaded or sent to an auditor. To make it real, make the box open an upload for the control, store the file against its code, and derive "evidence attached" from what is stored.

How does it look on a phone?

The tabs scroll sideways inside their list, and each row takes two lines: the code and wording, then the owner and due day, with the Note button under them.