Staaarter

Email Confirmed Success

Full-height success screen shown after a user confirms their email address, with a green checkmark badge, a heading and message, a primary Continue button, and a small support link below. Fully static, there is no verification logic here, it's the confirmation screen a real email link would redirect to.

By Staaarter Team
Auth
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/email-confirmed-success.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth12.tsx instead.

Usage

The file also exports auth12Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth12, auth12Demo } from "@/components/blocks/auth/auth12";

export default function Page() {
  return <Auth12 {...auth12Demo} />;
}

Props

PropTypeDefaultDescription
headingReactNode"Email confirmed"Success screen heading.
descriptionstring"Your email address has been verified. You can now access your account."Supporting message under the heading.
continueLabelstring"Continue"Label for the primary button.
continueHrefstring"#"Link target for the primary button.
supportLabelstring"Need help? Contact support"Label for the small support link below the primary button.
supportHrefstring"#"Link target for the support link.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • This is a static server component, it has no client state, hooks, or interactivity beyond the two links.
  • The primary Continue button renders as a Next.js Link via Button's render prop (render={<Link .../>}), same pattern as other blocks' linked CTAs.
  • The checkmark badge uses an emerald accent (text-emerald-600 / dark:text-emerald-400) for the universally-understood success color, matching how this codebase already flags positive states elsewhere (e.g. tool-content-article.tsx), rather than inventing a new semantic token.