Authentication Forms
Two production-ready authentication blocks: a Login Form for returning users and a Register Form for new ones. Both ship comprehensive client-side validation, error state handling, simulated loading states, password visibility toggles and social auth button templates.
They are separate components on purpose. Sign-in and sign-up are different pages with different fields, different validation rules and different autofill hints — a browser password manager cannot offer to save a new credential on a form it thinks might be a login. Install only the one a given route needs; each has its own install command, and each command sits with the block it installs.
Both share the same
variant and color surface, so a login page and a register page match without any extra work. The fields are the library's Input and the buttons its Button, each handed the same color, so the whole form follows one accent and picks up any change you make to those components.Login form
Email, password, remember-me and a forgot-password link.
signupHref points at wherever the register form lives.Login
Email and password with a remember-me checkbox and a forgot-password link, all validated on submit.
- Set
color"indigo" | "rose" | "emerald" | "zinc" | "primary" | "#hex" - themes the primary submit button, input focus rings, and remember-me checkbox.
onSubmit- receives the validated credentials. Leave it off and the block simulates a round trip, so the preview works before any auth provider exists.
Install the login form
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.
Install Login Form
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Step 1 installs these for you. Run them yourself only if you are adding Login Form to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.
button, icons, input and ui-liquid-glass are components, not packages — the shadcn CLI installs them as source files.
More login examples
Every example below is the same
LoginForm you just installed — only the props change.Login — split
- Set
variant"split" - to pair the form with a full-height marketing panel on large screens.
Login — minimal
- Set
variant"minimal" - to strip the card away and leave the fields on your own background.
Login — glass
- Set
variant"glass" - to go translucent — intended to sit over a photo or gradient.
bgImage- Cloudinary or CDN image URL for the full-bleed frosted backdrop.
Login — liquid-glass
- Set
variant"liquid-glass" - to wrap the form in a multi-layered liquid glass effect with dynamic SVG displacement waves, specular edge highlights, and high-contrast styling.
bgImage- Cloudinary or CDN image URL for the animated displacement backdrop.
Register form
Paired name fields, email, password with confirmation, and a terms checkbox whose links you point at your own policies.
loginHref closes the loop back to the login form.Register
Name fields, a confirm-password field and a terms checkbox, all validated on submit.
- Set
color"indigo" | "rose" | "emerald" | "zinc" | "primary" | "#hex" - themes the primary submit button, input focus rings, terms checkbox, and policy links.
minPasswordLength- sets the client-side minimum (8 by default). It stops an obviously-too-short password before a round trip — your server still enforces the real policy.
Install the register form
Install Register Form
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Step 1 installs these for you. Run them yourself only if you are adding Register Form to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.
button, icons, input and ui-liquid-glass are components, not packages — the shadcn CLI installs them as source files.
More register examples
Every example below is the same
RegisterForm you just installed — only the props change.Register — scenic
- Set
variant"scenic" - to place a floating onboarding card with an interactive welcome and registration flow over a full-bleed scenic nature backdrop. Adapts smoothly between light mode (frosted card) and dark mode (dark charcoal card).
bgImage- optional Cloudinary or CDN image URL for the scenic landscape backdrop.
Register — split
- Set
variant"split" - to pair the form with a full-height marketing panel on large screens. The illustration mirrors the fields beside it.
Register — minimal
- Set
variant"minimal" - to strip the card away and leave the fields on your own background.
Register — glass
- Set
variant"glass" - to go translucent — intended to sit over a photo or gradient.
bgImage- Cloudinary or CDN image URL for the full-bleed frosted backdrop.
Register — liquid-glass
- Set
variant"liquid-glass" - to wrap the registration form in a multi-layered liquid glass effect with dynamic SVG displacement waves, specular edge highlights, and high-contrast styling.
bgImage- Cloudinary or CDN image URL for the animated displacement backdrop.
Props Reference
LoginForm
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "split" | "liquid-glass" | "glass" | "minimal" | "default" | Applies overarching structural layouts. split wraps the
form in a full-width marketing panel, liquid-glass adds an interactive liquid SVG glass stack, while glass adds
translucent styling. |
color | "primary" | "indigo" | "rose" | "emerald" | "zinc" | string | "primary" | Applies global color themes to the primary button, focus rings and the
remember-me checkbox. Accepts valid hex codes (e.g.
"#8b5cf6"). |
brandName | string | "Acme Inc." | Brand name text displayed in the header of the split variant marketing panel. |
title / subtitle | string | See defaults | Customizable headline and description displayed across all variants and the split marketing panel. |
bgImage | string | Cloudinary image | Custom background image URL for glass and liquid-glass variants. |
signupHref | string | "#" | Where the "Sign up" link at the foot of the form sends someone without
an account — normally your RegisterForm page. |
forgotPasswordHref | string | "#" | Target of the "Forgot password?" link. |
onSubmit | | undefined | Called with { email, password, remember } once
validation passes. Omit it and the form simulates a 1.5s round trip so
the block is demonstrable before any auth provider exists. |
onSocialSignIn | (provider: "github" | "google") => void | undefined | Fires when a social button is clicked. The buttons are inert without
it. |
RegisterForm
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "scenic" | "default" | "split" | "liquid-glass" | "glass" | "minimal" | "default" | Distinct presentation presets. "scenic" renders a floating onboarding card over a landscape backdrop, "liquid-glass" wraps in an animated liquid SVG frosted glass stack, and "glass" renders translucent panels. |
color | "primary" | "indigo" | "rose" | "emerald" | "zinc" | string | "primary" | Applies global color themes to the primary button, focus rings, the
terms checkbox and the policy links. Accepts valid hex codes (e.g.
"#8b5cf6"). |
brandName | string | "Docs UI" | Brand name text displayed in the header of the scenic variant card. |
title / subtitle | string | See defaults | Customizable headline and description displayed on the scenic onboarding card. |
getStartedLabel | string | "Get Started" | Label on the primary CTA button in the scenic welcome card. |
alreadyAccountLabel | string | "I already have an account" | Label on the secondary action button linking to loginHref. |
bgImage | string | Cloudinary landscape | Custom background image URL for the scenic variant. |
initialStep | "welcome" | "options" | "email" | "otp" | "onboarding-intro" | "goals" | "finances" | "confidence" | "emergency-fund" | "first-goal" | "summary" | "welcome" | Starting view for the scenic variant: "welcome" (intro CTA), "options" (auth methods), "email" (registration form), "otp" (6-digit verification), "onboarding-intro" (picture overview), "goals" (area focus), "finances" (income & expenses), "confidence" (rating scales), "emergency-fund" (preparation status), "first-goal" (target planner), or "summary" (financial overview). |
loginHref | string | "#" | Where the "Sign in" link at the foot of the form sends someone who
already has an account. |
termsHref / privacyHref | string | "#" | Targets of the two links inside the terms checkbox label. They are
real anchors, and clicking one does not toggle the checkbox. |
minPasswordLength | number | 8 | Client-side minimum only. It stops an obviously-too-short password
before a round trip; your server still enforces the real policy. |
onSubmit | | undefined | Called with all six fields once validation passes. Omit it and the
form simulates a 1.5s round trip. |
onSocialSignUp | (provider: "github" | "google") => void | undefined | Fires when a social button is clicked. The buttons are inert without
it. |