{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":["CodeBlockCustom","CodeItem","LightboxImage","Notification"]},"type":"markdown"},"seo":{"title":"Styling options","siteUrl":"https://developers.frontegg.com/","llmstxt":{"title":"Frontegg Developer Documentation","description":"Authentication, authorization, and user management for Customer Identity, plus Agen for SaaS and Agen for Work. Guides, SDKs, and API references.","sections":[{"title":"Customer Identity (CIAM)","description":"Auth, SSO, SCIM, entitlements, and user management — guides, SDKs, and APIs.","includeFiles":["ciam/**/*.md"],"excludeFiles":[]},{"title":"Agen for SaaS","description":"Agentic access and authorization for SaaS products.","includeFiles":["agen-for-saas/**/*.md"],"excludeFiles":[]},{"title":"Agen for Work","description":"Agentic access and authorization for internal and workforce use.","includeFiles":["agen-for-work/**/*.md"],"excludeFiles":[]},{"title":"Platform","description":"Shared platform overview.","includeFiles":["platform/**/*.md"],"excludeFiles":[]}],"excludeFiles":["internal-docs/**","ciam/guides/env-settings/inject-client-ip.md","CLAUDE.md",".claude/**","**/images/**"],"hide":false}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling-options","__idx":0},"children":["Styling options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]}," attribute allows you to customize style elements at your login-box level and provides additional flexibility for the sub-attributes and pages linked to it (such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["activate account"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["forgot password"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MFA"]}," etc.)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"changing-the-logo","__idx":1},"children":["Changing the logo"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Changing the default logo is a great example of customizing your login box appearance. To change your logo, insert your desired image within the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logo"]}," property of your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeOptions"]}," object, like so:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"themeOptions: FronteggThemeOptions = {\n loginBox: {\n logo: {\n image: 'https://assets.frontegg.com/public-frontegg-assets/acme-logo.svg'\n },\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which results in the following:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-1.4fcb084d7d98a18fe81ec0f3293f0503bb3a0d62ab4be0344e62a45d6585fae4.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"changing-default-styling-examples","__idx":2},"children":["Changing default styling examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, the Frontegg login box has a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["modern"]}," theme that looks like this:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-2.4c7f27cf76fd3441e605484dda7e0a9dad42e5327b10d08a7802ffae334bb108.7ed0131e.png","alt":"login-style-2"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To change the theme name programmatically, you can do so under the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeName"]}," key:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"\nconst themeOptions: FronteggThemeOptions = {\n loginBox: {\n themeName: 'classic',\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the above case, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["classic"]}," theme overrides the default and results in the following:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-3.ba54ddeac00636e9faaf274739c8933cf4576ca3990b9868ea94f350909ae874.7ed0131e.png","alt":"login-style-3"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Available themes"]}," ","The theme names you can use are: modern, classic, vivid, and dark."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"changing-the-browser-title","__idx":3},"children":["Changing the browser title"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Changing the browser title is available under the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["docTitle"]}," key, like so:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"//Required versions for embedded:\n//@frontegg/react@5.0.4\n//@frontegg/angular@5.4.0\n//@frontegg/vue@2.0.5\n//@frontegg/nextjs@6.5.0\n\n\nconst themeOptions: FronteggThemeOptions = {\n loginBox: {\n login:{\n docTitle: 'Login browser title'\n },\n signup: {\n docTitle: 'Signup browser title'\n }\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Resulting in the following:"]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-4.ab5919fa474ce3d94f261a9301112d3e847ddf857b42de1f54d8d07066f1c59d.7ed0131e.png","alt":"login-style-4"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"changing-the-background-image","__idx":4},"children":["Changing the background image"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Changing the background image of the entire page is available by using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rootStyle"]}," attribute of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]},":"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import backgroundImage from '../assets/gradient';\n\nconst themeOptions: FronteggThemeOptions = {\n loginBox: {\n rootStyle: {\n backgroundImage: backgroundImage\n }\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which looks like:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-5.36a78b92bd338bd5e7410ac06a53b76addc395afdaa9d1edb1548c08e14a9fa1.7ed0131e.png","alt":"login-style-5"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"flat-design","__idx":5},"children":["Flat design"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To control the appearance of the box, you can change the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boxStyle"]}," attribute within your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]}," :",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n boxStyle: {\n boxShadow: 'none',\n background: 'transparent'\n },\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which looks like:"," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-6.ec06352ee12259898852e31bcff612be65e888d03f35b8905338a7d2c89e8436.7ed0131e.png","alt":"login-style-6"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"adding-a-footer-to-the-login-box","__idx":6},"children":["Adding a footer to the login box"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In some use cases, you'd want to add a footer that includes your ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["terms of use"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["privacy policy"]},".",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Adding such a footer at the login-box level will cause the footer to appear in all the login-box pages. Here is an example:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions = {\n loginBox: {\n boxFooter: () => {\n return (\n \n By continuing up I agree to Acme's{' '}\n \n Terms of Service\n {' '}\n and{' '}\n \n Privacy Policy.\n \n \n )\n }\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which generates the following:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-7.96e259c750c3318c639b63329c566580247a30076be292e3abfa6cc7e121ac82.7ed0131e.png","alt":"login-style-7"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The same footer can be applied only to a specific page, e.g., the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Signup"]}," page, by moving it under the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]}," section as done below:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n signup: {\n boxFooter: () => {\n return (\n
\n ...\n
\n )\n }\n }\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which removes it from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Sign in"]}," page and adds it to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Sign up"]}," page:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-8.83230856edac7032ea32d703cf6eddef17c154c8cd8fedb298556c099f11fc22.7ed0131e.png","alt":"login-style-8"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Additionally, you can place the footer ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["outside"]}," of the login box (on the page) as done below:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n signup: {\n pageFooter: () => {\n return (\n
\n ...\n
\n )\n }\n }\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which generates the following:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-9.e49de8fbf0e9634c43bbb6ab48bb106db1e4815e635b54e5fefec61fca9ffa23.7ed0131e.png","alt":"login-style-9"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"split-layout-for-the-login-box","__idx":7},"children":["Split layout for the login box"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In some of the cases, you will choose to have the login and signup forms not in the center of the dialog, but split with some marketing or commercials messaging on the right of it."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The way to achieve it is via the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["layout"]}," property of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]}," as the snippet below shows."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n layout: {\n type: 'float-left',\n splitSize: 50,\n sideElement: () => {\n return
\n \"Hackers\"/\n
\n },\n sideElementStyle: {\n width: '50%'\n }\n }\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which results in the following:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-10.e7c2c815df2c29691306d8dd48d87ca6c4e7ba5ad066fb3aa51178e9b55bcda5.7ed0131e.png","alt":"login-style-10"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customizing-the-social-login-buttons","__idx":8},"children":["Customizing the social login buttons"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, the social login buttons are spread horizontally on the same row.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"You can change the way that they are spread from a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["row"]}," flex mode to a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["column"]}," flex as done below:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"\nconst themeOptions: FronteggThemeOptions = {\n loginBox: {\n socialLogins: {\n containerStyle: {\n display: 'flex',\n flexDirection: 'column',\n },\n buttonStyle: {\n base: {\n marginTop: '10px'\n }\n }\n },\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which orders the buttons like this:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-11.2ab92e810078291eefbd0b5f8e80a9a85592c86229a7062acdd17811591817f0.7ed0131e.png","alt":"login-style-11"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"removing-the-text-from-the-buttons","__idx":9},"children":["Removing the text from the buttons"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you want to remove the text of the social login buttons and leave it with icons only, this is possible as well using the snippet below:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n socialLogins: {\n iconsOnly: true,\n },\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which looks like this:"," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-12.6ff7fff9b19f623b4c849305c930e7dec679b3072973c62a8cbff6da3c335bbe.7ed0131e.png","alt":"login-style-12"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"changing-the-colors-of-the-social-login-buttons","__idx":10},"children":["Changing the colors of the social login buttons"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can control the colors of the social login buttons by overriding the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonStyle"]}," property on the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["socialLogins"]}," buttons section:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n socialLogins: {\n buttonStyle: {\n base: {\n borderRadius: '0.5rem',\n color: '#000',\n background: '#fff',\n border: '0.5px solid black'\n }\n },\n },\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which looks like this:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-13.9ef03d97ecefe57373e786107568ce5967427255d463834a778d1f666b14222d.7ed0131e.png","alt":"login-style-13"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"controlling-the-social-logins-divider","__idx":11},"children":["Controlling the social logins divider"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can change the style of the divider using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dividerStyle"]}," attribute under the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["socialLogins"]}," property of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]},":"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n socialLogins: {\n dividerStyle: {\n backgroundColor: '#f5f5f5',\n borderColor: '#f5f5f5',\n borderWidth: '1px',\n borderStyle: 'solid',\n marginTop: '10px',\n marginBottom: '10px',\n }\n },\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which results the following:"]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-14.844c7258e724f2c9e01bd1a1b0b1ad33e8b7d527ca4abd3df3440db9bc43cd71.7ed0131e.png","alt":"login-style-14"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Not enough? Want to implement your own divider? We got you covered!"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import React from \"react\";\nimport contextOptions from './context-options';\nimport {FronteggProvider, FronteggThemeOptions} from \"@frontegg/react\";\n\nconst themeOptions: FronteggThemeOptions = {\n loginBox: {\n socialLogins: {\n divider: () => {\n return
My super duper divider
\n },\n },\n }\n}\n\nconst Provider = () => (\n \n
\n \n);\n\nexport default Provider;\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/ciam/sdks/components/fronteggappoptions#contextoptions"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["contextOptions"]}]}," for more information."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customizing-the-inputs","__idx":12},"children":["Customizing the inputs"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customizing the style of the inputs on the login box is available using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inputTheme"]}," under the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]}," section:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n inputTheme: {\n base: {\n backgroundColor: '#f5f5f5',\n borderColor: '#e5e5e5',\n color: '#333',\n borderRadius: '4px',\n borderWidth: '1px',\n borderStyle: 'solid',\n boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\n fontSize: '14px',\n fontWeight: '400',\n height: '40px',\n padding: '0 15px',\n transition: 'border-color .2s ease-in-out, box-shadow .2s ease-in-out',\n },\n }\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which looks like this:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-15.38754f909cb8c0b3b98fee447685ea4fb08bbf2e2856c69f34ca389d1f6c30ae.7ed0131e.png","alt":"login-style-15"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"customizing-the-links","__idx":13},"children":["Customizing the links"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The links (such as the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Don't have an account? Sign up"]},") on the login box can be customized as well:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n linkButtonTheme: {\n base: {\n color: 'red',\n textDecoration: 'underline',\n fontWeight: 'bold',\n }\n },\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which looks like this:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-16.cc4e471523c24e6ae24423f3f6dffa91ef50332a5cc4743a6b9a075be8d5420e.7ed0131e.png","alt":"login-style-16"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"customizing-the-submit-button","__idx":14},"children":["Customizing the submit button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The submit (login) button can be customized using the snippet below:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n loginBox: {\n submitButtonTheme: {\n base: {\n backgroundColor: '#00bcd4',\n color: '#fff',\n borderColor: 'transparent'\n }\n }\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which looks like this:"," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-17.dc1df07852b8883d4f37fdb454841915922356c14d46cfe1cfa6cfe6a1dc84d3.7ed0131e.png","alt":"login-style-17"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"changing-the-input-errors","__idx":15},"children":["Changing the input errors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Style the inputs and labels for the error messages in your forms. For instance, change the color and font family. Here is sample code that changes the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]}," to pink and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFamily"]}," to monospace for the input error alerts:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n components: {\n MuiFormHelperText: {\n styleOverrides: {\n root: {\n \"&.Mui-error\": {\n color: \"pink\",\n fontFamily: \"monospace\",\n },\n },\n },\n },\n }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which looks like this:"," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-18.1c5cc13bf51f664ce0b3edcc04350fe6b5f864056b52af10306b3f5808350106.7ed0131e.png","alt":"login-style-18"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customizing-the-font-globally","__idx":16},"children":["Customizing the font globally"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFamily"]}," at the global level to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["monospace"]},":",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"\nconst themeOptions = {\n typographyStyleOptions: {\n fontFamily: 'staatliches',\n },\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customizing-the-loader","__idx":17},"children":["Customizing the loader"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The loader we display when loading the login box can be customized as well. You actually can implement your own loader and get the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading"]}," hook from the application provider in order to know when to display it. Just as shown in the snippet below. In this example, we utilized a loader element from ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://react.semantic-ui.com/"},"children":["semantic-ui"]},":",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import React, {useState} from \"react\";\nimport {FronteggProvider} from \"@frontegg/react\";\nimport {Dimmer, Loader} from \"semantic-ui-react\";\n\nimport contextOptions from './context-options';\n\n// Replace this with your app logo\nconst headerImage = 'https://assets.frontegg.com/public-frontegg-assets/acme-logo.svg';\n\nconst MyCustomLoaderComponent = () => {\n return (\n \n Loading using custom loader!\n \n )\n}\nconst Provider = () => {\n const [loading, setLoading] = useState(true);\n\n return (\n
\n \n
\n \n {loading && }\n
\n )\n};\n\nexport default Provider;\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/ciam/sdks/components/fronteggappoptions#contextoptions"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["contextOptions"]}]}," and ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/ciam/sdks/components/fronteggappoptions#customLoader"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customLoader"]}]}," for more information."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Which looks like this:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/login-style-19.229a18b6ecac4e9fb3921ed50dc101cba4e65c70941029f1821ba2d3f26b1e3a.7ed0131e.png","alt":"login-style-19"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Endless opportunities exist. Check out the examples below and visit our interactive code sandbox."]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"GitHub code samples","type":"success"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Visit our ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://github.com/frontegg-samples/login-box-customization-sample"},"children":["Frontegg Samples repository"]}," in GitHub"]}]}]},"headings":[{"value":"Styling options","id":"styling-options","depth":2},{"value":"Changing the logo","id":"changing-the-logo","depth":3},{"value":"Changing default styling examples","id":"changing-default-styling-examples","depth":3},{"value":"Changing the browser title","id":"changing-the-browser-title","depth":3},{"value":"Changing the background image","id":"changing-the-background-image","depth":3},{"value":"Flat design","id":"flat-design","depth":3},{"value":"Adding a footer to the login box","id":"adding-a-footer-to-the-login-box","depth":3},{"value":"Split layout for the login box","id":"split-layout-for-the-login-box","depth":3},{"value":"Customizing the social login buttons","id":"customizing-the-social-login-buttons","depth":3},{"value":"Removing the text from the buttons","id":"removing-the-text-from-the-buttons","depth":4},{"value":"Changing the colors of the social login buttons","id":"changing-the-colors-of-the-social-login-buttons","depth":4},{"value":"Controlling the social logins divider","id":"controlling-the-social-logins-divider","depth":3},{"value":"Customizing the inputs","id":"customizing-the-inputs","depth":3},{"value":"Customizing the links","id":"customizing-the-links","depth":4},{"value":"Customizing the submit button","id":"customizing-the-submit-button","depth":4},{"value":"Changing the input errors","id":"changing-the-input-errors","depth":3},{"value":"Customizing the font globally","id":"customizing-the-font-globally","depth":3},{"value":"Customizing the loader","id":"customizing-the-loader","depth":3}],"frontmatter":{"excludeFromSearch":true,"seo":{"title":"Styling options"}},"lastModified":"2025-11-04T13:25:50.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ciam/sdks/customizations/login-box-old/styling","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}