Anatomie

Le composant est structuré en trois zones verticales dans une colonne `max-w-sm` centrée. En haut : un carré monogramme de marque (première lettre de `brandName`), un H1 et un sous-titre optionnel. Au centre : un bouton Google OAuth conditionnel suivi d'un séparateur, puis le formulaire, deux inputs côte à côte dans une grille 2 colonnes (prénom / nom), suivis des inputs email, mot de passe et confirmation empilés, une case CGU et un bouton de soumission pleine largeur. En bas : un lien de redirection vers la connexion. La section extérieure couvre `min-h-screen` pour que la carte reste centrée verticalement quelle que soit la hauteur d'écran.

Comment ça marche

L'animation est volontairement simple : une `motion.div` enveloppe toute la carte avec `initial={{ opacity: 0, y: 20 }}` et `animate={{ opacity: 1, y: 0 }}`. Le cubic-bezier personnalisé `[0.16, 1, 0.3, 1]` est une courbe expo-out, elle accélère rapidement et décélère doucement, faisant paraître la carte posée en place plutôt que simplement fondue. La durée est 0.6s, assez longue pour paraître intentionnelle mais assez courte pour ne pas bloquer l'utilisateur. Pas de scroll trigger ni de stagger, juste une entrée propre au chargement de page qui fonctionne partout sans configuration supplémentaire.

Comment le coder en React

1. Mettre en place la mise en page centrée

   Enveloppe tout dans une `section` avec `min-h-screen flex items-center justify-center`. Définis le background sur `var(--color-background)` via un style inline pour respecter le preset de thème actif. À l'intérieur, place une `motion.div` limitée à `max-w-sm w-full`, c'est le périmètre de la carte.

   <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. Ajouter l'en-tête de marque et le bouton social optionnel

   Rends un petit carré avec le premier caractère de `brandName` comme monogramme, stylé avec le fond `--color-accent`. En dessous, place le titre H1 et le sous-titre optionnel. Ensuite, rends conditionnellement le bouton Google et un séparateur selon la prop `showSocial`. Le séparateur utilise une rangée flex avec deux lignes `h-px` et un label centré 'ou'.

   {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. Construire les champs du formulaire

   Dans un `form` avec `onSubmit={(e) => e.preventDefault()}`, ouvre par un div `grid grid-cols-2 gap-3` contenant les inputs prénom et nom. Empile email, mot de passe et confirmation en dessous. Tous les inputs partagent le même style : `background: var(--color-background-alt)`, `border: 1px solid var(--color-border)` et `color: var(--color-foreground)`. Cela les rend sensibles au thème sans coder de hex en dur.

   <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. Ajouter la case CGU et le bouton de soumission

   Enveloppe un `<input type='checkbox'>` natif dans un `<label>` avec `flex items-start gap-2`. Cela rend la case à cocher et le texte des CGU accessibles sans composant custom. Le bouton de soumission prend toute la largeur avec `background: var(--color-accent)` et `color: var(--color-background)`. Ferme le formulaire par un paragraphe renvoyant vers la page de connexion via la prop `loginUrl`.

Quand l'utiliser

Ce composant convient à tout produit qui a besoin d'un écran d'inscription rapide et autonome : dashboards SaaS, outils internes, side projects ou portails admin. La prop `showSocial` facilite le basculement entre flux OAuth-first et email uniquement sans forker le composant. À éviter quand ton flux d'inscription nécessite un onboarding multi-étapes (barre de progression, sélection de rôle, choix de plan), ces flux demandent un wizard avec état, pas un formulaire en carte unique. Passe aussi ton chemin si tu as besoin d'une vraie validation de formulaire avec états d'erreur par champ ; ajoute une lib comme react-hook-form avant de shipper.

Utilisé par

• Linear, Carte d'inscription centrée avec bouton Google OAuth et champs minimalistes, correspondant exactement à ce pattern.
• Vercel, Flux d'inscription avec options sociales prioritaires (GitHub/Google) au-dessus d'un séparateur, puis fallback email en dessous, le même bloc social conditionnel qu'utilise ce composant.
• Supabase, Bibliothèque Auth UI construite sur le même pattern de carte centrée, champs de nom séparés et confirmation de mot de passe.
• Clerk, Composant d'inscription prêt à l'emploi avec emplacement logo de marque, rangée OAuth social et champs email/mot de passe empilés, implémentation de référence de ce pattern de carte dans l'écosystème React.

FAQ