# Elastic UI for Kibana 6.1.3 Plugin?

**URL:** <https://discuss.elastic.co/t/elastic-ui-for-kibana-6-1-3-plugin/141191>\
**Category:** Kibana\
**Created:** [July 23, 2018, 2:11pm UTC](https://discuss.elastic.co/t/elastic-ui-for-kibana-6-1-3-plugin/141191 "2018-07-23T14:11:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrei.costache](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@andrei.costache](https://discuss.elastic.co/u/andrei.costache)\
**Post date:** [July 23, 2018, 2:11pm UTC](https://discuss.elastic.co/t/elastic-ui-for-kibana-6-1-3-plugin/141191/1 "2018-07-23T14:11:40Z")

</div>

Hi,

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,  
Andrei.

---

<div class="post-metadata">

**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\
**Post date:** [July 23, 2018, 5:15pm UTC](https://discuss.elastic.co/t/elastic-ui-for-kibana-6-1-3-plugin/141191/2 "2018-07-23T17:15:31Z")

</div>

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

Thanks  
Rashmi

---

<div class="post-metadata">

**Author:** ![dsnider](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dsnider/32/44068_2.png) [@dsnider](https://discuss.elastic.co/u/dsnider)\
**Post date:** [July 23, 2018, 5:57pm UTC](https://discuss.elastic.co/t/elastic-ui-for-kibana-6-1-3-plugin/141191/3 "2018-07-23T17:57:59Z")

</div>

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.

> <https://github.com/elastic/kibana/blob/master/src/ui/public/autoload/styles.js>

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.

---

<div class="post-metadata">

**Author:** ![andrei.costache](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@andrei.costache](https://discuss.elastic.co/u/andrei.costache)\
**Post date:** [July 25, 2018, 7:40am UTC](https://discuss.elastic.co/t/elastic-ui-for-kibana-6-1-3-plugin/141191/4 "2018-07-25T07:40:58Z")

</div>

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,  
Andrei.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 22, 2018, 7:41am UTC](https://discuss.elastic.co/t/elastic-ui-for-kibana-6-1-3-plugin/141191/5 "2018-08-22T07:41:02Z")

</div>

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