Email Verification Code

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.

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

Usage

The file also exports auth3Demo, 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 { Auth3, auth3Demo } from "@/components/blocks/auth/auth3";

export default function Page() {
  return <Auth3 {...auth3Demo} />;
}

Props

Behavior notes

• The 6 code inputs are real client-side state: typing a digit auto-advances focus to the next box, and backspace on an empty box moves focus back to the previous one.
• The Verify button's disabled state is derived from real state too, it only becomes clickable once all 6 boxes are filled, though clicking it does not verify anything against a real backend.
• The countdown is a genuine setInterval-driven timer (cleaned up on unmount) starting from resendSeconds; once it reaches 0 the text is replaced with a Resend code button that restarts the same local timer, no email is actually sent or resent.