Integrating Keycloakify in your Codebase

This is for advanced users. If you are just trying to get started with Keycloakify follow the Quick Start Guide and fork the starter project.

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

First Option: Installing Keycloakify Directly in Your SPA

🚨 WARNING: ADVANCED USERS ONLY 🚨

If you're unsure what this section is about, this approach is NOT for you. Instead, follow the Quick Start Guide and fork the starter project.

This section is only for developers who already have an existing project and need to integrate a Keycloak theme within it to reuse existing components and styles.

🔹 If you're just trying to get started with Keycloakify, stop here—the starter projects provide a much simpler and recommended path.

🔹 If you proceed without fully understanding how this approach differs from the starter project, you will likely get confused about what you’re actually doing, attempt to simplify things, and end up hitting a roadblock.

If you are developing a Single Page Application (SPA), 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

• Vite + Svelte

• 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