Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

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

NameTypeDescription
helpPageUrlstringThe URL to your help page
logoImageUrlstringThe URL to your logo image
logoPlacementstring The placement of your logo. The options are:
  • inside
  • outside
privacyPageUrlstringThe URL to your privacy page
showOptionalFieldsbooleanWhether to show optional fields on sign up.
socialButtonsPlacementstring The placement of your social buttons. The options are:
  • bottom
  • top
socialButtonsVariantstring The variant of your social buttons. The options are:
  • blockButton
  • textButton
  • auto
termsPageUrlstringThe URL to your terms page

What did you think of this content?

Clerk © 2023