Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

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.
logoPlacement'inside' | 'outside'The placement of your logo.
privacyPageUrlstringThe URL to your privacy page.
showOptionalFieldsbooleanWhether to show optional fields on sign up.
socialButtonsPlacement'bottom' | 'top'The placement of your social buttons.
socialButtonsVariant'blockButton' | 'textButton' | 'auto'The variant of your social buttons.
termsPageUrlstringThe URL to your terms page.

What did you think of this content?

Clerk © 2024