Login and sign up
ProSign in and sign up pages, from a compact code card to full screen split and immersive layouts.
SplitA full screen split login: an email-first form that morphs into a password step beside a photo.
- 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.
- Use login-centered for passkey-first auth.
- Use login-immersive for magic link auth.
- Use signup-form for account creation.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
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.
import { LoginSplit } from "@/components/arc/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)} /> );}Real links
<LoginSplit fullScreen links={{ signUp: "/sign-up", terms: "/terms", privacy: "/privacy" }} onSignIn={account => router.push("/app")}/>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.
fullScreenbooleanfalseFill 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".demoPasswordstring"arc-demo"The password the simulated account accepts.linksPartial<Record<"signUp" | "terms" | "privacy", string>>–Real destinations for the small links. Without them each link announces a simulated action.- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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 Arc Button, Input, Password field and Avatar.
The full library index for assistants is at /llms.txt.
