Nativ ui
Documentation

Sign Up

Registration form patterns and best practices.

Basic Sign Up

<div class="min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm p-8">
    <h1 class="text-2xl font-bold text-center">Create an account</h1>
    <p class="mt-2 text-center text-muted-foreground">
      Start your free trial today
    </p>
    <form class="mt-8 space-y-4">
      <div>
        <label class="text-sm font-medium">Full name</label>
        <input type="text" class="mt-1 w-full rounded-lg border px-3 py-2" />
      </div>
      <div>
        <label class="text-sm font-medium">Email</label>
        <input type="email" class="mt-1 w-full rounded-lg border px-3 py-2" />
      </div>
      <div>
        <label class="text-sm font-medium">Password</label>
        <input type="password" class="mt-1 w-full rounded-lg border px-3 py-2" />
        <p class="mt-1 text-xs text-muted-foreground">
          Minimum 8 characters
        </p>
      </div>
      <button type="submit" class="w-full btn-primary">Create account</button>
    </form>
    <p class="mt-4 text-center text-xs text-muted-foreground">
      By signing up, you agree to our
      <a href="/terms" class="underline">Terms</a> and
      <a href="/privacy" class="underline">Privacy Policy</a>.
    </p>
    <p class="mt-6 text-center text-sm text-muted-foreground">
      Already have an account? <a href="/login" class="text-primary">Sign in</a>
    </p>
  </div>
</div>

Best Practices

  1. Minimal fields - Only ask for essential info
  2. Password strength - Show requirements clearly
  3. Social signup - Offer OAuth options
  4. Terms link - Required for legal compliance
  5. Login link - For existing users who landed here