Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

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 our appearance prop.

The appearance prop can be applied to <ClerkProvider/> to share styles across every component, or individually to <SignUp/>, <SignIn/>, <UserProfile/>, and <UserButton/>.

  1. Start by choosing the baseTheme that most closely matches your brand
  2. Modify the placement of elements like social sign-in buttons with layout
  3. Set global styles like the primary color with variables
  4. Apply custom CSS to individual HTML elements with elements

Documentation

The Clerk appearance prop documentation can be found below:

  • Appearance prop
  • CSS Modules
  • Tailwind CSS
  • Inline CSS
  • Global CSS

Was this helpful?

Clerk © 2022