Sign up form

A React block (a whole screen) in Beamline's Blocks category.

The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your request's progress and errors, an emailed-code check and a finished state.

Use it for

Creating an account inside your own page, panel or modal, with or without an emailed-code check.

Not for

The whole sign-in / sign-up route with product mark and backdrop (auth).
Signing in to an existing account (sign-in).
Inviting teammates (a dialog with tag-input).

Anatomy

card (double bezel)
heading and description
single sign-on buttons
"or" rule
name field
work email field
password field (reveal, strength meter, Caps Lock hint)
terms consent
form error
submit
verify step (code boxes, resend countdown, change email)
done step
footer (Have an account? Sign in)

States

empty
invalid fields (each message says the fix)
weak password
terms not accepted
submitting (button keeps size, aria-busy)
field error from your handler (AuthFieldError, e.g. email taken)
form error (any other rejection)
provider in flight / failed
verify: code sent, checking, wrong code
done

Keyboard

Tab moves through providers, fields, the reveal button, consent and submit
Enter submits; the first invalid field takes focus
the verify step focuses the code boxes and checks the code once every digit is in
Space toggles consent

Motion

A new step arrives on --motion-in (fade and a 6px rise) and replaces the old one at once; the strength bars change colour over --motion-out. Reduced motion keeps the fade only.

Props

Prop	Type	Default	Description
`onSubmit` (required)	`(details: SignupDetails) => Promise<void \| AuthAccount>`	—	Create the account. Reject with AuthFieldError("email", …) for a taken address; any other Error shows above the button. With onVerifyEmail, resolve once the code is sent.
`onVerifyEmail`	`(email, code) => Promise<void \| AuthAccount>`	—	Adds the emailed-code step after submit.
`onResendCode`	`(email) => Promise<void>`	—	Offers Resend in the code step after the countdown.
`providers / onProvider`	`AuthProvider[] / (provider) => Promise<void \| AuthAccount>`	—	Sign up with single sign-on; your own icons.
`onSwitchToSignIn`	`() => void`	—	Shows "Have an account? Sign in".
`onSuccess`	`(account: AuthAccount) => void`	—	Runs once the account exists (and the email is confirmed, when verifying).
`termsHref / privacyHref`	`string`	—	Adds a required consent checkbox linking both.
`product / title / description`	`string / ReactNode`	—	Heading defaults to "Create an account".
`defaultValues`	`Partial<SignupDetails>`	—
`minPasswordLength`	`number`	`8`
`codeLength / resendAfter`	`number`	`6 / 30`
`headingLevel`	`1 \| 2 \| 3`	`1`
`className`	`string`	—
`classNames`	`SignupFormClassNames`	—
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—
`providerClassNames`	`AuthProviderListClassNames`	—	Shared provider root/button/icon slots; all rows reserve the icon slot if any supplied provider has one.

Built from

bezel
form
input
password-field
checkbox
otp-input
button
marker
avatar
spinner

Dependencies

lucide-react, motion, react-hook-form

Import

import { SignupForm } from "@/blocks/signup-form/signup-form";

Get it

Sign up form is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent