Customizing Clerk
Clerk provides multiple layers of UI customization, along with tools for tailoring navigation menus, email and SMS templates, and localized content. This guide provides an overview of all available customization options and helps you determine which approach best fits your application.
Customization layers
Clerk offers a flexible, layered approach to UI customization. Whether you just want to adjust colors and variables or build a fully custom experience using Clerk's headless APIs, you can choose the level of control that fits your needs.
This section will help you select the right customization layer for your application.
Themes
Clerk provides several prebuilt themes, including a shadcn theme that adapts Clerk's prebuilt components to match your shadcn styling. All themes are defined through the appearance prop and can be packaged as standalone, shareable theme files. Use themes if you want consistent styling across teams or applications, or when one of Clerk's prebuilt themes already aligns with your brand.
The appearance prop
The appearance prop controls customization of Clerk's prebuilt components. The value of the appearance prop is also the basis of a Clerk theme.
Variables
Variables let you customize colors and core design tokens within Clerk's prebuilt components. Choose this option if you like the default UI but only need to make small visual changes.
Bring your own CSS
Clerk assigns stable CSS classes to most elements, allowing you to style them from your own stylesheet, or by using appearance.elements to apply additional classes and styles. For full control over the look of Clerk's prebuilt components, use the built-in simple theme together with your own custom CSS. For more details, see the Bring your own CSS guide.
Build your own UI
Clerk provides low-level primitives that wrap the same API endpoints used to create Clerk's prebuilt components. These primitives allow you to build fully custom user interfaces from scratch. Prebuilt components are recommended when possible to benefit from ongoing updates and reduced maintenance, but Clerk's APIs and guides are available if you need to build your own UI.
Other customization options
Theme editor
Clerk's theme editor is an interactive tool that lets you preview and test different Clerk themes across a selection of prebuilt components. It provides a quick way to experiment with styling options and see how each theme affects the component UI in real time.
Custom menu items
Clerk's navigation components support adding custom menu items. This allows you to extend the default navigation options with additional custom pages and external links, or adjust the order of existing menu items to better fit your workflow and user experience. This feature is available for the following components:
Email and SMS templates
Clerk provides a templating system that allows you to customize the content and styling of email and SMS messages sent to your users. This template editor can also be useful for translating content to different languages or tailoring messages to better fit your brand. For more details, refer to the Email and SMS templates guide
Localization
Clerk's prebuilt components support localization through the localization prop. This prop lets you override any text string in any component, allowing you to translate UI text for your users or adjust wording to better match your application's brand.
Feedback
Last updated on