Login 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

Login 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 LoginPage from @/components/blocks/login-page.

// app/(auth)/login/page.tsx
"use client";

import { useRouter } from "next/navigation";
import { LoginPage } from "@/components/blocks/login-page";

export default function Page() {
  const router = useRouter();
  return (
    <LoginPage
      heroImage="/images/office.jpg"
      twoFactor
      onSignIn={async ({ email, password, remember }) => {
        const response = await fetch("/api/login", { method: "POST", body: JSON.stringify({ email, password, remember }) });
        if (!response.ok) throw new Error("The email or the password is not correct");
      }}
      onSuccess={() => router.push("/")}
    />
  );
}

Props

• defaultViewdefault "sign-in"
  LoginView

  The view shown first (uncontrolled); view / onViewChange control it.

• view
  LoginView

  The current view, controlled. An unknown value shows sign-in.

• onViewChange
  (view: LoginView) => void

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

• 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 "soft"
  "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: soft; 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/city.jpg.

• hero
  ReactNode

  Replaces the hero content (testimonial, badge and customer names from LOGIN_PAGE_SAMPLE).

• logo
  ReactNode

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

• methods
  LoginMethod[]

  How people sign in, default ["password", "magic-link"]; "otp" emails a 6 digit code. The first is the form shown first; [] with providers leaves only the providers (SSO).

• providers
  AuthProvider[]

  Social buttons, default AUTH_PROVIDERS (Google, Apple, Microsoft); [] hides them and the divider.

• showProvidersdefault true
  boolean

  Shortcut for providers={[]} when false.

• providerLayoutdefault "stack"
  "stack" | "row"

  stack: full-width "Continue with Google" buttons; row: icon buttons side by side.

• twoFactordefault false
  boolean

  After a correct password the flow asks for the authenticator code.

• rememberdefault true
  boolean

  Shows the "Remember me for 30 days" checkbox.

• defaultEmaildefault ""
  string

  Prefills the email everywhere (a returning user).

• resendSecondsdefault 30
  number

  Wait before a link or a code can be sent again (use-cooldown, kept across reloads under the key login-resend).

• passwordMinLengthdefault 8
  number

  Minimum length of a new password in the reset view (rule, checklist and strength).

• onSignIn
  (values: SignInValues) => (void | Promise<unknown>)

  Email, password and remember. Default: simulated, rejects "The email or the password is not correct" below 8 characters.

• onMagicLink
  (email: string) => (void | Promise<unknown>)

  Sends the sign-in link (and resends it). Default: simulated.

• onSendCode
  (email: string) => (void | Promise<unknown>)

  Sends the 6 digit code for the otp method (and resends it). Default: simulated.

• onVerifyCode
  (code: string, context: VerifyCodeContext) => (void | Promise<unknown>)

  Checks an otp, two-factor or backup code. Default: 123456 (or any 10 character backup code) passes, anything else rejects "Wrong code. 2 attempts left."; three failures lock the input for 60 s.

• onForgot
  (email: string) => (void | Promise<unknown>)

  Requests the reset link. Default: simulated and always resolves, so the page never reveals whether an account exists.

• onReset
  (password: string) => (void | Promise<unknown>)

  Saves the new password. Default: simulated.

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

  Starts a social sign-in; the button spins until it settles. Default: simulated for 1.2 s.

• onSuccess
  () => void

  After a sign-in, a verified code, a provider or the reset-done button. Default: the toast "Welcome back, Emma" (the page mounts its own Toaster then).

• registerHrefdefault "/signup"
  string

  The "Create one" link; "" hides it.

• termsHrefdefault "/terms"
  string

  The "Terms" link in the footer; "" hides it.

• privacyHrefdefault "/privacy"
  string

  The "Privacy" link; "" hides it.

• helpHrefdefault "/help"
  string

  The "Help" link; "" hides it.

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

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

• tonedefault "neutral"
  Tone

  The primary buttons and the checkbox.

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

  The hero, the card, the icon 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<LoginPageLabels>

  Every visible string, merged over DEFAULT_LOGIN_PAGE_LABELS; validation takes form-validation messages.

• localedefault "en-US"
  string

  Sets the page language (lang).

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the sign-up and footer links (next/link); default <a>.

• classNames
  Partial<Record<LoginPageSlot, string>>

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

Parts

FAQ

More React blocks