Options prop

Available in other SDKs

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 false to prevent components from auto-focusing any input fields. Defaults to true.

• 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 , , , , , and session task components (, , ). Does not affect profile components (, ) or popover components (, ), 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 href of the link. If a value is not passed in, the components will use the Home URL as set in the Clerk Dashboard. Defaults to undefined.

• 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 to true.

• 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 blockButton if you have less than 3 social providers enabled, otherwise iconButton will 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.

Usage

Pass the appearance prop to the 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>