shadcn.io is not affiliated with official shadcn/ui
Email Verified Redirect Success Block for React
A verification confirmation page with a five-second redirect you can pause: what happened, a countdown with a draining bar and a Pause the redirect toggle, and one button that goes to the forum right away.
Installation
Overview
Close the loop after a verification link with this confirmation page for React with Base UI. It's the page Parleyhall, a community forum, shows when a member clicks the link in the email: the page's side rails and one band frame a check in a tile, a heading, one sentence and a short list of what happened (the address, the time, the account's state). A framed redirect counts down from five seconds with a bar that drains as it goes and a Toggle that pauses and resumes it, so nobody is moved before they've read the page; the one Shine Button goes to the forum at once. Guides draws the frame and the corner marks, with a CSS entrance only. For email verification, magic links and any page that sends people on after a moment.
FAQ
What stays in the page, and how do I wire the redirect for real?
Nothing navigates and nothing was verified: at zero the page says "In this demo the redirect stops here." To wire it, call your router's push where the countdown reaches zero (the tick that sets left to 0), keep the pause toggle, and read the address and the time from the verified account. The countdown length is SECONDS.
Can the countdown be stopped?
Yes: Pause the redirect is a toggle that stops the clock and, pressed again, starts it from where it was. A redirect that moves people on their own has to be pausable (WCAG 2.2.1); the toggle is the first control in the frame, before the button, and it keeps its label while its pressed state changes.
Does a screen reader hear every second?
No. The countdown text is a timer, which is not announced as it changes. One polite status message speaks only when something changes state: "Redirect paused.", "Redirect running." and, at zero, "The redirect has stopped. Nothing navigated in this demo."
Related
- Pro
Email Verification Dialog
Account and securityA newsletter tool's profile page with its email verification shown open: a six-slot code that checks itself when full, three tries, a resend held for 30 seconds by a timer, a way to use a different address, and a success state.
- Pro
Email Not Verified Error
Sign-in and identityA 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.
- Pro
Account Setup Checklist Success
Account lifecycleA welcome page after sign-up: what happened, then a five-task setup checklist in an accordion where one task is open at a time, each with its own control, a count and a progress bar, and one primary that opens the app.
- Pro
OTP Verification Login
Codes and approvalsA code step for a parcel locker app: a six-digit field that checks itself on the sixth digit or on a paste, counts wrong codes down from three, and a resend button that waits 30 seconds after it is pressed.
- Pro
Account Deletion Grace Period Success
Account lifecycleA confirmation page for a scheduled account deletion: what was switched off, a 30-day bar cut at day 14 into a restore zone and a removal zone, a Cancel deletion button that flips the page in place and a data download.
- Pro
First Project Success
Account lifecycleA confirmation page for a first project: the new project as three facts, four firsts in a grid of hairline cells with the next one lit and each pickable to read what it takes, one Open the project button and a thin fall of confetti that plays once.