Appearance prop

Customize components to match your brand using the appearance prop

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

`@clerk/themes`

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

1
npm install @clerk/themes

Usage

1
import { dark } from '@clerk/themes';
2
import { ClerkProvider, SignIn } from '@clerk/nextjs';
3
import type { AppProps } from "next/app";
4

5
function MyApp({ pageProps }: AppProps) {
6
  return (
7
    <ClerkProvider
8
      appearance={{
9
        baseTheme: dark
10
      }}
11
    >
12
      <Component {...pageProps}>
13
    </ClerkProvider>
14
  )
15
}
16

17
export default MyApp;

Layout

The layout key can be used to change the layout of the <SignIn/> and <SignUp/> components as well as important links to your support, terms and privacy pages.

Usage

1
import { ClerkProvider, SignIn } from '@clerk/nextjs';
2
import type { AppProps } from "next/app";
3

4
function MyApp({ pageProps }: AppProps) {
5
  return (
6
    <ClerkProvider
7
      appearance={
8
        {
9
        layout: {
10
          helpPageUrl: "https://clerk.dev/support",
11
          logoImageUrl: "https://clerk.dev/logo.png",
12
          logoPlacement: "inside",
13
          privacyPageUrl: "https://clerk.dev/privacy",
14
          showOptionalFields: true,
15
          socialButtonsPlacement: "bottom",
16
          socialButtonsVariant: "iconButton",
17
          termsPageUrl: "https://clerk.dev/terms",
18
            }
19
        }
20
      }
21
    >
22
       <Component {...pageProps}>
23
    </ClerkProvider>
24
  )
25
}
26

27
export default MyApp;

Available options

Name	Type	Description
helpPageUrl	string	The URL to your help page
logoImageUrl	string	The URL to your logo image
logoPlacement	string	The placement of your logo. The options are: - `inside` - `outside`
privacyPageUrl	string	The URL to your privacy page
showOptionalFields	boolean	Show optional fields on sign up (default true)
socialButtonsPlacement	string	The placement of your social buttons. The options are: -`bottom` - `top`
socialButtonsVariant	string	The variant of your social buttons. The options are: - `blockButton` - `textButton` - `auto`
termsPageUrl	string	The URL to your terms page

Variables

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

Usage

1
import { ClerkProvider, SignIn } from '@clerk/nextjs';
2
import type { AppProps } from "next/app";
3

4
function MyApp({ pageProps }: AppProps) {
5
  return (
6
    <ClerkProvider {...pageProps} appearance={
7
      {
8
        variables: {
9
          colorPrimary: "red",
10
          colorText: "white"
11
        }
12
      }
13
    }>
14
        <Component {...pageProps}>
15
    </ClerkProvider>
16
  )
17
}
18

19
export default MyApp;

Available options

