Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
v11 (Legacy)
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v11 (Legacy)
  • ๐Ÿ‘จโ€๐Ÿ’ปQuick start
  • ๐ŸงชTesting your Theme
    • In Storybook
    • In a Keycloak Docker Container
    • With Vite or Webpack in dev mode
  • ๐Ÿ”ฉIntegrating Keycloakify in your Codebase
    • In your React Project
      • In your Vite Project
      • In your Webpack Project
    • As a Subproject of your Monorepo
      • Turborepo
      • Nx Integrated Monorepo
      • Package Manager Workspaces
  • ๐ŸŽจCustomization Strategies
    • CSS Level Customization
      • Basic example
      • Removing the default styles
      • Applying your own classes
      • Page specific styles
      • Using Tailwind
      • Using custom assets
        • .css, .sass or .less
        • CSS-in-JS
    • Component Level Customization
      • Using custom assets
  • ๐Ÿ–‹๏ธCustom Fonts
  • ๐ŸŒŽInternationalization and Translations
    • Base principles
    • Adding Support for Extra Languages
    • Previewing you Pages In Different Languages
    • Adding New Translation Messages Or Changing The Default Ones
  • ๐ŸŽญTheme Variants
  • ๐Ÿ“Customizing the Register Page
  • ๐Ÿ‘คAccount Theme
    • Single-Page
    • Multi-Page
  • ๐Ÿ“„Terms and conditions
  • ๐Ÿ–‡๏ธStyling a Custom Page Not Included In Base Keycloak
  • ๐Ÿ”งAccessing the Server Environment Variables
  • ๐ŸŽฏTargetting Specific Keycloak Versions
  • ๐Ÿ“งEmail Customization
  • ๐Ÿš›Passing URL Parameters to your Theme
  • ๐ŸคตAdmin theme
  • ๐Ÿ“ฅImporting the JAR of Your Theme Into Keycloak
  • ๐Ÿ”›Enabling your Theme in the Keycloak Admin Console
  • ๐Ÿค“Taking ownership of the kcContext
  • ๐Ÿ“–Configuration Options
    • --project
    • keycloakVersionTargets
    • environmentVariables
    • themeName
    • startKeycloakOptions
    • themeVersion
    • postBuild
    • XDG_CACHE_HOME
    • kcContextExclusionsFtl
    • keycloakifyBuildDirPath
    • groupId
    • artifactId
    • Webpack specific options
      • projectBuildDirPath
      • staticDirPathInProjectBuildDirPath
      • publicDirPath
  • FAQ & HELP
    • ๐ŸคComunity resources
    • โฌ†๏ธMigration Guides
      • โฌ†๏ธv10->v11
      • โฌ†๏ธv9 -> v10
      • โฌ†๏ธCRA -> Vite
      • โฌ†๏ธv8 -> v9
      • โฌ†๏ธv7 -> v8
      • โฌ†๏ธv6 -> v7
      • โฌ†๏ธv6.x -> v6.12
      • โฌ†๏ธv5 -> v6
    • ๐Ÿ˜žCan't identify the page to customize?
    • ๐Ÿค”How it Works
    • ๐Ÿ˜–Some values you need are missing from in kcContext type definitions?
    • โ“Can I use it with Vue or Angular
      • Angular
    • โš ๏ธLimitations
    • ๐Ÿ›‘Errors Keycloak in Logs
    • ๐Ÿ™‹How do I add extra pages?
    • ๐Ÿค“Can I use react-hooks-form?
    • ๐Ÿš€Redirecting your users to the login/register pages
    • ๐Ÿ’ŸContributing
    • ๐ŸชGoogle reCaptcha and End of third-party Cookies
    • ๐Ÿ”–Accessing the Realm Attributes
  • โญSponsors
Powered by GitBook
On this page
  • CSS Level Customization
  • React Component Level Customization

Was this helpful?

Edit on GitHub

Customization Strategies

Was this helpful?

There is two main way to create your Keycloak theme.

CSS Level Customization

This is the recomended approach as it is easy to implement and easy to maintain. Even non web developer should be able to pull it off.

In this approach you'll use your favorite styling solution it can be:

  • Plain CSS

  • A language superset of CSS lile or

  • An utility class based CSS framework like or

React Component Level Customization

If you want to use your React component library like , or you have to go down at the component level.

๐ŸŽจ
Tailwind
Sass
Less
Bootstrap
Fundation
CSS Level Customization
Shadecn/UI
MUI
Ant
Component Level Customization