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 Vite1 starter template.
{% embed url="https://github.com/keycloakify/keycloakify-starter" %}
Then you can move on to the next section of the documentation:
{% content-ref url="testing-your-theme/" %} testing-your-theme {% endcontent-ref %}