Keycloakify Themes
Keycloakify on npmKeycloakify on GitHubJoin the Discord server

Keycloak themingFor the modern web.

Customize the look and feel of your login and registration pages without having to mess with FreeMarker.

Get startedView on GitHubTry the editor
git clone https://github.com/keycloakify/keycloakify-starter
Trusted in production by

A real solution to a real problem

Keycloak has theme support, but using it means a lot of raw JS/CSS/FTL hacking, and reproducing the look and feel of your app in another stack is a maintenance burden.

With Keycloakify you design the login and register pages as if they were part of your app, so your users don't notice when they are redirected away.

Get started

Using React is just an option

Keycloakify is first and foremost a tool to build and test your theme in Storybook or in a local Keycloak container with hot reload.

Bring your own components or libraries like MUI or shadcn/ui, or customize the pages without touching React using CSS, SCSS, Tailwind or Bootstrap.

Testing your theme

Easy to deploy

Keycloakify bundles your login, account and email themes into a single .jar that you import into your Keycloak server. The themes it generates are compatible with all Keycloak versions.

Deploying your theme

It's not just cosmetics

Keycloakify improves the UX of your login and registration pages with realtime input validation. Define your validators from the Keycloak admin console and your users get instant feedback.

It works out of the box with any theme generated with Keycloakify.

See it in Storybook
Quick start

Pick your framework

Clone a starter and preview the login pages in Storybook. For CSS-only customizations, any of the three works.

git clone https://github.com/keycloakify/keycloakify-starter
cd keycloakify-starter
npm install
npx keycloakify add-story
npm run storybook

The most complete integration, and the only one that can customize the Admin Console.

keycloakify/keycloakify
Read the full quick start

Any package manager works, see the docs.

Theme types

More than the login page

Keycloakify covers every user interface Keycloak ships with.

Everything you expect and more

  • Widely adopted

    Keycloakify is trusted by leading tech companies like Neon and Corsair.
    It is used in production by cybersecurity firms like Ironwood and in the public sector by organizations such as the European Data Science Platform and official French government websites like this one.

  • shadcn/ui and TypeScript

    Keycloakify features an alternative default look for the login pages based on shadcn/ui and Tailwind. See the starter theme

  • Retro-compatible

    Themes generated with Keycloakify are compatible with all Keycloak versions. You develop your theme as if you were targeting the latest Keycloak version and Keycloakify polyfills the missing features for you.

  • Easy to integrate in your codebase

    Keycloakify can be integrated directly within an existing Vite SPA or as a submodule of your monorepo. See Docs

  • Easily testable

    Test your theme in storybook or in a local Keycloak container with a simple command.

  • We are here to help!

    We are happy to provide support on our Discord server that has many active users and some members of the core Keycloak team.

  • Theme variants

    Keycloakify enables you to create theme variants and themes that are dynamically customizable with environment variables.

  • Feature complete

    Everything that works in the default Keycloak theme also works in Keycloakify themes. Beyond that Keycloakify adds many exclusive features.

  • Doesn't bloat your node_modules

    The Keycloakify NPM package is dependency free.
    The CLI is shipped as a single executable.

Keycloakify from the point of view of a React developer

FAQ

Questions, answered

Still have questions?

Ask on Discord

Sponsor

Backers of the project, we trust and recommend their services

Phase TwoPhase Two logo
Keycloak as a Service
Keycloak community contributors of popular extensions providing free and dedicated Keycloak hosting and enterprise Keycloak support to businesses of all sizes.
Check them out
Get started

Make your login pages part of your app.

Clone a starter, preview it in Storybook and ship a single JAR to Keycloak.

Get startedJoin the Discord
Prefer not to write code?

Design your theme visually with the Keycloakify Editor.

A visual editor for Keycloak login themes, built on Keycloakify, shadcn/ui and Tailwind. Designing is free, you only pay when you export.

Open the editor

  • Pick your tokens

    Colors, fonts, radius and layout, changed from a panel instead of a stylesheet.

  • Live preview

    Every login and registration page updates as you change the theme.

  • Emails included

    Verification and password reset emails are themed from the same palette.

  • Export a JAR

    Leave with a deploy-ready Keycloakify theme to drop into Keycloak.