# How to share components among Kibana plugins?

**URL:** <https://discuss.elastic.co/t/how-to-share-components-among-kibana-plugins/219890>\
**Category:** Kibana\
**Created:** [February 19, 2020, 3:55am UTC](https://discuss.elastic.co/t/how-to-share-components-among-kibana-plugins/219890 "2020-02-19T03:55:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lvdiev](https://avatars.discourse-cdn.com/v4/letter/l/c77e96/32.png) [@lvdiev](https://discuss.elastic.co/u/lvdiev)\
**Post date:** [February 19, 2020, 3:55am UTC](https://discuss.elastic.co/t/how-to-share-components-among-kibana-plugins/219890/1 "2020-02-19T03:55:45Z")

</div>

I'm create several Kibana plugins that reuse some components. How can I properly share the components among them?

What I'm doing now is to create a blank plugin (no APIs and UI exports), let say "plugin\_commons". In "plugin\_common", I export a shared component named "DateRangePicker". And then, from \*.jsx files of some other plugins, I import the components using something like:  
`import { DateRangePicker } from '../../../../plugin_commons/components';`

Am I doing it right way? Or any better way?  
Thank a lot!

---

<div class="post-metadata">

**Author:** ![lvdiev](https://avatars.discourse-cdn.com/v4/letter/l/c77e96/32.png) [@lvdiev](https://discuss.elastic.co/u/lvdiev)\
**Post date:** [February 19, 2020, 7:06am UTC](https://discuss.elastic.co/t/how-to-share-components-among-kibana-plugins/219890/2 "2020-02-19T07:06:10Z")

</div>

Ok, I got some links about this. Hope them help.

> <https://github.com/elastic/kibana/blob/7.x/src/core/MIGRATION.md#2-export-all-static-code-and-types-from-publicindexts>

  

> <https://github.com/elastic/kibana/blob/7.x/src/core/MIGRATION.md#can-static-code-be-shared-between-plugins>

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [February 19, 2020, 10:27am UTC](https://discuss.elastic.co/t/how-to-share-components-among-kibana-plugins/219890/3 "2020-02-19T10:27:47Z")

</div>

Hi @lvdiev,

your approach sounds good to me. This is almost how Kibana is internally organized - check out the `kibana_react` package here: [https://github.com/elastic/kibana/tree/master/src/plugins/kibana\_react](https://github.com/elastic/kibana/tree/master/src/plugins/kibana_react)

It's also providing various components which are used by several other plugins.

To follow the rules in their strictest form, the components should be re-exported by the `index.ts/js` file in the `public` folder in your commons plugin - plugins should never reach into the folder structure of another plugin but always use the top level export. This helps with keeping individual plugins separate (because you can re-organize the inner workings of a plugin without touching anything else as long as the public things exported from the top level are staying the same).

---

<div class="post-metadata">

**Author:** ![lvdiev](https://avatars.discourse-cdn.com/v4/letter/l/c77e96/32.png) [@lvdiev](https://discuss.elastic.co/u/lvdiev)\
**Post date:** [February 21, 2020, 6:24am UTC](https://discuss.elastic.co/t/how-to-share-components-among-kibana-plugins/219890/4 "2020-02-21T06:24:00Z")

</div>

Thank you for your suggestion. That way worked like a charm. I just want to summarize it as following:

- Commons plugin: export all components in `public/index.ts`  
`export {DateRangePicker} from './components/DateRangePicker';`  
`export {AnyComponent} from './components/AnyComponent';`

- from others plugin's `.tsx file`: use  
`import {DateRangePicker} from 'plugins/plugins_commons';`  
to import DateRangePicker

---

<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:** [March 20, 2020, 6:28am UTC](https://discuss.elastic.co/t/how-to-share-components-among-kibana-plugins/219890/5 "2020-03-20T06:28:54Z")

</div>

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