║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: 'Layout prop' description: Utilize Clerk's layout prop in order to change the layout of the <SignIn /> and <SignUp /> components, as well as set important links to your support, terms and privacy pages.

{/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L538 */}

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

<Properties> - `animations` - `boolean`

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

---

• helpPageUrl
• string

The URL to your help page.

---

• logoImageUrl
• string

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.

---

• logoLinkUrl
• string

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.

---

• logoPlacement
• 'inside' | 'outside'

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

---

• privacyPageUrl
• string

The URL to your privacy page.

---

• shimmer
• boolean

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

---

• showOptionalFields
• boolean

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

---

• socialButtonsPlacement
• 'bottom' | 'top'

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

---

• socialButtonsVariant
• 'blockButton' | 'iconButton' | 'auto'

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.

---

• termsPageUrl
• string

The URL to your terms page.

---

• unsafe_disableDevelopmentModeWarnings
• boolean

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

Usage

<Tabs items={["Next.js", "Astro", "Vue", "Nuxt"]}> <Tab> ```tsx {{ prettier: false, filename: 'app.tsx' }} import { ClerkProvider } from '@clerk/nextjs';

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

</Tab> <Tab> ```js {{ filename: 'astro.config.mjs' }} import clerk from '@clerk/astro'

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

</Tab> <Tab> ```ts {{ filename: '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')
```

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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║