Auth
A split-screen sign-in / create-account template: a branded left panel (logo, an oversized value line, checkmarked highlights, and a soft WebGL gradient mesh) beside a centered card that toggles between Sign in and Create account. Labeled email + password fields with a reveal toggle, a genuine validating submit (email format + minimum length, a pending state, and an aria-live error slot), an OAuth / SSO row of generic providers, plus forgot-password and switch-mode links. One signature accent knob; the WebGL surface freezes and every reveal pins its resting pose under reduced motion; the brand panel hides below lg where a compact brand header sits above the full-width card.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/authManual — install dependencies, then copy the source
npm install motion oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Northlight" | Product / company name, shown in both the brand panel and the card header. |
| logo | React.ReactNode | a monogram | Inline logo mark (a 1em-scalable SVG using currentColor). |
| tagline | string | The oversized value line on the brand panel. | |
| kicker | string | "Welcome back" | Short kicker above the tagline. |
| highlights | AuthHighlight[] | Checkmarked value points listed beneath the tagline. | |
| quote | { text: string; attribution: string } | A short attributed quote shown at the foot of the brand panel. | |
| defaultMode | AuthMode | "signin" | Which pane the card opens on. |
| providers | AuthProvider[] | OAuth / SSO providers. Pass [] to hide the row entirely. | |
| onSubmit | (payload: AuthSubmitPayload) => void | Promise<void> | Genuine submit handler. Receives the typed values (after built-in email / password validation passes). May return a promise — the button shows a pending state until it settles, and a thrown error surfaces in the error slot. | |
| onProvider | (providerId: string) => void | Fires when an OAuth provider button is pressed. | |
| forgotHref | string | "#" | "Forgot password" link target. |
| termsHref | string | "#" | Terms-of-service link target. |
| privacyHref | string | "#" | Privacy-policy link target. |
| accent | string | "#6366f1" | The single signature accent used for the primary button, links, focus rings, and the brand glow. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSubmit"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.