# Auth Kit: complete sign-in flow > Seven auth pages in three switchable layouts (centered, split with art, frosted glass): sign in, sign up with a live password checklist, six-digit verification, forgot and reset password, team invite and a three-step onboarding. A shadcn/ui block from the [@ballmac](https://ui.ballmac.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/ballmac/template-auth-kit). - Page, with a live preview: https://shadcn.exchange/r/ballmac/template-auth-kit - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ballmac/template-auth-kit-light-7103d7f948b87b9f.png - Registry item: https://ui.ballmac.com/r/template-auth-kit.json - Categories: templates - Listed: 2026-10-14, source last changed 2026-10-14 ## Install ```bash npx shadcn@latest add https://ui.ballmac.com/r/template-auth-kit.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react` - Registry items: `utils`, `https://ui.ballmac.com/r/aurora-background.json`, `https://ui.ballmac.com/r/input-otp.json`, `https://ui.ballmac.com/r/segmented-control.json` ## Notes from the registry Routes are at /auth/sign-in, /auth/sign-up, /auth/verify, /auth/forgot, /auth/reset, /auth/invite and /auth/onboarding. Each form simulates its request with a short timer: replace the useFake() calls in auth-kit-forms.tsx with your API. ## Files ### `registry/ballmac/components/templates/auth-kit/auth-kit-fonts.ts` ```ts // Ballmac UI: Auth Kit template fonts. https://ui.ballmac.com/templates/template-auth-kit import { Outfit } from "next/font/google" export const authSans = Outfit({ variable: "--auth-sans", subsets: ["latin"], display: "swap", preload: false }) ``` ### `registry/ballmac/components/templates/auth-kit/auth-kit-theme.tsx` ```tsx // Ballmac UI: Auth Kit template frame. https://ui.ballmac.com/templates/template-auth-kit "use client" import * as React from "react" import { Eye, EyeOff, Loader2 } from "lucide-react" import { AuroraBackground } from "@/components/ballmac/aurora-background" import { authSans } from "@/components/ballmac/templates/auth-kit/auth-kit-fonts" import { cn } from "@/lib/utils" type AuthLayout = "centered" | "split" | "glass" type AuthPage = "sign-in" | "sign-up" | "verify" | "forgot" | "reset" | "invite" | "onboarding" type AuthHrefs = Record const defaultHrefs: AuthHrefs = { "sign-in": "/auth/sign-in", "sign-up": "/auth/sign-up", verify: "/auth/verify", forgot: "/auth/forgot", reset: "/auth/reset", invite: "/auth/invite", onboarding: "/auth/onboarding", } /** Auth Kit's palette: soft ivory and ink with one indigo. Friendly, clear and calm. */ const authCss = ` .auth-theme,body:not(:has([data-gallery])):has(.auth-theme){--background:oklch(0.982 0.006 90);--foreground:oklch(0.21 0.03 275);--card:oklch(1 0 0);--card-foreground:oklch(0.21 0.03 275);--popover:oklch(1 0 0);--popover-foreground:oklch(0.21 0.03 275);--primary:oklch(0.46 0.2 275);--primary-foreground:oklch(0.99 0.004 90);--secondary:oklch(0.958 0.01 90);--secondary-foreground:oklch(0.21 0.03 275);--muted:oklch(0.958 0.01 90);--muted-foreground:oklch(0.47 0.03 275);--accent:oklch(0.94 0.014 280);--accent-foreground:oklch(0.21 0.03 275);--border:oklch(0.21 0.03 275 / 12%);--input:oklch(0.21 0.03 275 / 20%);--ring:oklch(0.55 0.2 275);--surface:oklch(0.968 0.01 90);--destructive:oklch(0.53 0.22 25);--chart-1:oklch(0.5 0.2 275);--chart-2:oklch(0.48 0.12 165);--chart-3:oklch(0.62 0.14 75);--chart-4:oklch(0.52 0.19 340);--chart-5:oklch(0.52 0.12 235);--radius:0.875rem} .dark .auth-theme,.dark body:not(:has([data-gallery])):has(.auth-theme){--background:oklch(0.17 0.022 275);--foreground:oklch(0.95 0.008 90);--card:oklch(0.21 0.026 275);--card-foreground:oklch(0.95 0.008 90);--popover:oklch(0.23 0.028 275);--popover-foreground:oklch(0.95 0.008 90);--primary:oklch(0.76 0.14 275);--primary-foreground:oklch(0.19 0.03 275);--secondary:oklch(0.26 0.028 275);--secondary-foreground:oklch(0.95 0.008 90);--muted:oklch(0.25 0.028 275);--muted-foreground:oklch(0.73 0.025 275);--accent:oklch(0.29 0.034 275);--accent-foreground:oklch(0.95 0.008 90);--border:oklch(1 0 0 / 11%);--input:oklch(1 0 0 / 16%);--ring:oklch(0.74 0.14 275);--surface:oklch(0.19 0.024 275);--destructive:oklch(0.7 0.19 25);--chart-1:oklch(0.76 0.14 275);--chart-2:oklch(0.78 0.13 165);--chart-3:oklch(0.83 0.13 85);--chart-4:oklch(0.76 0.15 340);--chart-5:oklch(0.76 0.11 235)} body:not(:has([data-gallery])):has(.auth-theme){font-family:var(--auth-sans),ui-sans-serif,system-ui,sans-serif} ` function AuthMark({ className }: { className?: string }) { return ( ) } type AuthFrameProps = React.ComponentProps<"div"> & { /** How the page is composed. */ layout?: AuthLayout /** Brand name beside the mark. */ brand?: string /** Where the brand links to. */ homeHref?: string } const quote = { text: "We replaced three login screens with one in an afternoon, and support tickets about passwords dropped by half.", name: "Sasha Petrova", role: "Head of Product, Fernhill" } /** The page around an auth form: centred card, split with art, or frosted glass over a soft aurora. */ function AuthFrame({ layout = "centered", brand = "Keystone", homeHref = "#", className, style, children, ...props }: AuthFrameProps) { React.useEffect(() => { const cls = authSans.variable if (!cls) return document.body.classList.add(cls) return () => document.body.classList.remove(cls) }, []) const logo = ( {brand} ) return (
{layout === "centered" && (
)} {layout === "split" && (
{logo}
{children}

© 2026 {brand}. All rights reserved.

)} {layout === "glass" && (
)}
) } const inputClass = "bg-background focus-visible:ring-ring/50 placeholder:text-muted-foreground h-11 w-full rounded-xl border px-3.5 text-[15px] outline-none transition-shadow focus-visible:ring-[3px] aria-[invalid=true]:border-destructive" /** A labelled text field with an inline error. */ function AuthField({ label, error, hint, id, className, ...props }: Omit, "id"> & { label: string; error?: string; hint?: string; id: string }) { return (
{error ?

{error}

: hint ?

{hint}

: null}
) } /** A password field with a show and hide button. */ function AuthPassword({ label = "Password", error, id, ...props }: Omit, "id" | "type"> & { label?: string; error?: string; id: string }) { const [show, setShow] = React.useState(false) return (
{error &&

{error}

}
) } /** The main button of a form. */ function AuthButton({ busy, className, children, ...props }: React.ComponentProps<"button"> & { busy?: boolean }) { return ( ) } /** Password rules, scored live. */ const rules = [ { id: "len", label: "At least 10 characters", test: (p: string) => p.length >= 10 }, { id: "case", label: "An upper and a lower case letter", test: (p: string) => /[a-z]/.test(p) && /[A-Z]/.test(p) }, { id: "num", label: "A number", test: (p: string) => /\d/.test(p) }, { id: "sym", label: "A symbol", test: (p: string) => /[^A-Za-z0-9]/.test(p) }, ] /** A strength bar and checklist for a new password. */ function PasswordStrength({ value, id }: { value: string; id: string }) { const passed = rules.filter((r) => r.test(value)).length const label = value.length === 0 ? "Enter a password" : passed <= 1 ? "Weak" : passed <= 3 ? "Fair" : "Strong" const tone = passed <= 1 ? "bg-destructive" : passed <= 3 ? "bg-chart-3" : "bg-chart-2" return (

Strength: {label}

    {rules.map((r) => { const ok = r.test(value) return
  • {r.label}{ok ? " (met)" : " (not met)"}
    • })}
) } export { AuthButton, AuthField, AuthFrame, AuthMark, AuthPassword, PasswordStrength, defaultHrefs as authDefaultHrefs, rules as passwordRules, type AuthFrameProps, type AuthHrefs, type AuthLayout, type AuthPage } ``` ### `registry/ballmac/components/templates/auth-kit/auth-kit-forms.tsx` ```tsx // Ballmac UI: Auth Kit forms. https://ui.ballmac.com/templates/template-auth-kit "use client" import * as React from "react" import { ArrowLeft, ArrowRight, Check, MailCheck, ShieldCheck } from "lucide-react" import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ballmac/input-otp" import { AuthButton, AuthField, AuthPassword, PasswordStrength, authDefaultHrefs, passwordRules, type AuthHrefs } from "@/components/ballmac/templates/auth-kit/auth-kit-theme" import { cn } from "@/lib/utils" type FormProps = { hrefs?: Partial } const h = (hrefs: FormProps["hrefs"]) => ({ ...authDefaultHrefs, ...hrefs }) const link = "text-primary focus-visible:ring-ring/50 rounded font-medium underline-offset-4 outline-none hover:underline focus-visible:ring-[3px]" const emailOk = (v: string) => /^\S+@\S+\.\S+$/.test(v.trim()) /** A short simulated request so busy and success states are visible. Swap for your API call. */ function useFake() { const timer = React.useRef | undefined>(undefined) React.useEffect(() => () => clearTimeout(timer.current), []) return (done: () => void, ms = 700) => { clearTimeout(timer.current) timer.current = setTimeout(done, ms) } } function Heading({ title, children }: { title: string; children?: React.ReactNode }) { return (

