Xzero UI · Components, blocks and MCP

A full screen split login: an email-first form that morphs into a password step beside a photo.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/login-split

Live · keyboard ready

Page: https://ui.xzero.co.uk/components/blocks/login-split

Variant: Split

A full screen split login: an email-first form that morphs into a password step beside a photo.

Access: Xzero Pro
Registry id: login-split
Source file: registry/blocks/login-split/login-split.tsx
Built from: Button, Input, Password field, Avatar
Keywords: react split login page, login with image, email first login, password sign in page, two column login, sign in screen

Use this as your sign in page with fullScreen. Connect Continue to your account lookup, Sign in and the SSO buttons to your auth provider, Forgot password to your reset email, and pass links for sign up, terms and privacy.

When to use

Password-based sign in with an email-first step beside a brand photo.
Sign in pages that should show the recognised account before asking for a password.

When not to use

Use login-centered for passkey-first auth.
Use login-immersive for magic link auth.
Use signup-form for account creation.

Installation

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/login-split

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { LoginSplit } from "@/components/xzero/blocks/login-split/login-split";

export default function SignInPage() {
  return (
    <LoginSplit
      fullScreen
      links={{ signUp: "/sign-up", terms: "/terms", privacy: "/privacy" }}
      onSignIn={(account, method) => console.log(account.email, method)}
    />
  );
}

Examples

Real links

<LoginSplit
  fullScreen
  links={{ signUp: "/sign-up", terms: "/terms", privacy: "/privacy" }}
  onSignIn={account => router.push("/app")}
/>

API reference

LoginSplit

A split sign in screen: an email-first form that morphs into a password step beside a photo. Accounts are the sample people list in login-split.tsx with portraits from public/media/people, and the photo is imported from public/media/photos/concert-hall.jpg.

Prop	Type	Default	Description
`fullScreen`	`boolean`	`false`	Fill the viewport (100dvh, no frame) when the screen is used as a page.
`onSignIn`	`(account: LoginSplitAccount, method: LoginSplitMethod) => void`	–	Called once the simulated sign in finishes. LoginSplitAccount is { name, email, photo? }; LoginSplitMethod is "Password" \| "Google" \| "Apple" \| "GitHub".
`demoPassword`	`string`	`"arc-demo"`	The password the simulated account accepts.
`links`	`Partial<Record<"signUp" \| "terms" \| "privacy", string>>`	–	Real destinations for the small links. Without them each link announces a simulated action.

Accessibility

Fields use autoComplete="username" and "current-password"; errors render in a role="alert" tied with aria-describedby and aria-invalid.
SSO buttons sit in a labelled role="group".
A polite role="status" region announces step changes and simulated link actions.

Motion

Continue morphs the email form into the password step with the account avatar, and labels roll between states.
Reduced motion uses fades and shortens the simulated delays.

Responsive behavior

Below a 760px container the photo stacks under the form at a 460px minimum height; from 760px they sit side by side.
From 1100px the columns split 5 to 6 and the quote moves to the photo's lower left.
The photo uses sizes that request 100vw below 760px and 50vw above.

Performance

The photo drifts on a 36 second CSS animation that people can pause, and it is off under reduced motion.
The photo loads through next/image with a blur placeholder; there are no scripts running while idle.

Notes for AI

Use as a password-based sign in page with fullScreen.
Connect Continue to your account lookup, Sign in and SSO to your auth provider, and Forgot password to your reset email; replace the sample people list and the imported photo.
Pass links for sign up, terms and privacy; onSignIn receives the account and method.
Uses next/image; composes Xzero Button, Input, Password field and Avatar.

Login and sign up: Centered: A passkey-first login card on a quiet ring backdrop that morphs through email and code.
Login and sign up: Immersive: A glass magic link card over dusk photography that folds its envelope shut once sent.
Login and sign up: Email code: A sign in card that morphs from email to a six digit code to your account.
Login and sign up: Sign up: An account creation flow with field validation, password strength, and a clear completion state.
Password field: Capture sensitive text with a visible reveal control.

Login splitPro