diff --git a/.gitignore b/.gitignore
index fbd0bc3f495b5..9e666971d0bba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,4 @@ ui_framework/doc_site/build
 !ui_framework/doc_site/build/index.html
 yarn.lock
 .yo-rc.json
+/.vscode
diff --git a/package.json b/package.json
index 5dc7073703510..cc82c109f8ddd 100644
--- a/package.json
+++ b/package.json
@@ -165,12 +165,13 @@
     "pui-react-tooltip": "7.5.4",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
-    "react": "15.4.2",
+    "react": "15.6.1",
     "react-ace": "3.7.0",
-    "react-addons-test-utils": "15.4.2",
+    "react-test-renderer": "15.6.1",
+    "react-addons-test-utils": "15.6.0",
     "react-anything-sortable": "1.6.1",
-    "react-color": "2.11.1",
-    "react-dom": "15.4.2",
+    "react-color": "2.11.7",
+    "react-dom": "15.6.1",
     "react-input-autosize": "1.1.0",
     "react-markdown": "2.4.2",
     "react-redux": "4.4.5",
@@ -216,7 +217,7 @@
     "chokidar": "1.6.0",
     "chromedriver": "2.29.0",
     "classnames": "2.2.5",
-    "enzyme": "2.7.0",
+    "enzyme": "2.9.1",
     "enzyme-to-json": "1.4.5",
     "eslint": "3.19.0",
     "eslint-plugin-babel": "4.1.1",
