Auth12: Email Confirmed Success

Full-height success screen: a large icon inside a green circle, a heading and message, a primary continue button, and a footer support link. Entirely static, with no form fields or interactive state.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth12?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth12?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth12.tsx and the button and field shadcn/ui primitives it's built on.

Quick start

The installed file exports auth12Demo alongside the block: the exact props behind the preview above. Spread it to get a working confirmation screen in one line.

import { Auth12, auth12Demo } from "@/components/beste/block/auth12";

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

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Check } from "lucide-react";
import { Auth12 } from "@/components/beste/block/auth12";

export default function ConfirmedPage() {
  return (
    <Auth12
      icon={<Check className="size-7" />}
      heading="You're all set!"
      description="Your email has been verified and your account is ready."
      primaryButton={{ label: "Continue to dashboard", href: "/dashboard" }}
      footerPrompt={{ text: "Need a hand?", linkLabel: "Contact support", href: "/support" }}
    />
  );
}

Props

Behavior notes

• Fully static and presentational: there is no <form>, no inputs, and no local state; every piece of content renders straight from props.
• The icon circle is hardcoded to bg-emerald-500/10 text-emerald-500, regardless of which icon node is passed in, so it visually reads as a success/positive state no matter what icon you swap in.
• primaryButton and footerPrompt render independently of each other; omitting both leaves just the icon, heading, and description.
• icon, heading, description, primaryButton, and footerPrompt are each individually optional, so any subset of the screen can be dropped without leaving gaps in the layout.