Phone Verification Form

Forms

About

Phone Verification Form This component provides a complete UI for phone number verification, including social sign-in options and a placeholder for reCAPTCHA. It's built to be animated and easily integrated.

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

Code

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

Usage.tsx

import React from "react";
import { PhoneVerificationForm } from "@/components/ui/phone-verification-form";

// Main demo component
export default function PhoneVerificationFormDemo() {
  // Handler functions to demonstrate prop connectivity
  const handleClose = () => {
    console.log("Close button clicked");
  };

  const handleProceed = (phoneNumber: string) => {
    console.log("Proceeding with phone number:", phoneNumber);
    // Add your logic here, e.g., send OTP
  };

  const handleGoogleSignIn = () => {
    console.log("Sign in with Google clicked");
  };

  const handleSignUp = () => {
    console.log("Sign-Up link clicked");
  };

  return (
    // Centering container to simulate a modal overlay
    <div className="flex min-h-[600px] w-full items-center justify-center bg-background p-4">
      <PhoneVerificationForm
        // Replace with your actual image source
        illustrationSrc="https://www.pvrcinemas.com/static/media/Cinema%20House%201.ddda5acf194e124b216b.gif"
        onClose={handleClose}
        onProceed={handleProceed}
        onGoogleSignIn={handleGoogleSignIn}
        onSignUpClick={handleSignUp}
      />
    </div>
  );
}