Auth Forms
NewInstallation
npx shadcn@latest add https://uibrik.com/r/auth-forms.jsonInstall the packages
npm install @tabler/icons-react motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/auth-forms/auth-forms.tsx"use client"; // Sign in, sign up, verify a code and reset a password, in one card. The // product's mark and name sit on the outer shell; the form sits in the inner // panel. Switching modes fades the old form out and the new one in while the // card eases to its new height, so the page never jumps. import { useId, useLayoutEffect, useRef, useState, type ClipboardEvent, type FormEvent, type KeyboardEvent, type ReactNode, } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { IconArrowLeft, IconCheck, IconEye, IconEyeOff, IconLoader2,
Adds the files to
components/uibrik/auth-forms and installs @tabler/icons-react and motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/auth-forms.Props
AuthForms- defaultMode
- Type "sign-in" | "sign-up" | "verify" | "forgot"
- "sign-in"
- Starting mode when uncontrolled.
- productName
- Type string
- "Acme"
- Shown on the shell and in the headings.
- providers
- Type string[]
- ["google","github"]
- OAuth buttons, in order: google, github, apple, microsoft. Empty hides them.
- mode
- Type "sign-in" | "sign-up" | "verify" | "forgot"
- –
- Controlled mode. Pair with onModeChange.
- onModeChange
- Type (mode: AuthMode) => void
- –
- Called when a link switches modes.
- onSubmit
- Type (values: AuthSubmit) => void | Promise<void>
- –
- Gets { mode, email, password?, name?, code? }. Throw with a message to show it on the form. Without it, the preview accepts code 123456.
- onProvider
- Type (provider: "google" | "github" | "apple" | "microsoft") => void
- –
- Called when an OAuth button is pressed.
- termsHref
- Type string
- "#"
- Link for Terms in the footer line.
- privacyHref
- Type string
- "#"
- Link for Privacy Policy in the footer line.
- className
- Type string
- –
- Classes for the root.
