Login and sign up
Sign in and sign up pages, from a compact code card to full screen split and immersive layouts.
pnpm dlx shadcn@latest add @uiarc/login-centeredCenteredA passkey-first login card on a quiet ring backdrop that morphs through email and code.
- A full screen sign in or sign up page where passkeys are the main method.
- Auth flows that fall back to a six digit email code.
- Products that want one card for both sign in and sign up.
- Use login-split for password sign in beside a brand photo.
- Use login-immersive for magic link auth over a full-bleed photo.
- Use sign-in for a simpler embedded sign in form.
Installation
Add Login and sign up (Centered) with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/login-centeredAdds the block and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
Usage
Use this as a full screen sign in page (pass fullScreen). Connect the passkey button to WebAuthn, the email step to your magic code sender, the code step to verification, and the SSO buttons to your OAuth routes; onSignIn receives the email, method and mode.
import { LoginCentered } from "@/components/arc/blocks/login-centered/login-centered";import { useRouter } from "next/navigation"; export default function SignInPage() { const router = useRouter(); return ( <LoginCentered fullScreen termsHref="/terms" privacyHref="/privacy" onSignIn={() => router.push("/app")} /> );}Route sign ups to onboarding
<LoginCentered fullScreen onSignIn={(email, method, mode) => router.push(mode === "sign-up" ? "/welcome" : "/app") }/>LoginCentered
A passkey-first sign in and sign up card on a ring backdrop that morphs through email and a six digit code. Passkey, email delivery and SSO are simulated.
fullScreenbooleanfalseFill the viewport (100dvh, no frame) when the block is the whole page.onSignIn(email: string, method: LoginMethod, mode: "sign-in" | "sign-up") => void–Called once the simulated sign in or sign up succeeds. LoginMethod is "Passkey" | "Email code" | "Google" | "Apple" | "GitHub".demoCodestring"482913"The code the simulated email contains.demoEmailstring"maya@northwind.studio"The account a simulated passkey or single sign-on resolves to.termsHrefstring"#terms"Terms link in the footer.privacyHrefstring"#privacy"Privacy link in the footer.classNamestring–Appended to the root element.- The email field uses autoComplete="email" and the code step uses the OTP input group.
- Busy buttons use aria-busy and aria-disabled so focus stays put during simulated requests.
- A polite role="status" region announces step changes and errors.
- Steps slide and blur between passkey, email, code and done while the card height follows; the resend label rolls.
- Reduced motion swaps slides for fades and shows the passkey check without drawing its stroke.
- Below a 520px container the stage and card padding shrink, and below 400px the SSO buttons tighten to small text.
- Pass fullScreen to fill 100dvh; without it the block sits in a framed card.
- The ring backdrop drifts with the pointer only while it moves over the screen, and stays still on touch and under reduced motion.
- The backdrop is a light SVG ring set moved by CSS variables from motion values, with no re-render per pointer move.
- Only the active step is mounted; the card height animates as steps change.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as a full screen sign in page (pass fullScreen) when passkeys are the primary method.
- Connect the passkey button to WebAuthn, the email step to your code sender, the code step to verification and SSO buttons to OAuth routes; demoCode and demoEmail exist only for the simulation.
- onSignIn receives the email, method and mode; redirect from there.
- Composes Arc Button, Input and OTP input.
The full library index for assistants is at /llms.txt.