Docs

Variables prop

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

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
    colorNeutral
    Type
    string
    Description

    The color that will be used for all to generate the neutral shades the components use. This option applies to borders, backgrounds for hovered elements, hovered dropdown options.

  • Name
    colorText
    Type
    string
    Description

    The color used for text.

  • 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
    colorShimmer
    Type
    string
    Description

    The color of the avatar shimmer.

  • 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 0.8125rem.

  • Name
    fontWeight
    Type
    {normal: number, medium: number, semibold: number, bold: number}
    Description

    The font weight used throughout the components. By default, this is set to {normal: 400, medium: 500, semibold: 600, bold: 700}.

  • 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.

Usage

You can customize Clerk components by passing an object of variables to the variables property of the appearance prop.

Apply variables to all Clerk components

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

In the following example, 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.

/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"
    }
  },
});

Apply variables to all instances of a Clerk component

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 following example, the primary color is set to red and the text color is set to white for all instances of the <SignIn /> component.

/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"
      }
    },
  },
});

Apply variables to a single Clerk component

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

The following example shows how to customize the <SignIn /> component by setting the primary color to red and the text color to white.

/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"
      }
    }}
    path="/sign-in"
  />
);

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"
          }
        }}
      />
    </div>
  );
}

Feedback

What did you think of this content?
Edit this page on GitHub