Question 1

What is the Keycloak Theme Editor?

Accepted Answer

It's a visual editor for Keycloak login themes. Instead of hand-writing FreeMarker templates and CSS, you tweak colors, fonts, radius, and layout in a live editor that renders the real theme, then export a ready-to-deploy theme for your Keycloak instance.

Question 2

Is it free and open source?

Accepted Answer

Yes. The editor and the underlying shadcn/ui Keycloak theme are open source under the MIT license. You can use them in personal and commercial projects, self-host the editor, and contribute on GitHub.

Question 3

How do I deploy the generated theme to Keycloak?

Accepted Answer

The theme builds into a Keycloakify JAR. Drop that JAR into your Keycloak server's providers/ directory, restart Keycloak, then select the theme under Realm settings → Themes → Login theme. Your customized login and registration pages go live immediately.

Question 4

Can I customize colors, fonts, layouts, and radius?

Accepted Answer

Yes. Choose from 18 color presets and 7 neutral base palettes, 9 font families, multiple radius presets, and 3 layouts (two-column, centered card, and image-aside). Everything is built on OKLCH color tokens so light and dark mode stay consistent.

Question 5

Does it support multiple languages?

Accepted Answer

The theme ships with built-in internationalization for 30 languages, including right-to-left locales. You can preview any login page in any supported language directly in the editor.

Question 6

What is it built with?

Accepted Answer

The editor is a TanStack Start app, and the theme is built with Keycloakify v11, React 19, TypeScript, Tailwind CSS v4, and shadcn/ui. It renders the real theme in an isolated preview, so what you see is exactly what Keycloak will serve.

Build Better Keycloak Themes with a Visual Editor

39

30

18

3

Everything you need to theme Keycloak

Live Preview

shadcn/ui + Tailwind v4

Export to Keycloak

Open Source

Frequently Asked Questions