shadcn.io is not affiliated with official shadcn/ui
Recovery Phrase Web3 Block for Ark UI
A whole-screen backup page for a self-custody wallet: a sample twelve-word phrase held as bullets until Show words, then three questions that must be answered correctly before the backup is confirmed.
Installation
Overview
Walk people through backing up a wallet, with this recovery phrase page for React with Ark UI. It's the backup screen of Lockloft, a self-custody wallet app: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail, holding the content a little above the middle. The product's mark sits over the heading, one sentence and a calm warning. Step 1 shows twelve numbered slots on shared hairlines; each holds bullets until the Toggle Show words is pressed, so the words are not in the page until then, and there is no copy button, on purpose. I've written it down, the Shine Button, moves to step 2: three questions (word 3, 7 and 11) with three candidate words each in a Radio Group. A wrong pick says which word does not match; a correct set ends the page in Backup confirmed with a link back to the wallet. The steps share one cell, so the page never changes height. For wallet apps, key managers and any flow that makes people prove they kept a secret.
FAQ
Is the phrase real?
No. It is twelve ordinary words typed in WORDS, labelled on the page as a sample for this demo, and it is not a valid recovery phrase for any wallet. Never type or keep a real phrase on a web page, in a demo or in a copy of this block. In your app the phrase comes from the wallet's creation step and stays in memory only for as long as this screen is open.
How are the words hidden?
As bullets in the DOM: each slot holds six bullet characters, marked hidden from assistive technology, with the word Hidden for screen readers. The real word is rendered only while Show words is pressed, so nothing is blurred and nothing can be read from the page source or copied from a hidden slot. Moving to step 2 hides the words again.
Why is there no copy button?
By design. A phrase on the clipboard can be read by other apps, synced to other devices and pasted into the wrong place. The page says so and asks people to write the words down. If your product decides otherwise, add a Copy Button yourself and clear the clipboard afterwards.
How does the check work, and what stays local?
QUESTIONS lists three places and three candidates each, the true word among them. Check my backup compares each answer with the phrase and, on the first miss, shows Word 7 does not match. Check your copy. in the form's problem line and moves focus to that question. A correct set shows the confirmation, in this demo; nothing is stored or sent. In your app mark the backup as done on your server only after the same check passes.