shadcn.io is not affiliated with official shadcn/ui
Compliance Checklist Onboarding Block for React
A clinic compliance workspace's setup step as a whole screen: frameworks as tabs that show how many of four sample requirements are done, rows with a checkbox, a line of evidence and an owner, a progress line that follows the tab, and Mark all complete with Undo.
Installation
Overview
Let new customers say which rules they work under and where they stand, with this compliance step for React with Base UI. It is a whole screen of Sealwick, a compliance workspace for clinics: the page's rails and one band, a step header ("Step 5 of 7" and a hairline), and a framed panel with three Tabs, GDPR, SOC 2 and HIPAA, each trigger showing how many of its four requirements are done ("GDPR 2/4"). A requirement is a row: a Checkbox, its name with a line of evidence, and an owner picked from a Native Select. A hairline of Progress follows the open tab, the foot says how close it is to audit-ready, and Mark all complete ticks the tab and becomes Undo. The one Shine Button is Continue, with a ghost Skip for now. The requirements are made-up samples, not advice. On a phone the owner select drops under each requirement's name.
FAQ
How do I put in my own frameworks and requirements?
Edit FRAMEWORKS: each has an id, a name and its requirements, each with an id, a title and a line of evidence. OWNERS is the list of people, START_DONE and START_OWNERS say what is ticked and who owns what on load. The counts on the tabs, the line of progress, the audit-ready sentence and the status messages are all worked out from those, so no number is typed twice. The sample requirements are invented for the demo: replace them with ones you or your adviser have checked, and don't ship them as legal or compliance advice.
How do Mark all complete and Undo work?
Mark all complete ticks every requirement on the open tab and remembers which ones it changed; the same button then reads Undo and puts exactly those back. Any other change (a tick, an owner, another tab) forgets the undo, and the button goes back to its first label. When a tab is already complete the button is quiet and says so instead of doing nothing silently.
What does the owner choice do?
It is a native select named for its requirement ("Owner of: Name a data protection contact"), starting at Unassigned. Choosing someone changes only the page and the status line says who owns what. In your app, load the people from your workspace and save the choice, then let a reminder go to them.
What stays local in the demo, and how do I wire it?
The ticks, the owners and both buttons: Continue and Skip for now only say "in this demo". Nothing is saved or sent. In your app, save each change as it happens (or on Continue) and read the saved state back on load, so the tab counts always match the records.
Can I use it from the keyboard?
Yes. Tab reaches the frameworks (the arrow keys move between them), then each row's checkbox and its owner select in reading order, then Mark all complete and the page's two buttons. Space ticks a checkbox, and the arrow keys change an owner with the select closed. Status messages are read out politely, and the checkbox's name is its requirement with its evidence line as the description.
How does it look on a phone?
The tabs scroll sideways if they must, each row becomes a checkbox and its name with the evidence line, then the owner select full width under them, and the rows keep one height so switching tabs never moves the buttons. Continue and Skip for now are pinned to the bottom of the screen.
Related
- Pro
Setup Checklist Onboarding
ChecklistsA contract tool's get-started guide as a setup panel: six steps in a single-open accordion with one button in the open step, a count that follows what you finish, a menu that hides completed steps or the guide, and a pill that opens it again.
- Pro
Mission Tiles Onboarding
ChecklistsAn online-shop builder's launch checklist as four framed tiles in a two by two grid, each with a small drawing, a link to the job and a Mark done toggle, and a ring in the header that fills as you go.
- Pro
Setup Progress Onboarding
ChecklistsA teachers' app's setup progress as a whole screen: a big rolling percent over a bar, a line of steps done and minutes to go, one button that finishes the next step, and three foldable bands that list every step as Done, Next up or To do.
- Pro
Audit Log Settings
Alerts and auditA settings change history in a fixed-height window: changes grouped by area in folds with counts, an actor filter, and a detail pane with the before and after values, who and when, and a Revert that undoes only the latest change to a setting, marks the original and adds a revert event at the top.
- 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
Community Join Onboarding
ChecklistsA setup panel of four ruled channel rows, each with a Join button and a fold-out of recent threads, a Join all button and a Save that says how many changes are waiting.