Skip to main content
Docs

Layout prop

The layout property can be used to change the layout of the <SignIn/> and <SignUp/> components, as well as set important links to your support, terms, and privacy pages.

It is passed as a parameter to the appearance prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the <ClerkProvider> component. For other SDKs, it's configured through the SDK's Clerk integration or plugin.

Properties

  • Name
    animations
    Type
    boolean
    Description

    Whether to enable animations inside the components. Defaults to true.

  • Name
    helpPageUrl
    Type
    string
    Description

    The URL to your help page.

  • Name
    logoImageUrl
    Type
    string
    Description

    The URL to your logo image. By default, the components will use the logo you've set in the Clerk Dashboard. This option is helpful when you need to display different logos for different themes, for example: white logo on dark themes, black logo on light themes.

  • Name
    logoLinkUrl
    Type
    string
    Description

    Controls where the browser will redirect to after the user clicks the application logo. If a URL is provided, it will be used as the href of the link. If a value is not passed in, the components will use the Home URL as set in the Clerk Dashboard. Defaults to undefined.

  • Name
    logoPlacement
    Type
    'inside' | 'outside'
    Description

    The placement of your logo. Defaults to 'inside'.

  • Name
    privacyPageUrl
    Type
    string
    Description

    The URL to your privacy page.

  • Name
    shimmer
    Type
    boolean
    Description

    This option enables the shimmer animation for the avatars of <UserButton /> and <OrganizationSwitcher />. Defaults to true.

  • Name
    showOptionalFields
    Type
    boolean
    Description

    Whether to show optional fields on the sign in and sign up forms. Defaults to true.

  • Name
    socialButtonsPlacement
    Type
    'bottom' | 'top'
    Description

    The placement of your social buttons. Defaults to 'top'.

  • Name
    socialButtonsVariant
    Type
    'blockButton' | 'iconButton' | 'auto'
    Description

    The variant of your social buttons. By default, the components will use blockButton if you have less than 3 social providers enabled, otherwise iconButton will be used.

  • Name
    termsPageUrl
    Type
    string
    Description

    The URL to your terms page.

  • Name
    unsafe_disableDevelopmentModeWarnings
    Type
    boolean
    Description

    Whether development warnings show up in development mode. Only enable this if you want to preview how the components will look in production.

Usage

For React-based SDKs, pass the layout property to the appearance prop of the <ClerkProvider> component.

<ClerkProvider
  appearance={{
    layout: {
      socialButtonsPlacement: 'bottom',
      socialButtonsVariant: 'iconButton',
      termsPageUrl: 'https://clerk.com/terms',
    },
  }}
>
  {/* ... */}
</ClerkProvider>

In Astro, pass the layout property to the appearance prop of the clerk()Astro Icon integration.

astro.config.mjs
import clerk from '@clerk/astro'

export default defineConfig({
  integrations: [
    clerk({
      appearance: {
        layout: {
          socialButtonsPlacement: 'bottom',
          socialButtonsVariant: 'iconButton',
          termsPageUrl: 'https://clerk.com/terms',
        },
      },
    }),
  ],
})

In JavaScript, pass the layout property to the appearance prop of the clerk.load()JavaScript Icon method.

Use the following tabs to view the code necessary for each file.

main.js
import { Clerk } from '@clerk/clerk-js'

const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load({
  appearance: {
    layout: {
      socialButtonsPlacement: 'bottom',
      socialButtonsVariant: 'iconButton',
      termsPageUrl: 'https://clerk.com/terms',
    },
  },
})

if (clerk.isSignedIn) {
  document.getElementById('app').innerHTML = `
      <div id="user-button"></div>
    `

  const userButtonDiv = document.getElementById('user-button')

  clerk.mountUserButton(userButtonDiv)
} else {
  document.getElementById('app').innerHTML = `
      <div id="sign-in"></div>
    `

  const signInDiv = document.getElementById('sign-in')

  clerk.mountSignIn(signInDiv)
}
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js" async crossorigin="anonymous"></script>
  </body>
</html>

In Vue, pass the layout property to the appearance prop of the clerkPlugin()Vue.js Icon integration.

src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { clerkPlugin } from '@clerk/vue'

const app = createApp(App)
app.use(clerkPlugin, {
  appearance: {
    layout: {
      socialButtonsPlacement: 'bottom',
      socialButtonsVariant: 'iconButton',
      termsPageUrl: 'https://clerk.com/terms',
    },
  },
})
app.mount('#app')

In Nuxt, pass the layout property to the appearance prop of the defineNuxtConfig()Nuxt.js Icon integration.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@clerk/nuxt'],
  clerk: {
    appearance: {
      layout: {
        socialButtonsPlacement: 'bottom',
        socialButtonsVariant: 'iconButton',
        termsPageUrl: 'https://clerk.com/terms',
      },
    },
  },
})

In Fastify, pass the layout property to the appearance prop of the clerkPlugin()Fastify Icon integration.

src/main.ts
import Fastify from 'fastify'
import { clerkPlugin } from '@clerk/fastify'

const fastify = Fastify({ logger: true })

fastify.register(clerkPlugin, {
  appearance: {
    layout: {
      socialButtonsPlacement: 'bottom',
      socialButtonsVariant: 'iconButton',
      termsPageUrl: 'https://clerk.com/terms',
    },
  },
})

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on