Customization

Overview

When your users are going through the authentication process, you need to make sure they have a seamless experience. Clerk allows you to customize the look and feel of your components to match the rest of your application using theming options.By using the theming options, you can change visual elements of your authentication flow like:

• Font colors
• Button colors
• Border styles
• and more...

Components can be customized with the theme prop or by defining Clerk-specific CSS variables. Both ways are described in this guide.

Using the theme prop

To customize your components using the theme prop, you need to provide an object to <ClerkProvider /> with the parameters you wish to change.

1
import { ClerkProvider } from "@clerk/clerk-react";
2

3
const customTheme = {...};
4

5
function App(){
6
    
7
    return (
8
        <ClerkProvider theme={customTheme}>
9
            {/* Your wrapped application. */}
10
        </ClerkProvider>
11
    );
12
}

1
import { ClerkProvider } from "@clerk/clerk-react";
2
import { ClerkThemeOptions } from "@clerk/types" 
3

4
const customTheme: ClerkThemeOptions = {...};
5

6
function App(){
7
    
8
    return (
9
        <ClerkProvider theme={customTheme}>
10
            {/* Your wrapped application. */}
11
        </ClerkProvider>
12
    );
13
}

Now all components rendered as a child of <ClerkProvider /> will inherit the theme options you have defined. There is no need to change any individual component, the theme changes are applied automatically.

Custom theme properties

The theme object should conform to the ClerkThemeOptions interface. An example of the options you can pass on the theme prop is shown below:

const customThemeOptions = {
  general: {
    /* Primary color */
    color: "#f1f1f1",
    
    /* Components background color */
    backgroundColor: "#f2f2f2",
    
    /* Components font color */
    fontColor: "#f3f3f3",
   
     /* Components font family */
    fontFamily: "Inter, sans serif",
    
    /* Components label font weight */
    labelFontWeight: "500",
    
    /* Padding mod for selected Clerk elements */
    padding: "1em",
    
    /* Border radius for selected Clerk elements */
    borderRadius: "20px",
    
    /* Box shadow applied on form Clerk components */
    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
  },
  buttons: {
    /* Clerk buttons font color */
    fontColor: "#f4f4f4",
    
    /* Clerk buttons font family */
    fontFamily: "Inter, sans serif",
    
    /* Clerk buttons font weight */
    fontWeight: "300",
  },
}

Using CSS variables

To customize components using CSS variables, you need to define the properties you wish to override under the .cl-component scope.

.cl-component {
  // your Clerk theming options go here
}

Available CSS variables

The available CSS variables you can override can be seen below:

.cl-component {
    /* Primary color */
    --clerk-primary: #335bf1;
    
    /* Components background color */
    --clerk-background-color: #ffffff;
    
    /* Components font color */    
    --clerk-font-color: #151515;

    /* Components font family */
    --clerk-font-family: "Inter", sans-serif;

    /* Components label font weight */
    --clerk-label-font-weight: 600;    

    /* Padding mod for selected Clerk elements */    
    --clerk-padding-mod: 1;

    /* Border radius for selected Clerk elements */
    --clerk-border-radius: 0.5em;
    
    /* Box shadow applied on form Clerk components */
    --clerk-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    
    /* Clerk buttons font color */    
    --clerk-button-font-color: #ffffff;

    /* Clerk buttons font family */
    --clerk-button-font-family: "Inter", sans-serif;

    /* Clerk buttons font weight */    
    --clerk-button-font-weight: 600;
  }

Showcase

Below you can find three different examples showcasing the capabilities of Clerk's theme customization.

1
// Supplying a theme prop
2
const futuristicThemeOptions = {
3
  general: {
4
    color: "#05f4b7",
5
    backgroundColor: "#12151f",
6
    fontColor: "#05f4b7",
7
    borderRadius: "20px",
8
    boxShadow: "2px 4px 12px #05f4b7",
9
  },
10
  buttons: {
11
    fontColor: "#fff",
12
  },
13
}
14

15

16

17
// Using CSS variables.
18
.cl-component {
19
  --clerk-border-radius: 20px;
20
  --clerk-primary: #05f4b7;
21
  --clerk-font-color: #05f4b7;
22
  --clerk-background-color: #12151f;
23
  --clerk-button-font-color: #fff;
24
  --clerk-box-shadow: 2px 4px 12px #05f4b7;
25
}

1
// Supplying a theme prop
2
const professionalThemeOptions = {
3
  general: {
4
    color: "#fb8122",
5
    backgroundColor: "#e1e2e2",
6
    fontColor: "#1d2228",
7
    labelFontWeight: "300",
8
    borderRadius: "0px",
9
  },
10
  buttons: {
11
    fontColor: "#fff",
12
  },
13
}
14

15

16

17
// Using CSS variables.
18
.cl-component {
19
  --clerk-border-radius: 0px;
20
  --clerk-primary: #fb8122;
21
  --clerk-font-color: #1d2228;
22
  --clerk-label-font-weight: 300;
23
  --clerk-background-color: #e1e2e2;
24
  --clerk-button-font-color: #fff;
25
}

1
// Supplying a theme prop
2
const heartyThemeOptions = {
3
  general: {
4
    color: "#ef0d50",
5
    backgroundColor: "#e1f2f7",
6
    fontColor: "#ef0d50",
7
    labelFontWeight: "bold",
8
    borderRadius: "12px",
9
    boxShadow: "10px 0px 12px 6px #ef0d50",
10
  },
11
  buttons: {
12
    fontColor: "#fff",
13
  },
14
}
15

16
// Using CSS variables.
17
.cl-component {
18
  --clerk-border-radius: 12px;
19
  --clerk-primary: #ef0d50;
20
  --clerk-font-color: #ef0d50;
21
  --clerk-label-font-weight: bold;
22
  --clerk-background-color: #e1f2f7;
23
  --clerk-button-font-color: #fff;
24
  --clerk-box-shadow: 10px 0px 12px 6px #ef0d50;
25
}

Need more?

If you need more customization capabilities for your use-case, please reach out to any of our community channels. We are constantly evaluating new customization options and would love to hear your feedback!

If you require complete customization, you can also implement ClerkJS custom flows, which leverage the same underlying APIs that are used to build our components.​