:wind_face: Keywind

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

Styled Pages

• Login
• Login Config TOTP
• Login IDP Link Confirm
• Login OTP
• Login Reset Password
• Login Update Password
• Login Update Profile
• Register

Social Media Icons

• Facebook
• GitHub
• Google
• Microsoft

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

4. Brand and customize components with FreeMaker

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.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.red,
      },
    },
  },
};

Read more about Tailwind CSS configuration in the documentation.

Components

You can inherit Keywind components in your own theme. For example, to resize the primary button you should create a styled theme/mytheme/components/button/primary.ftl file:

<#macro kw component="button" rest...>
  <${component}
    class="bg-primary-600 flex justify-center px-6 py-3 relative rounded-lg text-md text-white w-full focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 hover:bg-primary-700"
    <#list rest as attrName, attrValue>
      ${attrName}="${attrValue}"
    </#list>
  >
    <#nested>
  </${component}>
</#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