Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
v11
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v11
  • Quick Start
  • CSS Customization
  • Testing your Theme
    • Outside of Keycloak
    • Inside of Keycloak
  • Deploying Your Theme
  • Integrating Keycloakify in your Codebase
    • Vite
    • Create-React-App / Webpack
    • yarn/npm/pnpm/bun Workspaces
    • Turborepo
    • Nx
    • Angular Workspace
  • Common Use Case Examples
    • Using a Component Library
    • Custom Fonts
    • Changing the background image
    • Adding your Logo
    • Using Tailwind
    • Dark Mode Persistence
  • Features
    • Internationalization and Translations
      • Basic principles
      • Previewing Your Pages in Different Languages
      • Adding New Translation Messages or Changing the Default Ones
      • Adding Support for Extra Languages
    • Theme Variants
    • Environment Variables
    • Styling a Custom Page Not Included in Base Keycloak
    • Integrating an Existing Theme into Your Keycloakify Project
    • Compiler Options
      • --project
      • keycloakVersionTargets
      • environmentVariables
      • themeName
      • startKeycloakOptions
      • themeVersion
      • accountThemeImplementation
      • postBuild
      • XDG_CACHE_HOME
      • kcContextExclusionsFtl
      • keycloakifyBuildDirPath
      • groupId
      • artifactId
      • Webpack specific options
        • projectBuildDirPath
        • staticDirPathInProjectBuildDirPath
        • publicDirPath
  • Page-Specific Guides
    • Registration Page
    • Terms and Conditions Page
  • Theme types
    • Differences Between Login Themes and Other Types of Themes
    • Account Theme
      • Single-Page
      • Multi-Page
    • Email Theme
    • Admin Theme
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Common Use Case Examples

Using a Component Library

Last updated 4 months ago

Was this helpful?

The Keycloakify starter repository may initially seem sparse in terms of React/Angular/Svelete components, which might be confusing. However, there's no need to worry—this design choice will soon make sense.

By default, Keycloakify internalizes all the components that make up the default UI, exposing only the DefaultPage component.

The idea behind this approach is to let you have in your project only the pages that you have modified and don't overwhelm pepole that only want to apply CSS customization.

If you want to customize any component from the default theme, you can easily do so by running the following command:

npx keycloakify eject-page

This command allows you to select specific components from Keycloakify's source code, which will then be copied into your own codebase for further customization.

Disabling the default styles: One thing that is touched on is how to disable all the default styles. See documentation .

only late in the video
Video tutorial on how to use MUI to customize the login page
here