shadcn.io is not affiliated with official shadcn/ui
Compliance Checklist Table Block for Ark UI
Fourteen audit controls grouped as Access, Data and Vendors with a progress bar per group, risk as a word and drawn bars, derived overdue dates, a readiness score and an All, Open, Overdue filter.
Installation
Overview
Show how ready you are for an audit, with this compliance checklist table for React with Ark UI. Fourteen controls of a compliance tool sit in three groups, each a table group that opens with a row naming it, how many of its controls are done ("3 of 5 done") and a small Progress bar. Ticking a Checkbox completes a control. The band over the table says Readiness with a percentage worked out from the ticks, weighted by risk, and a bar; risk is a word and three drawn bars, never a colour; and a control is overdue when its due date, against a fixed "today", has passed and it isn't done ("Overdue by 3 days"). A Toggle Group of All, Open and Overdue, each with its count, narrows the table inside a frame of fixed height, and a filter that empties it shows an Empty state in the same frame. All four columns stay on a phone because the group rows span them. It's built from a native table, Checkbox, Progress, Toggle Group, Button and Guides. For audits, security reviews, onboarding lists and any checklist with owners and dates.
FAQ
How is readiness worked out?
Each control counts for its risk: High is 3, Medium 2 and Low 1. Readiness is the weight of the controls that are done over the weight of all of them, as a whole percentage, so finishing a High control moves it further than a Low one. The text beside the figure says it is weighted by risk.
How does a control become overdue?
The file has one typed AS_OF date. A control that isn't done and has a due date before it is overdue and reads "Overdue by" with the days, in a heavier weight. Ticking it turns the line to "Done", so the Overdue count and the chip fall by one.
Can a filter leave the table empty?
Yes. The chips keep working at zero: choose Overdue after ticking the late controls and the frame shows an empty state with a button that shows every control, while the frame and the panel keep their height. A group with no rows left under a filter disappears with them.
How is risk shown without colour?
As a word (High, Medium or Low) and one to three bars of growing height beside it, filled in the foreground colour and left empty in the border colour. The bars are decoration; the word carries the meaning.
What about phones and tablets?
The four columns (box, control, risk and due) stay, narrower, and the owner sits under the control's name. The risk word goes under its bars and the due date wraps. The frame scrolls inside itself.
What stays local, and how do I wire it for real?
The controls are typed in the file and ticks only change this page. For real data, load your controls with their groups, owners and due dates, keep the helpers and send each tick from the checkbox handler to your API along with a link to the evidence you filed.