shadcn.io is not affiliated with official shadcn/ui
Zero Trust Login Block for React
A sign-in that runs four policy checks in order (device, network, identity, policy) on a vertical Steps rail with typed details, a demo control that makes the device fail, and an outcome with its fix.
Installation
Overview
Show that a sign-in trusts nothing until it has been checked, with this zero trust login block for React with Base UI. It's the sign-in of Turbinelane, a wind-farm operations console: a whole screen with the page's rails and one band across it, split in two. At the start the mark, the heading and the catalog's vertical Steps as a rail (Device, Network, Identity, Policy), each with a word for where it stands: Waiting, Checking, Passed, Failed or Skipped. At the end, behind a divider, a Segment Group that simulates "all checks pass" or "device fails", a hairline Progress line, the details of the check in hand (what it asks and three typed example facts) and the outcome, "Access granted" or "Blocked: Device" with its fix. The one Shine Button starts a run of four beats, one check each, that stops at the first failure and skips what follows. On a phone the rail becomes a row of four markers and the button is pinned to the foot of the screen. It's built from Steps, Segment Group, Progress, Badge, Shine Button and Guides, with a CSS entrance only. For operations consoles, admin tools and any sign-in that checks the device, the network, the person and the policy.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The facts under each check are typed example values and the run is four timers that start when you press the button; nothing reads your device, network or account, and nothing is sent. In a product each check is a decision your server makes from signals it gathers itself (a device posture report, the connection's origin, the credential used, the policy for the role) and the page shows the result; the browser never reports its own posture.
Why does a failure stop the run?
Because the checks are ordered by cost and by what can be trusted: if the device is not healthy there is no point in asking who is on it. The first failing check becomes the current step with a cross, the ones before it show Passed, the ones after show Skipped, and its details show the fix. Run again starts from the first check, so flip the demo control back to "All checks pass" to see a full run.
Is the rail interactive?
No. It is the catalog Steps used as a read-only list, so it is not a set of tabs and has no tab stops; the details on the other side follow the run. A finished check shows a filled marker, the current one is outlined, and a failed one carries a cross.
Does anything keep moving?
No. A run is four beats of 700 milliseconds, one timer at a time, and it ends. The spinner beside "Running the checks" stops under reduced motion, and the same words say the same thing.
How are the outcomes told apart without colour?
By words and glyphs: Access granted with a tick, Blocked with a cross, a status word on every rail step, a Passed or Failed badge on each check's details and a fix line that only appears for the check that failed. The one status colour is a small icon beside the fix.
Related
- Pro
A sign-in gate for a VPN-only console: a connection check that fails twice with different diagnoses and then passes, three numbered steps, a demo switch to pretend, and troubleshooting answers.
- Pro
Risk Assessment Login
Risk checksA sign-in page that shows why it is asking: six weighted signals add up to a score, a three-zone band marks it, and the question follows the zone: nothing, a six-digit code, or a block.
- Pro
Trust Score Login
Risk checksA sign-in score simulator: four demo switches fill a circular meter in steps of 25 and decide the check, none above 75, a code from 50, an approval below, with a sketch of that check.
- Pro
Pre-Login Security Audit
Risk checksA pre-sign-in checklist panel: six typed checks in an accordion with a glyph and a word each, a fix and an I have done this box on the ones that fail, Re-check and a Continue that waits for no failures.
- Pro
Multi Step Rail Login
Step by stepA three-step sign-in for a support desk: a vertical Steps rail at the start (Email, Password, Code) with what was given and an Edit button on each finished step, and the one panel of the step in hand at the end.
- Pro
Account Locked Login
Recovery and resetA locked-account page for a point-of-sale system that draws the lockout ladder, marks the rung the account is on with a fixed unlock time, and offers an unlock link by email or a password reset.