shadcn.io is not affiliated with official shadcn/ui
Email Not Verified Error Block for Vue
A full-screen page for an unconfirmed email: a drawn mail list with Inbox, Spam and Promotions tabs showing where the message hides, an I've confirmed it button, a Resend the email button with a 30-second wait and a Change email field.
Installation
Overview
Help people find the email they're waiting for, with this email not verified page for Vue with Ark UI. It's the screen Streakwell, a habit tracker, shows someone who hasn't confirmed their address: 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, split in two. At the start, the heading, the masked address the link went to, the Shine Button I've confirmed my email, a Countdown Button Resend the email that waits 30 seconds after each press, and a Change email link that swaps the buttons for a Field with an Input in the same space. At the end, in a frame made with Guides, "where to look": a drawn mail list under three Tabs, Inbox, Spam and Promotions, with the verification message in a different place in each and a sentence saying where. Nothing is sent or checked. For sign-up flows that confirm an address.
FAQ
What does each button do, and what stays in the page?
Nothing leaves the page. I've confirmed my email waits under a second and says it checked nothing: the link in the email is what confirms the address. Resend the email shows its 30-second count at once and, after a short wait, a polite line says a new email would go to the masked address and that nothing was sent. Update and resend replaces the address in the page and says the same. To wire it for real, call your confirmation endpoint from check, your resend endpoint from resend and your change-address endpoint from update.
Is the mail list real?
It's a drawing: bars where the words would be, and one row with real words, the message from Streakwell with its subject. Each tab moves that row, because that is what happens: filters file it in Spam or Promotions. The list is hidden from assistive technology and the sentence under it says in words where to look, so nothing depends on seeing the drawing.
Why does Resend the email count 30 seconds?
Because sending twice in a row confuses people (which link works?) and invites abuse. 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, not one every second. The wait is a demo of the shape: in your app, match it to your server's rate limit.
How does Change email work without moving the page?
The buttons and the field are two panes in one grid cell: the unused pane is invisible and inert, so the page never changes height and a screen reader can't reach what isn't shown. Choosing Change email moves focus to the field; Cancel returns it to Change email; a bad address names the problem under the field and keeps focus there; a good one closes the pane and focus moves to the status line. The field is checked when you press the button, never disabled.