prajwalg19/keycloak-login-email-svelte — explained in plain English
Analysis updated 2026-05-18
Replace Keycloak's default login page styling with a modern, branded design built in Svelte and Tailwind.
Build password reset and notification emails as Svelte components that compile into Keycloak's FreeMarker format.
Package a custom Keycloak theme as a deployable jar file for your own identity server.
| prajwalg19/keycloak-login-email-svelte | habibthadev/xians | matiadev/svelte-sandbox | |
|---|---|---|---|
| Stars | 7 | 3 | 11 |
| Language | Svelte | Svelte | Svelte |
| Setup difficulty | moderate | — | easy |
| Complexity | 3/5 | — | 2/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Deploying the finished theme requires a running Keycloak server version 22 or newer.
This project is a starter kit for building custom looking login pages and email templates for Keycloak, a widely used open source tool that handles user login and identity for other applications. Normally, customizing how Keycloak's login screens or password reset emails look means wrestling with an older styling library called PatternFly and writing raw template code in a language called FreeMarker, both of which are described here as frustrating and fragile. This starter replaces that workflow with modern, familiar web tools. The login pages are built with Svelte, a JavaScript framework, styled with Tailwind CSS, and use a component library called Shadcn, giving you a clean, responsive design out of the box instead of Keycloak's dated default look. Email templates work the same way: you build them as Svelte components using a library called Better Svelte Email, and the project automatically converts them into the FreeMarker template format Keycloak actually needs, while carefully preserving Keycloak's own template expressions, like inserting a user's first name, so they are not accidentally broken or escaped during that conversion. To use it, you clone the repository, install its dependencies, and run a local development server to preview and edit login pages and emails with fast reloading as you make changes. There is also a command that checks your code for Svelte and TypeScript errors. When you are ready to deploy, a single build command packages everything into a Keycloak theme file that you drop into a Keycloak server's providers folder and restart. The project also includes Storybook, a tool for previewing and testing individual UI components in isolation, and documents its own workflow for adding new email templates or ejecting additional login pages to customize. The project is organized so login pages, email templates, and shared UI components each live in their own folder, keeping the Keycloak specific glue code separate from the reusable design system pieces. It is released under the MIT license and is free to use and adapt for both commercial and open source projects.
A starter kit for building modern, custom login pages and email templates for Keycloak using Svelte instead of its default styling and template tools.
Mainly Svelte. The stack also includes Svelte, Vite, TypeScript.
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.
Setup difficulty is rated moderate, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.