# Integrating Keycloakify in your Codebase

{% hint style="warning" %}
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.](/readme.md#quick-start)
{% endhint %}

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

## First Option: Installing Keycloakify Directly in Your SPA

{% hint style="danger" %}
🚨 **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.](/readme.md#quick-start)

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](/readme.md#quick-start) 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.
{% endhint %}

If you are developing a [Single Page Application (SPA)](#user-content-fn-1)[^1], 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](#user-content-fn-2)[^2]
* Webpack + React ⚠

Follow the guide corresponding to your setup:

{% content-ref url="/pages/hDXVcIGqcE9raQUTZu1k" %}
[Vite](/integration-keycloakify-in-your-codebase/vite.md)
{% endcontent-ref %}

{% content-ref url="/pages/JJL4idAqYD3BpwDLUl2X" %}
[Create-React-App / Webpack](/integration-keycloakify-in-your-codebase/webpack.md)
{% endcontent-ref %}

## 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:

{% content-ref url="/pages/KF63QE3ZzcjCQPyzd1TC" %}
[yarn/npm/pnpm/bun Workspaces](/integration-keycloakify-in-your-codebase/package-manager-workspaces.md)
{% endcontent-ref %}

{% content-ref url="/pages/HTGyO1jWWeVIpevAIXuO" %}
[Turborepo](/integration-keycloakify-in-your-codebase/turborepo.md)
{% endcontent-ref %}

{% content-ref url="/pages/F93yue5uBbgm9bPV8jUe" %}
[Nx](/integration-keycloakify-in-your-codebase/nx.md)
{% endcontent-ref %}

{% content-ref url="/pages/pQfhuBEbhs3Ivtw5DO0c" %}
[Angular Workspace](/integration-keycloakify-in-your-codebase/angular-workspace.md)
{% endcontent-ref %}

[^1]: If your project is build with Next.js or Remix it does not fall under this cathegory.

[^2]: Svelte projects initialized with SvelteKit 1.0.0 or later use Vite as the default build tool. If your project was created in 2023 or later, it is likely based on Vite.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.keycloakify.dev/integration-keycloakify-in-your-codebase.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.