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
- Minimal fields - Only ask for essential info
- Password strength - Show requirements clearly
- Social signup - Offer OAuth options
- Terms link - Required for legal compliance
- Login link - For existing users who landed here