Customization
Learn to customize the look and feel of Clerk's components to match your application.
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...
The customization options detailed here are a code-side alternative to instance-level theming configured through the Clerk dashboard. Every theming option provided at code-side will be merged with the theming defined in your application dashboard.
Components can be customized with the theme
prop or by defining Clerk-specific CSS variables. Both ways are described in this guide.
Customization options have an order of precedence from which overrides are applied. This precedence order is shown below:
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.
1import { ClerkProvider } from "@clerk/clerk-react";23const customTheme = {...};45function App(){67return (8<ClerkProvider theme={customTheme}>9{/* Your wrapped application. */}10</ClerkProvider>11);12}
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 prop2const futuristicThemeOptions = {3general: {4color: "#05f4b7",5backgroundColor: "#12151f",6fontColor: "#05f4b7",7borderRadius: "20px",8boxShadow: "2px 4px 12px #05f4b7",9},10buttons: {11fontColor: "#fff",12},13}14151617// 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}
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.