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.

Start building

// 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.

Start Now,
No Strings Attached

Start completely free for up to 5,000 monthly active users and up to 10 monthly active orgs. No credit card required.

Start building

Pricing built for

businesses of all sizes.

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

View pricing

Newsletter!

The latest news and updates from Clerk, sent to your inbox.