shadcn.io is not affiliated with official shadcn/ui
Security Checkup Settings Block for React Aria
A workspace security checkup page with a score and meter, eight checks that each say Pass or Needs attention with a reason and a button that flips them, and one primary button that moves focus to the first failing check.
Installation
Overview
See how well a workspace is protected and fix it one check at a time, with this security checkup page for React with React Aria. A whole screen with the page's rails and one band across it holds the score ("5 of 8 checks pass") with a Progress meter, one Shine Button, Fix the next one, which moves focus to the first check that fails, and a line that says what is next. Eight checks follow as rows (single sign-on enforced, a second step required, an IP allowlist, a short idle timeout, an audit log kept a year, tokens that expire, few owners and a recent backup), each with a mark, its state in words (Pass or Needs attention), a one-line reason that changes with the state and a Turn on or Turn off Button that flips it. Flipping a check moves the score, the meter and the line under the button. The buttons change this list only: no setting anywhere is touched. It's built from Progress, Button, Shine Button and Guides, with a CSS entrance only. For a settings area that needs a review page in front of its policies.
FAQ
How do I use my own checks?
Edit CHECKS at the top: each has an id, a name, the reason it shows while it fails and the reason it shows while it passes, and START lists the ones that pass when the page opens. The score, the meter, the count of checks to go and the line under the button are worked out from that list, so nothing is typed twice. In your app each pass or fail would come from the setting itself, and the button would link to the page that changes it.
What does Fix the next one do?
It doesn't change anything itself: it moves focus to the button of the first check that fails and says which one it is, so Enter or Space then turns it on. When every check passes the button stays in place, quiet, and says so; pressing it then just says all eight pass. Keeping the one primary in the score block keeps it on the first screen on a phone, with no pinned bar.
What stays local, and how do I make it real?
Everything. Turn on and Turn off flip a typed list in this page and say so in the line under the score; nothing is enforced and no settings page is opened. Turn off is there so you can see the score fall again. To make it real, derive each pass from your own configuration, make each button open the right settings page or call the change directly, and keep a way to dismiss a check that doesn't apply.
Is it accessible, and how does it look on a phone?
Each state is a word as well as a mark (a solid dot for Pass, a ring for Needs attention), every button is named for its check ("Turn on: MFA required"), the rows are a real list and the line under the score is a polite live region present from the start. On a phone the score, the button and the meter stack, and each row keeps its two lines of text and its button at a fixed height, so turning a check on never moves the page.