diff --git a/src/core_plugins/console/public/src/directives/sense_history.js b/src/core_plugins/console/public/src/directives/sense_history.js
index 3ebde5edb515d..66a57a81de606 100644
--- a/src/core_plugins/console/public/src/directives/sense_history.js
+++ b/src/core_plugins/console/public/src/directives/sense_history.js
@@ -1,4 +1,4 @@
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 
 var { memoize } = require('lodash');
 let moment = require('moment');
diff --git a/src/core_plugins/input_control_vis/public/components/editor/field_select.js b/src/core_plugins/input_control_vis/public/components/editor/field_select.js
index 14e1c3efb2c6e..a9607a21a4409 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/field_select.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/field_select.js
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Select from 'react-select';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export class FieldSelect extends Component {
   constructor(props) {
diff --git a/src/core_plugins/input_control_vis/public/components/editor/index_pattern_select.js b/src/core_plugins/input_control_vis/public/components/editor/index_pattern_select.js
index 03e6b25b33f41..eaf69ebe37652 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/index_pattern_select.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/index_pattern_select.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Select from 'react-select';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export class IndexPatternSelect extends Component {
   constructor(props) {
diff --git a/src/core_plugins/kibana/public/dashboard/components/exit_full_screen_button.js b/src/core_plugins/kibana/public/dashboard/components/exit_full_screen_button.js
index 02cfe1d3fe208..4535521e4ddc8 100644
--- a/src/core_plugins/kibana/public/dashboard/components/exit_full_screen_button.js
+++ b/src/core_plugins/kibana/public/dashboard/components/exit_full_screen_button.js
@@ -8,7 +8,7 @@ import {
 
 import {
   keyCodes,
-} from 'ui_framework/services';
+} from '@elastic/eui';
 
 export class ExitFullScreenButton extends PureComponent {
 
diff --git a/src/core_plugins/kibana/public/dashboard/components/exit_full_screen_button.test.js b/src/core_plugins/kibana/public/dashboard/components/exit_full_screen_button.test.js
index 77e2512c453f5..89da198aefaf2 100644
--- a/src/core_plugins/kibana/public/dashboard/components/exit_full_screen_button.test.js
+++ b/src/core_plugins/kibana/public/dashboard/components/exit_full_screen_button.test.js
@@ -13,7 +13,7 @@ import {
   ExitFullScreenButton,
 } from './exit_full_screen_button';
 
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 
 
 test('is rendered', () => {
diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
index 3cf15950ce000..36e1d7702ed14 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -2,7 +2,7 @@ import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_regis
 import 'ui/pager_control';
 import 'ui/pager';
 import { DashboardConstants, createDashboardEditUrl } from '../dashboard_constants';
-import { SortableProperties } from 'ui_framework/services';
+import { SortableProperties } from '@elastic/eui';
 import { ConfirmationButtonTypes } from 'ui/modals';
 
 export function DashboardListingController($injector, $scope, $location) {
diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_form.js b/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_form.js
index 71b2fe89eb64d..9958eeed6e338 100644
--- a/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_form.js
+++ b/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_form.js
@@ -7,7 +7,7 @@ import {
 
 import {
   keyCodes,
-} from 'ui_framework/services';
+} from '@elastic/eui';
 
 export function PanelOptionsMenuForm({ title, onReset, onUpdatePanelTitle, onClose }) {
   function onInputChange(event) {
diff --git a/src/core_plugins/kibana/public/management/sections/objects/change_index_modal.js b/src/core_plugins/kibana/public/management/sections/objects/change_index_modal.js
index 150eb34203f8e..bcad9dca82eea 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/change_index_modal.js
+++ b/src/core_plugins/kibana/public/management/sections/objects/change_index_modal.js
@@ -22,7 +22,7 @@ import {
   KuiPager,
 } from 'ui_framework/components';
 
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 
 export class ChangeIndexModal extends React.Component {
   constructor(props) {
diff --git a/src/core_plugins/kibana/public/management/sections/settings/advanced_row.js b/src/core_plugins/kibana/public/management/sections/settings/advanced_row.js
index 308c0d4291fe6..ed7f51612aa01 100644
--- a/src/core_plugins/kibana/public/management/sections/settings/advanced_row.js
+++ b/src/core_plugins/kibana/public/management/sections/settings/advanced_row.js
@@ -1,7 +1,7 @@
 import 'ui/elastic_textarea';
 import 'ui/filters/markdown';
 import { uiModules } from 'ui/modules';
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 import advancedRowTemplate from 'plugins/kibana/management/sections/settings/advanced_row.html';
 
 uiModules.get('apps/management')
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
index 47f61bc0d5af9..16d9da68b602d 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
-import { SortableProperties } from 'ui_framework/services';
+import { SortableProperties } from '@elastic/eui';
 import { Pager } from 'ui/pager';
 import { NoVisualizationsPrompt } from './no_visualizations_prompt';
 
diff --git a/src/core_plugins/metrics/public/components/aggs/calculation.js b/src/core_plugins/metrics/public/components/aggs/calculation.js
index 92a36b4dcdd57..15ba9fd5e0450 100644
--- a/src/core_plugins/metrics/public/components/aggs/calculation.js
+++ b/src/core_plugins/metrics/public/components/aggs/calculation.js
@@ -10,7 +10,7 @@ import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
 import Vars from './vars';
 
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 class CalculationAgg extends Component {
 
diff --git a/src/core_plugins/metrics/public/components/aggs/derivative.js b/src/core_plugins/metrics/public/components/aggs/derivative.js
index 6c98426dcf808..ace60f6421c74 100644
--- a/src/core_plugins/metrics/public/components/aggs/derivative.js
+++ b/src/core_plugins/metrics/public/components/aggs/derivative.js
@@ -6,7 +6,7 @@ import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const DerivativeAgg = props => {
   const { siblings } = props;
diff --git a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
index 9f01cd613a0e2..c8d4fb0c53e70 100644
--- a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
+++ b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
@@ -6,7 +6,7 @@ import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const FilterRatioAgg = props => {
   const {
diff --git a/src/core_plugins/metrics/public/components/aggs/moving_average.js b/src/core_plugins/metrics/public/components/aggs/moving_average.js
index af7761ef3b34b..cfdc5377a2e87 100644
--- a/src/core_plugins/metrics/public/components/aggs/moving_average.js
+++ b/src/core_plugins/metrics/public/components/aggs/moving_average.js
@@ -8,7 +8,7 @@ import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
 import createNumberHandler from '../lib/create_number_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const MovingAverageAgg = props => {
   const { siblings } = props;
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile.js b/src/core_plugins/metrics/public/components/aggs/percentile.js
index 194acda801f12..5c601f55e8217 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile.js
@@ -10,7 +10,7 @@ import Select from 'react-select';
 import uuid from 'uuid';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 const newPercentile = (opts) => {
   return _.assign({ id: uuid.v1(), mode: 'line', shade: 0.2 }, opts);
 };
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
index 61d0c59e0ecdc..cbe08c04868fb 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
@@ -6,7 +6,7 @@ import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const PercentileRankAgg = props => {
   const { series, panel, fields } = props;
diff --git a/src/core_plugins/metrics/public/components/aggs/serial_diff.js b/src/core_plugins/metrics/public/components/aggs/serial_diff.js
index 01319d2c30842..c8b681708b7f2 100644
--- a/src/core_plugins/metrics/public/components/aggs/serial_diff.js
+++ b/src/core_plugins/metrics/public/components/aggs/serial_diff.js
@@ -6,7 +6,7 @@ import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createNumberHandler from '../lib/create_number_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const SerialDiffAgg = props => {
   const { siblings } = props;
diff --git a/src/core_plugins/metrics/public/components/aggs/series_agg.js b/src/core_plugins/metrics/public/components/aggs/series_agg.js
index aff4d70b27bc0..6e8aecbd404b1 100644
--- a/src/core_plugins/metrics/public/components/aggs/series_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/series_agg.js
@@ -5,7 +5,7 @@ import Select from 'react-select';
 import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 function SeriesAgg(props) {
   const { panel, model } = props;
diff --git a/src/core_plugins/metrics/public/components/aggs/static.js b/src/core_plugins/metrics/public/components/aggs/static.js
index 584a21783a116..1a3d81a4da829 100644
--- a/src/core_plugins/metrics/public/components/aggs/static.js
+++ b/src/core_plugins/metrics/public/components/aggs/static.js
@@ -5,7 +5,7 @@ import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const Static = props => {
   const handleChange = createChangeHandler(props.onChange, props.model);
diff --git a/src/core_plugins/metrics/public/components/aggs/std_agg.js b/src/core_plugins/metrics/public/components/aggs/std_agg.js
index acf65fbe99ba3..c17aceead90fb 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_agg.js
@@ -5,7 +5,7 @@ import FieldSelect from './field_select';
 import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 function StandardAgg(props) {
   const { model, panel, series, fields } = props;
diff --git a/src/core_plugins/metrics/public/components/aggs/std_deviation.js b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
index 0ed1760440f8f..9b1358b4e1b5a 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_deviation.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
@@ -7,7 +7,7 @@ import Select from 'react-select';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const StandardDeviationAgg = props => {
   const { series, panel, fields } = props;
diff --git a/src/core_plugins/metrics/public/components/aggs/std_sibling.js b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
index 5f66b507b57e5..e536371983afd 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_sibling.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
@@ -7,7 +7,7 @@ import Select from 'react-select';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const StandardSiblingAgg = props => {
   const { siblings } = props;
diff --git a/src/core_plugins/metrics/public/components/annotations_editor.js b/src/core_plugins/metrics/public/components/annotations_editor.js
index b2d9defa5b191..f671d5d6a4bd9 100644
--- a/src/core_plugins/metrics/public/components/annotations_editor.js
+++ b/src/core_plugins/metrics/public/components/annotations_editor.js
@@ -8,7 +8,7 @@ import FieldSelect from './aggs/field_select';
 import uuid from 'uuid';
 import IconSelect from './icon_select';
 import YesNo from './yes_no';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 function newAnnotation() {
   return {
diff --git a/src/core_plugins/metrics/public/components/color_rules.js b/src/core_plugins/metrics/public/components/color_rules.js
index 7cf26ce5a60f8..27b311fa2fd83 100644
--- a/src/core_plugins/metrics/public/components/color_rules.js
+++ b/src/core_plugins/metrics/public/components/color_rules.js
@@ -5,7 +5,7 @@ import AddDeleteButtons from './add_delete_buttons';
 import Select from 'react-select';
 import * as collectionActions from './lib/collection_actions';
 import ColorPicker from './color_picker';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 class ColorRules extends Component {
 
diff --git a/src/core_plugins/metrics/public/components/index_pattern.js b/src/core_plugins/metrics/public/components/index_pattern.js
index dc8163ecd3bc8..958ee1e478861 100644
--- a/src/core_plugins/metrics/public/components/index_pattern.js
+++ b/src/core_plugins/metrics/public/components/index_pattern.js
@@ -4,7 +4,7 @@ import FieldSelect from './aggs/field_select';
 import createSelectHandler from './lib/create_select_handler';
 import createTextHandler from './lib/create_text_handler';
 import YesNo from './yes_no';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const IndexPattern = props => {
   const { fields, prefix } = props;
diff --git a/src/core_plugins/metrics/public/components/lib/sort_keyhandler.js b/src/core_plugins/metrics/public/components/lib/sort_keyhandler.js
index f148fc3f46a77..3f5b64003ebfa 100644
--- a/src/core_plugins/metrics/public/components/lib/sort_keyhandler.js
+++ b/src/core_plugins/metrics/public/components/lib/sort_keyhandler.js
@@ -1,4 +1,4 @@
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 
 export function createUpDownHandler(callback) {
   return (ev) => {
diff --git a/src/core_plugins/metrics/public/components/panel_config/gauge.js b/src/core_plugins/metrics/public/components/panel_config/gauge.js
index 7c63f436c55c2..8e4108489701e 100644
--- a/src/core_plugins/metrics/public/components/panel_config/gauge.js
+++ b/src/core_plugins/metrics/public/components/panel_config/gauge.js
@@ -9,7 +9,7 @@ import ColorRules from '../color_rules';
 import ColorPicker from '../color_picker';
 import uuid from 'uuid';
 import YesNo from 'plugins/metrics/components/yes_no';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 class GaugePanelConfig extends Component {
 
diff --git a/src/core_plugins/metrics/public/components/panel_config/markdown.js b/src/core_plugins/metrics/public/components/panel_config/markdown.js
index 1a84eafa2981b..adb9ce3b88177 100644
--- a/src/core_plugins/metrics/public/components/panel_config/markdown.js
+++ b/src/core_plugins/metrics/public/components/panel_config/markdown.js
@@ -11,7 +11,7 @@ import YesNo from '../yes_no';
 import MarkdownEditor from '../markdown_editor';
 import less from 'less/lib/less-browser';
 import { KuiCodeEditor } from 'ui_framework/components';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 const lessC = less(window, { env: 'production' });
 
 class MarkdownPanelConfig extends Component {
diff --git a/src/core_plugins/metrics/public/components/panel_config/metric.js b/src/core_plugins/metrics/public/components/panel_config/metric.js
index 3dd033b7d79a2..0d8d5afcc9bc1 100644
--- a/src/core_plugins/metrics/public/components/panel_config/metric.js
+++ b/src/core_plugins/metrics/public/components/panel_config/metric.js
@@ -6,7 +6,7 @@ import createTextHandler from '../lib/create_text_handler';
 import ColorRules from '../color_rules';
 import YesNo from '../yes_no';
 import uuid from 'uuid';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 class MetricPanelConfig extends Component {
 
diff --git a/src/core_plugins/metrics/public/components/panel_config/table.js b/src/core_plugins/metrics/public/components/panel_config/table.js
index ca20a15ff50de..acfdb06ea8a78 100644
--- a/src/core_plugins/metrics/public/components/panel_config/table.js
+++ b/src/core_plugins/metrics/public/components/panel_config/table.js
@@ -7,7 +7,7 @@ import createTextHandler from '../lib/create_text_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import uuid from 'uuid';
 import YesNo from '../yes_no';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 class TablePanelConfig extends Component {
 
diff --git a/src/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
index 41404f8914621..005f1f3e6727f 100644
--- a/src/core_plugins/metrics/public/components/panel_config/timeseries.js
+++ b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
@@ -8,7 +8,7 @@ import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
 import ColorPicker from '../color_picker';
 import YesNo from '../yes_no';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 class TimeseriesPanelConfig extends Component {
 
diff --git a/src/core_plugins/metrics/public/components/panel_config/top_n.js b/src/core_plugins/metrics/public/components/panel_config/top_n.js
index e2a17fd7cc1f8..faa03466e7dfe 100644
--- a/src/core_plugins/metrics/public/components/panel_config/top_n.js
+++ b/src/core_plugins/metrics/public/components/panel_config/top_n.js
@@ -7,7 +7,7 @@ import ColorRules from '../color_rules';
 import ColorPicker from '../color_picker';
 import uuid from 'uuid';
 import YesNo from '../yes_no';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 class TopNPanelConfig extends Component {
 
diff --git a/src/core_plugins/metrics/public/components/series_config.js b/src/core_plugins/metrics/public/components/series_config.js
index 58ab2343a4517..7133cd02405d3 100644
--- a/src/core_plugins/metrics/public/components/series_config.js
+++ b/src/core_plugins/metrics/public/components/series_config.js
@@ -5,7 +5,7 @@ import createSelectHandler from './lib/create_select_handler';
 import createTextHandler from './lib/create_text_handler';
 import YesNo from './yes_no';
 import { IndexPattern } from './index_pattern';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 export const SeriesConfig = props => {
   const defaults = { offset_time: '', value_template: '' };
diff --git a/src/core_plugins/metrics/public/components/vis_editor_visualization.js b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
index 39624028cc278..770dc27a4482c 100644
--- a/src/core_plugins/metrics/public/components/vis_editor_visualization.js
+++ b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 import Visualization from './visualization';
 import Toggle from 'react-toggle';
 import 'react-toggle/style.css';
diff --git a/src/core_plugins/metrics/public/components/vis_types/table/config.js b/src/core_plugins/metrics/public/components/vis_types/table/config.js
index 94b6c2fc20d8c..f655151783186 100644
--- a/src/core_plugins/metrics/public/components/vis_types/table/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/table/config.js
@@ -8,7 +8,7 @@ import FieldSelect from '../../aggs/field_select';
 import Select from 'react-select';
 import YesNo from '../../yes_no';
 import ColorRules from '../../color_rules';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 class TableSeriesConfig extends Component {
 
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
index 429ae18a1dde0..b554716c19939 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
@@ -6,7 +6,7 @@ import createSelectHandler from '../../lib/create_select_handler';
 import YesNo from '../../yes_no';
 import createTextHandler from '../../lib/create_text_handler';
 import { IndexPattern } from '../../index_pattern';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 function TimeseriesConfig(props) {
   const handleSelectChange = createSelectHandler(props.onChange);
diff --git a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
index b881b65dbabc8..0b21f092fc679 100644
--- a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 function HorizontalLegend(props) {
   const rows = props.series.map(createLegendSeries(props));
diff --git a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
index 05753b2aeeda9..488ea9c9185a5 100644
--- a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
-import { htmlIdGenerator } from 'ui_framework/services';
+import { htmlIdGenerator } from '@elastic/eui';
 
 function VerticalLegend(props) {
   const rows = props.series.map(createLegendSeries(props));
diff --git a/src/core_plugins/timelion/public/directives/timelion_expression_input.js b/src/core_plugins/timelion/public/directives/timelion_expression_input.js
index 36240b1045077..40127418df98e 100644
--- a/src/core_plugins/timelion/public/directives/timelion_expression_input.js
+++ b/src/core_plugins/timelion/public/directives/timelion_expression_input.js
@@ -34,7 +34,7 @@ import {
   suggest,
   insertAtLocation,
 } from './timelion_expression_input_helpers';
-import { comboBoxKeyCodes } from 'ui_framework/services';
+import { comboBoxKeyCodes } from '@elastic/eui';
 import { ArgValueSuggestionsProvider } from './timelion_expression_suggestions/arg_value_suggestions';
 
 const Parser = PEG.buildParser(grammar);
diff --git a/src/ui/public/accessibility/__tests__/kbn_accessible_click.js b/src/ui/public/accessibility/__tests__/kbn_accessible_click.js
index 9e5f740942fec..c23b8e8b4e5e0 100644
--- a/src/ui/public/accessibility/__tests__/kbn_accessible_click.js
+++ b/src/ui/public/accessibility/__tests__/kbn_accessible_click.js
@@ -3,7 +3,7 @@ import sinon from 'sinon';
 import expect from 'expect.js';
 import ngMock from 'ng_mock';
 import '../kbn_accessible_click';
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 
 describe('kbnAccessibleClick directive', () => {
   let $compile;
diff --git a/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js b/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js
index edfd1dc62d471..802c278deb0ea 100644
--- a/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js
+++ b/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js
@@ -3,7 +3,7 @@ import sinon from 'sinon';
 import expect from 'expect.js';
 import ngMock from 'ng_mock';
 import '../kbn_ui_ace_keyboard_mode';
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 
 describe('kbnUiAceKeyboardMode directive', () => {
   let element;
diff --git a/src/ui/public/accessibility/kbn_accessible_click.js b/src/ui/public/accessibility/kbn_accessible_click.js
index d425118855ebd..04247790e5326 100644
--- a/src/ui/public/accessibility/kbn_accessible_click.js
+++ b/src/ui/public/accessibility/kbn_accessible_click.js
@@ -21,7 +21,7 @@
 import {
   accessibleClickKeys,
   keyCodes,
-} from 'ui_framework/services';
+} from '@elastic/eui';
 import { uiModules } from 'ui/modules';
 
 uiModules.get('kibana')
diff --git a/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js b/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js
index 3ea23f6116183..de719ee5620ec 100644
--- a/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js
+++ b/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js
@@ -15,7 +15,7 @@
 import angular from 'angular';
 import { uiModules } from 'ui/modules';
 import './kbn_ui_ace_keyboard_mode.less';
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 
 let aceKeyboardModeId = 0;
 
diff --git a/src/ui/public/typeahead/typeahead.js b/src/ui/public/typeahead/typeahead.js
index 4c43237eac5de..8491b9a8121be 100644
--- a/src/ui/public/typeahead/typeahead.js
+++ b/src/ui/public/typeahead/typeahead.js
@@ -3,7 +3,7 @@ import 'ui/typeahead/typeahead.less';
 import 'ui/typeahead/_input';
 import 'ui/typeahead/_items';
 import { uiModules } from 'ui/modules';
-import { comboBoxKeyCodes } from 'ui_framework/services';
+import { comboBoxKeyCodes } from '@elastic/eui';
 
 const typeahead = uiModules.get('kibana/typeahead');
 
diff --git a/src/ui/public/vis/editors/default/__tests__/keyboard_move.js b/src/ui/public/vis/editors/default/__tests__/keyboard_move.js
index 7b48e932e5eaf..d5a7c74718fa6 100644
--- a/src/ui/public/vis/editors/default/__tests__/keyboard_move.js
+++ b/src/ui/public/vis/editors/default/__tests__/keyboard_move.js
@@ -3,7 +3,7 @@ import expect from 'expect.js';
 import ngMock from 'ng_mock';
 import sinon from 'sinon';
 import { Direction } from '../keyboard_move';
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 
 describe('keyboardMove directive', () => {
 
diff --git a/src/ui/public/vis/editors/default/keyboard_move.js b/src/ui/public/vis/editors/default/keyboard_move.js
index ca6fe941061e8..bab6c9e6cf77c 100644
--- a/src/ui/public/vis/editors/default/keyboard_move.js
+++ b/src/ui/public/vis/editors/default/keyboard_move.js
@@ -21,7 +21,7 @@
  * }
  */
 import { uiModules } from 'ui/modules';
-import { keyCodes } from 'ui_framework/services';
+import { keyCodes } from '@elastic/eui';
 
 export const Direction = {
   up: 'up',
diff --git a/src/ui/public/visualize/visualize_legend.js b/src/ui/public/visualize/visualize_legend.js
index ba037e29558d2..92e70c5f5857c 100644
--- a/src/ui/public/visualize/visualize_legend.js
+++ b/src/ui/public/visualize/visualize_legend.js
@@ -3,7 +3,7 @@ import html from 'ui/visualize/visualize_legend.html';
 import { VislibLibDataProvider } from 'ui/vislib/lib/data';
 import { FilterBarClickHandlerProvider } from 'ui/filter_bar/filter_bar_click_handler';
 import { uiModules } from 'ui/modules';
-import { htmlIdGenerator, keyCodes } from 'ui_framework/services';
+import { htmlIdGenerator, keyCodes } from '@elastic/eui';
 
 
 uiModules.get('kibana')
diff --git a/ui_framework/doc_site/src/components/guide_page/guide_page.js b/ui_framework/doc_site/src/components/guide_page/guide_page.js
index 0f4c582bab1dc..7407c3204eaa2 100644
--- a/ui_framework/doc_site/src/components/guide_page/guide_page.js
+++ b/ui_framework/doc_site/src/components/guide_page/guide_page.js
@@ -43,6 +43,16 @@ export class GuidePage extends Component {
         </GuidePageSideNav>
 
         <div className="guidePageBody">
+          <div style={{ marginBottom: 40, backgroundColor: '#ffec9d', padding: 20 }}>
+            <h1 className="guideTitle">
+              The Kibana UI Framework has been DEPRECATED.
+            </h1>
+
+            <h2 className="guideTitle">
+              Please use the <a href="https://github.com/elastic/eui">EUI Framework instead</a>.
+            </h2>
+          </div>
+
           {this.props.children}
         </div>
       </div>
diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button_aria.js b/ui_framework/doc_site/src/views/collapse_button/collapse_button_aria.js
index d9ed22034fd27..d0ec113a98e28 100644
--- a/ui_framework/doc_site/src/views/collapse_button/collapse_button_aria.js
+++ b/ui_framework/doc_site/src/views/collapse_button/collapse_button_aria.js
@@ -4,7 +4,7 @@ import {
   KuiCollapseButton
 } from '../../../../components';
 
-import { htmlIdGenerator } from '../../../../services';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
 
diff --git a/ui_framework/doc_site/src/views/home/home_view.js b/ui_framework/doc_site/src/views/home/home_view.js
index d74ad1f6c228e..36d2ce17bb1c8 100644
--- a/ui_framework/doc_site/src/views/home/home_view.js
+++ b/ui_framework/doc_site/src/views/home/home_view.js
@@ -1,85 +1,17 @@
 import React from 'react';
 
-import {
-  Link,
-} from 'react-router';
-
 export const HomeView = () => (
   <div className="guideContentPage guideHomePage">
-    <div className="guideContentPage__hint">
-      <p className="guideText guideText--noMargin">
-        You can navigate the docs with this little menu button.
-      </p>
-
-      <div className="guideHintArrow" />
-    </div>
-
     <div className="guideContentPage__content">
-      <h1 className="guideTitle">
-        Welcome to the Kibana UI Framework docs!
-      </h1>
-
-      <p className="guideText">
-        The Kibana team uses the UI Framework to build Kibana&rsquo;s user interface. Please see
-        the <a href="https://www.elastic.co/guide/en/kibana/current/index.html" className="guideLink">general Kibana docs</a> for information on how to use Kibana, and
-        the <a href="https://www.elastic.co/guide/en/kibana/current/kibana-plugins.html" className="guideLink">plugin-specific section</a> for
-        help developing Kibana plugins.
-      </p>
-
-      <p className="guideText">
-        You can find the source for the UI Framework
-        at the <a href="https://github.com/elastic/kibana/tree/master/ui_framework" className="guideLink">Kibana repo</a>.
-      </p>
-
-      <p className="guideText">
-        If you&rsquo;re just getting started with the UI Framework for the first time, you may
-        be interested in some of the more commonly-used components:
-      </p>
-
-      <p className="guideText">
-        <Link
-          className="guideLink"
-          to="button"
-        >
-          <span className="fa fa-angle-double-right" /> Buttons
-        </Link>
-      </p>
-
-      <p className="guideText">
-        <Link
-          className="guideLink"
-          to="form"
-        >
-          <span className="fa fa-angle-double-right" /> Form elements
-        </Link>
-      </p>
-
-      <p className="guideText">
-        <Link
-          className="guideLink"
-          to="table"
-        >
-          <span className="fa fa-angle-double-right" /> Tables
-        </Link>
-      </p>
-
-      <p className="guideText">
-        <Link
-          className="guideLink"
-          to="typography"
-        >
-          <span className="fa fa-angle-double-right" /> Typography
-        </Link>
-      </p>
-
-      <p className="guideText">
-        <Link
-          className="guideLink"
-          to="infopanel"
-        >
-          <span className="fa fa-angle-double-right" /> InfoPanels
-        </Link>
-      </p>
+      <div style={{ marginBottom: 40, backgroundColor: '#ffec9d', padding: 20 }}>
+        <h1 className="guideTitle">
+          The Kibana UI Framework has been DEPRECATED.
+        </h1>
+
+        <h2 className="guideTitle">
+          Please use the <a href="https://github.com/elastic/eui">EUI Framework instead</a>.
+        </h2>
+      </div>
     </div>
   </div>
 );
diff --git a/ui_framework/doc_site/src/views/table/fluid_table.js b/ui_framework/doc_site/src/views/table/fluid_table.js
index 563f32ae07016..512201baee496 100644
--- a/ui_framework/doc_site/src/views/table/fluid_table.js
+++ b/ui_framework/doc_site/src/views/table/fluid_table.js
@@ -13,7 +13,7 @@ import {
 
 import {
   SortableProperties,
-} from '../../../../services';
+} from '../../../../src/services';
 
 export class FluidTable extends Component {
   constructor(props) {
diff --git a/ui_framework/doc_site/src/views/table/listing_table.js b/ui_framework/doc_site/src/views/table/listing_table.js
index e902dbb48253e..9120a284a3290 100644
--- a/ui_framework/doc_site/src/views/table/listing_table.js
+++ b/ui_framework/doc_site/src/views/table/listing_table.js
@@ -9,7 +9,7 @@ import {
 
 import {
   RIGHT_ALIGNMENT
-} from '../../../../services';
+} from '../../../../src/services';
 
 export class ListingTable extends Component {
   constructor(props) {
diff --git a/ui_framework/doc_site/src/views/table/listing_table_loading_items.js b/ui_framework/doc_site/src/views/table/listing_table_loading_items.js
index fd711d1fc4954..16f7de6ab8503 100644
--- a/ui_framework/doc_site/src/views/table/listing_table_loading_items.js
+++ b/ui_framework/doc_site/src/views/table/listing_table_loading_items.js
@@ -10,7 +10,7 @@ import {
 
 import {
   RIGHT_ALIGNMENT
-} from '../../../../services';
+} from '../../../../src/services';
 
 function renderHeader() {
   return [
diff --git a/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js b/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js
index 2849c0fe7bfe8..3ee73b8a5a9e6 100644
--- a/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js
+++ b/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js
@@ -9,7 +9,7 @@ import {
 
 import {
   RIGHT_ALIGNMENT
-} from '../../../../services';
+} from '../../../../src/services';
 
 function renderToolBarActions() {
   return [
diff --git a/ui_framework/doc_site/src/views/table/table.js b/ui_framework/doc_site/src/views/table/table.js
index 0c4568d3ce958..3ff02eb4c3070 100644
--- a/ui_framework/doc_site/src/views/table/table.js
+++ b/ui_framework/doc_site/src/views/table/table.js
@@ -22,7 +22,7 @@ import {
 
 import {
   SortableProperties,
-} from '../../../../services';
+} from '../../../../src/services';
 
 const statusToIconClassNameMap = {
   success: 'kuiIcon--success fa-check',
diff --git a/ui_framework/doc_site/src/views/table/table_with_menu_buttons.js b/ui_framework/doc_site/src/views/table/table_with_menu_buttons.js
index cb45e7df798e9..66052a23415fb 100644
--- a/ui_framework/doc_site/src/views/table/table_with_menu_buttons.js
+++ b/ui_framework/doc_site/src/views/table/table_with_menu_buttons.js
@@ -11,7 +11,7 @@ import {
 
 import {
   RIGHT_ALIGNMENT
-} from '../../../../services';
+} from '../../../../src/services';
 
 export function TableWithMenuButtons() {
   return (
diff --git a/ui_framework/services/index.js b/ui_framework/services/index.js
deleted file mode 100644
index 921e494c1e642..0000000000000
--- a/ui_framework/services/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from '../src/services';
diff --git a/ui_framework/src/components/code_editor/code_editor.js b/ui_framework/src/components/code_editor/code_editor.js
index 575d4e05f9086..e99ceb127e69e 100644
--- a/ui_framework/src/components/code_editor/code_editor.js
+++ b/ui_framework/src/components/code_editor/code_editor.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import AceEditor from 'react-ace';
 
-import { htmlIdGenerator, keyCodes } from '../../../services';
+import { htmlIdGenerator, keyCodes } from '../../services';
 
 export class KuiCodeEditor extends Component {
   state = {