An easy way to customize Kibana’s UI

Kibana, and the ELK stack as a whole, is an excellent tool for visualizing and analyzing large volumes of data in real time. It provides a user-friendly interface that allows users to search, filter, and interact with their data, making it an accessible tool for users of all skill levels.

Kibana is also highly customizable, allowing users to create custom visualizations and dashboards that meet their specific needs. However, one of the customization features Kibana is lacking, is the ability to customize the UI and create a more brand-compatible experience.

The good news is that Kibana is a platform that supports 3rd party plugins to be installed. Those plugins can extend Kibana’s functionality and integrate with its public APIs.

A Custom Kibana Theme Plugin

This got me thinking and that’s why the other day, I decided to experiment and create a plugin that could customize the UI of Kibana.

In my custom plugin, I built an infrastructure that allowed me to customize almost every aspect of the UI: the favicon, tab title, colors, fonts, and icons. And even better, you can use the code and customize it further.

For example, your login form can now match your branding, and the customization can be added throughout all pages and applications.

Kibana login form with a custom logo, title and background

You can also adjust the tab favicon and text to match your brand:

Chrome tab with a custom favicon and title

Testing and customizing the plugin

If you want to test this plugin and make your own customizations, you first need to create a Kibana development setup on your development machine.

Clone the kibana repository and checkout the correct version of kibana (this plugin supports Kibana 7.16 +)

git clone https://github.com/elastic/kibana.git
cd kibana
git checkout KIBANA_VERSION

Then setup kibana by bootstrapping it once. This might take a while the first time you do this.

yarn kbn bootstrap

Clone the plugin into the plugins directory. You may also fork the project to customize it and check out your own version of the plugin.

cd plugins
git clone https://github.com/lizozom/custom-kibana-theme.git

Go back to the kibana folder and start Elasticsearch in dev mode

yarn es snapshot

In parallel, in a separate tab, start Kibana in dev mode (This might take a while the first time).

yarn start — no-base-path

Kibana should start with the plugin on. It will watch any changes in the plugin and rebuild it as needed.

Now to make the adjustments, inspect the htmlstructure of the Kibana elements and add a scss file to the custom-kibana-theme/plugin/scss folder and import it from the custom-kibana-theme/plugin/index.ts base file. Note that if your changes are application specific, I recommend that you scope them within the .ckl-app-<APPNAME> class, to avoid style leakage.

If you decide to change the font of Kibana, make sure to customize the Content Security Policy with the base URL of font in kibana.yml

csp.style_src: [“FONT_BASE_URL”]
csp.font_src: [“FONT_BASE_URL”]

Known Limitations

The Kibana logo that is shown before the login form is loaded, cannot be customized using this plugin. This logo cannot be changed without modifying the source code of Kibana, so be aware of this limitation as you use this plugin.

The Kibana logo that is shown while Kibana starts up cannot be changed using this plugin

Installing the plugin

Once you are happy with the results, you can proceed to building the plugin for deployment.

Navigate into the plugin directory (within the kibana repository) and build it:

cd plugins/custom-kibana-theme
yarn build

This builds the plugin into a zip file under the build folder.

Place the build file on a web hosting or copy it to the deployment where you intend to install it, then install the plugin by running:

bin/kibana-plugin install PATH_TO_ZIP

More documentation on how to install a plugin from a zip file can be found here.

If you have any further questions, please post a comment or open an issue on the project!