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
import { ClerkProvider } from '@clerk/nextjs';
<ClerkProvider
appearance={{
layout: {
socialButtonsPlacement: 'bottom',
socialButtonsVariant: 'iconButton',
termsPageUrl: 'https://clerk.com/terms'
}
}}
>
{/* ... */}
</ClerkProvider>;- Name
helpPageUrl- Type
string- Description
The URL to your help page.
- Name
logoImageUrl- Type
string- Description
The URL to your logo image.
- Name
logoPlacement- Type
'inside' | 'outside'- Description
The placement of your logo.
- Name
logoLinkUrl- Type
string- Description
Controls where the browser will redirect to after the user clicks the application logo.
- Name
privacyPageUrl- Type
string- Description
The URL to your privacy page.
- Name
showOptionalFields- Type
boolean- Description
Whether to show optional fields on sign up.
- Name
socialButtonsPlacement- Type
'bottom' | 'top'- Description
The placement of your social buttons.
- Name
socialButtonsVariant- Type
'blockButton' | 'iconButton' | 'auto'- Description
The variant of your social buttons.
- Name
termsPageUrl- Type
string- Description
The URL to your terms page.
- Name
shimmer- Type
boolean- Description
This option enables the shimmer animation for the avatars of
<UserButton />and<OrganizationSwitcher />.
- Name
animations- Type
boolean- Description
Whether to enable animations inside the components.