# 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                                   | Type                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animations                             | boolean                                 | Whether to enable animations inside the components. Defaults to true.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| autoFocus                              | boolean                                 | 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| elevation                              | 'raised' | 'flush'                     | 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'. |
| helpPageUrl                            | string                                  | The URL to your help page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| logoImageUrl                           | string                                  | 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| logoLinkUrl                            | string                                  | 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| logoPlacement                          | 'inside' | 'outside'                   | The placement of your logo. Defaults to 'inside'.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| privacyPageUrl                         | string                                  | The URL to your privacy page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| shimmer                                | boolean                                 | This option enables the shimmer animation for the avatars of <UserButton /> and <OrganizationSwitcher />. Defaults to true.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| showOptionalFields                     | boolean                                 | Whether to show optional fields on the sign in and sign up forms. Defaults to false.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| socialButtonsPlacement                 | 'bottom' | 'top'                       | The placement of your social buttons. Defaults to 'top'.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| socialButtonsVariant                   | 'blockButton' | 'iconButton' | 'auto' | 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| termsPageUrl                           | string                                  | The URL to your terms page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| unsafe\_disableDevelopmentModeWarnings | boolean                                 | 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 [<ClerkProvider>](https://clerk.com/docs/nextjs/reference/components/clerk-provider.md) component. The `appearance` prop accepts the `options` property, which can be used to apply different changes to the widget.

```tsx
<ClerkProvider
  appearance={{
    options: {
      socialButtonsPlacement: 'bottom',
      socialButtonsVariant: 'iconButton',
      termsPageUrl: 'https://clerk.com/terms',
    },
  }}
>
  {/* ... */}
</ClerkProvider>
```

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)