diff --git a/README.md b/README.md
index 018b499c3..2d631e599 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ Seem overwhelming? It's time to talk with a front-end dev on the Pivotal team on
      }
    });
 
-   React.render(<MyTestPage />, document.getElementById('root'));
+   ReactDOM.render(<MyTestPage />, document.getElementById('root'));
    ```
 
    HTML
diff --git a/hologram/lib/jsx_script_tag.rb b/hologram/lib/jsx_script_tag.rb
index 4ca756f3c..941e5a948 100644
--- a/hologram/lib/jsx_script_tag.rb
+++ b/hologram/lib/jsx_script_tag.rb
@@ -10,7 +10,7 @@ def self.build_script_tag(div_id, code, opts={})
         <script>
           (function() {
             #{js_code}
-            React.render(
+            ReactDOM.render(
               reactElement,
               document.getElementById('#{div_id}')
             );
@@ -21,7 +21,7 @@ def self.build_script_tag(div_id, code, opts={})
       <<-JS
         <script type="text/jsx">
           (function() {
-            React.render(
+            ReactDOM.render(
               #{code.strip},
               document.getElementById('#{div_id}')
             );
diff --git a/package.json b/package.json
index e2a902c13..905825677 100644
--- a/package.json
+++ b/package.json
@@ -76,9 +76,9 @@
     "phantomjs-polyfill": "0.0.1",
     "proxyquire": "^1.5.0",
     "pui-cursor": "^1.4.0",
-    "react": "0.13.3",
+    "react": "0.14.2",
     "react-a11y": "pivotal-cf/react-a11y#separator-fix-dist",
-    "react-bootstrap": "0.25.1",
+    "react-bootstrap": "0.27.1",
     "react-fa": "^4.0.0",
     "require-dir": "^0.3.0",
     "rimraf": "^2.4.3",
@@ -174,7 +174,10 @@
     "pui-react-tabs": "2.1.0-alpha.1",
     "pui-react-tooltip": "2.1.0-alpha.1",
     "pui-react-typography": "2.1.0-alpha.1",
-    "raf": "^3.1.0"
+    "raf": "^3.1.0",
+    "react-addons-clone-with-props": "^0.14.2",
+    "react-addons-test-utils": "^0.14.2",
+    "react-dom": "^0.14.2"
   },
   "scripts": {
     "test": "gulp ci --fatal",
diff --git a/spec/pivotal-ui-react/alerts/alerts_spec.js b/spec/pivotal-ui-react/alerts/alerts_spec.js
index 1c9ee8b54..ac533fdbf 100644
--- a/spec/pivotal-ui-react/alerts/alerts_spec.js
+++ b/spec/pivotal-ui-react/alerts/alerts_spec.js
@@ -1,4 +1,5 @@
 require('../spec_helper');
+const ReactDOM = require('react-dom');
 
 describe('Alert', function() {
   var SuccessAlert;
@@ -7,11 +8,11 @@ describe('Alert', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('passes down the className, id, and style properties', () => {
-    React.render(<SuccessAlert className="foo" id="bar" style={{fontSize: '200px'}}>alert body</SuccessAlert>, root);
+    ReactDOM.render(<SuccessAlert className="foo" id="bar" style={{fontSize: '200px'}}>alert body</SuccessAlert>, root);
 
     expect('#root .alert').toHaveClass('foo');
     expect('#root .alert').toHaveProp('id', 'bar');
@@ -20,7 +21,7 @@ describe('Alert', function() {
 
   describe('when dismissable is set to true', function() {
     beforeEach(function() {
-      React.render(<SuccessAlert dismissable={true}>alert body</SuccessAlert>, root);
+      ReactDOM.render(<SuccessAlert dismissable={true}>alert body</SuccessAlert>, root);
     });
 
     it('has a close button', function() {
@@ -36,7 +37,7 @@ describe('Alert', function() {
   describe('when dismissable is set to a callback', function() {
     beforeEach(function() {
       this.callback = jasmine.createSpy('dismissable callback');
-      React.render(<SuccessAlert dismissable={this.callback}>alert body</SuccessAlert>, root);
+      ReactDOM.render(<SuccessAlert dismissable={this.callback}>alert body</SuccessAlert>, root);
     });
 
     it('has a close button', function() {
@@ -60,11 +61,11 @@ describe('Alert', function() {
 
   describe('when dismissable is not present', function() {
     beforeEach(function() {
-      React.render(<SuccessAlert>alert body</SuccessAlert>, root);
+      ReactDOM.render(<SuccessAlert>alert body</SuccessAlert>, root);
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('does not have a close button', function() {
@@ -77,11 +78,11 @@ describe('SuccessAlert', function() {
   describe('when withIcon is set to true', function() {
     beforeEach(function() {
       var SuccessAlert = require('../../../src/pivotal-ui-react/alerts/alerts').SuccessAlert;
-      React.render(<SuccessAlert withIcon>alert body</SuccessAlert>, root);
+      ReactDOM.render(<SuccessAlert withIcon>alert body</SuccessAlert>, root);
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('renders an icon in the alert', function() {
@@ -98,11 +99,11 @@ describe('InfoAlert', function() {
   describe('when withIcon is set to true', function() {
     beforeEach(function() {
       var InfoAlert = require('../../../src/pivotal-ui-react/alerts/alerts').InfoAlert;
-      React.render(<InfoAlert withIcon>alert body</InfoAlert>, root);
+      ReactDOM.render(<InfoAlert withIcon>alert body</InfoAlert>, root);
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('renders an icon in the alert', function() {
@@ -119,11 +120,11 @@ describe('WarningAlert', function() {
    describe('when withIcon is set to true', function() {
      beforeEach(function() {
        var WarningAlert = require('../../../src/pivotal-ui-react/alerts/alerts').WarningAlert;
-       React.render(<WarningAlert withIcon>alert body</WarningAlert>, root);
+       ReactDOM.render(<WarningAlert withIcon>alert body</WarningAlert>, root);
      });
 
      afterEach(function() {
-       React.unmountComponentAtNode(root);
+       ReactDOM.unmountComponentAtNode(root);
      });
 
      it('renders an icon in the alert', function() {
@@ -140,11 +141,11 @@ describe('ErrorAlert', function() {
    describe('when withIcon is set to true', function() {
      beforeEach(function() {
        var ErrorAlert = require('../../../src/pivotal-ui-react/alerts/alerts').ErrorAlert;
-       React.render(<ErrorAlert withIcon>alert body</ErrorAlert>, root);
+       ReactDOM.render(<ErrorAlert withIcon>alert body</ErrorAlert>, root);
      });
 
      afterEach(function() {
-       React.unmountComponentAtNode(root);
+       ReactDOM.unmountComponentAtNode(root);
      });
 
      it('renders an icon in the alert', function() {
diff --git a/spec/pivotal-ui-react/autocomplete/autocomplete_spec.js b/spec/pivotal-ui-react/autocomplete/autocomplete_spec.js
index 2e9e29850..7ad0ba4a8 100644
--- a/spec/pivotal-ui-react/autocomplete/autocomplete_spec.js
+++ b/spec/pivotal-ui-react/autocomplete/autocomplete_spec.js
@@ -10,27 +10,55 @@ describe('Autocomplete', function() {
     Autocomplete = require('../../../src/pivotal-ui-react/autocomplete/autocomplete').Autocomplete;
     AutocompleteInput = require('../../../src/pivotal-ui-react/autocomplete/autocomplete').AutocompleteInput;
     pickSpy = jasmine.createSpy('pick');
-    subject = React.render(<Autocomplete {...{onPick: pickSpy, onInitializeItems} }/>, root);
-    jasmine.clock().tick(1);
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
     jasmine.clock().tick(1);
   });
 
   it('renders', function() {
+    ReactDOM.render(<Autocomplete />, root);
     expect('.autocomplete').toExist();
   });
 
-  it('caps length of displayed list using max items prop', function() {
-    subject.setProps({maxItems: 2});
-    subject.showList();
-    expect('.autocomplete-item').toHaveLength(2);
+  describe('when maxItems is provided', function() {
+    it('caps length of displayed list', function() {
+      subject = ReactDOM.render(
+        <Autocomplete {...{
+          onPick: pickSpy,
+          onInitializeItems,
+          maxItems: 2
+        } }/>,
+        root
+      );
+      jasmine.clock().tick(1);
+
+      subject.showList();
+      expect('.autocomplete-item').toHaveLength(2);
+    });
   });
 
   describe('when the user starts to type into the input', function() {
+    var context;
+
     beforeEach(function() {
+      var Context = React.createClass({
+        getInitialState() {
+          return {
+            onInitializeItems
+          };
+        },
+        render() {
+          return (
+            <Autocomplete onPick={pickSpy} onInitializeItems={this.state.onInitializeItems}/>
+          );
+        }
+      });
+
+      context = ReactDOM.render(<Context/>, root);
+      jasmine.clock().tick(1);
+
       $('.autocomplete input').val('wat').simulate('change');
     });
 
@@ -46,7 +74,7 @@ describe('Autocomplete', function() {
 
     describe('when the user attempts to re-initialize the searchable items', function() {
       beforeEach(function() {
-        subject.setProps({onInitializeItems: (done) => done([])});
+        context.setState({onInitializeItems: (done) => done([])});
       });
 
       it('does not actually let you change the list', function() {
@@ -115,7 +143,18 @@ describe('Autocomplete', function() {
 
     describe('when one of the autocomplete items is the currently selected option', function() {
       beforeEach(function() {
-        subject.setProps({selectedSuggestion: 'watson'});
+        subject = ReactDOM.render(
+          <Autocomplete {...{
+            onPick: pickSpy,
+            onInitializeItems,
+            selectedSuggestion: 'watson'
+          } }/>,
+          root
+        );
+
+        jasmine.clock().tick(1);
+
+        $('.autocomplete input').val('wat').simulate('change');
       });
 
       it('sets the selected class to the autocomplete item', function() {
@@ -200,7 +239,14 @@ describe('Autocomplete', function() {
 
   describe('when a initial value is provided', function() {
     beforeEach(function() {
-      subject.setProps({value: 'advil'});
+      subject = ReactDOM.render(
+        <Autocomplete {...{
+          onPick: pickSpy,
+          onInitializeItems,
+          value: 'advil'
+        } }/>,
+        root
+      );
     });
 
     it('defaults to that value being selected', function() {
@@ -212,7 +258,15 @@ describe('Autocomplete', function() {
     var cb;
     beforeEach(function() {
       var search = (value, callback) => { cb = callback; };
-      subject.setProps({onSearch: search});
+      subject = ReactDOM.render(
+        <Autocomplete {...{
+          onPick: pickSpy,
+          onInitializeItems,
+          onSearch: search
+        } }/>,
+        root
+      );
+
       $('.autocomplete input').val('zo').simulate('change');
     });
 
@@ -224,8 +278,8 @@ describe('Autocomplete', function() {
 
   describe('when custom props are provided', function() {
     beforeEach(function() {
-      React.unmountComponentAtNode(root);
-      subject = React.render(
+      ReactDOM.unmountComponentAtNode(root);
+      subject = ReactDOM.render(
         <Autocomplete {...{
           onPick: pickSpy,
           onInitializeItems,
@@ -249,7 +303,16 @@ describe('Autocomplete', function() {
 
   describe('when a custom filter function is provided', function() {
     beforeEach(function() {
-      subject.setProps({onFilter: (stuffs) => stuffs.filter((stuff) => stuff.value.indexOf('e') !== -1 )});
+      subject = ReactDOM.render(
+        <Autocomplete {...{
+          onPick: pickSpy,
+          onInitializeItems,
+          onFilter: (stuffs) => stuffs.filter((stuff) => stuff.value.indexOf('e') !== -1 )
+        } }/>,
+        root
+      );
+      jasmine.clock().tick(1);
+
       subject.showList();
     });
 
@@ -263,9 +326,9 @@ describe('Autocomplete', function() {
   describe('when an asynchronous onInitializeItems is provided', function() {
     var cb;
     beforeEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
       onInitializeItems = (callback) => { cb = callback; };
-      subject = React.render(<Autocomplete {...{onInitializeItems}}/>, root);
+      subject = ReactDOM.render(<Autocomplete {...{onInitializeItems}}/>, root);
     });
 
     it('still populates the list properly', function() {
@@ -275,4 +338,4 @@ describe('Autocomplete', function() {
       expect('.autocomplete-list').toContainText('betty');
     });
   });
-});
\ No newline at end of file
+});
diff --git a/spec/pivotal-ui-react/back-to-top/back-to-top_spec.js b/spec/pivotal-ui-react/back-to-top/back-to-top_spec.js
index f6e74ffce..0101fd4b4 100644
--- a/spec/pivotal-ui-react/back-to-top/back-to-top_spec.js
+++ b/spec/pivotal-ui-react/back-to-top/back-to-top_spec.js
@@ -27,7 +27,7 @@ describe('BackToTop', function() {
 
   beforeEach(function(done) {
     BackToTop = require('../../../src/pivotal-ui-react/back-to-top/back-to-top').BackToTop;
-    React.render(<BackToTop className="foo" id="bar" style={{fontSize: '200px'}}/>, root);
+    ReactDOM.render(<BackToTop className="foo" id="bar" style={{fontSize: '200px'}}/>, root);
 
     jasmine.clock().uninstall();
     setTimeout(function() {
@@ -39,7 +39,7 @@ describe('BackToTop', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('passes down the className, id, and style properties', () => {
diff --git a/spec/pivotal-ui-react/buttons/button_spec.js b/spec/pivotal-ui-react/buttons/button_spec.js
index f09fdc9d9..4338c7474 100644
--- a/spec/pivotal-ui-react/buttons/button_spec.js
+++ b/spec/pivotal-ui-react/buttons/button_spec.js
@@ -4,11 +4,11 @@ describe('UIButton', function() {
   var UIButton;
   beforeEach(function() {
     UIButton = require('../../../src/pivotal-ui-react/buttons/buttons').UIButton;
-    React.render(<UIButton>Click here</UIButton>, root);
+    ReactDOM.render(<UIButton>Click here</UIButton>, root);
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('creates a button', function() {
@@ -17,7 +17,7 @@ describe('UIButton', function() {
 
   describe('when href attribute is set', function() {
     beforeEach(function() {
-      React.render(<UIButton href="http://example.com">Click here</UIButton>, root);
+      ReactDOM.render(<UIButton href="http://example.com">Click here</UIButton>, root);
     });
 
     it('creates a link', function() {
@@ -28,7 +28,7 @@ describe('UIButton', function() {
 
   describe('when kind attribute is set', function() {
     beforeEach(function() {
-      React.render(<UIButton kind="danger">Click here</UIButton>, root);
+      ReactDOM.render(<UIButton kind="danger">Click here</UIButton>, root);
     });
 
     it('adds the type class to the button', function() {
@@ -39,7 +39,7 @@ describe('UIButton', function() {
 
   describe('when block is true', function() {
     beforeEach(function() {
-      React.render(<UIButton block={true}>Click here</UIButton>, root);
+      ReactDOM.render(<UIButton block={true}>Click here</UIButton>, root);
     });
 
     it('adds the block class', function() {
@@ -49,7 +49,7 @@ describe('UIButton', function() {
 
   describe('when large is true', function() {
     beforeEach(function() {
-      React.render(<UIButton large={true}>Click here</UIButton>, root);
+      ReactDOM.render(<UIButton large={true}>Click here</UIButton>, root);
     });
 
     it('adds the large button class', function() {
@@ -59,7 +59,7 @@ describe('UIButton', function() {
 
   describe('when the button is given custom classes', function() {
     function renderButton(props) {
-      React.render(<UIButton {...props}>Click here</UIButton>, root);
+      ReactDOM.render(<UIButton {...props}>Click here</UIButton>, root);
     }
 
     describe('when no other options that effect class are given', function() {
@@ -99,7 +99,7 @@ describe('UIButton', function() {
 
   describe('when data-attributes are provided', function() {
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <UIButton data-click="myFunction" data-foo="bar">
           Click here
         </UIButton>, root
@@ -122,7 +122,7 @@ describe('UIButton', function() {
       describe(name, function() {
         beforeEach(function() {
           var Button = require('../../../src/pivotal-ui-react/buttons/buttons')[name];
-          React.render(<Button>Click here</Button>, root);
+          ReactDOM.render(<Button>Click here</Button>, root);
         });
 
         it('renders with the btn-default class', function() {
diff --git a/spec/pivotal-ui-react/collapse/collapse_spec.js b/spec/pivotal-ui-react/collapse/collapse_spec.js
index 30884362f..20a95f29f 100644
--- a/spec/pivotal-ui-react/collapse/collapse_spec.js
+++ b/spec/pivotal-ui-react/collapse/collapse_spec.js
@@ -1,16 +1,16 @@
 require('../spec_helper');
-var {TestUtils} = React.addons;
 
 describe('BaseCollapse', function() {
-  var BsPanel, BaseCollapse, subject, bsPanel;
+  var BsPanel, BaseCollapse, subject, bsPanel, TestUtils;
 
   beforeEach(() => {
+    TestUtils = require('react-addons-test-utils');
     BsPanel = require('react-bootstrap/lib/Panel');
     BaseCollapse = require('../../../src/pivotal-ui-react/collapse/collapse').BaseCollapse;
   });
 
   it('creates a react-boostrap panel that is collapsible', function() {
-    subject = React.render((
+    subject = ReactDOM.render((
       <BaseCollapse header="ima header">
         <h1>Child</h1>
       </BaseCollapse>
@@ -29,7 +29,7 @@ describe('BaseCollapse', function() {
     let clickEvent;
 
     beforeEach(function() {
-      subject = React.render((
+      subject = ReactDOM.render((
         <BaseCollapse header="ima header">
           <h1>Child</h1>
         </BaseCollapse>
@@ -55,7 +55,7 @@ describe('BaseCollapse', function() {
 
   describe('when the divider property is set to true', function() {
     beforeEach(function() {
-      subject = React.render((
+      subject = ReactDOM.render((
         <BaseCollapse header="ima header" divider>
           <h1>Child</h1>
         </BaseCollapse>
@@ -69,7 +69,7 @@ describe('BaseCollapse', function() {
   });
   describe('when the defaultExpanded property is set to true', () => {
     it('starts out expanded', () => {
-      subject = React.render((
+      subject = ReactDOM.render((
         <BaseCollapse header="ima header" defaultExpanded={true}>
           <h1>Child</h1>
         </BaseCollapse>
@@ -94,7 +94,7 @@ describe('Collapse', function() {
       }
     };
 
-    React.render(
+    ReactDOM.render(
       <Collapse header="ima header" {...props}>
         <h1>Child</h1>
       </Collapse>,
@@ -102,7 +102,7 @@ describe('Collapse', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('passes through className', function() {
@@ -124,25 +124,23 @@ describe('Collapse', function() {
 });
 
 describe('AltCollapse', function() {
-  var AltCollapse, subject;
+  var AltCollapse;
   beforeEach(function() {
     AltCollapse = require('../../../src/pivotal-ui-react/collapse/collapse').AltCollapse;
 
-    subject = React.render((
+    ReactDOM.render(
       <AltCollapse header="ima header">
         <h1>Child</h1>
       </AltCollapse>
-    ), root);
+    , root);
   });
 
   it('contains a plus as its collapsed icon', function() {
-    var collapsedIconContainer = TestUtils.findRenderedDOMComponentWithClass(subject, 'when-collapsed-inline');
-    expect(TestUtils.findRenderedDOMComponentWithClass(collapsedIconContainer, 'fa-plus-square')).toBeTruthy();
+    expect('.when-collapsed-inline .fa').toHaveClass('fa-plus-square');
   });
 
   it('contains a minus as its collapsed icon', function() {
-    var expandedIconContainer = TestUtils.findRenderedDOMComponentWithClass(subject, 'when-expanded-inline');
-    expect(TestUtils.findRenderedDOMComponentWithClass(expandedIconContainer, 'fa-minus-square')).toBeTruthy();
+    expect('.when-expanded-inline .fa').toHaveClass('fa-minus-square');
   });
 });
 
@@ -152,7 +150,7 @@ describe('BaseCollapse behavior', function() {
   beforeEach(function() {
     BaseCollapse = require('../../../src/pivotal-ui-react/collapse/collapse').BaseCollapse;
 
-    React.render((
+    ReactDOM.render((
       <BaseCollapse header="This is my heading">
         Collapse contents!
       </BaseCollapse>
@@ -160,7 +158,7 @@ describe('BaseCollapse behavior', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   // We should extract this test into a feature test
diff --git a/spec/pivotal-ui-react/divider/divider_spec.js b/spec/pivotal-ui-react/divider/divider_spec.js
index 830d31c8c..08a7a3213 100644
--- a/spec/pivotal-ui-react/divider/divider_spec.js
+++ b/spec/pivotal-ui-react/divider/divider_spec.js
@@ -6,11 +6,11 @@ describe('Divider', function() {
   var Divider;
   beforeEach(function() {
     Divider = require('../../../src/pivotal-ui-react/dividers/dividers').Divider;
-    React.render(<Divider className='test-class' id='test-id' style={{opacity: '0.5'}}/>, root);
+    ReactDOM.render(<Divider className='test-class' id='test-id' style={{opacity: '0.5'}}/>, root);
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('creates a divider', function() {
@@ -20,7 +20,7 @@ describe('Divider', function() {
   itPropagatesAttributes('hr', {className: 'test-class', id: 'test-id', style: {opacity: '0.5'}});
   describe('when large is set to true', function() {
     beforeEach(function() {
-      React.render(<Divider size="large"/>, root);
+      ReactDOM.render(<Divider size="large"/>, root);
     });
 
     it('creates a divider with -2 appended to the classname', function() {
@@ -30,7 +30,7 @@ describe('Divider', function() {
 
   describe('when the divider goes on a dark background, inverse: true', function() {
     beforeEach(function() {
-      React.render(<Divider inverse={true}/>, root);
+      ReactDOM.render(<Divider inverse={true}/>, root);
     });
 
     it('creates a divider without the -alternate in the class', function() {
@@ -40,7 +40,7 @@ describe('Divider', function() {
 
   describe('when a large divider goes on a dark background, inverse: true', function() {
     beforeEach(function() {
-      React.render(<Divider inverse={true} size="large"/>, root);
+      ReactDOM.render(<Divider inverse={true} size="large"/>, root);
     });
 
     it('creates a divider without the -alternate in the class', function() {
@@ -50,7 +50,7 @@ describe('Divider', function() {
 
   describe('setting a custom className', function() {
     beforeEach(function() {
-      React.render(<Divider inverse={true} className="myClass"/>, root);
+      ReactDOM.render(<Divider inverse={true} className="myClass"/>, root);
     });
 
     it('passes the class through to the divider', function() {
@@ -61,7 +61,7 @@ describe('Divider', function() {
 
   describe('setting a custom data attribute', function() {
     beforeEach(function() {
-      React.render(<Divider data-behavior="myAttr"/>, root);
+      ReactDOM.render(<Divider data-behavior="myAttr"/>, root);
     });
 
     it('passes the data attribute through to the divider', function() {
diff --git a/spec/pivotal-ui-react/draggable-list/draggable-list_spec.js b/spec/pivotal-ui-react/draggable-list/draggable-list_spec.js
index de028ed7d..69391230f 100644
--- a/spec/pivotal-ui-react/draggable-list/draggable-list_spec.js
+++ b/spec/pivotal-ui-react/draggable-list/draggable-list_spec.js
@@ -17,7 +17,7 @@ describe('DraggableList', function() {
       }
     };
 
-    subject = React.render(
+    subject = ReactDOM.render(
       <DraggableList onDragEnd={dragEndSpy} {...props} innerClassName='inner-test-class'>
         <DraggableListItem>
           Get me out of here!
@@ -35,7 +35,7 @@ describe('DraggableList', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
 
@@ -58,7 +58,7 @@ describe('DraggableList', function() {
 
   describe('when the children are changed', function() {
     beforeEach(function() {
-      subject = React.render(
+      subject = ReactDOM.render(
         <DraggableList>
           <DraggableListItem>
             Get me out of here!
@@ -112,7 +112,7 @@ describe('DraggableList', function() {
 
     describe('when the children are changed', function() {
       beforeEach(function() {
-        subject = React.render(
+        subject = ReactDOM.render(
           <DraggableList>
             <DraggableListItem>
               Get me out of here!
diff --git a/spec/pivotal-ui-react/dropdown/dropdown_spec.js b/spec/pivotal-ui-react/dropdown/dropdown_spec.js
index 0de17424b..275d97f5d 100644
--- a/spec/pivotal-ui-react/dropdown/dropdown_spec.js
+++ b/spec/pivotal-ui-react/dropdown/dropdown_spec.js
@@ -6,11 +6,11 @@ describe('Dropdowns', function() {
     describe(dropdownComponentName, function() {
       beforeEach(function() {
         var DropdownClass = require('../../../src/pivotal-ui-react/dropdowns/dropdowns')[dropdownComponentName];
-        React.render(<DropdownClass title="Dropping" buttonClassName="test-btn-class"/>, root);
+        ReactDOM.render(<DropdownClass title="Dropping" buttonClassName="test-btn-class"/>, root);
       });
 
       afterEach(function() {
-        React.unmountComponentAtNode(root);
+        ReactDOM.unmountComponentAtNode(root);
       });
 
       it('creates a dropdown', function() {
@@ -35,14 +35,14 @@ describe('Dropdowns', function() {
     };
 
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <Dropdown title="Dropping" {...props} buttonClassName="test-btn-class">
           <DropdownItem href="test">Item #1</DropdownItem>
         </Dropdown>, root);
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('passes through className to the btn-group ', function() {
@@ -78,13 +78,13 @@ describe('Dropdowns', function() {
       }
     };
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <DropdownItem href='test' {...props}>Item</DropdownItem>,
         root);
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('passes through className to the li ', function() {
diff --git a/spec/pivotal-ui-react/expander/expander_spec.js b/spec/pivotal-ui-react/expander/expander_spec.js
index b4345923c..bdd0835e9 100644
--- a/spec/pivotal-ui-react/expander/expander_spec.js
+++ b/spec/pivotal-ui-react/expander/expander_spec.js
@@ -2,7 +2,7 @@ require('../spec_helper');
 
 describe('ExpanderContent', function() {
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   function renderComponent(props) {
@@ -12,7 +12,7 @@ describe('ExpanderContent', function() {
       expanded: false
     }, props);
 
-    return React.render(
+    return ReactDOM.render(
       (<ExpanderContent {...props}>
         <div>You won a brand new car!</div>
       </ExpanderContent>),
@@ -84,12 +84,12 @@ describe('ExpanderContent', function() {
 
 describe('ExpanderTrigger', function() {
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   function renderComponent() {
     var ExpanderTrigger = require('../../../src/pivotal-ui-react/expander/expander').ExpanderTrigger;
-    return React.render(
+    return ReactDOM.render(
       (<ExpanderTrigger>
         <button>Click here to trigger</button>
       </ExpanderTrigger>),
diff --git a/spec/pivotal-ui-react/grids/grid_spec.js b/spec/pivotal-ui-react/grids/grid_spec.js
index 664243b49..65d8eba29 100644
--- a/spec/pivotal-ui-react/grids/grid_spec.js
+++ b/spec/pivotal-ui-react/grids/grid_spec.js
@@ -5,7 +5,7 @@ import {itPropagatesAttributes} from '../support/shared_examples';
 describe('Grid', function() {
   beforeEach(function() {
     var {Row, Col} = require('../../../src/pivotal-ui-react/grids/grids');
-    React.render(
+    ReactDOM.render(
       (
         <Row gutter="md" className='test-class' id='test-id' style={{opacity: '0.75'}}>
           <Col md={12} className='test-class2' id='test-id2' style={{opacity: '.5'}}/>
@@ -17,7 +17,7 @@ describe('Grid', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   itPropagatesAttributes('.row', {className: 'test-class', id: 'test-id', style: {opacity: '0.75'}});
diff --git a/spec/pivotal-ui-react/iconography/iconography_spec.js b/spec/pivotal-ui-react/iconography/iconography_spec.js
index 38c0863d4..f13eae104 100644
--- a/spec/pivotal-ui-react/iconography/iconography_spec.js
+++ b/spec/pivotal-ui-react/iconography/iconography_spec.js
@@ -6,11 +6,11 @@ var {toBeValid} = require('../support/matchers');
 
 describe('iconography', function() {
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('works', function() {
-    React.render(<Icon name='plus'/>, root);
+    ReactDOM.render(<Icon name='plus'/>, root);
     expect('.fa.fa-plus').toExist();
   });
 
@@ -27,25 +27,25 @@ describe('iconography', function() {
 
     it('adds the size class to the icon', function() {
       for (var size of ['title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'sm', 'xs', 'lg', '2x', '3x', '4x', '5x']) {
-        React.render(<Icon name='plus' size={size}/>, root);
+        ReactDOM.render(<Icon name='plus' size={size}/>, root);
         expect('.fa.fa-plus').toHaveClass(`fa-${size}`);
-        React.unmountComponentAtNode(root);
+        ReactDOM.unmountComponentAtNode(root);
       }
     });
 
     describe('attributes', () => {
       beforeEach( () => {
-        React.render(<Icon name='plus' size='h1' className='test-class' id='test-id' style={{opacity: '0.5'}}/>, root);
+        ReactDOM.render(<Icon name='plus' size='h1' className='test-class' id='test-id' style={{opacity: '0.5'}}/>, root);
       });
       afterEach(() => {
-        React.unmountComponentAtNode(root);
+        ReactDOM.unmountComponentAtNode(root);
       });
       itPropagatesAttributes('.fa.fa-plus', {className: 'test-class', id: 'test-id', style: {opacity: '0.5'}});
     });
 
     describe('when a className and a size are given', function() {
       it('adds the size class to the icon and includes the given className also', function() {
-        React.render(<Icon name='plus' className='a-class-name' size='h6'/>, root);
+        ReactDOM.render(<Icon name='plus' className='a-class-name' size='h6'/>, root);
         expect('.fa.fa-plus.a-class-name.fa-h6').toExist();
       });
     });
diff --git a/spec/pivotal-ui-react/image/image_spec.js b/spec/pivotal-ui-react/image/image_spec.js
index c47a58931..d57306801 100644
--- a/spec/pivotal-ui-react/image/image_spec.js
+++ b/spec/pivotal-ui-react/image/image_spec.js
@@ -3,7 +3,7 @@ import {itPropagatesAttributes} from '../support/shared_examples';
 
 var Image = require('../../../src/pivotal-ui-react/images/images').Image;
 function renderImage(responsive){
-  React.render(
+  ReactDOM.render(
     <Image
       src="http://placehold.it/20x20"
       href="http://google.com"
@@ -16,7 +16,7 @@ function renderImage(responsive){
 }
 describe('Image', function() {
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('when responsive', function() {
diff --git a/spec/pivotal-ui-react/labels/labels_spec.js b/spec/pivotal-ui-react/labels/labels_spec.js
index 8682d3d20..0c561c37a 100644
--- a/spec/pivotal-ui-react/labels/labels_spec.js
+++ b/spec/pivotal-ui-react/labels/labels_spec.js
@@ -3,11 +3,11 @@ describe('Label', function() {
   var Label;
   beforeEach(function() {
     Label = require('../../../src/pivotal-ui-react/labels/labels').Label;
-    React.render(<Label>bananas</Label>, root);
+    ReactDOM.render(<Label>bananas</Label>, root);
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('renders a primary colored label', function() {
@@ -17,7 +17,7 @@ describe('Label', function() {
   });
 
   function renderLabel(props) {
-    React.render(<Label {...props}>bananas</Label>, root);
+    ReactDOM.render(<Label {...props}>bananas</Label>, root);
   }
 
   describe('when custom options are added', function() {
diff --git a/spec/pivotal-ui-react/lists/lists_spec.js b/spec/pivotal-ui-react/lists/lists_spec.js
index 8a4069287..f7cdd64c2 100644
--- a/spec/pivotal-ui-react/lists/lists_spec.js
+++ b/spec/pivotal-ui-react/lists/lists_spec.js
@@ -22,7 +22,7 @@ describe('lists', function() {
     };
 
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <Element {...mergeProps(props, testProps)}>
           <ListItem>A</ListItem>
           <ListItem>B</ListItem>
@@ -31,7 +31,7 @@ describe('lists', function() {
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     itPropagatesAttributes(identifier, testProps);
@@ -150,7 +150,7 @@ describe('lists', function() {
     };
 
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <ul>
           <ListItem {...testItemProps}>A</ListItem>
         </ul>,
diff --git a/spec/pivotal-ui-react/media/media_spec.js b/spec/pivotal-ui-react/media/media_spec.js
index 10d2234e4..70a69879f 100644
--- a/spec/pivotal-ui-react/media/media_spec.js
+++ b/spec/pivotal-ui-react/media/media_spec.js
@@ -9,13 +9,13 @@ describe('Media', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('Creates a basic media component', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20"/>);
-      React.render((<Media className="media-class" leftImage={image}>fop</Media>), root);
+      ReactDOM.render((<Media className="media-class" leftImage={image}>fop</Media>), root);
     });
 
     it('creates a Media component', function() {
@@ -31,7 +31,7 @@ describe('Media', function() {
     describe('when default left image settings are used', function() {
       beforeEach(function() {
         var image = (<img src="http://placehold.it/20x20" alt="my fancy image description" height="50px" width="40px"/>);
-        React.render((<Media leftImage={image}>fop</Media>), root);
+        ReactDOM.render((<Media leftImage={image}>fop</Media>), root);
       });
 
       it('displays the media-left link with an image inside', function() {
@@ -52,7 +52,7 @@ describe('Media', function() {
     describe('When default image padding is modified to large', function() {
       beforeEach(function() {
         var image = (<img src="http://placehold.it/20x20"/>);
-        React.render((<Media leftImage={image} rightImage={image} leftMediaSpacing="large">fop</Media>), root);
+        ReactDOM.render((<Media leftImage={image} rightImage={image} leftMediaSpacing="large">fop</Media>), root);
       });
 
       it('adds the prl class to the left image', function(){
@@ -68,7 +68,7 @@ describe('Media', function() {
   describe('when right image src is set', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20"/>);
-      React.render((<Media rightImage={image}>fop</Media>), root);
+      ReactDOM.render((<Media rightImage={image}>fop</Media>), root);
     });
 
     it('displays the media-right with an image inside', function() {
@@ -79,7 +79,7 @@ describe('Media', function() {
   describe('when image alignment is set to middle', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20"/>);
-      React.render((<Media leftImage={image} vAlign="middle">fop</Media>), root);
+      ReactDOM.render((<Media leftImage={image} vAlign="middle">fop</Media>), root);
     });
 
     it('displays the media-middle class', function() {
@@ -94,7 +94,7 @@ describe('Media', function() {
   describe('when image alignment is set to bottom', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20"/>);
-      React.render((<Media leftImage={image} vAlign="bottom">fop</Media>), root);
+      ReactDOM.render((<Media leftImage={image} vAlign="bottom">fop</Media>), root);
     });
 
     it('displays the media-bottom class', function() {
@@ -105,7 +105,7 @@ describe('Media', function() {
   describe('when media block is set to stack on small screens', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20"/>);
-      React.render((<Media leftImage={image} stackSize="small">fop</Media>), root);
+      ReactDOM.render((<Media leftImage={image} stackSize="small">fop</Media>), root);
     });
 
     it('the media-stackable-sm class is applied to the media element', function() {
@@ -116,7 +116,7 @@ describe('Media', function() {
   describe('when media block is set to stack on medium screens', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20" />);
-      React.render((<Media leftImage={image} stackSize="medium">fop</Media>), root);
+      ReactDOM.render((<Media leftImage={image} stackSize="medium">fop</Media>), root);
     });
 
     it('the media-stackable-md class is applied to the media element', function() {
@@ -127,7 +127,7 @@ describe('Media', function() {
   describe('when custom attributes are set on media', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20" />);
-      React.render((<Media leftImage={image} stackSize="medium" innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 0.5}}>fop</Media>), root);
+      ReactDOM.render((<Media leftImage={image} stackSize="medium" innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 0.5}}>fop</Media>), root);
     });
 
     it('the class, id, and style are passed through', function() {
@@ -141,7 +141,7 @@ describe('Media', function() {
   describe('Flag', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20"/>);
-      React.render((<Flag leftImage={image} rightImage={image} innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 0.5}}>fop</Flag>), root);
+      ReactDOM.render((<Flag leftImage={image} rightImage={image} innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 0.5}}>fop</Flag>), root);
     });
 
     it('adds the class media-middle to the media-body, media-left, and media-right', function() {
diff --git a/spec/pivotal-ui-react/modals/modals_spec.js b/spec/pivotal-ui-react/modals/modals_spec.js
index a3bab36d4..b8e92f928 100644
--- a/spec/pivotal-ui-react/modals/modals_spec.js
+++ b/spec/pivotal-ui-react/modals/modals_spec.js
@@ -5,14 +5,14 @@ describe('Modals', function() {
 
   beforeEach(function() {
     Modal = require('../../../src/pivotal-ui-react/modals/modals').Modal;
-    modal = React.render(
+    modal = ReactDOM.render(
       <Modal id="yolo" animation={false}> Hi </Modal>,
       root
     );
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('is closed by default', function() {
@@ -47,12 +47,12 @@ describe('BaseModal', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('show', function() {
     it('shows the modal', function() {
-      React.render(
+      ReactDOM.render(
         <BaseModal show id="mr-modal" title="hey mr modal"/>,
         root
       );
@@ -62,7 +62,7 @@ describe('BaseModal', function() {
     });
 
     it('shows the modal', function() {
-      React.render(
+      ReactDOM.render(
         <BaseModal id="mr-modal" title="hey mr modal"/>,
         root
       );
@@ -76,7 +76,7 @@ describe('BaseModal', function() {
 
     beforeEach(function() {
       onHide = jasmine.createSpy('onHide');
-      React.render(
+      ReactDOM.render(
         <BaseModal show id="ms-modal" onHide={onHide}/>,
         root
       );
diff --git a/spec/pivotal-ui-react/notification/notification_spec.js b/spec/pivotal-ui-react/notification/notification_spec.js
index b12cc2239..eedfb2c43 100644
--- a/spec/pivotal-ui-react/notification/notification_spec.js
+++ b/spec/pivotal-ui-react/notification/notification_spec.js
@@ -22,12 +22,12 @@ describe('Notification', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('when there are children', function() {
     beforeEach(function() {
-      React.render((
+      ReactDOM.render((
         <Notifications {...props}>
           <NotificationItem {...itemProps} href="my-fee-link">fee</NotificationItem>
           <NotificationItem href="my-fi-link">fi</NotificationItem>
@@ -78,7 +78,7 @@ describe('Notification', function() {
 
   describe('when there are no children', function() {
     beforeEach(function() {
-      React.render(<Notifications/>, root);
+      ReactDOM.render(<Notifications/>, root);
     });
 
     it('does not render a badge', function() {
@@ -92,7 +92,7 @@ describe('Notification', function() {
 
   describe('when there are size modifiers', function() {
     beforeEach(function() {
-      React.render(<Notifications size="h1"/>, root);
+      ReactDOM.render(<Notifications size="h1"/>, root);
     });
 
     it('renders a h1 sized notification', function() {
@@ -109,7 +109,7 @@ describe('Alert Notifications', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('when there are children', function() {
@@ -121,7 +121,7 @@ describe('Alert Notifications', function() {
       }
     };
     beforeEach(function() {
-      React.render((
+      ReactDOM.render((
         <AlertNotifications {...props}>
           <NotificationItem href="my-fee-link">fee</NotificationItem>
           <NotificationItem href="my-fi-link">fi</NotificationItem>
@@ -159,7 +159,7 @@ describe('Alert Notifications', function() {
 
   describe('when there are no children', function() {
     beforeEach(function() {
-      React.render(<AlertNotifications/>, root);
+      ReactDOM.render(<AlertNotifications/>, root);
     });
 
     it('does not render an alert icon', function() {
@@ -173,7 +173,7 @@ describe('Alert Notifications', function() {
 
   describe('when there are size modifiers', function() {
     beforeEach(function() {
-      React.render(<AlertNotifications size="h1"/>, root);
+      ReactDOM.render(<AlertNotifications size="h1"/>, root);
     });
 
     it('renders a h1 sized notification', function() {
diff --git a/spec/pivotal-ui-react/overlay-trigger/overlay-trigger_spec.js b/spec/pivotal-ui-react/overlay-trigger/overlay-trigger_spec.js
index c31d69a15..6b6318f07 100644
--- a/spec/pivotal-ui-react/overlay-trigger/overlay-trigger_spec.js
+++ b/spec/pivotal-ui-react/overlay-trigger/overlay-trigger_spec.js
@@ -4,7 +4,7 @@ var OverlayTrigger = require('../../../src/pivotal-ui-react/overlay-trigger/over
 
 describe('OverlayTrigger', function() {
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
 
@@ -20,7 +20,7 @@ describe('OverlayTrigger', function() {
           {launcher}
         </OverlayTrigger>
       );
-      React.render(overlays, root);
+      ReactDOM.render(overlays, root);
 
       expect('.tooltip-text').not.toExist();
       $('.launcher').simulate('mouseOver');
@@ -48,7 +48,7 @@ describe('OverlayTrigger', function() {
           </OverlayTrigger>
         </OverlayTrigger>
       );
-      React.render(overlays, root);
+      ReactDOM.render(overlays, root);
 
       expect('.tooltip-text').not.toExist();
       $('.launcher').simulate('mouseOver');
@@ -76,7 +76,7 @@ describe('OverlayTrigger', function() {
           {launcher}
         </OverlayTrigger>
       );
-      React.render(overlays, root);
+      ReactDOM.render(overlays, root);
 
       expect('.tooltip-text').not.toExist();
       $('.launcher').simulate('mouseOver');
@@ -99,7 +99,7 @@ describe('OverlayTrigger', function() {
           {launcher}
         </OverlayTrigger>
       );
-      React.render(overlays, root);
+      ReactDOM.render(overlays, root);
 
       expect('.tooltip-text').not.toExist();
       $('.launcher').simulate('mouseOver');
diff --git a/spec/pivotal-ui-react/pane/pane_spec.js b/spec/pivotal-ui-react/pane/pane_spec.js
index d6f051696..6d8b5a390 100644
--- a/spec/pivotal-ui-react/pane/pane_spec.js
+++ b/spec/pivotal-ui-react/pane/pane_spec.js
@@ -3,11 +3,11 @@ describe('BasePane', function() {
   var BasePane;
   beforeEach(function() {
     BasePane = require('../../../src/pivotal-ui-react/panes/panes').BasePane;
-    React.render(<BasePane className="my-pane">Pane content here</BasePane>, root);
+    ReactDOM.render(<BasePane className="my-pane">Pane content here</BasePane>, root);
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('creates a pane and container', function() {
@@ -20,8 +20,8 @@ describe('BasePane', function() {
 
   describe('when inner and outer attributes are provided', function() {
     beforeEach(function() {
-      React.unmountComponentAtNode(root);
-      React.render(<BasePane className="bg-dark-2 more-outer" innerClassName="bg-glow"
+      ReactDOM.unmountComponentAtNode(root);
+      ReactDOM.render(<BasePane className="bg-dark-2 more-outer" innerClassName="bg-glow"
         id="outer-id" style={{opacity: '0.5'}}/>, root);
     });
 
@@ -35,8 +35,8 @@ describe('BasePane', function() {
 
   describe('when data-attributes are provided', function() {
     beforeEach(function() {
-      React.unmountComponentAtNode(root);
-      React.render(<BasePane data-foo="baz"/>, root);
+      ReactDOM.unmountComponentAtNode(root);
+      ReactDOM.render(<BasePane data-foo="baz"/>, root);
     });
 
     it('attaches the attributes to the .pane', function() {
@@ -48,7 +48,7 @@ describe('BasePane', function() {
 describe('Pane', function() {
   it('puts className on pane', function() {
     const {Pane} = require('../../../src/pivotal-ui-react/panes/panes');
-    React.render(<Pane className="biology">Pane content here</Pane>, root);
+    ReactDOM.render(<Pane className="biology">Pane content here</Pane>, root);
     expect('.pane').toHaveClass('biology');
   });
 });
diff --git a/spec/pivotal-ui-react/panels/panels_spec.js b/spec/pivotal-ui-react/panels/panels_spec.js
index 1a6c79680..a349624c3 100644
--- a/spec/pivotal-ui-react/panels/panels_spec.js
+++ b/spec/pivotal-ui-react/panels/panels_spec.js
@@ -6,12 +6,12 @@ describe('Panel', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('with no props given', function() {
     beforeEach(function() {
-      React.render(<Panel>Sup</Panel>, root);
+      ReactDOM.render(<Panel>Sup</Panel>, root);
     });
 
     it('creates a panel', function() {
@@ -21,7 +21,7 @@ describe('Panel', function() {
 
   describe('when a kind is provided', function() {
     beforeEach(function() {
-      React.render(<Panel kind="panel-basic">Sup</Panel>, root);
+      ReactDOM.render(<Panel kind="panel-basic">Sup</Panel>, root);
     });
 
     it('sets the kind as a class on the panel', function() {
@@ -31,7 +31,7 @@ describe('Panel', function() {
 
   describe('when a title is provided', function() {
     beforeEach(function() {
-      React.render(<Panel title="This is a title">Sup</Panel>, root);
+      ReactDOM.render(<Panel title="This is a title">Sup</Panel>, root);
     });
 
     it('sets the title to the panel', function() {
@@ -41,7 +41,7 @@ describe('Panel', function() {
 
   describe('when attributes are provided', function() {
     beforeEach(function() {
-      React.render(<Panel className="foo myClass" innerClassName="inner-class"
+      ReactDOM.render(<Panel className="foo myClass" innerClassName="inner-class"
                           id="outer-id"
                           style={{opacity: '0.5'}}>Sup</Panel>, root);
     });
@@ -61,7 +61,7 @@ describe('Panel', function() {
 
   describe('when padding is provided', function() {
     beforeEach(function() {
-      React.render(<Panel padding="ptl">Sup</Panel>, root);
+      ReactDOM.render(<Panel padding="ptl">Sup</Panel>, root);
     });
 
     it('sets the padding as a class on the panel-body', function() {
@@ -71,7 +71,7 @@ describe('Panel', function() {
 
   describe('when style and scrollable are both provided', function() {
     beforeEach(function() {
-      React.render(<Panel style={{color: 'red'}} scrollable={1337}>Sup</Panel>, root);
+      ReactDOM.render(<Panel style={{color: 'red'}} scrollable={1337}>Sup</Panel>, root);
     });
 
     it('renders the correct style', function() {
@@ -81,7 +81,7 @@ describe('Panel', function() {
 
   describe('when style is provided and scrollable is not', function() {
     beforeEach(function() {
-      React.render(<Panel style={{color: 'red'}}>Sup</Panel>, root);
+      ReactDOM.render(<Panel style={{color: 'red'}}>Sup</Panel>, root);
     });
 
     it('renders the correct style', function() {
@@ -92,7 +92,7 @@ describe('Panel', function() {
 
   describe('when scrollable is set to true', function() {
     beforeEach(function() {
-      React.render(<Panel scrollable>Sup</Panel>, root);
+      ReactDOM.render(<Panel scrollable>Sup</Panel>, root);
     });
 
     it('adds the class "panel-scrollable"', function() {
@@ -101,7 +101,7 @@ describe('Panel', function() {
 
     describe('when it is set to a number', function() {
       beforeEach(function() {
-        React.render(<Panel scrollable={1337}>Sup</Panel>, root);
+        ReactDOM.render(<Panel scrollable={1337}>Sup</Panel>, root);
       });
 
       it('sets the max-height of the panel-body to to the supplied numerical value', function() {
@@ -112,7 +112,7 @@ describe('Panel', function() {
 
   describe('when scrollable is not set', () => {
     beforeEach(function() {
-      React.render(<Panel>Sup</Panel>, root);
+      ReactDOM.render(<Panel>Sup</Panel>, root);
     });
 
     it('does not add the class "panel-scrollable"', () => {
@@ -126,11 +126,11 @@ describe('ShadowPanel', function() {
   var ShadowPanel;
   beforeEach(function() {
     ShadowPanel = require('../../../src/pivotal-ui-react/panels/panels').ShadowPanel;
-    React.render(<ShadowPanel>Sup</ShadowPanel>, root);
+    ReactDOM.render(<ShadowPanel>Sup</ShadowPanel>, root);
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('creates a panel with the default shadow class', function() {
@@ -140,7 +140,7 @@ describe('ShadowPanel', function() {
 
   describe('when the shadowLevel property is set', function() {
     beforeEach(function() {
-      React.render(<ShadowPanel shadowLevel={3}>Sup</ShadowPanel>, root);
+      ReactDOM.render(<ShadowPanel shadowLevel={3}>Sup</ShadowPanel>, root);
     });
 
     it('creates a shadow panel with the corresponding level', function() {
diff --git a/spec/pivotal-ui-react/portals/portals_spec.js b/spec/pivotal-ui-react/portals/portals_spec.js
index 4526aa80f..887a19746 100644
--- a/spec/pivotal-ui-react/portals/portals_spec.js
+++ b/spec/pivotal-ui-react/portals/portals_spec.js
@@ -15,13 +15,13 @@ describe('Portals', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('when there is more than one destination portal with the same name', function() {
     beforeEach(function() {
       spyOn(console, 'warn');
-      React.render(
+      ReactDOM.render(
         <div>
           <div className="orange">
             <PortalDestination name="chell"/>
@@ -45,7 +45,7 @@ describe('Portals', function() {
 
   describe('when there is more than one source portal with the same name', function() {
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <div>
           <div className="orange">
             <PortalDestination name="chell"/>
@@ -76,13 +76,12 @@ describe('Portals', function() {
     var potato, context;
     beforeEach(function() {
       var Context = React.createClass({
-        propTypes: {visible: React.PropTypes.bool},
-        getDefaultProps() { return {visible: true}; },
+        getInitialState() { return {visible: true}; },
         render() {
           return (
             <div>
               <div className="blue">
-                {this.props.visible && <PortalSource name="chell">
+                {this.state.visible && <PortalSource name="chell">
                   <Potato ref="potato"/>
                 </PortalSource>}
               </div>
@@ -93,7 +92,7 @@ describe('Portals', function() {
           );
         }
       });
-      context = React.render(<Context/>, root);
+      context = ReactDOM.render(<Context/>, root);
       potato = context.refs.potato;
     });
 
@@ -118,7 +117,7 @@ describe('Portals', function() {
 
     describe('when the blue contents unmount', function() {
       beforeEach(function() {
-        context.setProps({visible: false});
+        context.setState({visible: false});
       });
 
       it('cleans up the div in the destination portal', function() {
@@ -129,7 +128,7 @@ describe('Portals', function() {
 
   describe('when the portals are rendered destination first then source', function() {
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <div>
           <div className="orange">
             <PortalDestination name="chell"/>
@@ -154,7 +153,7 @@ describe('Portals', function() {
 
   describe('with multiple portal pairs', function() {
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <div>
           <div className="orange-chell">
             <PortalDestination name="chell"/>
diff --git a/spec/pivotal-ui-react/radio-group/radio-group_spec.js b/spec/pivotal-ui-react/radio-group/radio-group_spec.js
index 14b8c5ade..89d04cd2f 100644
--- a/spec/pivotal-ui-react/radio-group/radio-group_spec.js
+++ b/spec/pivotal-ui-react/radio-group/radio-group_spec.js
@@ -10,7 +10,7 @@ describe('RadioGroup', function() {
       changeSpy = jasmine.createSpy('change').and.callFake(function(e) {
         callValue = e.target.value;
       });
-      React.render(
+      ReactDOM.render(
         <RadioGroup name="bananas" onChange={changeSpy}>
           <Radio value="1">One!!!</Radio>
           <Radio value="2">The two value</Radio>
@@ -21,7 +21,7 @@ describe('RadioGroup', function() {
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('renders the radio group', function() {
@@ -49,7 +49,7 @@ describe('RadioGroup', function() {
 
   describe('RadioGroup with custom attributes', function() {
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <RadioGroup name="bananas" id="clear-channel" style={{color: 'red'}} className='1234'>
           <Radio value="1">One!!!</Radio>
           <Radio value="2">The two value</Radio>
diff --git a/spec/pivotal-ui-react/radio/radio_spec.js b/spec/pivotal-ui-react/radio/radio_spec.js
index 2d5b001b5..f6e7dbc6a 100644
--- a/spec/pivotal-ui-react/radio/radio_spec.js
+++ b/spec/pivotal-ui-react/radio/radio_spec.js
@@ -7,11 +7,11 @@ describe('Radio', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('renders a radio', function() {
-    React.render(
+    ReactDOM.render(
       <Radio value="1" name="bananas" id="npr">
         One!!!
       </Radio>, root);
@@ -22,7 +22,7 @@ describe('Radio', function() {
 
   describe('when the checked property is passed', function() {
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         <Radio value="1" name="bananas" checked onChange={jasmine.createSpy('change')}>
           One!!!
         </Radio>, root);
@@ -38,7 +38,7 @@ describe('Radio', function() {
 
     beforeEach(function() {
       changeSpy = jasmine.createSpy('change');
-      React.render(
+      ReactDOM.render(
         <Radio value="1" name="bananas" onChange={changeSpy} defaultChecked>
           One!!!
         </Radio>, root);
@@ -58,7 +58,7 @@ describe('Radio', function() {
 
   describe('when className and style are passed', () => {
     beforeEach(() =>{
-      React.render(
+      ReactDOM.render(
         <Radio value="1" name="bananas" className="radio-class" style={{opacity: '0.5'}} defaultChecked>
           One!!!
         </Radio>, root);
diff --git a/spec/pivotal-ui-react/ribbons/ribbon_spec.js b/spec/pivotal-ui-react/ribbons/ribbon_spec.js
index fcc3b8e38..89f2de78b 100644
--- a/spec/pivotal-ui-react/ribbons/ribbon_spec.js
+++ b/spec/pivotal-ui-react/ribbons/ribbon_spec.js
@@ -6,11 +6,11 @@ var Banner = require('../../../src/pivotal-ui-react/ribbons/ribbons').Banner;
 describe('Ribbon', function() {
   describe('basic Ribbon', function() {
     beforeEach(function() {
-      React.render(<Ribbon>British</Ribbon>, root);
+      ReactDOM.render(<Ribbon>British</Ribbon>, root);
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('renders a ribbon', function() {
@@ -21,7 +21,7 @@ describe('Ribbon', function() {
 
   describe('Ribbon with custom attributes', function() {
     beforeEach(function() {
-      React.render(<Ribbon className="1234" id="test" style={{color: 'red'}}>British</Ribbon>, root);
+      ReactDOM.render(<Ribbon className="1234" id="test" style={{color: 'red'}}>British</Ribbon>, root);
     });
 
     it('renders a ribbon with custom attributes', function() {
@@ -36,11 +36,11 @@ describe('PrimaryRibbon', function() {
   describe('basic PrimaryRibbon', function() {
 
     beforeEach(function() {
-      React.render(<PrimaryRibbon>British</PrimaryRibbon>, root);
+      ReactDOM.render(<PrimaryRibbon>British</PrimaryRibbon>, root);
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('adds the ribbon-primary class', function() {
@@ -51,7 +51,7 @@ describe('PrimaryRibbon', function() {
 
   describe('PrimaryRibbon with custom attributes', function() {
     beforeEach(function() {
-      React.render(<PrimaryRibbon className="1234" id="test" style={{color: 'red'}}>British</PrimaryRibbon>, root);
+      ReactDOM.render(<PrimaryRibbon className="1234" id="test" style={{color: 'red'}}>British</PrimaryRibbon>, root);
     });
 
     it('renders a ribbon with custom attributes', function() {
@@ -67,11 +67,11 @@ describe('Banner', function() {
   describe('basic Banner', function() {
 
     beforeEach(function() {
-      React.render(<Banner>British</Banner>, root);
+      ReactDOM.render(<Banner>British</Banner>, root);
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('renders a Banner', function() {
@@ -82,7 +82,7 @@ describe('Banner', function() {
 
   describe('Banner with custom attributes', function() {
     beforeEach(function() {
-      React.render(<Banner className="1234" id="test" style={{color: 'red'}}>British</Banner>, root);
+      ReactDOM.render(<Banner className="1234" id="test" style={{color: 'red'}}>British</Banner>, root);
     });
 
     it('renders a ribbon with custom attributes', function() {
diff --git a/spec/pivotal-ui-react/search-input/search-input_spec.js b/spec/pivotal-ui-react/search-input/search-input_spec.js
index 72de27b38..a1e67e86b 100644
--- a/spec/pivotal-ui-react/search-input/search-input_spec.js
+++ b/spec/pivotal-ui-react/search-input/search-input_spec.js
@@ -5,11 +5,11 @@ describe('SearchInput', function() {
   var SearchInput;
   beforeEach(function() {
     SearchInput = require('../../../src/pivotal-ui-react/search-input/search-input').SearchInput;
-    React.render((<SearchInput className="foo myClass" id="bar" style={{opacity: '0.5'}}/>), root);
+    ReactDOM.render((<SearchInput className="foo myClass" id="bar" style={{opacity: '0.5'}}/>), root);
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('renders a form group with the search classes', function() {
@@ -23,7 +23,7 @@ describe('SearchInput', function() {
 
   describe('when a placeholder is provided', function() {
     beforeEach(function() {
-      React.render((<SearchInput placeholder="Search here..."/>), root);
+      ReactDOM.render((<SearchInput placeholder="Search here..."/>), root);
     });
 
     it('renders the input with a placeholder', function() {
@@ -36,7 +36,7 @@ describe('SearchInput', function() {
 
     describe('when an aria-label is provided as well', function() {
       beforeEach(function() {
-        React.render((<SearchInput placeholder="Search here..." aria-label="Search Box" />), root);
+        ReactDOM.render((<SearchInput placeholder="Search here..." aria-label="Search Box" />), root);
       });
 
       it('uses the label as the aria-label instead of the placeholder', function() {
@@ -51,7 +51,7 @@ describe('SearchInput', function() {
     var changeSpy;
     beforeEach(function() {
       changeSpy = jasmine.createSpy('change');
-      React.render((<SearchInput onChange={changeSpy}/>), root);
+      ReactDOM.render((<SearchInput onChange={changeSpy}/>), root);
     });
 
     it('adds the handlers to the search input', function() {
diff --git a/spec/pivotal-ui-react/select-fancy/select-fancy_spec.js b/spec/pivotal-ui-react/select-fancy/select-fancy_spec.js
index 79d6823e2..1aa499a21 100644
--- a/spec/pivotal-ui-react/select-fancy/select-fancy_spec.js
+++ b/spec/pivotal-ui-react/select-fancy/select-fancy_spec.js
@@ -1,14 +1,14 @@
 require('../spec_helper');
 
 describe('SelectFancy', function() {
-  var SelectFancy, subject;
+  var SelectFancy;
   beforeEach(function() {
     SelectFancy = require('../../../src/pivotal-ui-react/select-fancy/select-fancy').SelectFancy;
-    subject = React.render((<SelectFancy className="foo myClass" id="myId"/>), root);
+    ReactDOM.render((<SelectFancy className="foo myClass" id="myId"/>), root);
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('renders a select fancy component with class', function() {
@@ -21,7 +21,7 @@ describe('SelectFancy', function() {
 
   describe('when a name is provided', function() {
     beforeEach(function() {
-      subject.setProps({name: 'my-select'});
+      ReactDOM.render((<SelectFancy name="my-select"/>), root);
     });
 
     it('renders the select with a name', function() {
@@ -33,7 +33,7 @@ describe('SelectFancy', function() {
     var changeSpy;
     beforeEach(function() {
       changeSpy = jasmine.createSpy('change');
-      subject.setProps({onChange: changeSpy});
+      ReactDOM.render((<SelectFancy onChange={changeSpy}/>), root);
     });
 
     it('adds the handlers to the search input', function() {
@@ -44,7 +44,7 @@ describe('SelectFancy', function() {
 
   describe('when the disabled prop is truthy', function() {
     beforeEach(function() {
-      subject.setProps({disabled: true});
+      ReactDOM.render((<SelectFancy disabled/>), root);
     });
 
     it('adds the disabled class to the select-fancy wrapper', function() {
diff --git a/spec/pivotal-ui-react/sortable-table/sortable-table_spec.js b/spec/pivotal-ui-react/sortable-table/sortable-table_spec.js
index f56a30a2b..66ce45a99 100644
--- a/spec/pivotal-ui-react/sortable-table/sortable-table_spec.js
+++ b/spec/pivotal-ui-react/sortable-table/sortable-table_spec.js
@@ -35,7 +35,7 @@ describe('SortableTable', function() {
         <TableHeader>Unsortable</TableHeader>
       ];
 
-      React.render((
+      ReactDOM.render((
           <SortableTable headers={headers} {...props}>
             {data.map(function(datum, key) {
               return (
@@ -58,7 +58,7 @@ describe('SortableTable', function() {
     });
 
     afterEach(function() {
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
 
     it('adds the class "sortable" on all sortable columns', function() {
@@ -226,7 +226,7 @@ describe('SortableTable', function() {
         <TableHeader sortable>BFFs</TableHeader>
       ];
 
-      React.render((
+      ReactDOM.render((
           <SortableTable headers={headers}>
             <TableRow key={1}>
               <TableCell> my main village man </TableCell>
@@ -244,14 +244,14 @@ describe('SortableTable', function() {
 
       expect(root).toContainText('that dude francesco');
 
-      React.unmountComponentAtNode(root);
+      ReactDOM.unmountComponentAtNode(root);
     });
   });
 });
 
 describe('TableHeader', function() {
   function renderTableHeader({children, ...props}) {
-    return React.render((
+    return ReactDOM.render((
         <table>
           <thead>
             <tr>
@@ -322,7 +322,7 @@ describe('TableHeader', function() {
 
 describe('TableRow', function() {
   function renderTableRow({children=(<td></td>), ...props}) {
-    return React.render((
+    return ReactDOM.render((
         <table>
           <tbody>
             <TableRow {...props}>
@@ -355,7 +355,7 @@ describe('TableRow', function() {
 
 describe('TableCell', function() {
   function renderTableCell({children, ...props}) {
-    return React.render((
+    return ReactDOM.render((
         <table>
           <tbody>
             <tr>
diff --git a/spec/pivotal-ui-react/spec_helper.js b/spec/pivotal-ui-react/spec_helper.js
index ef9c4f00d..18f4320e9 100644
--- a/spec/pivotal-ui-react/spec_helper.js
+++ b/spec/pivotal-ui-react/spec_helper.js
@@ -1,7 +1,10 @@
 require('jasmine_dom_matchers');
 require('phantomjs-polyfill');
 
-global.React = require('react/addons');
+global.React = require('react');
+global.ReactDOM = require('react-dom');
+global.TestUtils = require('react-addons-test-utils');
+
 var jQuery = require('jquery');
 var MockNow = require('performance-now');
 var MockRaf = require('raf');
@@ -19,25 +22,16 @@ $.fn.simulate = function(eventName, ...args) {
   }
   $.each(this, function() {
     if (['mouseOver', 'mouseOut', 'click'].indexOf(eventName) !== -1) {
-      React.addons.TestUtils.SimulateNative[eventName](this, ...args);
+      TestUtils.SimulateNative[eventName](this, ...args);
     } else {
-      React.addons.TestUtils.Simulate[eventName](this, ...args);
+      TestUtils.Simulate[eventName](this, ...args);
     }
   });
   return this;
 };
 
-const RegularCSSTransitionGroup = global.React.addons.CSSTransitionGroup;
-
-class TransitionGroupMock extends global.React.Component {
-  render() {
-    const {children, ...others} = this.props;
-    return <div {...others}>{children}</div>;
-  };
-}
-
 global.shallowRender = function shallowRender(jsx) {
-  const shallowRenderer = React.addons.TestUtils.createRenderer();
+  const shallowRenderer = TestUtils.createRenderer();
   shallowRenderer.render(jsx);
   return shallowRenderer.getRenderOutput();
 };
@@ -45,7 +39,6 @@ global.shallowRender = function shallowRender(jsx) {
 beforeEach(function() {
   jasmine.clock().install();
   $('body').find('#root').remove().end().append('<main id="root"/>');
-  global.React.addons.CSSTransitionGroup = TransitionGroupMock;
 });
 
 beforeEach(function() {
@@ -68,5 +61,4 @@ afterEach(function() {
   MockNow.reset();
   MockRaf.reset();
   jasmine.clock().uninstall();
-  global.React.addons.CSSTransitionGroup = RegularCSSTransitionGroup;
 });
diff --git a/spec/pivotal-ui-react/stream-list/stream-list_spec.js b/spec/pivotal-ui-react/stream-list/stream-list_spec.js
index 04b850c5f..e3ed786db 100644
--- a/spec/pivotal-ui-react/stream-list/stream-list_spec.js
+++ b/spec/pivotal-ui-react/stream-list/stream-list_spec.js
@@ -6,7 +6,7 @@ import EventEmitter from 'node-event-emitter';
 
 describe('StreamList', () => {
   afterEach(() => {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('initial render', () => {
@@ -26,7 +26,7 @@ describe('StreamList', () => {
           <StreamListItem>Item c</StreamListItem>
         </StreamList>
       );
-      React.render(streamList, root);
+      ReactDOM.render(streamList, root);
     });
 
 
@@ -70,7 +70,7 @@ describe('StreamList', () => {
       });
 
       streamListExample = <StreamListExample/>;
-      React.render(streamListExample, root);
+      ReactDOM.render(streamListExample, root);
     });
 
     it('adds a New Items button to the top of the list, using the appropriate singular/plural text', () => {
@@ -117,4 +117,4 @@ describe('StreamList', () => {
       });
     });
   });
-});
\ No newline at end of file
+});
diff --git a/spec/pivotal-ui-react/tabs/tabs_spec.js b/spec/pivotal-ui-react/tabs/tabs_spec.js
index c95b33397..ddbae104e 100644
--- a/spec/pivotal-ui-react/tabs/tabs_spec.js
+++ b/spec/pivotal-ui-react/tabs/tabs_spec.js
@@ -5,7 +5,7 @@ import {itPropagatesAttributes} from '../support/shared_examples';
 
 describe('Tabs', function() {
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('BaseTabs', function() {
@@ -23,7 +23,7 @@ describe('Tabs', function() {
     describe('props', function() {
       describe('responsiveBreakpoint', function() {
         beforeEach(function() {
-          React.render(
+          ReactDOM.render(
             <BaseTabs defaultActiveKey={2}
                       tabType={tabType}
                       responsiveBreakpoint="xs"
@@ -79,7 +79,7 @@ describe('Tabs', function() {
         beforeEach(function() {
           onSelectSpy = jasmine.createSpy('onSelectSpy');
 
-          React.render(
+          ReactDOM.render(
             <BaseTabs defaultActiveKey={2} tabType={tabType} onSelect={onSelectSpy}>
               <Tab eventKey={1} title="Tab1">Content1</Tab>
               <Tab eventKey={2} title="Tab2">Content2</Tab>
@@ -107,7 +107,7 @@ describe('Tabs', function() {
 
       describe('id', function() {
         beforeEach(function() {
-          React.render(
+          ReactDOM.render(
             <BaseTabs tabType={tabType}/>,
             root
           );
@@ -129,7 +129,7 @@ describe('Tabs', function() {
 
       describe('passthroughs', function() {
         beforeEach(function() {
-          React.render(
+          ReactDOM.render(
             <BaseTabs defaultActiveKey={2}
                       tabType={tabType}
                       className="test-class"
@@ -169,7 +169,7 @@ describe('Tabs', function() {
           }
         });
 
-        React.render(<TestComponent />, root);
+        ReactDOM.render(<TestComponent />, root);
       });
 
       it('creates tabs in the correct container', function() {
@@ -255,7 +255,7 @@ describe('Tabs', function() {
 
     describe('positioning', function() {
       function renderTabs(props = {}) {
-        React.render(
+        ReactDOM.render(
           <LeftTabs defaultActiveKey={1} {...props}>
             <Tab eventKey={1} title="Tab1">Content1</Tab>
             <Tab eventKey={2} title="Tab2">Content2</Tab>
@@ -273,7 +273,7 @@ describe('Tabs', function() {
 
   describe('SimpleTabs', function() {
     it('renders without blowing up', function() {
-      React.render(
+      ReactDOM.render(
         <SimpleTabs defaultActiveKey={1}>
           <Tab eventKey={1} title="Tab1">Content1</Tab>
           <Tab eventKey={2} title="Tab2">Content2</Tab>
@@ -312,7 +312,7 @@ describe('Tabs', function() {
 
   describe('SimpleAltTabs', function() {
     it('should add the class tab-simple to large screen tabs', function() {
-      React.render(
+      ReactDOM.render(
         <SimpleAltTabs defaultActiveKey={1}>
           <Tab eventKey={1} title="Tab1">Content1</Tab>
           <Tab eventKey={2} title="Tab2">Content2</Tab>
diff --git a/spec/pivotal-ui-react/tile-layout/tile-layout_spec.js b/spec/pivotal-ui-react/tile-layout/tile-layout_spec.js
index 186eb9207..8087b5701 100644
--- a/spec/pivotal-ui-react/tile-layout/tile-layout_spec.js
+++ b/spec/pivotal-ui-react/tile-layout/tile-layout_spec.js
@@ -2,15 +2,14 @@ require('../spec_helper');
 import {itPropagatesAttributes} from '../support/shared_examples';
 
 describe('TileLayout', () => {
-  const React = require('react/addons');
   const TileLayout = require('../../../src/pivotal-ui-react/tile-layout/tile-layout');
 
   it('creates tile-layout', () => {
-    React.render(<TileLayout></TileLayout>, root);
+    ReactDOM.render(<TileLayout></TileLayout>, root);
     expect('#root .tile-layout').toExist();
   });
   it('creates tile-items', () => {
-    React.render(
+    ReactDOM.render(
       <TileLayout>
         <TileLayout.Item>
           Item 1
@@ -29,13 +28,13 @@ describe('TileLayout', () => {
   });
   describe('columns', () => {
     it('supports setting number of columns', () => {
-      React.render(<TileLayout columns={4}></TileLayout>, root);
+      ReactDOM.render(<TileLayout columns={4}></TileLayout>, root);
 
       expect('#root .tile-layout').toHaveClass('tile-layout-xs-4');
     });
 
     it('supports supports setting number of columns for different screen sizes', () => {
-      React.render(<TileLayout columns={{sm: 4, md: 3, lg: 2, xl: 1}}></TileLayout>, root);
+      ReactDOM.render(<TileLayout columns={{sm: 4, md: 3, lg: 2, xl: 1}}></TileLayout>, root);
 
       expect('#root .tile-layout').toHaveClass('tile-layout-sm-4');
       expect('#root .tile-layout').toHaveClass('tile-layout-md-3');
@@ -46,13 +45,13 @@ describe('TileLayout', () => {
 
   describe('gutters', () => {
     it('supports no gutter', () => {
-      React.render(<TileLayout noGutter></TileLayout>, root);
+      ReactDOM.render(<TileLayout noGutter></TileLayout>, root);
 
       expect('#root .tile-layout').not.toHaveClass('tile-gutter');
     });
 
     it('supports gutter', () => {
-      React.render(<TileLayout></TileLayout>, root);
+      ReactDOM.render(<TileLayout></TileLayout>, root);
 
       expect('#root .tile-layout').toHaveClass('tile-gutter');
     });
@@ -60,7 +59,7 @@ describe('TileLayout', () => {
 
   describe('attributes', () => {
     beforeEach(() => {
-      React.render(
+      ReactDOM.render(
         <TileLayout className="outer-class" id="outer-id" style={{opacity: '0.5'}}>
           <TileLayout.Item className="inner-class" id="inner-id" style={{opacity: '0'}}>
             Item 1
diff --git a/spec/pivotal-ui-react/tooltip/tooltip_spec.js b/spec/pivotal-ui-react/tooltip/tooltip_spec.js
index 77cffebaa..0e8a90226 100644
--- a/spec/pivotal-ui-react/tooltip/tooltip_spec.js
+++ b/spec/pivotal-ui-react/tooltip/tooltip_spec.js
@@ -12,11 +12,11 @@ describe('tooltip', function() {
 
   beforeEach(function() {
     var Tooltip = require('../../../src/pivotal-ui-react/tooltip/tooltip').Tooltip;
-    React.render((<Tooltip {...props}><div className="tooltip-text">Hello World</div></Tooltip>), root);
+    ReactDOM.render((<Tooltip {...props}><div className="tooltip-text">Hello World</div></Tooltip>), root);
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('works', function() {
diff --git a/spec/pivotal-ui-react/typography/typography_spec.js b/spec/pivotal-ui-react/typography/typography_spec.js
index adfa26d9b..03845e616 100644
--- a/spec/pivotal-ui-react/typography/typography_spec.js
+++ b/spec/pivotal-ui-react/typography/typography_spec.js
@@ -9,12 +9,12 @@ describe('Heading', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   describe('when the Heading has no properties passed in', function() {
     beforeEach(function() {
-      React.render((<Heading children="Heading text here"/>), root);
+      ReactDOM.render((<Heading children="Heading text here"/>), root);
     });
 
     it('creates a p tag', function() {
@@ -29,7 +29,7 @@ describe('Heading', function() {
   ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(element) {
     describe('when passing in element="' + element + '"', function() {
       beforeEach(function() {
-        React.render((<Heading element={element} children="Heading text here"/>), root);
+        ReactDOM.render((<Heading element={element} children="Heading text here"/>), root);
       });
 
       it('creates an element of the specified heading', function() {
@@ -40,7 +40,7 @@ describe('Heading', function() {
 
   describe('when the Heading has attrs provided', function() {
     beforeEach(function() {
-      React.render((<Heading element="h1" allCaps={true} className="myClass" id='myId' style={{opacity: '0.5'}} children="Heading text here"/>), root);
+      ReactDOM.render((<Heading element="h1" allCaps={true} className="myClass" id='myId' style={{opacity: '0.5'}} children="Heading text here"/>), root);
     });
 
     it('has the default classes', function() {
@@ -53,7 +53,7 @@ describe('Heading', function() {
 
   describe('when the Heading has size provided', function() {
     beforeEach(function() {
-      React.render((<Heading element="h1" size="small" children="Heading text here"/>), root);
+      ReactDOM.render((<Heading element="h1" size="small" children="Heading text here"/>), root);
     });
 
     it('creates an element with the size class set', function() {
@@ -63,7 +63,7 @@ describe('Heading', function() {
 
   describe('when the Heading has allCaps set', function() {
     beforeEach(function() {
-      React.render((<Heading element="h2" allCaps={true} children="Heading text here"/>), root);
+      ReactDOM.render((<Heading element="h2" allCaps={true} children="Heading text here"/>), root);
     });
 
     it('creates an element with the em-alt class', function() {
@@ -73,7 +73,7 @@ describe('Heading', function() {
 
   describe('when the Heading has a bold set', function() {
     beforeEach(function() {
-      React.render((<Heading element="h2" bold="high" children="Heading text here"/>), root);
+      ReactDOM.render((<Heading element="h2" bold="high" children="Heading text here"/>), root);
     });
 
     it('creates an element with the em-{bold} class', function() {
@@ -83,7 +83,7 @@ describe('Heading', function() {
 
   describe('when the Heading has color set', function() {
     beforeEach(function() {
-      React.render((<Heading element="h2" color="purple" children="Heading text here"/>), root);
+      ReactDOM.render((<Heading element="h2" color="purple" children="Heading text here"/>), root);
     });
 
     it('creates an element with the color class', function() {
@@ -93,7 +93,7 @@ describe('Heading', function() {
 
   describe('when Heading has many properties set', function() {
     beforeEach(function() {
-      React.render(
+      ReactDOM.render(
         (<Heading element="h2" size="h4" color="purple" bold="max" allCaps={true} children="Heading text here"/>),
         root);
     });
diff --git a/spec/styleguide/styleguide-nav-spec.js b/spec/styleguide/styleguide-nav-spec.js
index f9c9607d8..d8c7a1e3c 100644
--- a/spec/styleguide/styleguide-nav-spec.js
+++ b/spec/styleguide/styleguide-nav-spec.js
@@ -23,7 +23,7 @@ describe('StyleguideNav', () => {
       }
     };
 
-    React.render(
+    ReactDOM.render(
       <StyleguideNav navTree={navTree}
                      defaultLanguage={'react'}
                      defaultComponentType={'objects'}/>,
@@ -34,7 +34,7 @@ describe('StyleguideNav', () => {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(root);
+    ReactDOM.unmountComponentAtNode(root);
   });
 
   it('creates top-level language tabs with react first', () => {
diff --git a/spec/task-helpers/react-component-helper-spec.js b/spec/task-helpers/react-component-helper-spec.js
index 2f402715f..9b6cba5a1 100644
--- a/spec/task-helpers/react-component-helper-spec.js
+++ b/spec/task-helpers/react-component-helper-spec.js
@@ -41,7 +41,7 @@ describe('packageJson', () => {
         license: 'MIT',
         bugs: {url: 'https://github.com/pivotal-cf/pivotal-ui/issues'},
         homepage: 'https://github.com/pivotal-cf/pivotal-ui',
-        peerDependencies: { react: '^0.13.0' }
+        peerDependencies: { react: '^0.14.0' }
       }));
     });
 
diff --git a/src/pivotal-ui-react/alerts/package.json b/src/pivotal-ui-react/alerts/package.json
index 3dbb49920..3777a6dc6 100644
--- a/src/pivotal-ui-react/alerts/package.json
+++ b/src/pivotal-ui-react/alerts/package.json
@@ -3,9 +3,9 @@
   "description": "React components to display flash messages to the user",
   "homepage": "http://styleguide.pivotal.io/",
   "dependencies": {
-    "react-bootstrap": "0.25.1",
+    "react-bootstrap": "0.27.1",
     "pui-css-alerts": "2.1.0-alpha.1",
     "pui-css-iconography": "2.1.0-alpha.1",
     "pui-react-media": "2.1.0-alpha.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pivotal-ui-react/autocomplete/autocomplete.js b/src/pivotal-ui-react/autocomplete/autocomplete.js
index 297e25d88..3b1b5ba21 100644
--- a/src/pivotal-ui-react/autocomplete/autocomplete.js
+++ b/src/pivotal-ui-react/autocomplete/autocomplete.js
@@ -4,6 +4,7 @@ var classnames = require('classnames');
 var Cursor = require('pui-cursor');
 var es = require('event-stream');
 var React = require('react');
+var ReactDOM = require('react-dom');
 var scrollIntoView = require('scroll-into-view');
 var TrieSearch = require('trie-search');
 
@@ -88,7 +89,7 @@ var Autocomplete = React.createClass({
   },
 
   scrollIntoView() {
-    Array.from(React.findDOMNode(this).querySelectorAll('.highlighted')).map((el) => scrollIntoView(el, {validTarget: target => target !== window}));
+    Array.from(ReactDOM.findDOMNode(this).querySelectorAll('.highlighted')).map((el) => scrollIntoView(el, {validTarget: target => target !== window}));
   },
 
   render() {
diff --git a/src/pivotal-ui-react/autocomplete/package.json b/src/pivotal-ui-react/autocomplete/package.json
index 34969d42b..f43c23dde 100644
--- a/src/pivotal-ui-react/autocomplete/package.json
+++ b/src/pivotal-ui-react/autocomplete/package.json
@@ -3,6 +3,7 @@
   "description": "React autocomplete component",
   "homepage": "http://styleguide.pivotal.io/",
   "dependencies": {
+    "react-dom": "^0.14.0",
     "classnames": "^1.2.0",
     "event-stream": "^3.3.1",
     "pui-cursor": "^1.4.0",
diff --git a/src/pivotal-ui-react/buttons/buttons.js b/src/pivotal-ui-react/buttons/buttons.js
index 678a14a85..2b462e0ad 100644
--- a/src/pivotal-ui-react/buttons/buttons.js
+++ b/src/pivotal-ui-react/buttons/buttons.js
@@ -1,4 +1,4 @@
-var React = require('react/addons');
+var React = require('react');
 import {mergeProps} from 'pui-react-helpers';
 
 /**
diff --git a/src/pivotal-ui-react/collapse/package.json b/src/pivotal-ui-react/collapse/package.json
index 8535f878b..001412ab5 100644
--- a/src/pivotal-ui-react/collapse/package.json
+++ b/src/pivotal-ui-react/collapse/package.json
@@ -3,11 +3,11 @@
   "description": "React components providing accordions for showing and hiding content",
   "homepage": "http://styleguide.pivotal.io/",
   "dependencies": {
-    "react-bootstrap": "0.25.1",
+    "react-bootstrap": "0.27.1",
     "classnames": "^1.2.0",
     "pui-css-collapse": "2.1.0-alpha.1",
     "pui-css-iconography": "2.1.0-alpha.1",
     "pui-css-dividers": "2.1.0-alpha.1",
     "pui-react-helpers": "2.1.0-alpha.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pivotal-ui-react/draggable-list/draggable-list.js b/src/pivotal-ui-react/draggable-list/draggable-list.js
index 9ca680d2a..42908525f 100644
--- a/src/pivotal-ui-react/draggable-list/draggable-list.js
+++ b/src/pivotal-ui-react/draggable-list/draggable-list.js
@@ -1,4 +1,4 @@
-var React = require('react/addons');
+var React = require('react');
 var types = React.PropTypes;
 var classnames = require('classnames');
 var move = require('./move_helper');
@@ -100,7 +100,7 @@ var DraggableList = React.createClass({
     var {children, innerClassName, onDragEnd, ...others} = this.props;
     React.Children.forEach(children, function(child, draggingId) {
       grabbed = this.state.draggingId === draggingId;
-      items.push(React.addons.cloneWithProps(child, {
+      items.push(React.cloneElement(child, {
         grabbed,
         onDragStart: this.dragStart.bind(this, draggingId),
         onDragEnd: this.dragEnd,
diff --git a/src/pivotal-ui-react/dropdowns/dropdowns.js b/src/pivotal-ui-react/dropdowns/dropdowns.js
index 79bc76c4f..b54b86e6f 100644
--- a/src/pivotal-ui-react/dropdowns/dropdowns.js
+++ b/src/pivotal-ui-react/dropdowns/dropdowns.js
@@ -25,7 +25,7 @@ import uniqueid from 'lodash.uniqueid';
  * ```
  *
  */
