> For the complete documentation index, see [llms.txt](https://docs.keycloakify.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.keycloakify.dev/keycloakify/v10/customization-strategies/css-level-customization/removing-the-default-styles.md). # Removing the default styles ## Case by case You may notice that beside the the kcSomething classes other classes are applied to the components.

The <header> element has an extra class beside kcFormHeaderClass: login-pf-header

This other classes, non prefixed with kc actually have styles rules that target them. Let's as an example remove the login-pf-header class:

import "./main.css";
// ...

export default function KcPage(props: { kcContext: KcContext }) {
  // ...
}

const classes = {
    kcFormHeaderClass: ""
} satisfies { [key in ClassKey]?: string };

We can see that now, the <header> element only have the kcFormHeaderClass, the login-pf-header class has been removed. As a result the text is now aligned to the left (default layout)

On some components, multiples utility classes are applied, you may want to keep some of them and remove others. Example:

Here we can see that a bunch of col-* classes gets applied to the element with kcInputWrapperClass

Let's say, for example, that we would like to remove keep only the col-md and lg classes. To do that that we would write: {% code title="src/login/KcPage.tsx" %} ```tsx import "./main.css"; // ... export default function KcPage(props: { kcContext: KcContext }) { // ... } const classes = { kcInputWrapperClass: "col-md-12 col-lg-12", } satisfies { [key in ClassKey]?: string }; ``` {% endcode %} Result:

## Removing all the default styles at once Maybe you'd prefer to remove all default styles at once you can do that by setting doUseDefaultCss to false.

export default function KcPage(props: { kcContext: KcContext }) {

    return (
        <Suspense>
            {(() => {
                switch (kcContext.pageId) {
                    default:
                        return (
                            <DefaultPage
                                kcContext={kcContext}
                                i18n={i18n}
                                classes={classes}
                                Template={Template}
                                doUseDefaultCss={false}
                                UserProfileFormFields={UserProfileFormFields}
                                doMakeUserConfirmPassword={doMakeUserConfirmPassword}
                            />
                        );
                }
            })()}
        </Suspense>
    );
}

However be aware that re-styling everything involves quite a bit of work:

The login page with doUseDefaultCss set to false

Up next: {% content-ref url="/pages/ngO4Ccs4QpvgwCBAqzxW" %} [Applying your own classes](/keycloakify/v10/customization-strategies/css-level-customization/applying-your-own-classes.md) {% endcontent-ref %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.keycloakify.dev/keycloakify/v10/customization-strategies/css-level-customization/removing-the-default-styles.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.