{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-auth-kit", "title": "Auth Kit: complete sign-in flow", "author": "Ballmac ", "description": "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.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "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" ], "files": [ { "path": "registry/ballmac/components/templates/auth-kit/auth-kit-fonts.ts", "content": "// Ballmac UI: Auth Kit template fonts. https://ui.ballmac.com/templates/template-auth-kit\nimport { Outfit } from \"next/font/google\"\n\nexport const authSans = Outfit({ variable: \"--auth-sans\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/auth-kit/auth-kit-fonts.ts" }, { "path": "registry/ballmac/components/templates/auth-kit/auth-kit-theme.tsx", "content": "// Ballmac UI: Auth Kit template frame. https://ui.ballmac.com/templates/template-auth-kit\n\"use client\"\n\nimport * as React from \"react\"\nimport { Eye, EyeOff, Loader2 } from \"lucide-react\"\n\nimport { AuroraBackground } from \"@/components/ballmac/aurora-background\"\nimport { authSans } from \"@/components/ballmac/templates/auth-kit/auth-kit-fonts\"\nimport { cn } from \"@/lib/utils\"\n\ntype AuthLayout = \"centered\" | \"split\" | \"glass\"\ntype AuthPage = \"sign-in\" | \"sign-up\" | \"verify\" | \"forgot\" | \"reset\" | \"invite\" | \"onboarding\"\ntype AuthHrefs = Record\n\nconst defaultHrefs: AuthHrefs = {\n \"sign-in\": \"/auth/sign-in\",\n \"sign-up\": \"/auth/sign-up\",\n verify: \"/auth/verify\",\n forgot: \"/auth/forgot\",\n reset: \"/auth/reset\",\n invite: \"/auth/invite\",\n onboarding: \"/auth/onboarding\",\n}\n\n/** Auth Kit's palette: soft ivory and ink with one indigo. Friendly, clear and calm. */\nconst authCss = `\n.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}\n.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)}\nbody:not(:has([data-gallery])):has(.auth-theme){font-family:var(--auth-sans),ui-sans-serif,system-ui,sans-serif}\n`\n\nfunction AuthMark({ className }: { className?: string }) {\n return (\n \n \n \n \n \n )\n}\n\ntype AuthFrameProps = React.ComponentProps<\"div\"> & {\n /** How the page is composed. */\n layout?: AuthLayout\n /** Brand name beside the mark. */\n brand?: string\n /** Where the brand links to. */\n homeHref?: string\n}\n\nconst 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\" }\n\n/** The page around an auth form: centred card, split with art, or frosted glass over a soft aurora. */\nfunction AuthFrame({ layout = \"centered\", brand = \"Keystone\", homeHref = \"#\", className, style, children, ...props }: AuthFrameProps) {\n React.useEffect(() => {\n const cls = authSans.variable\n if (!cls) return\n document.body.classList.add(cls)\n return () => document.body.classList.remove(cls)\n }, [])\n const logo = (\n \n {brand}\n \n )\n return (\n \n \n {layout === \"centered\" && (\n
\n
\n
{logo}
\n
{children}
\n

Protected by two-factor authentication · Privacy

\n
\n )}\n {layout === \"split\" && (\n
\n
\n {logo}\n
{children}
\n

© 2026 {brand}. All rights reserved.

\n
\n \n
\n )}\n {layout === \"glass\" && (\n
\n \n
{logo}
\n
{children}
\n
\n )}\n \n )\n}\n\nconst 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\"\n\n/** A labelled text field with an inline error. */\nfunction AuthField({ label, error, hint, id, className, ...props }: Omit, \"id\"> & { label: string; error?: string; hint?: string; id: string }) {\n return (\n
\n \n \n {error ?

{error}

: hint ?

{hint}

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

{error}

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

Strength: {label}

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

{title}

\n {children &&

{children}

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

{title}

\n

{children}

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

New here? Create an account

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

{errors.terms}

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

Already have an account? Sign in

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

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

\n

\n Didn’t get it?{\" \"}\n \n

\n

Back to sign in

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

Back to sign in

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

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

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

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

\n

{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.\"}

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