Appearance prop

The appearance prop can be applied to React's <ClerkProvider /> to share styles across every component, or individually to any of the Clerk components.

This applies to all of the React-based packages, like Next.js and Gatsby, as well as the pure JavaScript ClerkJS package.

Using a pre-built Theme

Clerk offers a set of themes that can be used with the appearance prop. The themes are available as a package called @clerk/themes.

terminal
npm install @clerk/themes

terminal
yarn add @clerk/themes

terminal
pnpm add @clerk/themes

Usage

app.tsx
import { dark } from '@clerk/themes';
import { ClerkProvider, SignIn } from '@clerk/nextjs';
import type { AppProps } from "next/app";
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider
      appearance={{
        baseTheme: dark
      }}
    >
      <Component {...pageProps}/>
    </ClerkProvider>
  )
}
 
export default MyApp;

app.tsx
import React from "react";
import "./App.css";
import { dark } from '@clerk/themes';
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={{
      baseTheme: dark
      }} publishableKey={clerkPubKey}>
      <div>Hello from clerk</div>
    </ClerkProvider>
  );
}
 
export default App;

app/root.tsx
// Import ClerkApp
import { ClerkApp } from "@clerk/remix";
import { dark } from '@clerk/themes';
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: {
    baseTheme: dark,
  },
});

You can see a list of the themes Clerk offers in our reference docs.

Making a custom theme

You can make a custom theme for your app's Clerk component by customizing the styles that are applied to each element.

This can be done with one of three different methods of styling:

No matter which method you choose, you'll need to know how to identify the element you want to style.

Identifying the underlying element

You can identify the underlying element by inspecting the HTML of the Clerk component. You can do this by right-clicking on the component in your browser and selecting "Inspect Element" or "Inspect":

The inspect element tab opened with an element selected. It shows a list of classes and a lock icon in between human-readible classnames and randomly generated ones

When you select an element that is part of a Clerk component, you'll notice a list of classes like so:


cl-formButtonPrimary cl-button 🔒️ cl-internal-1ta0xpz

Any of the classes listed before the lock icon (🔒️) are safe to rely on, such as cl-formButtonPrimary or cl-button. You'll use these classes to target the respective Clerk component elements.

Anything after the lock icon (🔒️) are internal classes used for Clerk's internal styling and should not be modified.

Global CSS

Using this knowledge about the publicly available classes, you can target the elements with global CSS.

Here's an example of how you can target the primary button in a Clerk component:

styles/global.css
.cl-formButtonPrimary {
  font-size: 14px;
  text-transform: none;
  background-color: #611bbd;
}
 
.cl-formButtonPrimary:hover,
.cl-formButtonPrimary:focus,
.cl-formButtonPrimary:active {
  background-color: #49247a;
}

The previously blue "Continue" button is now purple

Using custom CSS classes

You're able to pass additional classes to Clerk component elements by using the elements property on appearance in your ClerkProvider.

If you look back to the list of classes applied to a Clerk component's element, you'll see a list of classes like so:


cl-formButtonPrimary cl-button 🔒️ cl-internal-1ta0xpz

Remove the cl- prefix and use it as the key for a new object in the elements property. The value of this object should be the string of classes you want to apply to the element.

app.tsx
import { ClerkProvider, SignIn } from "@clerk/nextjs";
import type { AppProps } from "next/app";
 
function MyApp({ pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignIn
        appearance={{
          elements: {
            formButtonPrimary: "your-org-button org-red-button",
          },
        }}
      />
    </ClerkProvider>
  );
}
 
export default MyApp;

Using Tailwind

By using the method outlined above, you can use Tailwind classes to style Clerk components.

app.tsx
import { ClerkProvider, SignIn } from "@clerk/nextjs";
import type { AppProps } from "next/app";
 
function MyApp({ pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignIn
        appearance={{
          elements: {
            formButtonPrimary:
              "bg-slate-500 hover:bg-slate-400 text-sm normal-case",
          },
        }}
      />
    </ClerkProvider>
  );
}
 
export default MyApp;

A previously blue "Sign in" button is now Slate gray

Using CSS Modules

CSS modules are a great way to scope your CSS to a specific component. Clerk components can be styled with CSS modules by using the same method as outlined above.

Simply create your Module file and add the CSS you want to apply.

styles/SignIn.module.css
.primaryColor {
  background-color: bisque;
  color: black;
}

Then you can apply this by importing the file and using the classes whenever required:

app.tsx
import styles from "../styles/SignIn.module.css";
import { ClerkProvider, SignIn } from "@clerk/nextjs";
import type { AppProps } from "next/app";
 
function MyApp({ pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignIn
        appearance={{
          elements: {
            formButtonPrimary: styles.primaryColor,
          },
        }}
      />
    </ClerkProvider>
  );
}
 
export default MyApp;

Inline CSS objects

Using the same method for identifying elements as mentioned previously, you can pass an object of CSS properties to the elements property on appearance in your ClerkProvider.

app.tsx
import { ClerkProvider, SignIn } from "@clerk/nextjs";
import type { AppProps } from "next/app";
 
function MyApp({ pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignIn
        appearance={{
          elements: {
            formButtonPrimary: {
              fontSize: 14,
              textTransform: "none",
              backgroundColor: "#611BBD",
              "&:hover, &:focus, &:active": {
                backgroundColor: "#49247A",
              },
            },
          },
        }}
      />
    </ClerkProvider>
  );
}
 
export default MyApp;

Next steps

Here are a few resources you can utilize to customize your Clerk components further:

Localization

Learn how to localize the Clerk components.

Learn More

Pre-built Themes

See which pre-built theme you'd like to use as a base.

Learn More

Component Layout Customization

Learn how to change the layout and links of the Clerk components.

Learn More