Sign Up Form

v1.0.0

Authentication

A comprehensive registration form with validation, social login options, and loading states.

Dependencies

lucide-react

@/components/ui/button

@/components/ui/input

@/components/ui/checkbox

@/components/ui/label

@/components/ui/separator

@/components/ui/card

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/signup-form.json

Manual Installation

// 1. Install dependencies
npm install lucide-react

// 2. Install required shadcn components
npx shadcn@latest add button input checkbox label separator card

// 3. Copy the component code to components/auth/signup-form.tsx

// 4. Usage example:
import { SignupForm } from "@/components/auth/signup-form"

export default function SignupPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignupForm
        onSubmit={async (data) => {
          // Your registration logic here
          console.log("Signup:", data)
        }}
        loading={false}
        showSocial={true}
      />
    </div>
  )
}

Props

Component properties and their types

onSubmit

(data: { firstName: string; lastName: string; email: string; password: string; agreeToTerms: boolean }) => void | Promise<void>

default: undefined

Callback function called when the form is submitted with valid data.

loading

boolean

default: false

Whether the form is in a loading state (disables inputs and shows spinner).

showSocial

boolean

default: true

Whether to display social login buttons (GitHub and Google).

className

string

default: undefined

Additional CSS classes to apply to the form container.

Examples

3 different usage examples

Basic Sign Up Form

import { SignupForm } from "@/components/auth/signup-form"

export default function SignupPage() {
  const handleSignup = async (data: {
    firstName: string
    lastName: string
    email: string
    password: string
    agreeToTerms: boolean
  }) => {
    console.log("Registration data:", data)
    // Add your registration logic here
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50">
      <SignupForm onSubmit={handleSignup} />
    </div>
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

3 examples available

Create an account

Enter your information to get started

Or continue with

Already have an account?