Name	Description
colorPrimary	The primary color used throughout the components
colorDanger	The color used for error states
colorSuccess	The color used for success states
colorWarning	The color used for warning states
colorAlphaShaded	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
colorTextOnPrimaryBackground	The color used for text on the primary background
colorTextSecondary	The color used for secondary text
colorBackground	The background color for the card container
colorInputText	The color used for text in input fields
colorInputBackground	The background color used for input fields
fontFamily	The font family used throughout the components, by default we inherit the font family
fontFamilyButtons	The font family used for buttons, by default we inherit the font family
fontSize	The font size used throughout the components, by default this is set to 1rem
fontSmoothing	The font smoothing used throughout the components, by default this is set to auto
fontWeight	The font weight used throughout the components, by default this is set to {normal: 400, medium: 500, bold: 600
borderRadius	The border radius used throughout the components, by default this is set to 0.375rem
spacingUnit	The spacing unit used throughout the components, by default this is set to 1rem

Elements

The elements property is used for fine-grained theme overrides, and is useful when for styling specific HTML elements. You can find the element to target by inspecting the HTML and looking for the class name.

An example would be: cl-formButtonPrimary which targets the primary buttons in a Clerk component.

Usage

1
import { ClerkProvider, SignIn } from '@clerk/nextjs';
2
import type { AppProps } from "next/app";
3

4
function MyApp({ pageProps }: AppProps) {
5
  return (
6
    <ClerkProvider {...pageProps} appearance={
7
      {
8
        elements: {
9
          formButtonPrimary: {
10
            backgroundColor: "#2e026d",
11
          }
12
        }
13
      }
14
    }>
15
        <Component {...pageProps}>
16
    </ClerkProvider>
17
  )
18
}
19

20
export default MyApp;

Element Styling Methods

Currently Clerk components can be used with the following styling methods:

CSS Modules
Tailwind CSS
Inline CSS Objects
Global CSS / CSS libraries

CSS Modules

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

1
.primaryColor {
2
  background-color: bisque;
3
  color: black;
4
}

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

1
import styles from "../styles/SignIn.module.css";
2
import { ClerkProvider, SignIn } from "@clerk/nextjs";
3
import type { AppProps } from "next/app";
4

5
function MyApp({ pageProps }: AppProps) {
6
  return (
7
    <ClerkProvider {...pageProps}>
8
      <SignIn
9
        appearance={{
10
          elements: {
11
            formButtonPrimary: styles.primaryColor,
12
          },
13
        }}
14
      />
15
    </ClerkProvider>
16
  );
17
}
18

19
export default MyApp;

Tailwind CSS

1
import { ClerkProvider, SignIn } from "@clerk/nextjs";
2
import type { AppProps } from "next/app";
3

4
function MyApp({ pageProps }: AppProps) {
5
  return (
6
    <ClerkProvider {...pageProps}>
7
      <SignIn
8
        appearance={{
9
          elements: {
10
            formButtonPrimary:
11
              "bg-slate-500 hover:bg-slate-400 text-sm normal-case",
12
          },
13
        }}
14
      />
15
    </ClerkProvider>
16
  );
17
}
18

19
export default MyApp;

Inline CSS Objects

1
import { ClerkProvider, SignIn } from "@clerk/nextjs";
2
import type { AppProps } from "next/app";
3

4
function MyApp({ pageProps }: AppProps) {
5
  return (
6
    <ClerkProvider {...pageProps}>
7
      <SignIn
8
        appearance={{
9
          elements: {
10
            formButtonPrimary: {
11
              fontSize: 14,
12
              textTransform: "none",
13
              backgroundColor: "#611BBD",
14
              "&:hover, &:focus, &:active": {
15
                backgroundColor: "#49247A",
16
              },
17
            },
18
          },
19
        }}
20
      />
21
    </ClerkProvider>
22
  );
23
}
24

25
export default MyApp;

Global CSS

If you prefer you can use a global CSS file to style Clerk components. For example we can override the form button primary styles.

1
.cl-formButtonPrimary {
2
  font-size: 14px;
3
  text-transform: none;
4
  background-color: #611bbd;
5
}
6

7
.cl-formButtonPrimary:hover,
8
.cl-formButtonPrimary:focus,
9
.cl-formButtonPrimary:active {
10
  background-color: #49247a;
11
}

CSS libraries

Instead of using the Clerk-provided classes (the cl- prefixed ones), you can pass the classnames provided by the library into the elements config of the appearance prop.

For example, you can apply Bootstrap button and text utility classes to the primary form button like so:

1
import { ClerkProvider, SignIn } from "@clerk/nextjs";
2
import type { AppProps } from "next/app";
3

4
function MyApp({ pageProps }: AppProps) {
5
  return (
6
    <ClerkProvider {...pageProps}>
7
      <SignIn
8
        appearance={{
9
          elements: {
10
            formButtonPrimary: "btn btn-info text-capitalize",
11
          },
12
        }}
13
      />
14
    </ClerkProvider>
15
  );
16
}
17

18
export default MyApp;