Editorial Split Sign In

Auth32: Editorial Split Sign In

A full-height two-column sign-in screen that pairs a left editorial panel (uppercase eyebrow, oversized heading, and description on a bg-muted background) with a right-hand email and password form built from Field primitives, a forgot-password link beside the password label, a submit button, and a signup prompt below, collapsing to a single stacked column below the lg breakpoint.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth32?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth32?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth32.tsx, plus the button, input, and field shadcn/ui primitives it uses for the submit button, the email and password inputs, and the field labels and descriptions.

Quick start

The installed file exports auth32Demo alongside the block: the exact props behind the preview above. Spread it to get a working sign-in screen in one line.

import { Auth32, auth32Demo } from "@/components/beste/block/auth32";

export default function SignInPage() {
  return <Auth32 {...auth32Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Auth32 } from "@/components/beste/block/auth32";

export default function SignInPage() {
  return (
    <Auth32
      eyebrow="Welcome back"
      heading="Sign in to keep building."
      description="Pick up right where you left off."
      labels={{
        email: "Email",
        emailPlaceholder: "you@example.com",
        password: "Password",
        passwordPlaceholder: "Enter your password",
        submit: "Continue",
      }}
      forgotPasswordLink={{ label: "Forgot password?", href: "/reset" }}
      signupPrompt={{ text: "Don't have an account?", linkLabel: "Sign up", href: "/signup" }}
    />
  );
}

Props

type Labels = {
  email?: string;
  emailPlaceholder?: string;
  password?: string;
  passwordPlaceholder?: string;
  submit?: string;
};

Behavior notes

• The form is presentational only: onSubmit calls e.preventDefault() and nothing else, so the inputs are uncontrolled and no email or password value is captured or lifted out. Wiring real authentication is left to the integrator.
• Each of the three form rows is conditionally rendered by its label: the email field renders only when labels.email is set, the password field only when labels.password is set, and the submit button only when labels.submit is set. An empty or omitted labels object therefore renders an empty form.
• Field ids are derived from a single useId() call suffixed with -email and -password, keeping the htmlFor/id pairs unique and stable across instances.
• The forgot-password link only appears inside the password field, so it is hidden whenever the password field itself is not rendered, regardless of whether forgotPasswordLink is provided.
• Links use next/link; the block assumes a Next.js app and href values are passed straight through with no validation.
• Layout is a lg:grid-cols-2 grid at min-h-screen: below lg the editorial panel stacks above the form, and above lg the two columns sit side by side with the panel on the left.