Split Sign Up With Proof

sirius

Open a workspace for your first clinic

Free while you are running one clinic, for as long as that lasts. No card, and no call before you start.

Twelve characters or more. We check it against known breaches, nothing else.

or
Continue with your practice identity provider

Creating a workspace means you accept the terms and the data processing agreement.

Already have a workspace? Sign in

Day one
  • A booking page your members can use immediately
  • One member record, shared by the whole team
  • Invoices raised from the appointments themselves
  • Full export of everything, whenever you ask
Soft blue gradient backdrop

“We moved eleven years of records over a weekend and nobody had to work Monday twice.”

Portrait of Elena Rourke

Elena Rourke

Practice lead, Bramble Health

About this block

Split Sign Up With ProofPRO

A hairline sign-up panel carrying a lowercase wordmark, name, work email, and password fields with an SSO fallback and terms note, beside a soft column of checked benefits over an image tile that floats a live customer quote card.

Auth50: Split Sign Up With Proof

A hairline sign-up panel carrying a lowercase wordmark, name, work email and password fields with an SSO fallback and terms note, beside a soft column of checked benefits over an image tile that floats a live customer quote card.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

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

Base UI flavor

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

This installs the block to components/beste/block/auth50.tsx, the shadcn/ui input component it depends on, the socialproof26 quote piece it floats on the tile (installed to components/beste/piece/socialproof26.tsx), and the badge23 and button21 components it uses for the panel eyebrow and the actions.

Quick start

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

tsx
import { Auth50, auth50Demo } from "@/components/beste/block/auth50";

export default function SignUpPage() {
  return <Auth50 {...auth50Demo} />;
}

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

tsx
import { Auth50 } from "@/components/beste/block/auth50";
import { Socialproof26 } from "@/components/beste/piece/socialproof26";

export default function SignUpPage() {
  return (
    <Auth50
      wordmark="sirius"
      heading="Open a workspace for your first clinic"
      description="Free while you are running one clinic. No card, and no call before you start."
      form={{
        name: { label: "Your name", placeholder: "Elena Rourke" },
        email: { label: "Work email", placeholder: "you@practice.com" },
        password: { label: "Password", placeholder: "At least twelve characters" },
        passwordHint: "Twelve characters or more. We check it against known breaches.",
        submitLabel: "Create the workspace",
        dividerLabel: "or",
        ssoButton: { label: "Continue with your identity provider", href: "/auth/sso" },
        terms: "Creating a workspace means you accept the terms.",
      }}
      footer={{ label: "Already have a workspace?", link: { label: "Sign in", href: "/signin" } }}
      panelBadge={{ label: "Day one" }}
      benefits={[
        "A booking page your members can use immediately",
        "One member record, shared by the whole team",
      ]}
      media={
        <Socialproof26
          quote="We moved eleven years of records over a weekend."
          name="Elena Rourke"
          role="Practice lead, Bramble Health"
          avatar={{ src: "/people/elena.jpg", alt: "Portrait of Elena Rourke" }}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
    />
  );
}

Props

PropTypeDefaultDescription
wordmarkstring–Lowercase wordmark at the top of the form panel
headingstring–Page heading, rendered as the h1
descriptionstring–Supporting paragraph, capped at max-w-sm
formSignUpForm–Every label, placeholder and caption in the form
footerFooterLink–Sign-in prompt under the form
panelBadge{ label: string }–Eyebrow at the top of the soft column
benefitsstring[][]Checked benefits on hairline rows
mediaReactNode–Live asset on the tile, socialproof26 in the demo
image{ src: string; alt: string }–Backdrop behind the media tile
classNamestring–Extra classes for the outer section
ts
type Field = {
  label: string;
  placeholder: string;
};

type SignUpForm = {
  name: Field;
  email: Field;
  password: Field;
  passwordHint: string;
  submitLabel: string;
  dividerLabel: string;
  ssoButton: { label: string; href: string };
  terms: string;
};

type FooterLink = {
  label: string;
  link: { label: string; href: string };
};

Behavior notes

  • The inputs are shadcn/ui Input components rather than hand-styled elements, which is why input appears in the block's registry dependencies and gets installed alongside it.
  • Field ids come from useId, so the label and Input pairs stay correctly associated even with several instances of the block on one page.
  • The form is uncontrolled and holds no state. There is no onSubmit, and the submit button is a plain Button21 with no handler, so the account creation call is wired by the integrator.
  • The submit and SSO buttons both carry w-full justify-center, since Button21 is inline-flex by default and would otherwise shrink to its label inside the column.
  • The divider is two h-px flex-1 spans either side of the label, both aria-hidden, rather than an hr, which keeps it centered regardless of how long the label is.
  • The soft column is flex flex-col with the tile marked flex-1 and min-h-72, so the tile grows to fill whatever height the form column sets rather than leaving a gap under the benefits.
  • The two columns split at lg, and the divider between them flips from lg:border-l to border-t when they stack, so the seam always runs across the join.
  • Benefits close with last:border-b, so the list reads as a small table rather than trailing off.

Wiring the form up

This block renders the fields and leaves submission to you. For validation, error states and submit handling, the patterns in React Hook Form, TanStack Form, and Formisch cover exactly this shape of sign-up form.

More Auth blocks

View all Auth
PRO

auth49

Split Sign In With Quote

A hairline sign-in panel with a lowercase wordmark, email and password fields, an inline forgot link, a remember toggle, and an SSO fallback, set beside a full-height photo carrying a gradient customer quote.

FREE

auth2

Split-Screen Sign Up

Two-column registration screen pairing a sign-up form (social providers, name, email, password with show/hide, terms checkbox) with a full-bleed image showcase and customer testimonial. Includes a left/right image position toggle.

PRO

auth9

Split-Screen Sign In

Two-column sign-in screen pairing a full sign-in form (social providers, email, password with show/hide, remember me) with a brand panel that lists product highlights. Includes a left/right panel position toggle.

PRO

auth46

Confirm It's You

Full-height step-up authentication screen that re-asks for the password before a sensitive action, showing the signed-in account and a cancel option. Perfect for protecting billing, security, and destructive actions.

PRO

auth54

Quiet Sign In

A full-height sign-in split: wordmark, a serif greeting that settles in word by word, email and password fields with a full-width sliding-marker pill and a switch-to-booking line on the left, and a photograph that zooms out on load, then drifts slower than the page, with a serif reassurance over its foot on the right.

FREE

auth13

Centered Sign Up Card

Full-height centered registration card with social providers, name, email, and password fields (with show/hide), a terms checkbox, and a sign-in link. Perfect for SaaS sign-up pages that don't need a split layout.