Register Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Register Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import RegisterPage from @/components/blocks/register-page.

// app/(auth)/sign-up/page.tsx
"use client";

import { useRouter } from "next/navigation";
import { RegisterPage } from "@/components/blocks/register-page";

export default function Page() {
  const router = useRouter();
  return (
    <RegisterPage
      heroImage="/images/office.jpg"
      onRegister={async (values) => {
        const response = await fetch("/api/register", { method: "POST", body: JSON.stringify(values) });
        if (response.status === 409) throw Object.assign(new Error("There is already an account with this email"), { code: "email-taken" });
        if (!response.ok) throw new Error("We could not create the account");
      }}
      onLookupCui={async (cui) => {
        const response = await fetch(`/api/anaf?cui=${cui}`);
        return response.ok ? response.json() : null;
      }}
      onVerify={async (code) => {
        const response = await fetch("/api/verify", { method: "POST", body: JSON.stringify({ code }) });
        if (!response.ok) throw new Error("That code is not right");
      }}
      onDone={() => router.push("/")}
    />
  );
}

Props

• defaultStepdefault "account"
  RegisterStep

  The step shown first (uncontrolled); step / onStepChange control it. A step the flow does not have shows account.

• step
  RegisterStep

  The current step, controlled: "account" | "company" | "verify" | "done".

• onStepChange
  (step: RegisterStep) => void

  Runs on every step change (mirror it to the URL or the router).

• companyStepdefault true
  boolean

  The optional company step: CUI lookup, role and team size, with Skip.

• verifydefault "code"
  "code" | "link" | "none"

  code: a 6 digit code step; link: a check your email step with a confirm button; none: straight to done.

• providers
  AuthProvider[]

  Social sign-up buttons, default REGISTER_PROVIDERS (Google, Apple, Microsoft); [] hides them and the divider.

• showProvidersdefault true
  boolean

  Shortcut for providers={[]} when false.

• plandefault "Pro · 14 days free, no card"
  ReactNode

  The badge above the account title (labels.plan by default); a node replaces the badge, null or an empty string hides it.

• passwordMinLengthdefault 8
  number

  Minimum password length: the rule, the checklist and the strength meter.

• passwordMinScoredefault 2
  number

  The lowest scorePassword result (0 to 4) the password must reach; 0 accepts any password of the minimum length.

• freeMailWarningdefault true
  boolean

  A warning (not an error) under the email for gmail.com, yahoo.com, yahoo.ro, outlook.com, hotmail.com and icloud.com.

• defaultValues
  Partial<RegisterValues>

  Prefills every step (name, email, password, terms, marketing, company).

• defaultCompany
  CompanyLookup | null

  A lookup result the company step opens with (name, address, vatPayer).

• onRegister
  (values: RegisterValues) => (void | Promise<unknown>)

  After the account step: create the account and send the code. Default: simulated, rejects "There is already an account with this email" for emma.carter@acme.com; a rejection with that message or code "email-taken" shows the sign-in and password links.

• onLookupCui
  (cui: string) => Promise<CompanyLookup | null>

  Looks up a valid CUI (normalized with formatCui). Default: the REGISTER_PAGE_SAMPLE.companies table (Tech Solutions SRL for RO12345674 and the other sample clients) after 900 ms; null asks for manual entry, a rejection offers a retry.

• onCompany
  (company: RegisterCompany) => (void | Promise<unknown>)

  Saves the company step (name, cui, role, teamSize, address, vatPayer). Default: simulated.

• onVerify
  (code: string) => (void | Promise<unknown>)

  Checks the 6 digit code. Default: 123456 passes, anything else rejects "That code is not right".

• onResend
  () => (void | Promise<unknown>)

  Sends the code or the link again; the button then waits resendSeconds. Default: simulated.

• onProvider
  (id: string) => (void | Promise<unknown>)

  Starts a social sign-up; the button spins until it settles, then the flow skips to the company step (or done). Default: simulated for 1.2 s.

• onDone
  () => void

  The Open Acme CRM button. Default: the toast "Welcome to Acme CRM" (the page mounts its own Toaster then).

• resendSecondsdefault 30
  number

  Wait before the code or the link can be sent again (use-cooldown).

• layoutdefault "split"
  "split" | "centered" | "card"

  split: the form beside a hero from 1024px; centered: no hero, the form in a card from 640px; card: no hero, the form in a raised card at every width, centered on the page background (dots unless background is set) with the logo above and the links below.

• heroSidedefault "end"
  "start" | "end"

  Which side the hero sits on in the split layout.

• backgrounddefault "glow"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The page background: plain is the bare page color; the others tint the page and add a glow, an aurora, a grid or dots over the first screen. The layout picks one unless you set it (split: glow; centered: glow; card: dots).

• backgroundColordefault "oklch(0.62 0.14 275)"
  string

  The tint and glow color of the page background.

• heroImagedefault ""
  string

  A photo behind the hero with a dark scrim and white text; empty keeps the neutral card hero. The demo passes /demo/laptop.jpg.

• hero
  ReactNode

  Replaces the hero content (badge, title, feature checklist and customer names).

• logo
  ReactNode

  Top-left of the form column; default the Acme CRM mark and name.

• sizedefault "lg"
  "md" | "lg"

  Fields and buttons: lg is 48px, md 40px (44px on touch); the code cells stay 48px.

• loginHrefdefault "/sign-in"
  string

  The "Sign in" links (footer and the email taken alert); "" hides them.

• forgotHrefdefault "/sign-in#forgot"
  string

  The "Forgot password?" link of the email taken alert; "" hides it.

• termsHrefdefault "/terms"
  string

  The terms link in the checkbox and the footer; "" leaves plain text.

• privacyHrefdefault "/privacy"
  string

  The privacy link in the checkbox and the footer; "" leaves plain text.

• tonedefault "neutral"
  Tone

  The primary buttons, the steps, the checkboxes, the team size thumb and the plan badge.

• radiusdefault "md"
  "sm" | "md" | "lg"

  The hero, the card, the tiles and the controls' corners.

• animateIndefault true
  boolean

  The logo, form, footer and hero rise in once when the page mounts on the client (server html is already final).

• labels
  Partial<RegisterPageLabels>

  Every visible string, English by default (DEFAULT_REGISTER_PAGE_LABELS); spread it and override what you translate; steps takes the steps indicator strings, validation the form-validation messages.

• localedefault "en-US"
  string

  Sets the page language (lang).

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the sign-in, legal and next step links (next/link); default <a>.

• classNames
  Partial<Record<RegisterPageSlot, string>>

  Classes for formColumn, header, body, footer, hero, steps, step, title and form.

Parts

FAQ

More React blocks