Skip to content
/ keywind Public

Keywind is a component-based Keycloak Login Theme built with Tailwind CSS

License

Notifications You must be signed in to change notification settings

lukin/keywind

Repository files navigation

🌬️ Keywind

Keywind is a component-based Keycloak Login Theme built with Tailwind CSS and Alpine.js.

Preview

Styled Pages

  • Error
  • Login
  • Login Config TOTP
  • Login IDP Link Confirm
  • Login OAuth Grant
  • Login OTP
  • Login Page Expired
  • Login Password
  • Login Recovery Authn Code Config
  • Login Recovery Authn Code Input
  • Login Reset Password
  • Login Update Password
  • Login Update Profile
  • Login Username
  • Login X.509 Info
  • Logout Confirm
  • Register
  • Select Authenticator
  • Terms and Conditions
  • WebAuthn Authenticate
  • WebAuthn Error
  • WebAuthn Register

Identity Provider Icons

  • Apple
  • Bitbucket
  • Discord
  • Facebook
  • GitHub
  • GitLab
  • Google
  • Instagram
  • LinkedIn
  • Microsoft
  • OpenID
  • Red Hat OpenShift
  • PayPal
  • Slack
  • Stack Overflow
  • Twitter

Installation

Keywind has been designed with component-based architecture from the start, and you can customize as little or as much Keywind as you need:

  1. Deploy Keywind Login Theme
  2. Create your own Login Theme
  3. Specify parent theme in theme properties:
parent=keywind
  1. Brand and customize components with FreeMarker

Customization

Theme

When you do need to customize a palette, you can configure your colors under the colors key in the theme section of Tailwind config file:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.red,
      },
    },
  },
};

Read more about Tailwind CSS configuration in the documentation.

Components

You can update Keywind components in your own child theme. For example, create a copy of the body component and change the background:

theme/mytheme/login/components/atoms/body.ftl

<#macro kw>
  <body class="bg-primary-100">
    <#nested>
  </body>
</#macro>

Build

When you're ready to deploy your own theme, run the build command to generate a static production build.

pnpm install
pnpm build

To deploy a theme as an archive, create a JAR archive with the theme resources.

pnpm build:jar