Sign in

• Page: https://ui.xzero.co.uk/components/blocks/sign-in

Variant: Email code

A sign in card that morphs from email to a six digit code to your account.

• Access: Free, open source
• Registry id: sign-in
• Source file: registry/blocks/sign-in/sign-in.tsx
• Built from: Input, OTP input, Button, Avatar
• Keywords: react sign in, passwordless login, email code login, magic code sign in, passkey login, sso buttons, otp login

Use this as the entry to your app. Send and check codes through your auth provider, connect the passkey button to WebAuthn and the single sign-on buttons to OAuth; everything in the preview is simulated.

When to use

• The entry screen of an app with email code sign in.
• Sign in cards that also offer passkeys and single sign-on.
• Passwordless flows that should confirm the account before continuing.

When not to use

• Use login-centered, login-split, or login-immersive for password based layouts.
• Use signup-form to create an account.
• Use otp-input on its own when the code step lives in your own form.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "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/sign-in

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 { SignIn } from "@/components/xzero/blocks/sign-in/sign-in";
import { useRouter } from "next/navigation";

export function SignInPage() {
  const router = useRouter();

  return <SignIn onSignIn={() => router.push("/dashboard")} />;
}

API reference

SignIn

A sign in card that moves from email to a six digit code to a signed in account, with passkey and single sign-on buttons. Sending and checking codes is simulated.

Prop	Type	Default	Description
demoCode	string	"123456"	The code the simulated email contains.
onSignIn	(account: SignInAccount, method: SignInMethod) => void	–	Called once sign in succeeds. SignInAccount is { name, email, photo? }; SignInMethod is "Email code", "Passkey", "Google", "Apple", or "GitHub".

Accessibility

• Single sign-on providers are a labelled group of buttons with visible names.
• Step changes and errors are announced through a visually hidden role="status" region.
• Provider marks are aria-hidden SVGs next to text labels.

Motion

• The card morphs its height between the email, code, and done steps, sliding content in the direction of travel.
• Reduced motion swaps the slide for a plain fade.

Responsive behavior

• The card is a container; below 380px its padding and heading shrink, and the provider buttons tighten.
• Below a 480px viewport the card corners soften to the panel radius.

Performance

• A ResizeObserver drives the height morph between steps.
• The signed in avatar reuses the same image through a layoutId, so the morph does not wait on a second image.

Notes for AI

• Use as the entry screen of an app.
• Send and verify codes through your auth provider instead of demoCode, connect the passkey button to WebAuthn, and the provider buttons to OAuth.
• Composes Xzero input, otp-input, button, and avatar; exports SignInAccount and SignInMethod types.

Related

• OTP input: A six digit verification flow with paste support and keyboard navigation.
• 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: Split: A full screen split login: an email-first form that morphs into a password step beside a photo.
• 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.