Signup Form

Customizable signup form built on shadcn input + label with subtle framer-motion transitions and async submit states.

Signup Formsspringhoverauthformssignupshadcn

Signup Form

Welcome to Nexus-UI

Create your account to save favorites and access premium component docs.

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

title

Main heading displayed at the top.

subtitle

Supporting text below the title.

submitLabel

Button label in idle state.

loadingLabel

Button label while submit is pending.

successLabel

Button label after successful submit.

showNameField

Shows or hides the full-name input.

showConfirmPasswordField

Shows or hides the confirm-password input.

minPasswordLength

Minimum password length enforced by validation.

Generated JSX

Copy this into your page.

<SignupForm
  title="Create your account"
  subtitle="Start building premium interfaces with motion-first components."
  submitLabel="Create account"
  loadingLabel="Creating account..."
  successLabel="Account created"
  showNameField={true}
  showConfirmPasswordField={true}
  minPasswordLength={8}
/>

Login Form

Welcome back

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

title

Main heading displayed at the top.

subtitle

Supporting text below the title.

submitLabel

Button label in idle state.

loadingLabel

Button label while submit is pending.

successLabel

Button label after successful submit.

showNameField

Shows or hides the full-name input.

showConfirmPasswordField

Shows or hides the confirm-password input.

minPasswordLength

Minimum password length enforced by validation.

Generated JSX

Copy this into your page.

<LoginForm
  title="Create your account"
  subtitle="Start building premium interfaces with motion-first components."
  submitLabel="Create account"
  loadingLabel="Creating account..."
  successLabel="Account created"
  showNameField={true}
  showConfirmPasswordField={true}
  minPasswordLength={8}
/>

Animation effects

springhover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

Installation

Signup Form

Welcome to Nexus-UI

Create account

Shape the component before you copy it.

Login Form

Welcome back

Shape the component before you copy it.

Animation effects