Integrating Keycloakify in your Codebase

Before You Start:

This documentation section is intended for cases where you already have an existing project and want to add a Keycloak theme as part of its deliverables.

One of Keycloakify’s strengths is its ability to let you reuse components and styles from your main application in your Keycloak theme. However, if you don’t have an existing codebase, it’s easier to and develop your Keycloak theme as a standalone project.

There are two main approaches to integrate Keycloakify into your project.

First Option: Installing Keycloakify Directly in Your SPA

If you are developing a , you can install Keycloakify directly within your project.

The main advantage of this approach is that your theme's source files will reside inside src/keycloak-theme, allowing you to directly import and reuse the components from your existing codebase.

This approach is suitable if your project falls into one of the following categories:

• Vite + React

• Create-React-App

• Webpack + React

Follow the guide corresponding to your setup:

ViteCreate-React-App / Webpack

Second Option: Setting Up Keycloakify as a Subproject in Your Monorepo

If your project is structured as a monorepo, you can add your Keycloak theme as a subproject, typically located at apps/keycloak-theme.

Choose the guide that matches your monorepo setup:

yarn/npm/pnpm/bun WorkspacesTurborepoNxAngular Workspace