diff --git a/src/core_plugins/metrics/public/components/add_delete_buttons.js b/src/core_plugins/metrics/public/components/add_delete_buttons.js
index 215a8ed9ffe14..b084aab0d19c5 100644
--- a/src/core_plugins/metrics/public/components/add_delete_buttons.js
+++ b/src/core_plugins/metrics/public/components/add_delete_buttons.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Tooltip from './tooltip';
 
 function AddDeleteButtons(props) {
diff --git a/src/core_plugins/metrics/public/components/aggs/agg.js b/src/core_plugins/metrics/public/components/aggs/agg.js
index 913bd85dae10f..001680e4a46e0 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import StdAgg from './std_agg';
 import aggToComponent from '../lib/agg_to_component';
 import { sortable } from 'react-anything-sortable';
diff --git a/src/core_plugins/metrics/public/components/aggs/agg_row.js b/src/core_plugins/metrics/public/components/aggs/agg_row.js
index 480c7f7236306..2d024c1c31436 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg_row.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg_row.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from '../add_delete_buttons';
 import Tooltip from '../tooltip';
diff --git a/src/core_plugins/metrics/public/components/aggs/agg_select.js b/src/core_plugins/metrics/public/components/aggs/agg_select.js
index 30e2cec1bae30..b1839b62391e2 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg_select.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import Select from 'react-select';
 
 const metricAggs = [
diff --git a/src/core_plugins/metrics/public/components/aggs/calculation.js b/src/core_plugins/metrics/public/components/aggs/calculation.js
index b40a3f14e8cc3..0d907cdbd8204 100644
--- a/src/core_plugins/metrics/public/components/aggs/calculation.js
+++ b/src/core_plugins/metrics/public/components/aggs/calculation.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import uuid from 'uuid';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js b/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
index 0c780e29e91f3..86afb89dfb338 100644
--- a/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
+++ b/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggRow from './agg_row';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
diff --git a/src/core_plugins/metrics/public/components/aggs/derivative.js b/src/core_plugins/metrics/public/components/aggs/derivative.js
index 03cfd49adf63a..a30bdcd55b40f 100644
--- a/src/core_plugins/metrics/public/components/aggs/derivative.js
+++ b/src/core_plugins/metrics/public/components/aggs/derivative.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/field_select.js b/src/core_plugins/metrics/public/components/aggs/field_select.js
index 92d6a0520589d..870d79376c62f 100644
--- a/src/core_plugins/metrics/public/components/aggs/field_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/field_select.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Select from 'react-select';
 import generateByTypeFilter from '../lib/generate_by_type_filter';
 
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 94098e3bd3636..2af89a78e30dc 100644
--- a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
+++ b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/metric_select.js b/src/core_plugins/metrics/public/components/aggs/metric_select.js
index 27aa0ba9b2861..2c0273a1ada4b 100644
--- a/src/core_plugins/metrics/public/components/aggs/metric_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/metric_select.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 import Select from 'react-select';
 import calculateSiblings from '../lib/calculate_siblings';
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 4f9ad7bc26dc4..d75d605ff8b9a 100644
--- a/src/core_plugins/metrics/public/components/aggs/moving_average.js
+++ b/src/core_plugins/metrics/public/components/aggs/moving_average.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggRow from './agg_row';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile.js b/src/core_plugins/metrics/public/components/aggs/percentile.js
index 4bd24b98adae3..170e651a91c57 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
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 de02f27856b57..8e44aff0104b7 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/positive_only.js b/src/core_plugins/metrics/public/components/aggs/positive_only.js
index 543c814a75956..fa91cb5ac46c3 100644
--- a/src/core_plugins/metrics/public/components/aggs/positive_only.js
+++ b/src/core_plugins/metrics/public/components/aggs/positive_only.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
 import AggRow from './agg_row';
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 33d20a3a1e16f..469b8f1f85626 100644
--- a/src/core_plugins/metrics/public/components/aggs/serial_diff.js
+++ b/src/core_plugins/metrics/public/components/aggs/serial_diff.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
 import AggRow from './agg_row';
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 c7dc99344f6c8..32cfca69f8ca1 100644
--- a/src/core_plugins/metrics/public/components/aggs/series_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/series_agg.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import Select from 'react-select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/static.js b/src/core_plugins/metrics/public/components/aggs/static.js
index d383eb21f16b4..d952c3cf32097 100644
--- a/src/core_plugins/metrics/public/components/aggs/static.js
+++ b/src/core_plugins/metrics/public/components/aggs/static.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
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 f6c6463e4b0a5..0b5a27b137e56 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_agg.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';
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 803d0e240e3d2..790a551ed1e0f 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_deviation.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';
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 45462b46a3740..6fb7871a78f94 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_sibling.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggRow from './agg_row';
 import MetricSelect from './metric_select';
 import AggSelect from './agg_select';
diff --git a/src/core_plugins/metrics/public/components/aggs/vars.js b/src/core_plugins/metrics/public/components/aggs/vars.js
index 85a77568a6108..e8d46ab3807fc 100644
--- a/src/core_plugins/metrics/public/components/aggs/vars.js
+++ b/src/core_plugins/metrics/public/components/aggs/vars.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from '../add_delete_buttons';
 import * as collectionActions from '../lib/collection_actions';
diff --git a/src/core_plugins/metrics/public/components/annotations_editor.js b/src/core_plugins/metrics/public/components/annotations_editor.js
index ed1ca2a3e8ef7..017d8968a3b7b 100644
--- a/src/core_plugins/metrics/public/components/annotations_editor.js
+++ b/src/core_plugins/metrics/public/components/annotations_editor.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import * as collectionActions from './lib/collection_actions';
 import AddDeleteButtons from './add_delete_buttons';
diff --git a/src/core_plugins/metrics/public/components/color_picker.js b/src/core_plugins/metrics/public/components/color_picker.js
index 01ff23857b542..ee8229478589a 100644
--- a/src/core_plugins/metrics/public/components/color_picker.js
+++ b/src/core_plugins/metrics/public/components/color_picker.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import Tooltip from './tooltip';
 import Picker from './custom_color_picker';
 
diff --git a/src/core_plugins/metrics/public/components/color_rules.js b/src/core_plugins/metrics/public/components/color_rules.js
index c690b3e28f2fd..b1a922aaf21e6 100644
--- a/src/core_plugins/metrics/public/components/color_rules.js
+++ b/src/core_plugins/metrics/public/components/color_rules.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from './add_delete_buttons';
 import Select from 'react-select';
diff --git a/src/core_plugins/metrics/public/components/custom_color_picker.js b/src/core_plugins/metrics/public/components/custom_color_picker.js
index 5f3bd4f818537..15b7e9b4d8e2d 100644
--- a/src/core_plugins/metrics/public/components/custom_color_picker.js
+++ b/src/core_plugins/metrics/public/components/custom_color_picker.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import { ColorWrap as colorWrap, Saturation, Hue, Alpha, Checkboard } from 'react-color/lib/components/common';
 import ChromeFields from 'react-color/lib/components/chrome/ChromeFields';
diff --git a/src/core_plugins/metrics/public/components/data_format_picker.js b/src/core_plugins/metrics/public/components/data_format_picker.js
index fafc9e8d78d8a..29e7a31ae8f00 100644
--- a/src/core_plugins/metrics/public/components/data_format_picker.js
+++ b/src/core_plugins/metrics/public/components/data_format_picker.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import Select from 'react-select';
 import { durationOutputOptions, durationInputOptions } from './lib/durations';
diff --git a/src/core_plugins/metrics/public/components/error.js b/src/core_plugins/metrics/public/components/error.js
index a88477eb5b25c..ce2178b27b9ea 100644
--- a/src/core_plugins/metrics/public/components/error.js
+++ b/src/core_plugins/metrics/public/components/error.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 function ErrorComponent(props) {
diff --git a/src/core_plugins/metrics/public/components/icon_select.js b/src/core_plugins/metrics/public/components/icon_select.js
index 8a93f10e63154..902033450987c 100644
--- a/src/core_plugins/metrics/public/components/icon_select.js
+++ b/src/core_plugins/metrics/public/components/icon_select.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import Select from 'react-select';
 
 class IconOption 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 10f9953e56bbb..a6e8dfc9b6196 100644
--- a/src/core_plugins/metrics/public/components/index_pattern.js
+++ b/src/core_plugins/metrics/public/components/index_pattern.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import FieldSelect from './aggs/field_select';
 import createSelectHandler from './lib/create_select_handler';
 import createTextHandler from './lib/create_text_handler';
diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js
index 2b4bc7baac66b..76e94aadc94ce 100644
--- a/src/core_plugins/metrics/public/components/markdown_editor.js
+++ b/src/core_plugins/metrics/public/components/markdown_editor.js
@@ -1,5 +1,7 @@
 /* eslint max-len:0 */
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+
+import React, { Component } from 'react';
 import tickFormatter from './lib/tick_formatter';
 import convertSeriesToVars from './lib/convert_series_to_vars';
 import AceEditor from 'react-ace';
diff --git a/src/core_plugins/metrics/public/components/panel_config.js b/src/core_plugins/metrics/public/components/panel_config.js
index 5ec2b849b746d..4561a8a54de45 100644
--- a/src/core_plugins/metrics/public/components/panel_config.js
+++ b/src/core_plugins/metrics/public/components/panel_config.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import timeseries from './panel_config/timeseries';
 import metric from './panel_config/metric';
 import topN from './panel_config/top_n';
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 b70227b3a7f92..fe6d516291782 100644
--- a/src/core_plugins/metrics/public/components/panel_config/gauge.js
+++ b/src/core_plugins/metrics/public/components/panel_config/gauge.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import Select from 'react-select';
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 8c065ece6c1a4..ab008f32d0d7c 100644
--- a/src/core_plugins/metrics/public/components/panel_config/markdown.js
+++ b/src/core_plugins/metrics/public/components/panel_config/markdown.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import AceEditor from 'react-ace';
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 5879503040a5f..0c7c795a04b27 100644
--- a/src/core_plugins/metrics/public/components/panel_config/metric.js
+++ b/src/core_plugins/metrics/public/components/panel_config/metric.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import createTextHandler from '../lib/create_text_handler';
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 ce81e1b37d1c6..62252a03e4db7 100644
--- a/src/core_plugins/metrics/public/components/panel_config/timeseries.js
+++ b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import AnnotationsEditor from '../annotations_editor';
 import { IndexPattern } from '../index_pattern';
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 01166f9603ae1..05db07830601a 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
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import createTextHandler from '../lib/create_text_handler';
diff --git a/src/core_plugins/metrics/public/components/series.js b/src/core_plugins/metrics/public/components/series.js
index 6111b2560a525..d35bcb4bd4b55 100644
--- a/src/core_plugins/metrics/public/components/series.js
+++ b/src/core_plugins/metrics/public/components/series.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 
 import timeseries from './vis_types/timeseries/series';
diff --git a/src/core_plugins/metrics/public/components/series_config.js b/src/core_plugins/metrics/public/components/series_config.js
index b9b19ef70a0ba..41d9f56253173 100644
--- a/src/core_plugins/metrics/public/components/series_config.js
+++ b/src/core_plugins/metrics/public/components/series_config.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import DataFormatPicker from './data_format_picker';
 import createSelectHandler from './lib/create_select_handler';
 import createTextHandler from './lib/create_text_handler';
diff --git a/src/core_plugins/metrics/public/components/series_editor.js b/src/core_plugins/metrics/public/components/series_editor.js
index 36d03eb04a721..f2289d160ac40 100644
--- a/src/core_plugins/metrics/public/components/series_editor.js
+++ b/src/core_plugins/metrics/public/components/series_editor.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import reIdSeries from './lib/re_id_series';
 import Series from './series';
 import {
diff --git a/src/core_plugins/metrics/public/components/split.js b/src/core_plugins/metrics/public/components/split.js
index 1ef670c2623ed..5fb10087c9fa3 100644
--- a/src/core_plugins/metrics/public/components/split.js
+++ b/src/core_plugins/metrics/public/components/split.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import uuid from 'uuid';
 
 import { SplitByTerms } from './splits/terms';
diff --git a/src/core_plugins/metrics/public/components/splits/everything.js b/src/core_plugins/metrics/public/components/splits/everything.js
index 616eff5fb06d2..b2438f81d51b2 100644
--- a/src/core_plugins/metrics/public/components/splits/everything.js
+++ b/src/core_plugins/metrics/public/components/splits/everything.js
@@ -1,6 +1,7 @@
 import createSelectHandler from '../lib/create_select_handler';
 import GroupBySelect from './group_by_select';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 function SplitByEverything(props) {
   const { onChange, model } = props;
diff --git a/src/core_plugins/metrics/public/components/splits/filter.js b/src/core_plugins/metrics/public/components/splits/filter.js
index 3805f25eef0cb..0c77be7b56450 100644
--- a/src/core_plugins/metrics/public/components/splits/filter.js
+++ b/src/core_plugins/metrics/public/components/splits/filter.js
@@ -1,7 +1,8 @@
 import createTextHandler from '../lib/create_text_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import GroupBySelect from './group_by_select';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 export const SplitByFilter = props => {
   const { onChange } = props;
diff --git a/src/core_plugins/metrics/public/components/splits/filter_items.js b/src/core_plugins/metrics/public/components/splits/filter_items.js
index dc87bf4f33c40..09b4cd4574b14 100644
--- a/src/core_plugins/metrics/public/components/splits/filter_items.js
+++ b/src/core_plugins/metrics/public/components/splits/filter_items.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import * as collectionActions from '../lib/collection_actions';
 import AddDeleteButtons from '../add_delete_buttons';
diff --git a/src/core_plugins/metrics/public/components/splits/filters.js b/src/core_plugins/metrics/public/components/splits/filters.js
index 8e68079311a91..e2157ffe62482 100644
--- a/src/core_plugins/metrics/public/components/splits/filters.js
+++ b/src/core_plugins/metrics/public/components/splits/filters.js
@@ -1,7 +1,8 @@
 import createSelectHandler from '../lib/create_select_handler';
 import GroupBySelect from './group_by_select';
 import FilterItems from './filter_items';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 function SplitByFilters(props) {
   const { onChange, model } = props;
   const handleSelectChange = createSelectHandler(onChange);
diff --git a/src/core_plugins/metrics/public/components/splits/group_by_select.js b/src/core_plugins/metrics/public/components/splits/group_by_select.js
index 02cbef254ecbf..1eaafde4609c5 100644
--- a/src/core_plugins/metrics/public/components/splits/group_by_select.js
+++ b/src/core_plugins/metrics/public/components/splits/group_by_select.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Select from 'react-select';
 function GroupBySelect(props) {
   const modeOptions = [
diff --git a/src/core_plugins/metrics/public/components/splits/terms.js b/src/core_plugins/metrics/public/components/splits/terms.js
index 448576bb60de5..ca4af8e436e0d 100644
--- a/src/core_plugins/metrics/public/components/splits/terms.js
+++ b/src/core_plugins/metrics/public/components/splits/terms.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import GroupBySelect from './group_by_select';
 import createTextHandler from '../lib/create_text_handler';
 import createSelectHandler from '../lib/create_select_handler';
diff --git a/src/core_plugins/metrics/public/components/tooltip.js b/src/core_plugins/metrics/public/components/tooltip.js
index 5db7cc8c24192..7d05b6f94621f 100644
--- a/src/core_plugins/metrics/public/components/tooltip.js
+++ b/src/core_plugins/metrics/public/components/tooltip.js
@@ -1,5 +1,6 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import { Tooltip } from 'pui-react-tooltip';
+import PropTypes from 'prop-types';
 import { OverlayTrigger } from 'pui-react-overlay-trigger';
 
 function TooltipComponent(props) {
diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js
index 1b70132a0b081..f624a930d8ddc 100644
--- a/src/core_plugins/metrics/public/components/vis_editor.js
+++ b/src/core_plugins/metrics/public/components/vis_editor.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import VisEditorVisualization from './vis_editor_visualization';
 import Visualization from './visualization';
 import VisPicker from './vis_picker';
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 ecb3db08e300a..0889241d86d94 100644
--- a/src/core_plugins/metrics/public/components/vis_editor_visualization.js
+++ b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import Visualization from './visualization';
 import Toggle from 'react-toggle';
diff --git a/src/core_plugins/metrics/public/components/vis_picker.js b/src/core_plugins/metrics/public/components/vis_picker.js
index 82719b054911e..1a43ad21dccf2 100644
--- a/src/core_plugins/metrics/public/components/vis_picker.js
+++ b/src/core_plugins/metrics/public/components/vis_picker.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 function VisPickerItem(props) {
   const { label, icon, type } = props;
diff --git a/src/core_plugins/metrics/public/components/vis_types/gauge/series.js b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
index 2aa6f122ff45f..4f9c003c3e0b6 100644
--- a/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
diff --git a/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js b/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
index 2894c228ecc26..c9521c620bbed 100644
--- a/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import tickFormatter from '../../lib/tick_formatter';
 import _ from 'lodash';
 import Gauge from 'plugins/metrics/visualizations/components/gauge';
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
index 471dd47048a37..c33f2ddeba21f 100644
--- a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
 import Sortable from 'react-anything-sortable';
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js b/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
index ecf2274cb0236..fa226c1781e52 100644
--- a/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 import color from 'color';
 import Markdown from 'react-markdown';
diff --git a/src/core_plugins/metrics/public/components/vis_types/metric/series.js b/src/core_plugins/metrics/public/components/vis_types/metric/series.js
index e853142673550..06018925091af 100644
--- a/src/core_plugins/metrics/public/components/vis_types/metric/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/metric/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
diff --git a/src/core_plugins/metrics/public/components/vis_types/metric/vis.js b/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
index a1bb27245019b..3da2740e91c00 100644
--- a/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import tickFormatter from '../../lib/tick_formatter';
 import _ from 'lodash';
 import Metric from 'plugins/metrics/visualizations/components/metric';
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 667cb926544fa..2fe2d906f3c7a 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
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Select from 'react-select';
 import DataFormatPicker from '../../data_format_picker';
 import createSelectHandler from '../../lib/create_select_handler';
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
index b6db23e0cad13..0d3a4c9b130b2 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import SeriesConfig from './config';
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
index 0b8cc84f589c4..5d351eae7970b 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import tickFormatter from '../../lib/tick_formatter';
 import _ from 'lodash';
 import Timeseries from 'plugins/metrics/visualizations/components/timeseries';
diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
index 93e81b8f50843..7254d30eb9afe 100644
--- a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js b/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
index 324ffb22475a7..fefafede5d0df 100644
--- a/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
@@ -6,7 +6,9 @@ import getLastValue from 'plugins/metrics/visualizations/lib/get_last_value';
 import color from 'color';
 import replaceVars from '../../lib/replace_vars';
 
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+
+import React from 'react';
 function TopNVisualization(props) {
   const { backgroundColor, model, visData } = props;
 
diff --git a/src/core_plugins/metrics/public/components/visualization.js b/src/core_plugins/metrics/public/components/visualization.js
index 9530584b24d78..f2ad093f8c10c 100644
--- a/src/core_plugins/metrics/public/components/visualization.js
+++ b/src/core_plugins/metrics/public/components/visualization.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 import timeseries from './vis_types/timeseries/vis';
diff --git a/src/core_plugins/metrics/public/components/yes_no.js b/src/core_plugins/metrics/public/components/yes_no.js
index c7b59600db759..41b7df6870063 100644
--- a/src/core_plugins/metrics/public/components/yes_no.js
+++ b/src/core_plugins/metrics/public/components/yes_no.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 function YesNo(props) {
diff --git a/src/core_plugins/metrics/public/visualizations/components/annotation.js b/src/core_plugins/metrics/public/visualizations/components/annotation.js
index b4711fdc02ab6..499bd92ff2415 100644
--- a/src/core_plugins/metrics/public/visualizations/components/annotation.js
+++ b/src/core_plugins/metrics/public/visualizations/components/annotation.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import moment from 'moment';
 import reactcss from 'reactcss';
 class Annotation extends Component {
diff --git a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
index 1e25d480dd2d5..424afca1aa041 100644
--- a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
+++ b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import _ from 'lodash';
 import $ from '../lib/flot';
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge.js b/src/core_plugins/metrics/public/visualizations/components/gauge.js
index 3bfc16e2013ae..7ef45d4744b7e 100644
--- a/src/core_plugins/metrics/public/visualizations/components/gauge.js
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge.js
@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import getLastValue from '../lib/get_last_value';
 import getValueBy from '../lib/get_value_by';
 import GaugeVis from './gauge_vis';
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
index dab00d18ef949..1f381a937b475 100644
--- a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import reactcss from 'reactcss';
 import calculateCorrdinates from '../lib/calculate_corrdinates';
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 a1e0fbc7dba3c..93c38e0659957 100644
--- a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
 
diff --git a/src/core_plugins/metrics/public/visualizations/components/legend.js b/src/core_plugins/metrics/public/visualizations/components/legend.js
index ea1a77d43169b..bc1cc5edb6ae6 100644
--- a/src/core_plugins/metrics/public/visualizations/components/legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/legend.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import VerticalLegend from './vertical_legend';
 import HorizontalLegend from './horizontal_legend';
 
diff --git a/src/core_plugins/metrics/public/visualizations/components/metric.js b/src/core_plugins/metrics/public/visualizations/components/metric.js
index 8736286b345b8..83389c7531204 100644
--- a/src/core_plugins/metrics/public/visualizations/components/metric.js
+++ b/src/core_plugins/metrics/public/visualizations/components/metric.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
 import reactcss from 'reactcss';
diff --git a/src/core_plugins/metrics/public/visualizations/components/resize.js b/src/core_plugins/metrics/public/visualizations/components/resize.js
index 4f2c3fa50a1c0..de0d4c585c446 100644
--- a/src/core_plugins/metrics/public/visualizations/components/resize.js
+++ b/src/core_plugins/metrics/public/visualizations/components/resize.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 class Resize extends Component {
 
diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries.js b/src/core_plugins/metrics/public/visualizations/components/timeseries.js
index dafb91ea2e1f3..2553c5a0ffffd 100644
--- a/src/core_plugins/metrics/public/visualizations/components/timeseries.js
+++ b/src/core_plugins/metrics/public/visualizations/components/timeseries.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
 import TimeseriesChart from './timeseries_chart';
diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
index 21ddce241d282..065991c423e92 100644
--- a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
+++ b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import moment from 'moment';
 import reactcss from 'reactcss';
 import FlotChart from './flot_chart';
diff --git a/src/core_plugins/metrics/public/visualizations/components/top_n.js b/src/core_plugins/metrics/public/visualizations/components/top_n.js
index 02f35746ff920..00962ac93de33 100644
--- a/src/core_plugins/metrics/public/visualizations/components/top_n.js
+++ b/src/core_plugins/metrics/public/visualizations/components/top_n.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
 import reactcss from 'reactcss';
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 4a789ace72204..ebaf89a31be4a 100644
--- a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
 
diff --git a/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js b/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js
index 077590df7084b..ed47a17bcb31b 100644
--- a/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js
+++ b/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import classNames from 'classnames';
 import hljs from 'highlight.js';
diff --git a/ui_framework/doc_site/src/components/guide_demo/guide_demo.js b/ui_framework/doc_site/src/components/guide_demo/guide_demo.js
index 5618e9deafe61..114a0142c3e3b 100644
--- a/ui_framework/doc_site/src/components/guide_demo/guide_demo.js
+++ b/ui_framework/doc_site/src/components/guide_demo/guide_demo.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
index 512d0430d9fd3..27e38278cf8db 100644
--- a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
+++ b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import {
   Link,
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 ad56529336cb2..0f4c582bab1dc 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
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import {
   GuidePageSideNav,
diff --git a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js
index bc061b81d5e4d..22430cb8fa6f4 100644
--- a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js
+++ b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 export const GuidePageSideNav = props =>  {
   return (
diff --git a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js
index 846ee8f20409a..4bf95d1593b01 100644
--- a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js
+++ b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 export class GuidePageSideNavItem extends Component {
 
diff --git a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js
index 88cda5ef0b658..81ed902c2373a 100644
--- a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js
+++ b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 export class GuideSandboxCodeToggle extends Component {
   constructor(props) {
diff --git a/ui_framework/doc_site/src/components/guide_section/guide_section.js b/ui_framework/doc_site/src/components/guide_section/guide_section.js
index 8957d13de5a28..2680cbfc4e7d4 100644
--- a/ui_framework/doc_site/src/components/guide_section/guide_section.js
+++ b/ui_framework/doc_site/src/components/guide_section/guide_section.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import Slugify from '../../services/string/slugify';
 
diff --git a/ui_framework/doc_site/src/views/app_view.js b/ui_framework/doc_site/src/views/app_view.js
index 24616e55b7763..e164694381341 100644
--- a/ui_framework/doc_site/src/views/app_view.js
+++ b/ui_framework/doc_site/src/views/app_view.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/src/components/accessibility/screen_reader.js b/ui_framework/src/components/accessibility/screen_reader.js
index 53f40e28c3534..c7aa887fbfd46 100644
--- a/ui_framework/src/components/accessibility/screen_reader.js
+++ b/ui_framework/src/components/accessibility/screen_reader.js
@@ -1,7 +1,5 @@
-import {
-  cloneElement,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import { cloneElement } from 'react';
 import classNames from 'classnames';
 
 
diff --git a/ui_framework/src/components/action_item/action_item.js b/ui_framework/src/components/action_item/action_item.js
index 7475c6a0f9d51..3551f66ffd1fd 100644
--- a/ui_framework/src/components/action_item/action_item.js
+++ b/ui_framework/src/components/action_item/action_item.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiActionItem = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/button/button.js b/ui_framework/src/components/button/button.js
index d0e35ded0e0a2..09c2733b26ee2 100644
--- a/ui_framework/src/components/button/button.js
+++ b/ui_framework/src/components/button/button.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 import { KuiButtonIcon } from './button_icon/button_icon';
diff --git a/ui_framework/src/components/button/button_group/button_group.js b/ui_framework/src/components/button/button_group/button_group.js
index 71748db4f9e1b..583a22c21d526 100644
--- a/ui_framework/src/components/button/button_group/button_group.js
+++ b/ui_framework/src/components/button/button_group/button_group.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/src/components/button/button_icon/button_icon.js b/ui_framework/src/components/button/button_icon/button_icon.js
index 8f9e11409be55..839a7413173c7 100644
--- a/ui_framework/src/components/button/button_icon/button_icon.js
+++ b/ui_framework/src/components/button/button_icon/button_icon.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/src/components/card/card.js b/ui_framework/src/components/card/card.js
index b9cc1983c3d73..ee0ee3b23f744 100644
--- a/ui_framework/src/components/card/card.js
+++ b/ui_framework/src/components/card/card.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCard = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_description.js b/ui_framework/src/components/card/card_description.js
index cfda63503802a..a624b3203db87 100644
--- a/ui_framework/src/components/card/card_description.js
+++ b/ui_framework/src/components/card/card_description.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardDescription = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_description_text.js b/ui_framework/src/components/card/card_description_text.js
index b35c7a94166d5..26b25377e7a31 100644
--- a/ui_framework/src/components/card/card_description_text.js
+++ b/ui_framework/src/components/card/card_description_text.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardDescriptionText = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_description_title.js b/ui_framework/src/components/card/card_description_title.js
index bab87273ed01a..ad888a0443cb0 100644
--- a/ui_framework/src/components/card/card_description_title.js
+++ b/ui_framework/src/components/card/card_description_title.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardDescriptionTitle = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_footer.js b/ui_framework/src/components/card/card_footer.js
index cb41dfe489fee..8137459ec5f9e 100644
--- a/ui_framework/src/components/card/card_footer.js
+++ b/ui_framework/src/components/card/card_footer.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardFooter = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_group.js b/ui_framework/src/components/card/card_group.js
index d13fac2a96c59..bd912b18bd119 100644
--- a/ui_framework/src/components/card/card_group.js
+++ b/ui_framework/src/components/card/card_group.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardGroup = ({ children, className, isUnited, ...rest }) => {
diff --git a/ui_framework/src/components/collapse_button/collapse_button.js b/ui_framework/src/components/collapse_button/collapse_button.js
index 53a9c05efde9c..7a58119b524d6 100644
--- a/ui_framework/src/components/collapse_button/collapse_button.js
+++ b/ui_framework/src/components/collapse_button/collapse_button.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 const DIRECTIONS = [
diff --git a/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js
index e7160e020cfc0..1d99b777b254e 100644
--- a/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js
+++ b/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
@@ -19,7 +20,7 @@ export function KuiEmptyTablePrompt({ actions, message, className, ...rest }) {
 }
 
 KuiEmptyTablePrompt.propTypes = {
-  message: React.PropTypes.string.isRequired,
-  actions: React.PropTypes.node,
-  className: React.PropTypes.string,
+  message: PropTypes.string.isRequired,
+  actions: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js
index aa715ea91812d..9129fabba9c04 100644
--- a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js
+++ b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiEmptyTablePromptActions = ({ children, className, ...rest }) =>
   return <div className={classes} {...rest}>{children}</div>;
 };
 KuiEmptyTablePromptActions.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string
+  children: PropTypes.node,
+  className: PropTypes.string
 };
diff --git a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js
index 8f901fd172ccd..19d6311bb3d67 100644
--- a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js
+++ b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiEmptyTablePromptMessage = ({ children, className, ...rest }) =>
   return <div className={classes} {...rest}>{children}</div>;
 };
 KuiEmptyTablePromptMessage.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js
index 79710419ea425..54d9ddc589764 100644
--- a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js
+++ b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiEmptyTablePromptPanel = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest}>{children}</div>;
 };
 KuiEmptyTablePromptPanel.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/event/event.js b/ui_framework/src/components/event/event.js
index 002b505ad55cd..77646fff76f30 100644
--- a/ui_framework/src/components/event/event.js
+++ b/ui_framework/src/components/event/event.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEvent = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/event/event_body.js b/ui_framework/src/components/event/event_body.js
index 85b1ba21ed74b..e793c14b72a72 100644
--- a/ui_framework/src/components/event/event_body.js
+++ b/ui_framework/src/components/event/event_body.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEventBody = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/event/event_body_message.js b/ui_framework/src/components/event/event_body_message.js
index 066a5fc2e72b7..e748dc8da7ea4 100644
--- a/ui_framework/src/components/event/event_body_message.js
+++ b/ui_framework/src/components/event/event_body_message.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEventBodyMessage = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/event/event_body_metadata.js b/ui_framework/src/components/event/event_body_metadata.js
index d0496188dd578..9b48bb9c8c3ec 100644
--- a/ui_framework/src/components/event/event_body_metadata.js
+++ b/ui_framework/src/components/event/event_body_metadata.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEventBodyMetadata = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/event/event_symbol.js b/ui_framework/src/components/event/event_symbol.js
index 49f703c5effa3..075ed90067f95 100644
--- a/ui_framework/src/components/event/event_symbol.js
+++ b/ui_framework/src/components/event/event_symbol.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEventSymbol = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/info_button/info_button.js b/ui_framework/src/components/info_button/info_button.js
index b97a35e34b1a0..c2b841ac3f58c 100644
--- a/ui_framework/src/components/info_button/info_button.js
+++ b/ui_framework/src/components/info_button/info_button.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/src/components/menu/menu.js b/ui_framework/src/components/menu/menu.js
index aef922264749c..436e93e1c8820 100644
--- a/ui_framework/src/components/menu/menu.js
+++ b/ui_framework/src/components/menu/menu.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiMenu = ({
diff --git a/ui_framework/src/components/menu/menu_item.js b/ui_framework/src/components/menu/menu_item.js
index 79e975601dc6f..2a66f1c718098 100644
--- a/ui_framework/src/components/menu/menu_item.js
+++ b/ui_framework/src/components/menu/menu_item.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -20,6 +19,6 @@ export const KuiMenuItem = ({
 };
 
 KuiMenuItem.propTypes = {
-  className: React.PropTypes.string,
+  className: PropTypes.string,
   children:  PropTypes.node
 };
diff --git a/ui_framework/src/components/pager/pager.js b/ui_framework/src/components/pager/pager.js
index 55d6ab8f39f64..d948f240a71fe 100644
--- a/ui_framework/src/components/pager/pager.js
+++ b/ui_framework/src/components/pager/pager.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -33,14 +34,14 @@ export function KuiPager({
 }
 
 KuiPager.propTypes = {
-  startNumber: React.PropTypes.number.isRequired,
-  endNumber: React.PropTypes.number.isRequired,
-  totalItems: React.PropTypes.number.isRequired,
-  hasPreviousPage: React.PropTypes.bool.isRequired,
-  hasNextPage: React.PropTypes.bool.isRequired,
-  onNextPage: React.PropTypes.func.isRequired,
-  onPreviousPage: React.PropTypes.func.isRequired,
-  className: React.PropTypes.string
+  startNumber: PropTypes.number.isRequired,
+  endNumber: PropTypes.number.isRequired,
+  totalItems: PropTypes.number.isRequired,
+  hasPreviousPage: PropTypes.bool.isRequired,
+  hasNextPage: PropTypes.bool.isRequired,
+  onNextPage: PropTypes.func.isRequired,
+  onPreviousPage: PropTypes.func.isRequired,
+  className: PropTypes.string
 };
 
 
diff --git a/ui_framework/src/components/pager/pager_button_group.js b/ui_framework/src/components/pager/pager_button_group.js
index 6c105e3114096..4ddc4a250ffab 100644
--- a/ui_framework/src/components/pager/pager_button_group.js
+++ b/ui_framework/src/components/pager/pager_button_group.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import { KuiButton, KuiButtonIcon, KuiButtonGroup } from '../button';
@@ -26,9 +27,9 @@ export function KuiPagerButtonGroup({ className, onPrevious, onNext, hasNext, ha
 }
 
 KuiPagerButtonGroup.propTypes = {
-  onPrevious: React.PropTypes.func.isRequired,
-  onNext: React.PropTypes.func.isRequired,
-  hasNext: React.PropTypes.bool.isRequired,
-  hasPrevious: React.PropTypes.bool.isRequired,
-  className: React.PropTypes.string
+  onPrevious: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired,
+  hasNext: PropTypes.bool.isRequired,
+  hasPrevious: PropTypes.bool.isRequired,
+  className: PropTypes.string
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar.js b/ui_framework/src/components/tool_bar/tool_bar.js
index 54f6b1c815446..c25e7a150c258 100644
--- a/ui_framework/src/components/tool_bar/tool_bar.js
+++ b/ui_framework/src/components/tool_bar/tool_bar.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBar = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest} >{children}</div>;
 };
 KuiToolBar.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar_footer.js b/ui_framework/src/components/tool_bar/tool_bar_footer.js
index 8bdeacad190b6..deea0206cd2d6 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_footer.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_footer.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBarFooter = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest}>{children}</div>;
 };
 KuiToolBarFooter.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar_footer_section.js b/ui_framework/src/components/tool_bar/tool_bar_footer_section.js
index 98f944b59bee9..408252296aa6e 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_footer_section.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_footer_section.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBarFooterSection = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest} >{children}</div>;
 };
 KuiToolBarFooterSection.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar_search_box.js b/ui_framework/src/components/tool_bar/tool_bar_search_box.js
index 41bf0e9925890..002cefeb70bd7 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_search_box.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_search_box.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -27,8 +28,8 @@ export function KuiToolBarSearchBox({ filter, onFilter, placeholder, className,
 }
 
 KuiToolBarSearchBox.propTypes = {
-  filter: React.PropTypes.string,
-  onFilter: React.PropTypes.func.isRequired
+  filter: PropTypes.string,
+  onFilter: PropTypes.func.isRequired
 };
 
 KuiToolBarSearchBox.defaultProps = {
diff --git a/ui_framework/src/components/tool_bar/tool_bar_section.js b/ui_framework/src/components/tool_bar/tool_bar_section.js
index 3c4e3495a88cf..9eccdd1a0091c 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_section.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_section.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBarSection = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest} >{children}</div>;
 };
 KuiToolBarSection.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar_text.js b/ui_framework/src/components/tool_bar/tool_bar_text.js
index 0223186b1aaa4..6194bd53d9332 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_text.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_text.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBarText = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest} >{children}</div>;
 };
 KuiToolBarText.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/typography/typography.js b/ui_framework/src/components/typography/typography.js
index 1e13bbed7588b..8c6b74c5a4c61 100644
--- a/ui_framework/src/components/typography/typography.js
+++ b/ui_framework/src/components/typography/typography.js
@@ -1,7 +1,5 @@
-import {
-  cloneElement,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import { cloneElement } from 'react';
 import classNames from 'classnames';
 
 const sizeToClassNameMap = {