Uai Blocks Code Verification

Component

About

One-time code entry with paste, resend timing, errors, and alternate methods.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Uai Blocks Code Verification to your project and fits it to your theme.

Code

How Uai Blocks Code Verification is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client";

import {
  CodeVerification,
  CodeVerificationAlternative,
  CodeVerificationAlternatives,
  CodeVerificationDescription,
  CodeVerificationDestination,
  CodeVerificationForm,
  CodeVerificationHeader,
  CodeVerificationInput,
  CodeVerificationMessage,
  CodeVerificationResend,
  CodeVerificationResendButton,
  CodeVerificationSubmit,
  CodeVerificationTitle,
  type CodeVerificationVariant,
} from "@/components/ui/uai-code-verification";
import { InlineFeedbackMessage, InlineFeedbackStatus } from "@/components/ui/uai-code-verification-utils/src-components-ui-uai-inline-feedback";
import { StatusBannerDescription, StatusBannerTitle } from "@/components/ui/uai-code-verification-utils/src-components-ui-uai-status-banner";

async function checkCode(code: string) {
  await new Promise((resolve) => setTimeout(resolve, 600));
  if (code === "000000") return "expired" as const;
  return code === "482913" ? ("success" as const) : ("invalid" as const);
}

async function sendNewCode() {
  await new Promise((resolve) => setTimeout(resolve, 500));
}

export function CodeVerificationPreview({
  variant = "card",
}: {
  variant?: CodeVerificationVariant;
}) {
  return (
    <CodeVerification
      variant={variant}
      onVerify={checkCode}
      onResend={sendNewCode}
      resendAfter={30}
    >
      <CodeVerificationHeader>
        <CodeVerificationTitle>Check your email</CodeVerificationTitle>
        <CodeVerificationDescription>
          We sent a 6-digit code to{" "}
          <CodeVerificationDestination>marta@larkspur.example</CodeVerificationDestination>. It
          expires in 10 minutes. Try 482913, or 000000 for an expired code.
        </CodeVerificationDescription>
      </CodeVerificationHeader>
      <CodeVerificationForm>
        <CodeVerificationInput label="6-digit code" />
        <CodeVerificationMessage status="invalid">
          <StatusBannerTitle>That code doesn’t match</StatusBannerTitle>
          <StatusBannerDescription>Check the latest email and try again.</StatusBannerDescription>
        </CodeVerificationMessage>
        <CodeVerificationMessage status="expired">
          <StatusBannerTitle>This code has expired</StatusBannerTitle>
          <StatusBannerDescription>Request a new code to continue.</StatusBannerDescription>
        </CodeVerificationMessage>
        <CodeVerificationMessage status="verified">
          <StatusBannerTitle>Email verified</StatusBannerTitle>
          <StatusBannerDescription>Taking you to your workspace…</StatusBannerDescription>
        </CodeVerificationMessage>
        <CodeVerificationSubmit>Verify email</CodeVerificationSubmit>
        <CodeVerificationResend>
          <CodeVerificationResendButton>Resend code</CodeVerificationResendButton>
          <InlineFeedbackStatus>
            <InlineFeedbackMessage status="success">New code sent</InlineFeedbackMessage>
            <InlineFeedbackMessage status="error">Couldn’t send. Try again.</InlineFeedbackMessage>
          </InlineFeedbackStatus>
        </CodeVerificationResend>
        <CodeVerificationAlternatives>
          <span>Can’t get the email?</span>
          <CodeVerificationAlternative>Text me instead</CodeVerificationAlternative>
          <CodeVerificationAlternative>Use a backup code</CodeVerificationAlternative>
        </CodeVerificationAlternatives>
      </CodeVerificationForm>
    </CodeVerification>
  );
}

function SourceSpecimen(){return <CodeVerificationPreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}