Auth Screens
Sign in, sign up and reset as one component — layout and mode switching only, with no submit logic.
DOM + CSS1 dep1 file · 4 KB TSX
Props
// Full, shippable page — real size at normal type scale. The registry
// preview above is a scaled-down miniature of this same composition, not
// a different component.
"use client";
import { useState } from "react";
import { Lock } from "lucide-react";
function BrandPanel({ brandName, accent }: { brandName: string; accent: string }) {
return (
<div className="relative isolate hidden flex-col justify-between overflow-hidden bg-neutral-100 px-10 py-10 md:flex">
<div
aria-hidden
className="pointer-events-none absolute -bottom-24 -right-24 -z-10 h-72 w-72 rounded-full opacity-30 blur-3xl"
style={{ background: accent }}
/>
<div className="flex items-center gap-2">
<span className="h-6 w-6 rounded-md" style={{ background: accent }} />
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
The split screen only exists on desktop and disappears entirely below the md breakpoint, rather than stacking the brand panel above the form — a dark tagline banner shoved above a mobile login form pushes the actual inputs below the fold on a phone, which defeats the point of a fast auth screen. mode is a single string prop that drives both the heading text and the submit button label together, so a caller switching between sign-in and sign-up flips one prop instead of two independent pieces of copy that could drift out of sync. The glow behind the brand panel needs its own isolate/relative wrapper specifically because it sits at a negative z-index — without a stacking context on that panel, the glow can bleed behind the wrong sibling depending on paint order. Caveat: password fields have no visibility toggle and the form has no client-side validation feedback beyond native HTML5 — both are worth adding before this handles real credentials.
