Usage
1. Pass variables to <ClerkProvider>
2. Pass variables to a single component
Properties

Variables

The variables property is used to adjust the general styles of the component's base theme, like colors, backgrounds, typography.

Usage

You can customize Clerk components by passing an object of variables to the variables property of the appearance prop. You can pass it to the <ClerkProvider> component to apply it to all Clerk components in your app or you can pass it to a single Clerk component.

Pass `variables` to `<ClerkProvider>`

To customize all Clerk components, pass the variables property to the appearance prop to the <ClerkProvider> component.

In the example below, the primary color is set to red and the text color is set to white. Because these styles are applied to the <ClerkProvider>, which wraps the entire application, these styles will be applied to all Clerk components that use the primary color and text color.

Next.js

React

Remix

App Router

Pages Router

/src/app/layout.tsx

import { ClerkProvider } from '@clerk/nextjs';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ClerkProvider
      appearance={{
        variables: {
          colorPrimary: "red",
          colorText: "white"
        }
      }}
    >
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

_app.tsx

import { ClerkProvider } from '@clerk/nextjs';
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider
      appearance={{
        variables: {
          colorPrimary: "red",
          colorText: "white"
        }
      }}
    >
      <Component {...pageProps}/>
    </ClerkProvider>
  )
}

export default MyApp;

app.tsx

import React from "react";
import "./App.css";
import { ClerkProvider } from "@clerk/clerk-react";

if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
  throw new Error("Missing Publishable Key")
}
const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;

function App() {
  return (
    <ClerkProvider 
      appearance={{
        variables: {
          colorPrimary: "red",
          colorText: "white"
        }
      }} 
      publishableKey={clerkPubKey}
    >
      <div>Hello from clerk</div>
    </ClerkProvider>
  );
}

export default App;

app/root.tsx

// Import ClerkApp
import { ClerkApp } from "@clerk/remix";
import type { MetaFunction,LoaderFunction } from "@remix-run/node";

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import { rootAuthLoader } from "@clerk/remix/ssr.server";

export const meta: MetaFunction = () => ({
  charset: "utf-8",
  title: "New Remix App",
  viewport: "width=device-width,initial-scale=1",
});

export const loader: LoaderFunction = (args) => rootAuthLoader(args);

function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

export default ClerkApp(App, {
  appearance: {
    variables: {
      colorPrimary: "red",
      colorText: "white"
    }
  },
});

You can customize all instances of a Clerk component by passing the component to the appearance prop of the <ClerkProvider>. The appearance prop accepts the name of the Clerk component you want to style as a key.

In the example below, the primary color is set to red and the text color is set to white for all instances of the <SignIn /> component.

Next.js

React

Remix

App Router

Pages Router

/src/app/layout.tsx

import { ClerkProvider } from '@clerk/nextjs';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ClerkProvider
      appearance={{
        signIn: { 
          variables: {
            colorPrimary: "red",
            colorText: "white"
          } 
        },
      }}
    >
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

_app.tsx

import { ClerkProvider } from "@clerk/nextjs";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider
      appearance={{
        signIn: { 
          variables: {
            colorPrimary: "red",
            colorText: "white"
          } 
        },
      }}
    >
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

export default MyApp;

app.tsx

import React from "react";
import "./App.css";
import { ClerkProvider } from "@clerk/clerk-react";

if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
  throw new Error("Missing Publishable Key")
}
const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;

function App() {
  return (
    <ClerkProvider 
      appearance={{
        signIn: { 
          variables: {
            colorPrimary: "red",
            colorText: "white"
          } 
        },
      }}
      publishableKey={clerkPubKey}
    >
      <div>Hello from clerk</div>
    </ClerkProvider>
  );
}

export default App;

app/root.tsx

// Import ClerkApp
import { ClerkApp } from "@clerk/remix";
import type { MetaFunction,LoaderFunction } from "@remix-run/node";

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import { rootAuthLoader } from "@clerk/remix/ssr.server";

