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`	`string`	The placement of your logo. The options are: `inside` `outside`
`privacyPageUrl`	`string`	The URL to your privacy page
`showOptionalFields`	`boolean`	Whether to show optional fields on sign up.
`socialButtonsPlacement`	`string`	The placement of your social buttons. The options are: `bottom` `top`
`socialButtonsVariant`	`string`	The variant of your social buttons. The options are: `blockButton` `textButton` `auto`
`termsPageUrl`	`string`	The URL to your terms page