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.
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.
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/auth50?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
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.
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.
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:
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" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
wordmark | string | – | Lowercase wordmark at the top of the form panel |
heading | string | – | Page heading, rendered as the h1 |
description | string | – | Supporting paragraph, capped at max-w-sm |
form | SignUpForm | – | Every label, placeholder and caption in the form |
footer | FooterLink | – | Sign-in prompt under the form |
panelBadge | { label: string } | – | Eyebrow at the top of the soft column |
benefits | string[] | [] | Checked benefits on hairline rows |
media | ReactNode | – | Live asset on the tile, socialproof26 in the demo |
image | { src: string; alt: string } | – | Backdrop behind the media tile |
className | string | – | Extra classes for the outer section |
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 };
};Input components rather than hand-styled elements, which is why input appears in the block's registry dependencies and gets installed alongside it.useId, so the label and Input pairs stay correctly associated even with several instances of the block on one page.onSubmit, and the submit button is a plain Button21 with no handler, so the account creation call is wired by the integrator.w-full justify-center, since Button21 is inline-flex by default and would otherwise shrink to its label inside the column.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.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.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.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.
auth49
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.
auth2
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.
auth9
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.
auth46
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.