shadcn.io is not affiliated with official shadcn/ui
Security Setup Onboarding Block for Ark UI
A security panel for a finance app: a two-step sign-in switch, a recovery email and four backup codes behind a Reveal button raise a three-cell Basic, Good, Strong meter, with one line on what each level adds.
Installation
Overview
Let people see what each safeguard buys them with this security setup for React with Ark UI. It is a panel of Moatwick, a family finance tracker: a three-cell meter (Basic, Good, Strong) over three layers, and the meter is a plain function of how many layers are on. A Switch turns on two-step sign-in, a recovery email counts once it is a full address, and four backup codes sit behind a Reveal Collapsible and count once you have seen them. One line under the meter says what that level adds. Secure my account is the one Shine Button; with no layer on it stays quiet and says so when pressed. It is the choice of layers, not the QR enrolment of the two-factor step.
FAQ
How is the level worked out?
By layerCount: how many of the three layers are on. Zero or one is Basic, two is Good, three is Strong (LEVEL_BY_COUNT), and SENTENCES holds the line for each count. Nothing is typed twice, so adding a layer means one more entry in the count and the levels, and a new row.
When does a layer count?
Two-step sign-in counts when its switch is on. The recovery email counts when it looks like a full address (it is checked as you leave the field). The backup codes count once Reveal has been pressed, because a code you never saw can't save you. Hiding them again doesn't undo that.
Are the backup codes real?
No, the four codes in CODES are made up for the demo, and nothing is generated. In your app make them on your server when Reveal is first pressed, store only their hashes, and show them once.
What stays local in the demo, and how do I wire it?
All of it. Secure my account says what would be saved (“Saved in this demo: Good.”) and sends nothing. In your app save the switch, the email and the viewed flag in secure, and enforce the rules (a real second step, a verified email) on the server.
What if nothing is on when I press Secure my account?
The button answers “Turn on a layer first.” in the status line and saves nothing. It is muted until at least one layer is on, but stays pressable, so the answer is always one press away.
Is it accessible from the keyboard and a screen reader?
Yes. The switch is named for its layer, the email field has a label, Reveal is a button that says whether the codes are open, and the three meter cells are a list that reads “Good, reached”. Every change is available in the status line, which is the page's single polite status.