Phone Login
A full-featured phone login form with country code selector and customizable branding
Zezo Phone Login Component
Loading...
📦 Installation
pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-auth.json
💡 Usage Example
import PhoneLogin from "@/components/zezo/auth/PhoneLogin";
<PhoneLogin
onSubmit={(data) => {
console.log("Country Code:", data.countryCode);
console.log("Phone Number:", data.phoneNumber);
}}
showConsent={true}
isLoading={false}
error=""
goBack={() => window.history.back()}
/>📘 Props
| Prop | Type | Required | Description |
|---|---|---|---|
| onSubmit | (data: { countryCode: string; phoneNumber: string }) => void | Optional | Callback function called when form is submitted |
| goBack | () => void | Optional | Callback for back navigation (shows back button) |
| isLoading | boolean | Optional | Loading state for submit button (default: false) |
| error | string | Optional | Error message displayed in red below form |
| showConsent | boolean | Optional | Show consent checkbox for OTP verification (default: false) |
| logoUrl | string | Optional | URL of logo image displayed at top (has default) |
| posterUrl | string | Optional | Right side poster/image URL (hidden on mobile, has default) |
| title | string | Optional | Main heading text (default: "Welcome back!") |
| subtitle | string | Optional | Subtitle text below title (default: "Enter your phone number to login") |
| continueButtonText | string | Optional | Submit button text (default: "Continue") |
| emailLoginText | string | Optional | Text for email login link (default: "Login with Email") |
| signUpText | string | Optional | Sign up link text (default: "Don't have an account? Sign up") |
| rightImageUrl | string | Optional | Alternative prop name for posterUrl |
| backgroundColor | string | Optional | Custom background color (overrides theme) |
| children | React.ReactNode | Optional | Additional content to render |
✨ Features
📱 Phone Input
Country code selector with phone number input
✅ Consent Checkbox
Optional OTP consent checkbox for verification
📧 Email Login Alternative
Quick switch to email login
🔙 Back Navigation
Optional back button with callback
🎨 Customizable Branding
Logo, title, subtitle, and right poster image
🌓 Dark Mode
Automatic theme support
🔗 Link Integration
Email login and sign up links
⚡ Loading States
Built-in loading and error handling
📱 Responsive
Mobile-first responsive design
🎯 Theme Colors
Integrates with dynamic theme colors