shadcn.io is not affiliated with official shadcn/ui
Phone Not Verified Error Block for Ark UI
A full-screen page for an unconfirmed phone number: a Send the code button that waits 30 seconds, a six-slot code field with the demo code printed once, and a list of what is locked that flips to unlocked when the number is verified.
Installation
Overview
Show people what a phone number unlocks, with this phone not verified page for React with Ark UI. It's the screen Kerbmoor, a neighbourhood marketplace, shows an account whose number isn't confirmed: the page's two side rails run its full height, with the heading above one framed card made with Guides. In the card, the two steps come first: a Countdown Button Send the code, which waits 30 seconds after each press, then a six-slot Input OTP and the Shine Button Verify the number, the only coloured control. Beside them, "What's limited": posting listings, messaging and payouts are locked, browsing is open, and the three locked rows flip to unlocked when the code is right. The demo code is printed once, after Send the code, because nothing is texted. For marketplaces, booking sites and any account that gates features on a phone number.
FAQ
What stays in the page, and what's the code?
Everything. Send the code waits a moment and then shows "Demo code: 482913" under the field and says nothing was texted; the code is the constant DEMO_CODE. A wrong code names the problem and keeps focus in the field, an incomplete one asks for all six digits, and Verify the number before the code is sent says to send it first. The right code waits under a second, then flips the three locked rows to unlocked and moves focus to Start over. To wire it for real, send the SMS from send and check the code on your server in verify; never put the real code in the page.
How does the code field work?
It is six slots that take digits only: typing fills them in turn, Backspace goes back, and pasting a code fills them all. The field is named by its question and described by the demo-code line and by any problem, and it keeps its order in right-to-left languages. It is built on Ark UI's pin input, which holds one value per slot.
Why does Send the code count 30 seconds?
Because every text costs money and invites abuse, and people press twice when nothing arrives at once. The button shows the seconds in its label, drains a fill behind it and never changes size, and a screen reader hears one announcement when it starts. The label changes to "Send it again" after the first send. In your app, match the wait to your provider's rate limit.
How can you tell a locked row from an open one without colour?
By shape and word: a closed padlock and "Locked" in medium weight, an open padlock and "Unlocked", a tick and "Available" for browsing, which never needed the number. The count beside the heading says how many are still locked and is read as text.