Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Two-Factor Setup Onboarding Block for Svelte

A team vault's two-step sign-in setup in three parts: a real QR code with a copyable setup key, a six-digit confirmation, and a way back in (backup codes you can copy or download, a recovery email, or a trusted contact).

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Turn on two-step sign-in without losing anyone's account with this two-factor setup for Svelte with Ark UI. It is a step of Keepwold, a team vault, as a whole screen: the page's rails and one band, a step header (“Step 3 of 5” and a hairline) and a framed panel with a numbered strip that opens one part at a time. Scan shows a real QR Code of a typed demo text and a setup key with a Copy Button; Confirm takes the six digits in an Input OTP; Recovery asks how to get back in, with four backup codes you can copy or download as a .txt file, a recovery email, or a trusted contact. Finish is the one Shine Button, quiet until the box “I saved my recovery choice” is ticked. The panel then says what is on.

FAQ

Does the QR code enrol a real authenticator?

No. The code holds the sentence in QR_TEXT, which no authenticator app can add, and the setup key and backup codes are made up for the demo. The demo's confirmation code is 482913 and the hint says so. In your app encode the otpauth:// link your server makes and show the key from the same secret.

What is real in the demo?

The clipboard and the download. Copy key and Copy all use the browser's clipboard, and Download .txt builds a text file from the four codes with a Blob and saves it, then revokes the link. Nothing else leaves the page.

Can I go to the next part without finishing the one before?

No. Each button moves one part on: Scan to Confirm, a right code to Recovery, and Finish ends. Back returns one part. The strip shows which parts are done (a check), the one you are on and the one next. The three parts share one space, so the panel keeps the height of the tallest and never moves.

How do the recovery choices differ?

Backup codes shows four one-use codes with Copy all and Download. Recovery email and Trusted contact each show one email field, checked when you press Finish. Changing the choice clears the box, so you confirm the choice you leave with. Add or remove ways in WAYS.

Why does Finish look quiet until the box is ticked?

It is the same Shine Button with a muted look, still pressable: pressing it early says what is missing and moves focus to the first thing to fix. A disabled button would give no reason. Once everything is set it takes its full look.

How does it look on a phone?

The strip keeps the three names and hides their status words, the QR code shrinks to 120 pixels, the recovery choices stack, and the buttons pin to the foot of the screen so Finish is always in reach.

All 100 onboarding blocks