The appearance prop can be applied to `` 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`. ```bash npm install @clerk/themes ``` ### Usage ```tsx import { dark } from '@clerk/themes'; import { ClerkProvider, SignIn } from '@clerk/nextjs'; import type { AppProps } from "next/app"; function MyApp({ pageProps }: AppProps) { return ( ) } export default MyApp; ``` ## Layout The layout key can be used to change the layout of the `` and `` components as well as important links to your support, terms and privacy pages. ### Usage ```tsx import { ClerkProvider, SignIn } from '@clerk/nextjs'; import type { AppProps } from "next/app"; function MyApp({ pageProps }: AppProps) { return ( ) } 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` \n - `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 ```tsx import { ClerkProvider, SignIn } from '@clerk/nextjs'; import type { AppProps } from "next/app"; function MyApp({ pageProps }: AppProps) { return ( ) } 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 | | colorAlphaShade | 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 ```tsx import { ClerkProvider, SignIn } from '@clerk/nextjs'; import type { AppProps } from "next/app"; function MyApp({ pageProps }: AppProps) { return ( ) } 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. ```css .primaryColor { background-color: bisque; color: black; } ``` Then you can apply this by importing the file and using the classes whenever required: ```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 ( ); } export default MyApp; ``` ### Tailwind CSS ```tsx import { ClerkProvider, SignIn } from "@clerk/nextjs"; import type { AppProps } from "next/app"; function MyApp({ pageProps }: AppProps) { return ( ); } export default MyApp; ``` ### Inline CSS Objects ```tsx import { ClerkProvider, SignIn } from "@clerk/nextjs"; import type { AppProps } from "next/app"; function MyApp({ pageProps }: AppProps) { return ( ); } 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. ```css .cl-formButtonPrimary { font-size: 14px; text-transform: none; background-color: #611bbd; } .cl-formButtonPrimary:hover, .cl-formButtonPrimary:focus, .cl-formButtonPrimary:active { background-color: #49247a; } ``` ### 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: ```tsx import { ClerkProvider, SignIn } from "@clerk/nextjs"; import type { AppProps } from "next/app"; function MyApp({ pageProps }: AppProps) { return ( ); } export default MyApp; ```

Appearance Prop

Customize components to match your brand using the appearance prop