SignupForm

A complete signup form block with name, email, password fields, social signup, and sign in link.

Create an account

Join us today. It's free to get started.

CMSCMS Ready

The SignupForm component accepts customizable title, description, and link props for CMS integration. Content editors can configure form text without code changes.

Basic Usage

import { SignupForm } from "@corew500/ui"

<SignupForm
  onFormSubmit={(data) => console.log(data)}
  onSocialSignup={(provider) => console.log(provider)}
/>

With Glow Effect

Enable interactive glow effects on all inputs and buttons.

<SignupForm
  glow
  onFormSubmit={(data) => handleSignup(data)}
/>

The glow effect adds:

Mouse-tracking radial gradient on input fields
Animated gradient underline on buttons that fades in on hover

Custom Content

<SignupForm
  title="Join our platform"
  description="Create your account to get started"
  signInHref="/login"
/>

Loading State

<SignupForm loading />

With Authentication (feature-auth)

Different Package

The examples below use @corew500/feature-auth, which wraps this UI component with Supabase authentication. Install it separately for full auth functionality.

For complete Supabase authentication, use the wrapper from @corew500/feature-auth:

import { SignupForm } from "@corew500/feature-auth"

// Basic usage
<SignupForm
  signInHref="/login"
  termsHref="/terms"
  privacyHref="/privacy"
/>

Lifecycle Callbacks

Hook into the authentication flow for analytics, error handling, or custom behavior:

import { SignupForm } from "@corew500/feature-auth"

<SignupForm
  onSuccess={({ email, name }) => {
    analytics.track('signup_success', { email, name })
    showWelcomeToast(name)
  }}
  onAuthError={(error) => {
    if (error.code === 'user_already_exists') {
      showToast('An account with this email already exists')
    }
    analytics.track('signup_failed', { code: error.code })
  }}
  onSubmitStart={() => {
    setGlobalLoading(true)
  }}
/>

With User Metadata

Pass additional metadata to store with the user:

import { SignupForm } from "@corew500/feature-auth"

<SignupForm
  metadata={{
    referral_code: referralCode,
    signup_source: 'landing_page',
  }}
  onSuccess={({ email }) => {
    analytics.identify(email)
  }}
/>

Client-Side Validation

Enable real-time validation with password strength requirements:

import { SignupForm } from "@corew500/feature-auth"

<SignupForm
  validation={{
    enableClientValidation: true,
    validationMode: 'onBlur',
    signupOptions: {
      requirePasswordStrength: true,
    },
  }}
  features={{
    passwordRequirements: true,
  }}
/>

Props

Prop	Type	Default	Description
`onFormSubmit`	(data: SignupFormData) => void	—	Called when the form is submitted
`onSocialSignup`	(provider: string) => void	—	Called when social signup button is clicked
`signInHref`	string	`#`	URL for sign in link
`loading`	enum	`false`	Whether the form is in a loading state
`title`	string	`Create an account`	Custom title for the card
`description`	string	`Enter your information below to create your account`	Custom description for the card
`glow`	enum	`false`	Enable glow effects on inputs and buttons
`success`	enum	`false`	When true, shows success state instead of form
`successTitle`	string	`Account Created!`	Title shown in success state
`successDescription`	string	`Please check your email to verify your account.`	Description shown in success state
`successSubDescription`	string	—	Secondary description shown in success state
`successAction`	enum	—	Optional action element for success state
`labels`	{ name?: string; email?: string; password?: string; confirmPassword?: string; terms?: string; termsLink?: string; termsConjunction?: string; privacyLink?: string; }	`{}`	—
`placeholders`	{ name?: string; email?: string; password?: string; confirmPassword?: string; }	`{}`	—
`descriptions`	{ email?: string; password?: string; confirmPassword?: string; }	`{}`	—
`buttonLabels`	{ submit?: string; loading?: string; signIn?: string; signInPrompt?: string; socialGoogle?: string; }	`{}`	—
`errors`	{ name?: string; email?: string; password?: string; confirmPassword?: string; terms?: string; general?: string; }	`{}`	—
`features`	{ passwordToggle?: boolean; passwordRequirements?: boolean; termsCheckbox?: boolean; socialLogin?: boolean; socialSignup?: boolean; }	`{}`	—
`termsHref`	string	`#`	URL for terms of service
`privacyHref`	string	`#`	URL for privacy policy
`passwordRequirements`	PasswordRequirement[]	—	Custom password requirements