Sign Up
A flexible sign-up form with customizable fields, branding, and styling options
Zezo SignUp Component
Let’s go!
Enter your details to create your account
Already have an account? Sign in
📦 Installation
💡 Usage Example
import SignUp from "@/components/zezo/auth/SignUp";
<SignUp
onSubmit={(data) => {
console.log("Name:", data.name);
console.log("Email:", data.email);
console.log("Password:", data.password);
}}
isLoading={false}
error=""
fullScreen={false}
/>📘 Props
| Prop | Type | Required | Description |
|---|---|---|---|
| onSubmit | (data: { name: string; email: string; password: string }) => void | Optional | Callback function called when form is submitted |
| onChange | (field: "name" | "email" | "password", value: string) => void | Optional | Callback for individual field changes |
| isLoading | boolean | Optional | Loading state for submit button (default: false) |
| error | string | Optional | Error message displayed in red |
| fullScreen | boolean | Optional | Full screen layout (default: true) |
| showNameField | boolean | Optional | Show name input field (default: true) |
| disabledFields | Array<"name" | "email" | "password"> | Optional | Array of field names to disable (default: []) |
| submitText | string | Optional | Submit button text (default: "Create an account") |
| logoUrl | string | Optional | Logo image URL (has default) |
| backgroundImageUrl | string | Optional | Right side background image URL (has default) |
| backgroundColor | string | Optional | Custom background color (overrides theme) |
| goBack | () => void | Optional | Callback for back navigation (shows back button) |
| redirectLink | string | Optional | Sign in redirect link (default: "/login") |
| showRedirect | boolean | Optional | Show sign in redirect link (default: true) |
| termsLink | string | Optional | Terms of service link URL |
| privacyLink | string | Optional | Privacy policy link URL |
| labels | { title?: string; description?: string; nameLabel?: string; emailLabel?: string; passwordLabel?: string; signInText?: string; signInLinkText?: string } | Optional | Object to override default text labels |
| additionalFields | React.ReactNode | Optional | Additional custom fields below password input |
| leftContent | React.ReactNode | Optional | Custom content to replace left side form |
| rightContent | React.ReactNode | Optional | Custom content for right side (replaces background image) |
| containerClass | string | Optional | Custom CSS class for container |
| inputClass, buttonClass, labelClass, errorClass, titleClass, descriptionClass | string | Optional | Custom CSS classes for styling individual elements |
✨ Features
📝 Form Fields
Name, email, and password inputs with validation
👁️ Password Toggle
Show/hide password visibility
🔧 Field Control
Show/hide name field, disable specific fields
🔙 Back Navigation
Optional back button with callback
🎨 Customizable Branding
Logo, background image, and custom styling
🌓 Dark Mode
Automatic theme support
🔗 Legal Links
Terms and privacy policy links
⚡ Loading States
Built-in loading and error handling
📱 Responsive
Mobile-first responsive design
➕ Custom Fields
Inject additional fields or custom content
🎯 Theme Colors
Integrates with dynamic theme colors
🎨 Styling Options
Custom CSS classes for all elements