Interface personnalisée

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

Version : Vérifiez package.json pour la version du SDK — voir 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 — construisez votre propre interface de connexion/inscription avec des hooks
2. Personnalisation de l'apparence — thème, style et marque des composants pré-construits 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 (à ignorer 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 se rendent maintenant à opacité complète. Utilisez des valeurs rgba() explicites si vous avez besoin de transparence.

Core 2 UNIQUEMENT (à ignorer si SDK actuel) : colorRing et colorModalBackdrop se rendaient à 15 % d'opacité par défaut.

options (structure, logo, boutons de réseaux sociaux)

Core 2 UNIQUEMENT (à ignorer si SDK actuel) : Cette propriété s'appelle layout, pas options. De plus, showOptionalFields valait 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 (à ignorer 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 de color-scheme CSS — le thème par défaut respecte la propriété CSS color-scheme pour basculer automatiquement le 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 l'ignorer 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 (à ignorer 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 core-2/ ou core-3/ appropriée
3. Pour l'apparence : WebFetch la documentation appropriée du tableau ci-dessus
4. Appliquez la prop appearance à vos composants Clerk ou construisez 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