This page is a must-read. Even if you plan to redesign the pages at the component level, you should at least understand how to remove the default CSS styles.
Understanding the CSS class system
When you inspect the DOM in Storybook, you’ll notice most elements have at least a couple of classes applied to them:
A class starting with kc, for example kcLabelClass.
One or more classes starting with pf-, for example pf-c-form__label, pf-c-form__label-text.
Classes beginning with kc don’t have any styles applied to them by default. Their sole purpose is to serve as selectors for your custom styles.
What you’ll want to do is partially or completely remove the Patternfly styles and then apply your custom ones.
Applying your custom CSS
Do not edit any file in the public/keycloakify-dev-resources directory. These files are used by Storybook to simulate a Keycloak environment during development, and they aren't part of your actual theme.
To apply your custom CSS style, use the kc classes to target the components.
src/login/main.css
.kcLabelClass {
border: 3px solid red;
}
src/login/KcPage.tsx
import "./main.css";
// ...
src/login/KcPage.svelte
<script lang="ts">
import "./main.css";
import Template from '@keycloakify/svelte/login/Template.svelte';
...
src/login/KcPage.ts
import "./main.css";
import { getDefaultPageComponent, type KcPage } from '@keycloakify/angular/login';
// ...
This is the result:
Having different stylesheets for the login page, the register page, etc...
In this example, we use a global stylesheet that applies to all pages of the login theme. However, you can also assign different stylesheets on a page-by-page basis (e.g., one for the login page, another for the registration page, etc.).
However, if you plan to customize the theme using only CSS without ejecting the pages, the process may not be immediately clear.
You need to be able to load different stylesheet based on the value of kcContext.pageId.
Below is a snippet of React code demonstrating how you can apply separate stylesheets for different pages:
src/login/KcPage.tsx
import {
Suspense,
lazy,
useMemo
} from "react";
export default function KcPage(props: { kcContext: KcContext }) {
const { kcContext } = props;
const { i18n } = useI18n({ kcContext });
const classes = useCustomStyles(kcContext);
return (
<Suspense>
{(() => {
switch (kcContext.pageId) {
default:
return (
<DefaultPage
kcContext={kcContext}
i18n={i18n}
classes={classes}
Template={Template}
doUseDefaultCss={true}
UserProfileFormFields={UserProfileFormFields}
doMakeUserConfirmPassword={doMakeUserConfirmPassword}
/>
);
}
})()}
</Suspense>
);
}
function useCustomStyles(kcContext: KcContext) {
return useMemo(() => {
// Your stylesheet that applies to all pages.
import("./main.css");
let classes: { [key in ClassKey]?: string } = {
// Classes that apply to all pages
};
switch (kcContext.pageId) {
case "login.ftl":
// A login page-specific stylesheet.
import("./pages/login.css");
classes = {
...classes,
// Classes that apply only to the login page
};
break;
case "register.ftl":
// A register page-specific stylesheet.
import("./pages/register.css");
classes = {
...classes,
// Classes that apply only to the register page
};
break;
// ...
}
return classes;
}, []);
}
Using Tailwind
Removing Some of the Default Styles
Let’s consider the Sign In button on the login page:
Here’s how we can “unstyle” it so that we can apply custom styles without worrying about conflicts from the default Patternfly styles:
To remove the Patternfly styles, inspect the button in your browser:
We can see which Patternfly classes are applied by default to the standardized element:
kcButtonClass -> pf-c-button
kcButtonPrimaryClass -> pf-m-primary and long-pf-btn
kcButtonBlockClass -> pf-m-block
kcButtonLargeClass -> btn-lg
Since we want to remove all the default styles, we can tell Keycloakify to remove all classes assigned by default to these kc classes:
For pages you've ejected, you’ll likely want to disable all default styles; however, you might prefer to keep the Patternfly styles on the pages you haven't redesigned.
Below is an example where login.ftl has been ejected and its default styles are disabled, while the other pages remain styled:
Just be aware that if you have defined any custom CSS targeting those classes (for example .kcButtonClass { /* ... */ }), they will no longer apply once you remove the classes.
Classes beginning with pf- are Patternfly classes. is a CSS framework created by RedHat, similar to Bootstrap, that the Keycloak team uses to build all of its UIs.
If you plan to customize the pages at the component level using React, Angular, or Svelte, you can skip this section. Once you've learned about the command, it will be straightforward to import different stylesheets for different ejected pages, and no additional instructions will be necessary.
If this code doesn’t make much sense, you can watch where this approach is demonstrated in practice.
Of course, you can use Tailwind in the usual way by applying utility classes to the React/Angular/Svelte components.
But note that you can also use Tailwind without modifying the page structure by using the @apply directive. This is shown in .
Using or some other CSS framework
If you want to use Bootstrap or another CSS framework that provides standardized classes, you might wonder how to apply these classes.
Here’s an example with Bootstrap:
A common scenario is using to customize only certain pages of the login UI in depth.
If you have ejected some pages with and disabled the default styles by setting doUseDefaultCss to false, you might wonder if you need to keep the kcClsx in the pages. For example:
