Sign Up Form
.mdSign-up card with a GitHub button, an email field that validates and shakes, an animated password-strength meter, a stateful submit and a success state that morphs in with a drawn check.
sign upauthformvalidationpassword strengthregister
Installation
$npx shadcn@latest add @geturui/sign-up-form
Usage
usage.tsx
1import { SignUpForm } from "@/components/blocks/sign-up-form";
2
3export default function SignUp() {
4 return (
5 <SignUpForm
6 signInHref="/sign-in"
7 onGithub={() => (window.location.href = "/api/auth/github")}
8 onSubmit={async ({ email, password }) => {
9 const res = await fetch("/api/sign-up", { method: "POST", body: JSON.stringify({ email, password }) });
10 if (!res.ok) throw new Error("Sign up failed");
11 }}
12 />
13 );
14}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onSubmit | (values: { email; password }) => Promise<void> | void | — | Called with valid values. Throw or reject to stay on the form and shake the button. |
onGithub | () => void | — | GitHub button handler. |
showGithub | boolean | true | Show the GitHub button and divider. |
minPasswordLength | number | 8 | Minimum length; also the first step of the strength meter. |
title / description | string | — | Card heading copy. |
submitLabel | string | "Create account" | Submit button label. |
termsHref / privacyHref / signInHref | string | — | Links in the footer line. |
successTitle | string | "Check your inbox" | Heading of the success state. |
Accessibility
- Fields have visible labels; errors are linked with aria-describedby and set aria-invalid.
- The show-password control is a labelled toggle button with aria-pressed; the strength label is announced politely.
- Enter submits from either field; the success state is a status region and "Use a different email" returns focus to the email field.