Options prop
The options property can be used to change the layout and behavior of Clerk's prebuilt components, as well as set important links to your support, terms, and privacy pages.
Properties
- Name
animations- Type
boolean- Description
Whether to enable animations inside the components. Defaults to
true.
- Name
autoFocus- Type
boolean- Description
Whether inputs automatically receive focus when a component is mounted. Set to
falseto prevent components from auto-focusing any input fields. Defaults totrue.
- Name
elevation- Type
'raised' | 'flush'- Description
Controls the visual elevation of card-based components.
'raised'renders the card with its border, box-shadow, border-radius, and padding.'flush'removes the card border, box-shadow, border-radius, outer padding, and footer background so the component sits flat against its container. Applies to page-mounted card-based components such as <SignIn />, <SignUp />, <Waitlist />, <CreateOrganization />, <OrganizationList />, and session task components (<TaskChooseOrganization />, <TaskResetPassword />, <TaskSetupMFA />). Does not affect profile components (<UserProfile />, <OrganizationProfile />) or popover components (<UserButton />, <OrganizationSwitcher />), which always render as raised. When a component is opened as a modal, it always renders as raised regardless of this setting. Defaults to'raised'.
- Name
helpPageUrl- Type
string- Description
The URL to your help page.
- Name
logoImageUrl- Type
string- Description
The URL to your logo image. By default, the components will use the logo you've set in the Clerk Dashboard. This option is helpful when you need to display different logos for different themes, for example: white logo on dark themes, black logo on light themes.
- Name
logoLinkUrl- Type
string- Description
Controls where the browser will redirect to after the user clicks the application logo. If a URL is provided, it will be used as the
hrefof the link. If a value is not passed in, the components will use the Home URL as set in the Clerk Dashboard. Defaults toundefined.
- Name
logoPlacement- Type
'inside' | 'outside'- Description
The placement of your logo. Defaults to
'inside'.
- Name
privacyPageUrl- Type
string- Description
The URL to your privacy page.
- Name
shimmer- Type
boolean- Description
This option enables the shimmer animation for the avatars of
<UserButton />and<OrganizationSwitcher />. Defaults totrue.
- Name
showOptionalFields- Type
boolean- Description
Whether to show optional fields on the sign in and sign up forms. Defaults to
false.
- Name
socialButtonsPlacement- Type
'bottom' | 'top'- Description
The placement of your social buttons. Defaults to
'top'.
- Name
socialButtonsVariant- Type
'blockButton' | 'iconButton' | 'auto'- Description
The variant of your social buttons. By default, the components will use
blockButtonif you have less than 3 social providers enabled, otherwiseiconButtonwill be used.
- Name
termsPageUrl- Type
string- Description
The URL to your terms page.
- Name
unsafe_disableDevelopmentModeWarnings- Type
boolean- Description
Whether development warnings show up in development mode. Only enable this if you want to preview how the components will look in production.
Pass the appearance prop to the <ClerkProvider> component. The appearance prop accepts the options property, which can be used to apply different changes to the widget.
<ClerkProvider
appearance={{
options: {
socialButtonsPlacement: 'bottom',
socialButtonsVariant: 'iconButton',
termsPageUrl: 'https://clerk.com/terms',
},
}}
>
{/* ... */}
</ClerkProvider>Feedback
Last updated on