Split-Screen Sign In

Auth9: Split-Screen Sign In

Two-column sign-in screen: a full form (social providers, a divider, email and password with show/hide, remember me) on one side, and a brand panel with a heading, description, and a checklist of product highlights on the other. A panelPosition prop flips which side the panel sits on.

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/auth9?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/auth9.tsx and the button, input, field, and checkbox shadcn/ui primitives it's built on.

Quick start

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

import { Auth9, auth9Demo } from "@/components/beste/block/auth9";

export default function SignInPage() {
  return <Auth9 {...auth9Demo} />;
}

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

import { Auth9 } from "@/components/beste/block/auth9";

export default function SignInPage() {
  return (
    <Auth9
      heading="Sign in to your account"
      description="Welcome back. Please enter your details."
      labels={{
        divider: "or continue with email",
        email: "Email",
        emailPlaceholder: "you@example.com",
        password: "Password",
        passwordPlaceholder: "Enter your password",
        rememberMe: "Remember me",
        submit: "Sign in",
        passwordToggle: "Toggle password visibility",
      }}
      forgotPasswordLink={{ label: "Forgot password?", href: "/forgot-password" }}
      panel={{
        heading: "Everything your team needs, in one place.",
        features: ["Unlimited projects", "Enterprise-grade security"],
      }}
      panelPosition="right"
    />
  );
}

Props

type SocialProvider = { label: string; icon: React.ReactNode; href?: string };

type Auth9Labels = {
  divider?: string;
  email?: string;
  emailPlaceholder?: string;
  password?: string;
  passwordPlaceholder?: string;
  rememberMe?: string;
  submit?: string;
  passwordToggle?: string;
};

type Auth9Panel = {
  heading: string;
  description?: string;
  features?: string[];
};

Behavior notes

• The outer grid is always lg:grid-cols-2, whether or not panel is set; if panel is omitted, the form column still only occupies half the width on large screens, leaving the other half blank rather than collapsing to a single column.
• panelPosition (default "right") is implemented with lg:order-1/lg:order-2 on both the form and panel wrappers, so it only reorders the two columns at the lg breakpoint and above; the brand panel itself is hidden entirely below lg.
• The <form> only calls e.preventDefault() on submit; there is no onSubmit prop, so nothing is actually wired to authenticate.
• The password show/hide toggle is local useState, swapping the input's type between password and text and the icon between Eye/EyeOff.
• The remember-me checkbox, the divider, and the submit button each render only when their corresponding labels entry is set, not through separate boolean props.
• Social provider buttons render as asChild links (next/link) to provider.href, not real OAuth triggers.