Component Customization

Prerequisite: Ensure

ClerkProvider

wraps your app. See

setup/

.

Component Customization Options

Appearance Pattern

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

variables (colors, typography, borders)

colorPrimary

colorBackground

borderRadius

0.375rem

layout (structure, logo, social buttons)

logoImageUrl

socialButtonsVariant

'blockButton'

'iconButton'

'auto'

socialButtonsPlacement

'top'

'bottom'

shadcn Theme

components.json

import { shadcn } from '@clerk/themes'

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

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

Workflow

1. Identify customization needs (colors, layout, theme, CSS)
2. WebFetch the appropriate documentation from table above
3. Follow official code examples from the docs
4. Apply appearance prop to your Clerk components

Common Pitfalls

colorPrimary

primaryColor

logoImageUrl

layout: {}

socialButtonsVariant: 'iconButton'

layout