Join us for Clerk Office Hours on September 29th at 2pm Eastern

Component

customization

You know what looks good. Use Clerk’s customizable components to design a user experience that perfectly matches the style of your application.

Seeing is believing

Choose a theme to see how Clerk components

can be changed to match any application.

// Default light theme from ClerkProvider

Beauty runs code-deep

Use the appearance prop to completely customize

behavior and appearance of Clerk components.

Layout

Change the structure and placement of elements within Clerk components with the layout property.

<SignIn
appearance={{
layout: {
socialButtonsVariant: 'iconButton',
socialButtonsPlacement: 'bottom',
}
variables: { /* ... */ },
elements: { /* ... */ }
}}
/>

READ DOCUMENTATION

View tutorial

Watch as we demonstrate the powerful appearance

prop to give components some custom style.

Watch our video to learn more

Ready to see what Clerk can do?

Start completely free for up to 500 monthly active users.
No credit card required.

Start building

Pricing

Learn more about our transparent per-user costs to estimate how much your company could save by implementing Clerk.