Elastic UI for Kibana 6.1.3 Plugin?


I have created a plugin for Kibana 6.1.3, using ReactJS for rendering.

I am trying to use components of the Kibana UI framework (KUI) and of Elastic UI (EUI); for example:

import { EuiPage, EuiPageHeader } from "@elastic/eui";
import { KuiLabel } from 'ui_framework/components';

My problem: EUI components are not rendered correctly. Not sure if it's a good idea to combine KUI and EUI. Nevertheless it seems the EUI components cause trouble: the HTML structure seems ok, but the styles are not considered at all.

My question: is there a version restriction regarding the combination of KUI, EUI and Kibana 6.1.3? Or am I missing a dependency (Sass/Scss) or am I just specifying dependencies incorrectly?

My package.json contains the following:

"version": "6.1.3",
"main": "index.js",
"kibana": {
"version": "6.1.3"
"devDependencies": {
"@elastic/eslint-config-kibana": "0.0.2",
"@elastic/plugin-helpers": "^6.0.0",
"@elastic/eui": "^3.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"babel-eslint": "4.1.8",
"chai": "^3.5.0",
"eslint": "1.10.3",
"eslint-plugin-mocha": "1.1.0"

Thank you in advance,

@dsnider - can you please provide some inputs here on EUI .


Hi. EUI was added to Kibana in 6.2. That said, it's just a dependency, so you should be able to add the latest version of EUI into an older version of Kibana (or any JS project for that matter).

When doing so, you'll just need to make sure the CSS is included somewhere. We do this currently (post 6.2) by requiring the file here. You should be able to do the same.

In general, I would advise building plugins with EUI as much as possible. KUI will slowly be removed from Kibana as we convert the templates to use EUI.

1 Like

Hi @dsnider,

Indeed it works now, after requiring the styles, as advised.

Thank you for the help and the advise on EUI/KUI.

Best regards,

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.