👨‍💻 Quick start

Keycloakify is a tool that enables to create keycloak themes for customizing of the look and feel of Keycloak's user-facing pages. You can preview these pages here:

{% embed url="https://storybook.keycloakify.dev/" %}

Why would I chose to use this third party tool insted of directly implementing the theming system featured by Keycloak?

• Keycloakify lets you use modern frontend technology: TypeScript, React, and any styling solution or component library you'd like, such as Tailwind, MUI, shadcn/ui, or just plain CSS. With the base theming system you have to write FreeMarker and integrating frontend technologies into a Java Stack isn't straight forward.
• Keycloakify makes it very easy to test your theme inside and outside Keycloak with hot reloading enabled.
• Keycloakify bundles the theme for you into a JAR that you can simply import into Keycloak.
• The Keycloak themes generated with Keycloakify are compatible with all Keycloak versions down to Keycloak version 11, by opposition to regular themes that must be updated to target a specific Keycloak version.
• Keycloakify themes implement real-time frontend validation out of the box. For example, when a user chooses a password that is too weak, they see the feedback message like "the password must be at least 12 character long" immediately and not after they have pressed the submit button.
• We're here to help! Either via our Discord channel or GitHub issues.

First thing you want to do is to fork/clone the Keycloakify Vite[^1] starter template.

{% embed url="https://github.com/keycloakify/keycloakify-starter" %}

Once you've done that you want to read at least thoses two sections of the documentation:

{% content-ref url="testing-your-theme/" %} testing-your-theme {% endcontent-ref %}

{% content-ref url="customization-strategies/" %} customization-strategies {% endcontent-ref %}

[^1]: There's also a Webpack based starter that you can find here.