September 04 2024 by Erik Jan de Wit
We’re excited to announce the release of two new npm packages designed to supercharge your Keycloak customization efforts. These React component libraries, built on top of PatternFly, provide the essential building blocks for crafting Keycloak account and admin consoles. The tool generates sample code for a custom console using our "Composable UI" technique. Essentially, this means that you can build your console out of exported Keycloak components that we intend to support in future releases.
The packages are:
This package provides the building blocks for creating a Keycloak admin console.
This package provides the building blocks for creating a Keycloak account console.
This package provides shared components and utilities for building Keycloak UIs.
Kickstart your project with our npm create keycloak-theme my-theme command. This streamlined tool generates a project structure, essential dependencies, and configuration, saving you precious time. At the moment, the tool is only available for account consoles, but we are working on adding support for admin consoles. This will be available in the next release (26.0.0).
Run npm create keycloak-theme@latest my-theme.
The keycloak server can be started with npm run start-keycloak
Start the development server with npm run dev
Customize your theme by editing files in the src directory.
The keycloak server will connect to the development server and all the changes will be reflected in the browser.
Just open your browser and go to http://localhost:8080/realms/master/account/personalInfo and login with admin/admin.
This will open the keycloak account console. You will see that the example code has an extra page and some extra content above each page.
Rapid development: Create stunning UIs in less time.
Consistency: Adhere to the PatternFly design system for a cohesive look and feel.
Flexibility: Customize components to match your brand and user preferences.
Upgradable: Having a npm package dependency will make updating your theme easier.
For more information, see the README.