-var BsDropdown = require('react-bootstrap/lib/Dropdown').default;
+var BsDropdown = require('react-bootstrap/lib/Dropdown');
 
 function defDropdown(props) {
   return React.createClass({
diff --git a/src/pivotal-ui-react/dropdowns/package.json b/src/pivotal-ui-react/dropdowns/package.json
index dc34eec7f..ecc2e0b01 100644
--- a/src/pivotal-ui-react/dropdowns/package.json
+++ b/src/pivotal-ui-react/dropdowns/package.json
@@ -3,7 +3,7 @@
   "description": "A React dropdown component",
   "homepage": "http://styleguide.pivotal.io/",
   "dependencies": {
-    "react-bootstrap": "0.25.1",
+    "react-bootstrap": "0.27.1",
     "pui-css-dropdowns": "2.1.0-alpha.1",
     "pui-css-iconography": "2.1.0-alpha.1",
     "pui-css-buttons": "2.1.0-alpha.1",
@@ -11,4 +11,4 @@
     "classnames": "^2.1.2",
     "lodash.uniqueid": "^3.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pivotal-ui-react/expander/expander.js b/src/pivotal-ui-react/expander/expander.js
index 49584d76a..6e1b1bfe2 100644
--- a/src/pivotal-ui-react/expander/expander.js
+++ b/src/pivotal-ui-react/expander/expander.js
@@ -1,4 +1,4 @@
-var React = require('react/addons');
+var React = require('react');
 var Collapse = require('react-bootstrap/lib/Collapse');
 
 /**
diff --git a/src/pivotal-ui-react/expander/package.json b/src/pivotal-ui-react/expander/package.json
index 1a9a998aa..06ae10d15 100644
--- a/src/pivotal-ui-react/expander/package.json
+++ b/src/pivotal-ui-react/expander/package.json
@@ -3,7 +3,7 @@
   "description": "A React component that provides an accordion for showing and hiding content where the toggle and the content can be in separate places",
   "homepage": "http://styleguide.pivotal.io/",
   "dependencies": {
-    "react-bootstrap": "0.25.1",
+    "react-bootstrap": "0.27.1",
     "pui-css-bootstrap": "2.1.0-alpha.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pivotal-ui-react/grids/package.json b/src/pivotal-ui-react/grids/package.json
index 7e69867bb..00a03d7d3 100644
--- a/src/pivotal-ui-react/grids/package.json
+++ b/src/pivotal-ui-react/grids/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "pui-css-grids": "2.1.0-alpha.1",
     "classnames": "^1.2.0",
-    "react-bootstrap": "0.25.1",
+    "react-bootstrap": "0.27.1",
     "pui-react-helpers": "2.1.0-alpha.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pivotal-ui-react/helpers/helpers.js b/src/pivotal-ui-react/helpers/helpers.js
index 5f6133c31..ea31cee72 100644
--- a/src/pivotal-ui-react/helpers/helpers.js
+++ b/src/pivotal-ui-react/helpers/helpers.js
@@ -26,7 +26,7 @@ import classnames from 'classnames';
  *   }
  * });
  *
- * React.render(<Ribbon className="my-ribbon" style={{height: '25px'}} id="unique-ribbon-id" />, myNode);
+ * ReactDOM.render(<Ribbon className="my-ribbon" style={{height: '25px'}} id="unique-ribbon-id" />, myNode);
  * // Resultant props: {className: 'ribbon my-ribbon', style: {height: '25px', color: 'blue'}, id: 'unique-ribbon-id'}
  * ```
  */
diff --git a/src/pivotal-ui-react/lists/lists.js b/src/pivotal-ui-react/lists/lists.js
index f670495cb..6a14ace47 100644
--- a/src/pivotal-ui-react/lists/lists.js
+++ b/src/pivotal-ui-react/lists/lists.js
@@ -1,4 +1,4 @@
-var React = require('react/addons');
+var React = require('react');
 import classnames from 'classnames';
 
 /**
@@ -22,7 +22,7 @@ function defList(tagName, spacingType, classNames, childClassNames) {
       var {className, spacing, children, ...others} = this.props;
       var classes = classnames(classNames(this.props), className, spacing && `${spacingType}${spacing}`);
       if (childClassNames) {
-        children = React.Children.map(children, child => React.addons.cloneWithProps(child, {className: childClassNames}));
+        children = React.Children.map(children, child => React.cloneElement(child, {className: childClassNames}));
       }
       return (
         tagName === 'ul' ? <ul className={classes} {...others}>{children}</ul> :
diff --git a/src/pivotal-ui-react/modals/modals.js b/src/pivotal-ui-react/modals/modals.js
index 6c71f7886..8ed6b781a 100644
--- a/src/pivotal-ui-react/modals/modals.js
+++ b/src/pivotal-ui-react/modals/modals.js
@@ -1,4 +1,4 @@
-var React = require('react/addons');
+var React = require('react');
 var {DefaultH4} = require('pui-react-typography');
 import {mergeProps} from 'pui-react-helpers';
 
diff --git a/src/pivotal-ui-react/overlay-trigger/package.json b/src/pivotal-ui-react/overlay-trigger/package.json
index 03b4a63b5..eb514a7aa 100644
--- a/src/pivotal-ui-react/overlay-trigger/package.json
+++ b/src/pivotal-ui-react/overlay-trigger/package.json
@@ -3,7 +3,7 @@
   "description": "A React component for displaying a tooltip or popover on user action",
   "dependencies": {
     "lodash.uniqueid": "^3.0.0",
-    "react-bootstrap": "0.25.1"
+    "react-bootstrap": "0.27.1"
   },
   "homepage": "http://styleguide.pivotal.io/react.html#tooltips_react"
-}
\ No newline at end of file
+}
diff --git a/src/pivotal-ui-react/portals/portals.js b/src/pivotal-ui-react/portals/portals.js
index 986042496..42662b2b1 100644
--- a/src/pivotal-ui-react/portals/portals.js
+++ b/src/pivotal-ui-react/portals/portals.js
@@ -1,6 +1,6 @@
 var EventEmitter = require('node-event-emitter');
 var React = require('react');
-var warning = require('react/lib/warning');
+var ReactDOM = require('react-dom');
 
 var types = React.PropTypes;
 
@@ -9,7 +9,7 @@ var emitter = new EventEmitter();
 
 function createRoot(reactElement) {
   var destination = document.createElement('div');
-  reactElement.getDOMNode().appendChild(destination);
+  ReactDOM.findDOMNode(reactElement).appendChild(destination);
   return destination;
 }
 
@@ -74,7 +74,7 @@ var PortalSource = React.createClass({
 
   componentDidUpdate() {
     var {root} = this.state.destination || {};
-    if (root) React.render(<div>{this.props.children}</div>, root);
+    if (root) ReactDOM.render(<div>{this.props.children}</div>, root);
   },
 
   render() {
@@ -99,7 +99,7 @@ var PortalDestination = React.createClass({
   componentDidMount() {
     var {name} = this.props;
     if (name in destinationPortals) {
-      warning(false, `Multiple destination portals with the same name "${name}" detected.`);
+      console.warn(`Warning: Multiple destination portals with the same name "${name}" detected.`);
     }
 
     destinationPortals[name] = this;
diff --git a/src/pivotal-ui-react/radio-group/radio-group.js b/src/pivotal-ui-react/radio-group/radio-group.js
index b89c58b42..30e999df7 100644
--- a/src/pivotal-ui-react/radio-group/radio-group.js
+++ b/src/pivotal-ui-react/radio-group/radio-group.js
@@ -1,5 +1,4 @@
-var React = require('react/addons');
-var cloneWithProps = React.addons.cloneWithProps;
+var React = require('react');
 import {mergeProps} from 'pui-react-helpers';
 
 /**
@@ -38,7 +37,7 @@ var RadioGroup = React.createClass({
     var {name, children, onChange, ...others} = this.props;
 
     children = React.Children.map(children,
-      (child) => cloneWithProps(child, {name, onChange: onChange})
+      (child) => React.cloneElement(child, {name, onChange: onChange})
     );
 
     var props = mergeProps(others, {className: 'radio-group'});
diff --git a/src/pivotal-ui-react/radio/radio.js b/src/pivotal-ui-react/radio/radio.js
index 12216be40..084466968 100644
--- a/src/pivotal-ui-react/radio/radio.js
+++ b/src/pivotal-ui-react/radio/radio.js
@@ -35,11 +35,14 @@ var Radio = React.createClass({
   },
 
   render: function() {
-    const {className, style, ...others} = this.props;
+    const {className, style, children, ...others} = this.props;
     const props = mergeProps({className: className, style: style}, {className: 'radio'});
     return (
       <div {...props}>
-        <label><input type="radio" {...others}/></label>
+        <label>
+          <input type="radio" {...others}/>
+          {children}
+        </label>
       </div>
     );
   }
diff --git a/src/pivotal-ui-react/stream-list/stream-list.js b/src/pivotal-ui-react/stream-list/stream-list.js
index 53b23f225..5435e7d08 100644
--- a/src/pivotal-ui-react/stream-list/stream-list.js
+++ b/src/pivotal-ui-react/stream-list/stream-list.js
@@ -1,4 +1,4 @@
-import React from 'react/addons';
+import React from 'react';
 import {UIButton} from 'pui-react-buttons';
 import {GroupList, ListItem} from 'pui-react-lists';
 import AnimationMixin from 'pui-react-animation';
diff --git a/src/pivotal-ui-react/tabs/package.json b/src/pivotal-ui-react/tabs/package.json
index 5f4dd391a..6e594e257 100644
--- a/src/pivotal-ui-react/tabs/package.json
+++ b/src/pivotal-ui-react/tabs/package.json
@@ -8,6 +8,6 @@
     "pui-css-collapse": "2.1.0-alpha.1",
     "pui-css-tabs": "2.1.0-alpha.1",
     "raf": "^3.1.0",
-    "react-bootstrap": "0.25.1"
+    "react-bootstrap": "0.27.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pivotal-ui-react/tooltip/package.json b/src/pivotal-ui-react/tooltip/package.json
index c37f6e7d2..1f8ec6892 100644
--- a/src/pivotal-ui-react/tooltip/package.json
+++ b/src/pivotal-ui-react/tooltip/package.json
@@ -3,7 +3,7 @@
   "description": "A React component that provides styled tooltips",
   "homepage": "http://styleguide.pivotal.io/",
   "dependencies": {
-    "react-bootstrap": "0.25.1",
+    "react-bootstrap": "0.27.1",
     "pui-css-tooltips": "2.1.0-alpha.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pivotal-ui/components/getting-started/getting-started.scss b/src/pivotal-ui/components/getting-started/getting-started.scss
index cf615e1ed..86855cb7a 100644
--- a/src/pivotal-ui/components/getting-started/getting-started.scss
+++ b/src/pivotal-ui/components/getting-started/getting-started.scss
@@ -160,7 +160,7 @@ npm install --save pui-react-buttons
      }
     });
 
-    React.render(<MyTestPage />, document.getElementById('root'));
+    ReactDOM.render(<MyTestPage />, document.getElementById('root'));
     ```
 
     HTML
diff --git a/src/pivotal-ui/javascripts/pivotal-ui-react.js b/src/pivotal-ui/javascripts/pivotal-ui-react.js
index ea0dc19f1..31269fc39 100644
--- a/src/pivotal-ui/javascripts/pivotal-ui-react.js
+++ b/src/pivotal-ui/javascripts/pivotal-ui-react.js
@@ -7,10 +7,11 @@ require('pui-prismjs');
 require('./scale')();
 require('pui-react-back-to-top/jquery-plugin');
 
-global.React = require('react/addons');
+global.React = require('react');
+global.ReactDOM = require('react-dom');
 
 import UI from './components.js';
 
 _.each(UI, function(value, key) {
     global[key] = value;
-});
\ No newline at end of file
+});
diff --git a/src/styleguide/styleguide-react.js b/src/styleguide/styleguide-react.js
index d6d90ac6b..d19d929ac 100644
--- a/src/styleguide/styleguide-react.js
+++ b/src/styleguide/styleguide-react.js
@@ -1,13 +1,14 @@
 
 $(document).ready(() => {
   const React = global.React || require('react');
+  const ReactDOM = global.ReactDOM || require('react-dom');
 
   const StyleguideNav = require('./styleguide-nav');
   const getComponentPath = require('./get-component-path');
 
   const {language, componentType} = getComponentPath(window.location.pathname);
 
-  React.render(
+  ReactDOM.render(
     <StyleguideNav navTree={nav}
                    defaultLanguage={language}
                    defaultComponentType={componentType}/>,
@@ -18,7 +19,7 @@ $(document).ready(() => {
   if(introNode) {
     var IntroPage = require('./intro-page');
 
-    React.render(
+    ReactDOM.render(
       <IntroPage> I'm the react intro </IntroPage>,
       introNode
     );
diff --git a/templates/react/package.json.js b/templates/react/package.json.js
index 1ce44e15f..72d768b27 100644
--- a/templates/react/package.json.js
+++ b/templates/react/package.json.js
@@ -21,7 +21,7 @@ var packageTemplate = function(name, {dependencies: dependencyOverrides, ...over
     },
     homepage: "https://github.com/pivotal-cf/pivotal-ui",
     peerDependencies: {
-      react: '^0.13.0'
+      react: '^0.14.0'
     },
     dependencies: {
       'babel-runtime': '^5.8.3',