SignupForm

Overview

The SignupForm component is a feature-rich, animated signup form with comprehensive validation, password strength indicators, and multiple layout variants. It supports both centered card layouts and split-screen designs with promotional content, making it perfect for modern authentication flows.

Preview

VariantDefaultModernGlassDark

Preview

Preview - default variant • default state

Create Account

Join us today and get started

First Name

Last Name

Email

Confirm Email

Password

Confirm Password

I agree to the Terms and Conditions and Privacy Policy

Already have an account? Sign in

Code

import { CenteredSignupForm } from "./index";

function App() {
    const handleSubmit = async (formData) => {
        console.log("Form data:", formData);
        // Handle form submission
    };

    return (
        <CenteredSignupForm
            variant="default"
            
            
            
            onSubmit={handleSubmit}
            
        />
    );
}

export default App;

VariantDefaultModernGradientDark

Company Name

Preview

Preview - default variant • YourBrand • default state

YourBrand

Join thousands of
happy users today

Create your account and unlock powerful features designed to help you succeed. Fast, secure, and always improving.

© 2024 YourBrand. All rights reserved.

YourBrand

Create Account

Sign up to get started with your journey

First Name

Last Name

Email

Confirm Email

Password

Confirm Password

I agree to the Terms & Conditions and Privacy Policy

Already have an account? Log in

Code

import { SplitSignupForm } from "./index";

function App() {
    const handleSubmit = async (formData) => {
        console.log("Form data:", formData);
        // Handle form submission
    };

    return (
        <SplitSignupForm
            variant="default"
            companyName="YourBrand"
            
            
            onSubmit={handleSubmit}
        />
    );
}

export default App;

Installation

CLI

ignix add component signup-form

Manual

# Copy the component file to your project
cp signup-form.tsx ./src/components/Forms/

# Install required dependencies
npm install framer-motion class-variance-authority lucide-react

Usage

Props

Prop	Type	Default	Description
variant	"default" | "modern" | "minimal" | "card" | "glass" | "elegant"	"default"	Visual theme variant for the form
layout	"centered" | "split"	"centered"	Layout variant (centered card or split screen)
inputVariant	string	"clean"	Animation variant for input fields
size	"sm" | "md" | "lg"	"md"	Size of form elements
showConfirmEmail	boolean	true	Show confirm email field for verification
showTerms	boolean	true	Show terms and conditions checkbox
enableCaptcha	boolean	false	Enable CAPTCHA integration placeholder
realtimeValidation	boolean	true	Enable real-time validation as user types
loading	boolean	false	Show loading state during submission
success	boolean	false	Show success state after form submission
onSubmit	(data: SignupFormData) => void	undefined	Custom submit handler
loginLink	string	"/login"	Custom login page URL
className	string	undefined	Additional CSS classes