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.

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

app.tsx
import { ClerkProvider } from '@clerk/nextjs';

<ClerkProvider
  appearance={{
    layout: {
      socialButtonsPlacement: 'bottom',
      socialButtonsVariant: 'iconButton',
      termsPageUrl: 'https://clerk.com/terms'
    }
  }}
>
  {/* ... */}
</ClerkProvider>;
astro.config.mjs
import clerk from '@clerk/astro'

export default defineConfig({
  integrations: [
    clerk({
      appearance: {
        layout: {
          socialButtonsPlacement: 'bottom',
          socialButtonsVariant: 'iconButton',
          termsPageUrl: 'https://clerk.com/terms',
        },
      },
    }),
  ],
})
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')
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@clerk/nuxt'],
  clerk: {
    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