Email Login

A full-featured email login form with customizable branding and theme support

Zezo Email Login Component

📦 Installation

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-auth.json

💡 Usage Example

import EmailLogin from "@/components/zezo/auth/LoginWithEmail";

<EmailLogin
  onSubmit={(data) => {
    console.log("Email:", data.email);
    console.log("Password:", data.password);
  }}
  isLoading={false}
  error=""
/>

📘 Props

Prop	Type	Required	Description
onSubmit	`(data: { email: string; password: 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
logoUrl	`string`	Optional	URL of logo image displayed at top (has default)
title	`string`	Optional	Main heading text (default: "Welcome back!")
subtitle	`string`	Optional	Subtitle text below title (has default)
rightImageUrl	`string`	Optional	Right side background image URL (hidden on mobile, has default)
continueButtonText	`string`	Optional	Submit button text (default: "Login")
phoneLoginText	`string`	Optional	Text for phone login link (default: "Login with Phone")
signUpText	`string`	Optional	Sign up link text (default: "Don't have an account? Sign up")
forgotPasswordLink	`string`	Optional	Forgot password link URL (default: "/forgot-password")
backgroundColor	`string`	Optional	Custom background color (overrides theme)

✨ Features

📧 Email & Password

Standard email/password authentication

👁️ Password Toggle

Show/hide password visibility

🔄 Phone Login Alternative

Quick switch to phone login

🔙 Back Navigation

Optional back button with callback

🎨 Customizable Branding

Logo, title, subtitle, and right image

🌓 Dark Mode

Automatic theme support

🔗 Link Integration

Forgot password and sign up links

⚡ Loading States

Built-in loading and error handling

📱 Responsive

Mobile-first responsive design

🎯 Theme Colors

Integrates with dynamic theme colors