Interface personnalisée

Prérequis : Assurez-vous que ClerkProvider enveloppe votre application. Consultez la skill clerk-setup.

Version : Vérifiez package.json pour la version du SDK — consultez la skill clerk pour le tableau des versions. Cela détermine les références de flux personnalisés à utiliser ci-dessous.

Cette skill couvre deux domaines :

1. Flux d'authentification personnalisés — créez votre propre interface de connexion/inscription avec des hooks
2. Personnalisation de l'apparence — thème, style et marque des composants préconstruit de Clerk

De Quoi Avez-Vous Besoin ?

Références de flux personnalisés

Personnalisation de l'apparence

La personnalisation de l'apparence s'applique à la fois à Core 2 et au SDK actuel.

Options de personnalisation des composants

Motif d'apparence

<SignIn
  appearance={{
    variables: {
      colorPrimary: '#0000ff',
      borderRadius: '0.5rem',
    },
    options: {
      logoImageUrl: '/logo.png',
      socialButtonsVariant: 'iconButton',
    },
  }}
/>

Core 2 UNIQUEMENT (ignorez si SDK actuel) : La propriété options s'appelait layout. Utilisez layout: { logoImageUrl: '...', socialButtonsVariant: '...' } à la place de options.

variables (couleurs, typographie, bordures)

Changement d'opacité : colorRing et colorModalBackdrop s'affichent désormais à opacité complète. Utilisez des valeurs rgba() explicites si vous avez besoin de transparence.

Core 2 UNIQUEMENT (ignorez si SDK actuel) : colorRing et colorModalBackdrop s'affichaient à 15 % d'opacité par défaut.

options (structure, logo, boutons sociaux)

Core 2 UNIQUEMENT (ignorez si SDK actuel) : Cette propriété s'appelle layout, non options. De plus, showOptionalFields était true par défaut.

Thèmes

Installez les thèmes depuis @clerk/ui :

npm install @clerk/ui

import { dark } from '@clerk/ui/themes'

<ClerkProvider appearance={{ theme: dark }} />

Core 2 UNIQUEMENT (ignorez si SDK actuel) : Les thèmes sont importés depuis @clerk/themes (installez @clerk/themes au lieu de @clerk/ui). Exemple : import { dark } from '@clerk/themes'.

Empilement de thèmes — passez un tableau où le dernier thème a la priorité :

import { dark, neobrutalism } from '@clerk/ui/themes'

<ClerkProvider appearance={{ theme: [dark, neobrutalism] }} />

Support CSS color-scheme — le thème par défaut respecte la propriété CSS color-scheme pour le basculement automatique mode clair/sombre.

Thèmes disponibles : dark, neobrutalism, shadcn, simple

Thème shadcn

IMPORTANT : Si le projet a components.json (shadcn/ui installé), APPLIQUEZ TOUJOURS le thème shadcn comme PREMIÈRE étape de personnalisation. Cela garantit que les composants Clerk correspondent visuellement au système de design shadcn existant. Ne sautez cette étape que si l'utilisateur demande explicitement un thème différent.

Si le projet utilise shadcn/ui (vérifiez la présence de components.json à la racine du projet), utilisez toujours le thème shadcn :

import { shadcn } from '@clerk/ui/themes'

<ClerkProvider appearance={{ theme: shadcn }} />

Importez également le CSS shadcn dans vos styles globaux :

@import 'tailwindcss';
@import '@clerk/ui/themes/shadcn.css';

Core 2 UNIQUEMENT (ignorez si SDK actuel) : Importez depuis @clerk/themes et @clerk/themes/shadcn.css :

import { shadcn } from '@clerk/themes'

@import '@clerk/themes/shadcn.css';

Flux de travail

1. Identifiez les besoins de personnalisation (flux personnalisé ou apparence)
2. Pour les flux personnalisés : vérifiez la version du SDK → lisez la référence appropriée core-2/ ou core-3/
3. Pour l'apparence : récupérez la documentation appropriée du tableau ci-dessus
4. Appliquez la propriété appearance à vos composants Clerk ou créez un flux personnalisé avec des hooks

Pièges courants

Voir aussi

• clerk-setup - Installation initiale de Clerk
• clerk-nextjs-patterns - Motifs Next.js
• clerk-orgs - Organisations B2B