Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Success blocks

Pro

Email Verified Redirect Success Block for Radix UI

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.

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

Close the loop after a verification link with this confirmation page for React with Radix 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."

What happens with reduced motion?

The bar drains in one smooth line normally; with reduced motion it steps down a fifth each second instead of sliding. The counting itself is not animation, so it still runs, and the toggle is still there to stop it.

All 100 success blocks