Layout

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

Usage

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

Properties

Name	Type	Description
`helpPageUrl`	`string`	The URL to your help page.
`logoImageUrl`	`string`	The URL to your logo image.
`logoPlacement`	`'inside' \| 'outside'`	The placement of your logo.
`logoLinkUrl`	`string`	Controls where the browser will redirect to after the user clicks the application logo.
`privacyPageUrl`	`string`	The URL to your privacy page.
`showOptionalFields`	`boolean`	Whether to show optional fields on sign up.
`socialButtonsPlacement`	`'bottom' \| 'top'`	The placement of your social buttons.
`socialButtonsVariant`	`'blockButton' \| 'iconButton' \| 'auto'`	The variant of your social buttons.
`termsPageUrl`	`string`	The URL to your terms page.
`shimmer`	`boolean`	This option enables the shimmer animation for the avatars of `<UserButton />` and `<OrganizationSwitcher />`.
`animations`	`boolean`	Whether to enable animations inside the components.

Last updated on February 16, 2024