{title}

{children &&

{children}

}
) } function Success({ title, children, action }: { title: string; children: React.ReactNode; action?: React.ReactNode }) { return (

{title}

{children}

{action &&
{action}
}
) } /** Sign in with email and password, or a provider. Validates before it submits. */ function SignInForm({ hrefs }: FormProps) { const links = h(hrefs) const fake = useFake() const [errors, setErrors] = React.useState<{ email?: string; password?: string }>({}) const [busy, setBusy] = React.useState(false) const [done, setDone] = React.useState(false) function submit(e: React.FormEvent) { e.preventDefault() const f = new FormData(e.currentTarget) const email = String(f.get("email") ?? "") const password = String(f.get("password") ?? "") const next: typeof errors = {} if (!emailOk(email)) next.email = "Enter an email like you@company.com." if (!password) next.password = "Enter your password." setErrors(next) if (next.email || next.password) { ;(e.currentTarget.elements.namedItem(next.email ? "email" : "password") as HTMLElement | null)?.focus() return } setBusy(true) fake(() => { setBusy(false); setDone(true) }) } if (done) return Continue to your workspace →}>Welcome back. We’ll take you to where you left off. return ( <> Sign in to continue to your workspace.
{["Google", "GitHub"].map((p) => )}
or with email
Forgot password?
{busy ? "Signing in…" : "Sign in"}

New here? Create an account

) } /** Create an account with a live password checklist and a terms checkbox. */ function SignUpForm({ hrefs }: FormProps) { const links = h(hrefs) const fake = useFake() const [pw, setPw] = React.useState("") const [errors, setErrors] = React.useState<{ name?: string; email?: string; password?: string; terms?: string }>({}) const [busy, setBusy] = React.useState(false) const [email, setEmail] = React.useState(null) function submit(e: React.FormEvent) { e.preventDefault() const f = new FormData(e.currentTarget) const name = String(f.get("name") ?? "").trim() const mail = String(f.get("email") ?? "").trim() const next: typeof errors = {} if (!name) next.name = "Tell us your name." if (!emailOk(mail)) next.email = "Enter an email like you@company.com." if (!passwordRules.every((r) => r.test(pw))) next.password = "Meet every rule below to continue." if (!f.get("terms")) next.terms = "Agree to the terms to continue." setErrors(next) const first = (["name", "email", "password", "terms"] as const).find((k) => next[k]) if (first) { ;(e.currentTarget.elements.namedItem(first) as HTMLElement | null)?.focus() return } setBusy(true) fake(() => { setBusy(false); setEmail(mail) }) } if (email) return Enter the 6-digit code →}>We sent a code to {email}. It expires in 10 minutes. return ( <> Free for 14 days. No card needed.
setPw(e.target.value)} error={errors.password} />
{errors.terms &&

{errors.terms}

}
{busy ? "Creating account…" : "Create account"}

