👨‍💻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:

Keycloakify Storybook

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 starter template.

GitHub - keycloakify/keycloakify-starter: 🔑 Starter/demo project for KeycloakifyGitHub

Then you can move on to the next section of the documentation:

🧪Testing your Theme