export const meta: MetaFunction = () => ({
  charset: "utf-8",
  title: "New Remix App",
  viewport: "width=device-width,initial-scale=1",
});

export const loader: LoaderFunction = (args) => rootAuthLoader(args);

function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

export default ClerkApp(App, {
  appearance: {
    signIn: { 
      variables: {
        colorPrimary: "red",
        colorText: "white"
      } 
    },
  },
});

Pass `variables` to a single component

To customize a single Clerk component, pass the variables property to the appearance prop to the Clerk component.

Next.js

React

Remix

App Router

Pages Router

/app/sign-in/[[...sign-in]]/page.tsx

import { SignIn } from "@clerk/nextjs";

export default function Page() {
  return <SignIn 
    appearance={{
      variables: {
        colorPrimary: "red",
        colorText: "white"
      }
    }}
  />;
}

/pages/sign-in/[[...index]].tsx

import { SignIn } from "@clerk/nextjs";

const SignInPage = () => (
  <SignIn 
    appearance={{
      variables: {
        colorPrimary: "red",
        colorText: "white"
      }
    }}
  />
);

export default SignInPage;

/src/sign-in/[[...index]].tsx

import { SignIn } from "@clerk/clerk-react";

const SignInPage = () => (
  <SignIn 
    appearance={{
      variables: {
        colorPrimary: "red",
        colorText: "white"
      }
    }}
  />
);

export default SignInPage;

app/routes/sign-in/$.tsx

import { SignIn } from "@clerk/remix";

export default function SignInPage() {
  return (
    <div style={{ border: "2px solid blue", padding: "2rem" }}>
      <h1>Sign In route</h1>
      <SignIn 
        appearance={{
          variables: {
            colorPrimary: "red",
            colorText: "white"
          }
        }}
        routing={"path"} 
        path={"/sign-in"} 
      />
    </div>
  );
}

Properties

Name
colorPrimary
Type
string
Description
The primary color used throughout the components.
Name
colorDanger
Type
string
Description
The color used for error states.
Name
colorSuccess
Type
string
Description
The color used for success states.
Name
colorWarning
Type
string
Description
The color used for warning states.
Name
colorAlphaShade
Type
string
Description
The color that will be used for all to generate the alpha shades the components use. This option applies to borders, backgrounds for hovered elements, hovered dropdown options.
Name
colorTextOnPrimaryBackground
Type
string
Description
The color used for text on the primary background.
Name
colorTextSecondary
Type
string
Description
The color used for secondary text.
Name
colorBackground
Type
string
Description
The background color for the card container.
Name
colorInputText
Type
string
Description
The color used for text in input fields.
Name
colorInputBackground
Type
string
Description
The background color used for input fields.
Name
fontFamily
Type
string
Description
The font family used throughout the components. By default, it is set to inherit.
Name
fontFamilyButtons
Type
string
Description
The font family used for buttons. By default, it is set to inherit.
Name
fontSize
Type
string
Description
The font size used throughout the components. By default, this is set to 1rem.
Name
fontSmoothing
Type
'auto' | 'antialiased' | 'never'
Description
The font smoothing used throughout the components. By default, this is set to auto.
Name
fontWeight
Type
{normal: number, medium: number, bold: number}
Description
The font weight used throughout the components. By default, this is set to {normal: 400, medium: 500, bold: 600}.
Name
borderRadius
Type
string
Description
The border radius used throughout the components. By default, this is set to 0.375rem.
Name
spacingUnit
Type
string
Description
The spacing unit used throughout the components. By default, this is set to 1rem.

Edit this page on GitHub

Last updated on Aug 20, 2024

Variables

Usage

Pass variables to <ClerkProvider>

Pass variables to a single component

Properties

Feedback

Pass `variables` to `<ClerkProvider>`

Pass `variables` to a single component