Anatomy

The component is structured as three vertical zones inside a `max-w-sm` centered column. At the top: a brand monogram square (first letter of `brandName`), an H1 title, and an optional subtitle. In the middle: a conditional Google OAuth button followed by a divider, then the form itself, two inputs side-by-side in a 2-column grid (first name / last name), followed by stacked email, password, and confirm-password inputs, a terms checkbox, and a full-width submit button. At the bottom: a login redirect link. The outer section spans `min-h-screen` so the card stays vertically centered on all screen heights.

How it works

The animation is intentionally simple: one `motion.div` wraps the entire card with `initial={{ opacity: 0, y: 20 }}` and `animate={{ opacity: 1, y: 0 }}`. The custom cubic-bezier `[0.16, 1, 0.3, 1]` is an expo-out curve, it accelerates quickly and decelerates smoothly, making the card feel like it settles into place rather than just fading in. Duration is 0.6s, which is long enough to feel deliberate but short enough not to block the user. No scroll trigger, no stagger, just a clean page-load entrance that works everywhere without extra setup.

How to build it in React

1. Set up the centered layout

   Wrap everything in a `section` with `min-h-screen flex items-center justify-center`. Set the background to `var(--color-background)` via an inline style so it respects the active theme preset. Inside, place a `motion.div` constrained to `max-w-sm w-full`, this is the card boundary.

   <section
     className="min-h-screen flex items-center justify-center py-16 px-6"
     style={{ background: "var(--color-background)" }}
   >
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
       className="w-full max-w-sm"
     >

2. Add the brand header and optional social button

   Render a small square using the first character of `brandName` as the monogram, styled with `--color-accent` background. Below it, place the H1 title and optional subtitle. Then, conditionally render the Google button and a divider based on the `showSocial` prop. The divider uses a flex row with two `h-px` lines and a centered 'ou' / 'or' label.

   {showSocial && (
     <>
       <button style={{ border: "1px solid var(--color-border)", color: "var(--color-foreground)" }}
         className="w-full py-2.5 rounded-lg text-sm font-medium mb-3 transition-opacity hover:opacity-80">
         Sign up with Google
       </button>
       <div className="flex items-center gap-3 my-6">
         <div className="flex-1 h-px" style={{ background: "var(--color-border)" }} />
         <span className="text-xs" style={{ color: "var(--color-foreground-light)" }}>or</span>
         <div className="flex-1 h-px" style={{ background: "var(--color-border)" }} />
       </div>
     </>
   )}

3. Build the form fields

   Inside a `form` with `onSubmit={(e) => e.preventDefault()}`, open with a `grid grid-cols-2 gap-3` div containing the first and last name inputs. Stack email, password, and confirm-password below. All inputs share the same styling: `background: var(--color-background-alt)`, `border: 1px solid var(--color-border)`, and `color: var(--color-foreground)`. This keeps them theme-aware without hardcoding any hex.

   <div className="grid grid-cols-2 gap-3">
     <input type="text" placeholder="First name"
       style={{ background: "var(--color-background-alt)", color: "var(--color-foreground)", border: "1px solid var(--color-border)" }}
       className="w-full px-4 py-3 rounded-lg text-sm outline-none" />
     <input type="text" placeholder="Last name" ... />
   </div>
   <input type="email" placeholder="Email" ... />
   <input type="password" placeholder="Password" ... />
   <input type="password" placeholder="Confirm password" ... />

4. Add the terms checkbox and submit button

   Wrap a native `<input type='checkbox'>` in a `<label>` with `flex items-start gap-2`. This keeps the checkbox and the terms text accessible without a custom component. The submit button spans full width with `background: var(--color-accent)` and `color: var(--color-background)`. Close the form with a paragraph linking to the login page via the `loginUrl` prop.

When to use it

This component fits any product that needs a fast, self-contained registration screen: SaaS dashboards, internal tools, side projects, or admin portals. The `showSocial` prop makes it easy to toggle between OAuth-first and email-only flows without forking the component. Avoid it when your registration flow requires multi-step onboarding (progress bar, role selection, plan picker), those flows need a stateful wizard, not a single-card form. Also skip it when you need real form validation with error states per field; add a library like react-hook-form before shipping.

Used by

• Linear, Centered sign-up card with Google OAuth button and minimal field set, matching this exact pattern.
• Vercel, Registration flow with social-first (GitHub/Google) options above a divider, then email fallback below, the same conditional social block this component uses.
• Supabase, Auth UI library built on the same centered card, split name fields, and password confirmation pattern.
• Clerk, Pre-built sign-up component with brand logo slot, social OAuth row, and stacked email/password fields, the reference implementation for this card pattern in the React ecosystem.

FAQ