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/sign-inEmail codeA sign in card that morphs from email to a six digit code to your account.
- 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.
- 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
Add Login and sign up (Email code) with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/sign-inAdds 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 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.
import { SignIn } from "@/components/arc/blocks/sign-in/sign-in";import { useRouter } from "next/navigation"; export function SignInPage() { const router = useRouter(); return <SignIn onSignIn={() => router.push("/dashboard")} />;}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.
demoCodestring"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".- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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 Arc input, otp-input, button, and avatar; exports SignInAccount and SignInMethod types.
The full library index for assistants is at /llms.txt.