Already have an account? Sign in

) } /** Verify with a 6-digit code: auto-submits when complete, and offers a resend after a countdown. */ function VerifyForm({ hrefs }: FormProps) { const links = h(hrefs) const [code, setCode] = React.useState("") const [state, setState] = React.useState<"idle" | "error" | "ok">("idle") const [wait, setWait] = React.useState(30) React.useEffect(() => { if (wait <= 0) return const id = setTimeout(() => setWait((w) => w - 1), 1000) return () => clearTimeout(id) }, [wait]) if (state === "ok") return Set up your workspace →}>Thanks. Your account is ready. return ( <> We sent a 6-digit code to mina@fieldnote.example. Try 123456. { setCode(v); setState("idle") }} onComplete={(v) => setState(v === "123456" ? "ok" : "error")} containerClassName="justify-center"> {[0, 1, 2].map((i) => )} {[3, 4, 5].map((i) => )}

{state === "error" ? "That code isn’t right. Check it and try again." : "Paste the code, or type it in."}

Didn’t get it?{" "}

) } /** Ask for a reset link. */ function ForgotForm({ hrefs }: FormProps) { const links = h(hrefs) const fake = useFake() const [error, setError] = React.useState("") const [busy, setBusy] = React.useState(false) const [sent, setSent] = React.useState(null) function submit(e: React.FormEvent) { e.preventDefault() const mail = String(new FormData(e.currentTarget).get("email") ?? "").trim() if (!emailOk(mail)) { setError("Enter an email like you@company.com.") ;(e.currentTarget.elements.namedItem("email") as HTMLElement | null)?.focus() return } setError("") setBusy(true) fake(() => { setBusy(false); setSent(mail) }) } if (sent) return setSent(null)} className={link}>Use a different email}>If an account exists for {sent}, a reset link is on its way. It works for one hour. return ( <> No problem. Tell us your email and we’ll send a link to choose a new one.
{busy ? "Sending…" : "Send reset link"}

) } /** Choose a new password, with confirmation. */ function ResetForm({ hrefs }: FormProps) { const links = h(hrefs) const fake = useFake() const [pw, setPw] = React.useState("") const [errors, setErrors] = React.useState<{ password?: string; confirm?: string }>({}) const [busy, setBusy] = React.useState(false) const [done, setDone] = React.useState(false) function submit(e: React.FormEvent) { e.preventDefault() const confirm = String(new FormData(e.currentTarget).get("confirm") ?? "") const next: typeof errors = {} if (!passwordRules.every((r) => r.test(pw))) next.password = "Meet every rule below to continue." else if (confirm !== pw) next.confirm = "The passwords don’t match." setErrors(next) if (next.password || next.confirm) { ;(e.currentTarget.elements.namedItem(next.password ? "password" : "confirm") as HTMLElement | null)?.focus() return } setBusy(true) fake(() => { setBusy(false); setDone(true) }) } if (done) return Sign in with your new password →}>You’ve been signed out everywhere else for your safety. return ( <> Pick something you haven’t used before.
setPw(e.target.value)} error={errors.password} />
{busy ? "Saving…" : "Update password"} ) } /** Accept an invitation to a team. */ function InviteForm({ hrefs }: FormProps) { const fake = useFake() const [pw, setPw] = React.useState("") const [error, setError] = React.useState("") const [busy, setBusy] = React.useState(false) const [done, setDone] = React.useState(false) function submit(e: React.FormEvent) { e.preventDefault() if (!passwordRules.every((r) => r.test(pw))) { setError("Meet every rule below to continue.") ;(e.currentTarget.elements.namedItem("password") as HTMLElement | null)?.focus() return } setError("") setBusy(true) fake(() => { setBusy(false); setDone(true) }) } const links = h(hrefs) if (done) return Finish setting up →}>You’ve joined as an editor. return ( <>

Maya Okafor invited you to join Fieldnote Goods as an editor.

Create a password for dev@fieldnote.example.
setPw(e.target.value)} error={error} />
{busy ? "Joining…" : "Join Fieldnote Goods"} ) } const steps = ["You", "Workspace", "Team"] /** Three short steps to set up a workspace, with progress and a slug that follows the name. */ function OnboardingForm({ hrefs }: FormProps) { const links = h(hrefs) const [step, setStep] = React.useState(0) const [name, setName] = React.useState("Mina Kovac") const [role, setRole] = React.useState("Design") const [ws, setWs] = React.useState("Fieldnote Goods") const [invites, setInvites] = React.useState("") const [error, setError] = React.useState("") const [done, setDone] = React.useState(false) const head = React.useRef(null) const slug = ws.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") const emails = invites.split(/[\s,]+/).filter(Boolean) const roles = ["Design", "Engineering", "Product", "Marketing", "Operations"] function next() { if (step === 0 && !name.trim()) return setError("Tell us your name.") if (step === 1 && !ws.trim()) return setError("Give your workspace a name.") if (step === 2 && emails.some((m) => !emailOk(m))) return setError("One of those doesn’t look like an email address.") setError("") if (step === 2) return setDone(true) setStep((s) => s + 1) requestAnimationFrame(() => head.current?.focus()) } if (done) return Open {ws || "your workspace"} →}>{emails.length > 0 ? `We sent ${emails.length} invitation${emails.length === 1 ? "" : "s"}.` : "You can invite your team any time."} return ( <>
    {steps.map((s, i) => (
  1. {i < step ? : i + 1} {s} {i < steps.length - 1 &&
    2. ))}

{step === 0 ? "Tell us about you" : step === 1 ? "Name your workspace" : "Invite your team"}

{step === 0 ? "So your teammates know who you are." : step === 1 ? "You can change this any time." : "They’ll get an email with a link to join. You can skip this."}

{step === 0 && ( <> setName(e.target.value)} autoComplete="name" error={error} />
Your team
{roles.map((r) => )}
)} {step === 1 && ( <> setWs(e.target.value)} error={error} hint={slug ? `Your address: ${slug}.keystone.app` : undefined} /> )} {step === 2 && (