diff --git a/Gruntfile.js b/Gruntfile.js
index 9f8e622e48..bcce4c838f 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -136,7 +136,8 @@ module.exports = function (grunt) {
             almond: "../tools/vendor/almond"
           },
           packages: [
-            {	name: 'react', location: '../node_modules/react', main: './react' }
+            {	name: 'react', location: '../node_modules/react', main: './react' },
+            { name: 'classnames', location: '../node_modules/classnames', main: './index' }
           ],
           include: ["almond", "react-bootstrap"],
           exclude: ["react"],
diff --git a/docs/build.js b/docs/build.js
index 4252a7c420..dbde01a273 100755
--- a/docs/build.js
+++ b/docs/build.js
@@ -2,12 +2,22 @@
 
 var fs = require('fs');
 var path = require('path');
-var nodejsx = require('node-jsx').install();
+
+require('node-jsx').install();
+
+var React = require('react');
+var routes = require('./src/Routes');
+var Router = require('react-router');
+
 var Root = require('./src/Root');
 
 Root.getPages()
   .forEach(function (fileName) {
-    var RootHTML = Root.renderToString({initialPath: fileName});
 
-    fs.writeFileSync(path.join(__dirname, fileName), RootHTML);
+    Router.run(routes, '/' + fileName, function (Handler) {
+      var RootHTML = React.renderToString(React.createElement(Handler));
+
+      fs.writeFileSync(
+        path.join(__dirname, fileName), RootHTML);
+    })
   });
\ No newline at end of file
diff --git a/docs/client.js b/docs/client.js
index 80ebcd9b4e..733668d326 100644
--- a/docs/client.js
+++ b/docs/client.js
@@ -1,9 +1,15 @@
 'use strict';
 
 var React = require('react');
-var Root = require('./src/Root');
+var Router = require('react-router');
+var routes = require('./src/Routes');
 
 // For React devtools
 window.React = React;
 
-React.render(React.createFactory(Root)(window.INITIAL_PROPS), document);
+Router.run(routes, Router.RefreshLocation, function (Handler) {
+  React.render(
+    React.createElement(Handler, window.INITIAL_PROPS), document);
+})
+
+
diff --git a/docs/server.js b/docs/server.js
index 0b55c78101..244e93d0fb 100644
--- a/docs/server.js
+++ b/docs/server.js
@@ -2,15 +2,19 @@
 
 var express = require('express');
 
+
 var development = process.env.NODE_ENV !== 'production';
 var app = express();
 
 if (development) {
+  var React = require('react');
   var path = require('path');
   var url = require('url');
   var browserify = require('connect-browserify');
   var nodejsx = require('node-jsx').install();
-  var Root = require('./src/Root');
+
+  var routes = require('./src/Routes');
+  var Router = require('react-router');
 
   app = app
     .get('/assets/bundle.js', browserify('./client', {debug: true, watch: false}))
@@ -18,9 +22,14 @@ if (development) {
     .use('/vendor', express.static(path.join(__dirname, 'vendor')))
     .use(function renderApp(req, res) {
       var fileName = url.parse(req.url).pathname;
-      var RootHTML = Root.renderToString({initialPath: fileName});
 
-      res.send(RootHTML);
+      Router.run(routes, req.url, function (Handler) {
+        var RootHTML = React.renderToString(React.createElement(Handler));
+
+        res.send(RootHTML);
+      })
+
+      
     });
 } else {
   app = app
diff --git a/docs/src/NavMain.js b/docs/src/NavMain.js
index 72cb59f400..930064273d 100644
--- a/docs/src/NavMain.js
+++ b/docs/src/NavMain.js
@@ -1,19 +1,20 @@
 'use strict';
 
 var React = require('react');
-var Router = require('react-router-component');
+var Router = require('react-router');
 var Navbar = require('../../lib/Navbar');
 var Nav = require('../../lib/Nav');
 
+
 var InternalLink = Router.Link;
 
 var NAV_LINKS = {
   'getting-started': {
-    link: '/getting-started.html',
+    link: 'getting-started',
     title: 'Getting started'
   },
   'components': {
-    link: '/components.html',
+    link: 'components',
     title: 'Components'
   }
 };
@@ -24,7 +25,7 @@ var NavMain = React.createClass({
   },
 
   render: function () {
-    var brand = <InternalLink href="/" className="navbar-brand">React Bootstrap</InternalLink>;
+    var brand = <InternalLink to='home' className="navbar-brand">React Bootstrap</InternalLink>;
 
     return (
       <Navbar componentClass='header' brand={brand} staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
@@ -40,7 +41,7 @@ var NavMain = React.createClass({
 
     return (
         <li className={this.props.activePage === linkName ? 'active' : null} key={linkName}>
-          <InternalLink href={link.link}>{link.title}</InternalLink>
+          <InternalLink to={link.link}>{link.title}</InternalLink>
         </li>
       );
   }
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 7ff19f1b02..28ef4fee4e 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -1,5 +1,5 @@
 var React = require('react');
-var classSet = require('react/lib/cx');
+var classSet = require('classnames');
 var CodeMirror = global.CodeMirror;
 var JSXTransformer = global.JSXTransformer;
 var Accordion = require('../../lib/Accordion');
diff --git a/docs/src/Root.js b/docs/src/Root.js
index f97bc30768..be1af64df0 100644
--- a/docs/src/Root.js
+++ b/docs/src/Root.js
@@ -1,30 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Router = require('react-router-component');
-
-var HomePage = React.createFactory(require('./HomePage'));
-var GettingStartedPage = React.createFactory(require('./GettingStartedPage'));
-var ComponentsPage = React.createFactory(require('./ComponentsPage'));
-var NotFoundPage = React.createFactory(require('./NotFoundPage'));
-
-var Locations = Router.Locations;
-var Location = Router.Location;
-var NotFound = Router.NotFound;
-
-var PagesHolder = React.createClass({
-  render: function () {
-    return (
-        <Locations contextual>
-          <Location path="/" handler={HomePage} />
-          <Location path="/index.html" handler={HomePage} />
-          <Location path="/getting-started.html" handler={GettingStartedPage} />
-          <Location path="/components.html" handler={ComponentsPage} />
-          <NotFound handler={NotFoundPage} />
-        </Locations>
-      );
-  }
-});
+var Router = require('react-router');
 
 var Root = React.createClass({
   statics: {
@@ -110,9 +87,7 @@ var Root = React.createClass({
           <head dangerouslySetInnerHTML={head} />
 
           <body>
-            <Locations path={Root.getBaseUrl() + this.props.initialPath}>
-              <Location path={Root.getBaseUrl() + '*'} handler={React.createFactory(PagesHolder)} />
-            </Locations>
+            <Router.RouteHandler />
 
             <script dangerouslySetInnerHTML={browserInitScriptObj} />
             <script src="vendor/codemirror/codemirror.js" />
@@ -125,4 +100,5 @@ var Root = React.createClass({
   }
 });
 
+
 module.exports = Root;
diff --git a/docs/src/Routes.js b/docs/src/Routes.js
new file mode 100644
index 0000000000..9d5435311a
--- /dev/null
+++ b/docs/src/Routes.js
@@ -0,0 +1,21 @@
+var React = require('react');
+
+var Root = require('./Root');
+var HomePage = require('./HomePage');
+var GettingStartedPage = require('./GettingStartedPage');
+var ComponentsPage = require('./ComponentsPage');
+var NotFoundPage = require('./NotFoundPage');
+
+var Router = require('react-router');
+
+
+module.exports = (
+  <Router.Route name="app" path="/" handler={Root}>
+    <Router.DefaultRoute handler={HomePage}/>
+    <Router.NotFoundRoute handler={NotFoundPage} />
+
+    <Router.Route name='home' path="index.html" handler={HomePage} />
+    <Router.Route name='getting-started' path="getting-started.html" handler={GettingStartedPage} />
+    <Router.Route name='components' path="components.html" handler={ComponentsPage} />  
+  </Router.Route>
+)
diff --git a/ie8/index.html b/ie8/index.html
index ef6d60d51f..6d6a10cffc 100644
--- a/ie8/index.html
+++ b/ie8/index.html
@@ -7,7 +7,7 @@
     <title>React Bootstrap IE8 test page</title>
 
     <!-- Bootstrap -->
-    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
     <style>
       body {
         padding: 50px 100px;
diff --git a/ie8/package.json b/ie8/package.json
index 12c6c74274..b2b6af9de5 100644
--- a/ie8/package.json
+++ b/ie8/package.json
@@ -3,12 +3,12 @@
     "browserify": "^4.1.11",
     "reactify": "^0.13.1",
     "envify": "^1.2.1",
-    "react": "^0.10.0",
+    "react": "^0.13.0",
     "http-server": "^0.6.1"
   },
   "scripts": {
     "postinstall": "npm run build",
     "start": "http-server -c-1",
-    "build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js"
+    "build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js --harmony"
   }
 }
diff --git a/package.json b/package.json
index eedd57363a..77d50fdc75 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "author": "Stephen J. Collings <stevoland@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=0.12"
+    "react": ">=0.13"
   },
   "devDependencies": {
     "async": "~0.2.9",
@@ -55,12 +55,13 @@
     "karma-script-launcher": "~0.1.0",
     "karma-sinon": "^1.0.3",
     "mocha": "~1.16.2",
-    "react": "~0.12.0",
-    "react-async": "~2.0.0",
-    "react-router-component": "git://github.com/STRML/react-router-component#react-0.12",
+    "react": "0.13.0",
     "requirejs": "~2.1.9",
     "rf-changelog": "^0.4.0",
     "semver": "~2.0.7",
     "sinon": "^1.10.3"
+  },
+  "dependencies": {
+    "classnames": "^1.1.4"
   }
-}
\ No newline at end of file
+}
diff --git a/src/Affix.jsx b/src/Affix.jsx
index e5b28c7e07..4166e2e506 100644
--- a/src/Affix.jsx
+++ b/src/Affix.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 var AffixMixin = require('./AffixMixin');
 var domUtils = require('./utils/domUtils');
 
@@ -13,7 +13,7 @@ var Affix = React.createClass({
   render: function () {
     var holderStyle = {top: this.state.affixPositionTop};
     return (
-      <div {...this.props} className={joinClasses(this.props.className, this.state.affixClass)} style={holderStyle}>
+      <div {...this.props} className={classSet(this.props.className, this.state.affixClass)} style={holderStyle}>
         {this.props.children}
       </div>
     );
diff --git a/src/AffixMixin.js b/src/AffixMixin.js
index c5c0b98c85..85c41d94f9 100644
--- a/src/AffixMixin.js
+++ b/src/AffixMixin.js
@@ -39,7 +39,7 @@ var AffixMixin = {
       return;
     }
 
-    DOMNode = this.getDOMNode();
+    DOMNode = React.findDOMNode(this);
     scrollHeight = document.documentElement.offsetHeight;
     scrollTop = window.pageYOffset;
     position = domUtils.getOffset(DOMNode);
diff --git a/src/Alert.jsx b/src/Alert.jsx
index 7423953ada..497297078f 100644
--- a/src/Alert.jsx
+++ b/src/Alert.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 
@@ -38,7 +38,7 @@ var Alert = React.createClass({
     classes['alert-dismissable'] = isDismissable;
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <div {...this.props} className={classSet(this.props.className, classes)}>
         {isDismissable ? this.renderDismissButton() : null}
         {this.props.children}
       </div>
diff --git a/src/Badge.jsx b/src/Badge.jsx
index 6e47c63b51..4a0dfb797d 100644
--- a/src/Badge.jsx
+++ b/src/Badge.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 
 var Badge = React.createClass({
   propTypes: {
@@ -22,7 +22,7 @@ var Badge = React.createClass({
     return (
       <span
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </span>
     );
diff --git a/src/Button.jsx b/src/Button.jsx
index 08c042f8e7..d468f33e09 100644
--- a/src/Button.jsx
+++ b/src/Button.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 var Button = React.createClass({
@@ -52,7 +52,7 @@ var Button = React.createClass({
       <Component
         {...this.props}
         href={href}
-        className={joinClasses(this.props.className, classSet(classes))}
+        className={classSet(this.props.className, classes)}
         role="button">
         {this.props.children}
       </Component>
@@ -65,7 +65,7 @@ var Button = React.createClass({
     return (
       <Component
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </Component>
     );
diff --git a/src/ButtonGroup.jsx b/src/ButtonGroup.jsx
index a2b81d2425..34b69e9530 100644
--- a/src/ButtonGroup.jsx
+++ b/src/ButtonGroup.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var Button = require('./Button');
 
@@ -27,7 +27,7 @@ var ButtonGroup = React.createClass({
     return (
       <div
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/ButtonToolbar.jsx b/src/ButtonToolbar.jsx
index f45e2dc21c..feeb3e26f1 100644
--- a/src/ButtonToolbar.jsx
+++ b/src/ButtonToolbar.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var Button = require('./Button');
 
@@ -20,7 +20,7 @@ var ButtonToolbar = React.createClass({
       <div
         {...this.props}
         role="toolbar"
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/Carousel.jsx b/src/Carousel.jsx
index 4013612b81..421fa494ce 100644
--- a/src/Carousel.jsx
+++ b/src/Carousel.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 var BootstrapMixin = require('./BootstrapMixin');
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 
@@ -144,7 +144,7 @@ var Carousel = React.createClass({
     return (
       <div
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}
+        className={classSet(this.props.className, classes)}
         onMouseOver={this.handleMouseOver}
         onMouseOut={this.handleMouseOut}>
         {this.props.indicators ? this.renderIndicators() : null}
@@ -244,7 +244,7 @@ var Carousel = React.createClass({
     var isPreviousActive = this.state.previousActiveIndex != null &&
             this.state.previousActiveIndex === index && this.props.slide;
 
-    return cloneWithProps(
+    return cloneElement(
         child,
         {
           active: isActive,
diff --git a/src/CarouselItem.jsx b/src/CarouselItem.jsx
index 6c576cc90f..e5b863c6bb 100644
--- a/src/CarouselItem.jsx
+++ b/src/CarouselItem.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var TransitionEvents = require('./utils/TransitionEvents');
 
 var CarouselItem = React.createClass({
@@ -40,7 +40,7 @@ var CarouselItem = React.createClass({
   componentDidUpdate: function (prevProps) {
     if (!this.props.active && prevProps.active) {
       TransitionEvents.addEndEventListener(
-        this.getDOMNode(),
+        React.findDOMNode(this),
         this.handleAnimateOutEnd
       );
     }
@@ -74,7 +74,7 @@ var CarouselItem = React.createClass({
     }
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <div {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
         {this.props.caption ? this.renderCaption() : null}
       </div>
diff --git a/src/Col.jsx b/src/Col.jsx
index 23f564c598..d238af849c 100644
--- a/src/Col.jsx
+++ b/src/Col.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var constants = require('./constants');
 
 
@@ -64,7 +64,7 @@ var Col = React.createClass({
     }, this);
 
     return (
-      <ComponentClass {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <ComponentClass {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </ComponentClass>
     );
diff --git a/src/DropdownButton.jsx b/src/DropdownButton.jsx
index 9dbf3f24ee..aa02be4da5 100644
--- a/src/DropdownButton.jsx
+++ b/src/DropdownButton.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var createChainedFunction = require('./utils/createChainedFunction');
 var BootstrapMixin = require('./BootstrapMixin');
@@ -67,7 +67,7 @@ var DropdownButton = React.createClass({
     return (
       <ButtonGroup
         bsSize={this.props.bsSize}
-        className={joinClasses(this.props.className, classSet(groupClasses))}>
+        className={classSet(this.props.className, groupClasses)}>
         {children}
       </ButtonGroup>
     );
@@ -81,7 +81,7 @@ var DropdownButton = React.createClass({
       };
 
     return (
-      <li className={joinClasses(this.props.className, classSet(classes))}>
+      <li className={classSet(this.props.className, classes)}>
         {children}
       </li>
     );
@@ -94,15 +94,12 @@ var DropdownButton = React.createClass({
     var handleOptionSelect = this.props.onSelect || child.props.onSelect ?
       this.handleOptionSelect : null;
 
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         // Capture onSelect events
         onSelect: createChainedFunction(child.props.onSelect, handleOptionSelect),
-
-        // Force special props to be transferred
         key: child.key ? child.key : index,
-        ref: child.ref
       }
     );
   },
diff --git a/src/DropdownMenu.jsx b/src/DropdownMenu.jsx
index 50316ea5bc..19d654d99d 100644
--- a/src/DropdownMenu.jsx
+++ b/src/DropdownMenu.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var createChainedFunction = require('./utils/createChainedFunction');
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
@@ -21,7 +21,7 @@ var DropdownMenu = React.createClass({
     return (
         <ul
           {...this.props}
-          className={joinClasses(this.props.className, classSet(classes))}
+          className={classSet(this.props.className, classes)}
           role="menu">
           {ValidComponentChildren.map(this.props.children, this.renderMenuItem)}
         </ul>
@@ -29,7 +29,7 @@ var DropdownMenu = React.createClass({
   },
 
   renderMenuItem: function (child, index) {
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         // Capture onSelect events
@@ -37,7 +37,6 @@ var DropdownMenu = React.createClass({
 
         // Force special props to be transferred
         key: child.key ? child.key : index,
-        ref: child.ref
       }
     );
   }
diff --git a/src/DropdownStateMixin.js b/src/DropdownStateMixin.js
index 6c2572279a..0764558046 100644
--- a/src/DropdownStateMixin.js
+++ b/src/DropdownStateMixin.js
@@ -48,7 +48,7 @@ var DropdownStateMixin = {
   handleDocumentClick: function (e) {
     // If the click originated from within this component
     // don't do anything.
-    if (isNodeInRoot(e.target, this.getDOMNode())) {
+    if (isNodeInRoot(e.target, React.findDOMNode(this))) {
       return;
     }
 
diff --git a/src/FadeMixin.js b/src/FadeMixin.js
index e5dea90d2c..df9e2bca48 100644
--- a/src/FadeMixin.js
+++ b/src/FadeMixin.js
@@ -1,4 +1,6 @@
 /*global document */
+var React = require('react');
+
 // TODO: listen for onTransitionEnd to remove el
 function getElementsAndSelf (root, classes){
   var els = root.querySelectorAll('.' + classes.join('.'));
@@ -19,7 +21,7 @@ module.exports = {
     var els;
 
     if (this.isMounted()) {
-      els = getElementsAndSelf(this.getDOMNode(), ['fade']);
+      els = getElementsAndSelf(React.findDOMNode(this), ['fade']);
 
       if (els.length) {
         els.forEach(function (el) {
@@ -55,13 +57,13 @@ module.exports = {
   },
 
   componentWillUnmount: function () {
-    var els = getElementsAndSelf(this.getDOMNode(), ['fade']),
-        container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    var els = getElementsAndSelf(React.findDOMNode(this), ['fade']),
+        container = (this.props.container && React.findDOMNode(this.props.container)) || document.body;
 
     if (els.length) {
       this._fadeOutEl = document.createElement('div');
       container.appendChild(this._fadeOutEl);
-      this._fadeOutEl.appendChild(this.getDOMNode().cloneNode(true));
+      this._fadeOutEl.appendChild(React.findDOMNode(this).cloneNode(true));
       // Firefox needs delay for transition to be triggered
       setTimeout(this._fadeOut, 20);
     }
diff --git a/src/Glyphicon.jsx b/src/Glyphicon.jsx
index e98e0f9521..3f48b89ad1 100644
--- a/src/Glyphicon.jsx
+++ b/src/Glyphicon.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var constants = require('./constants');
 
@@ -23,7 +23,7 @@ var Glyphicon = React.createClass({
     classes['glyphicon-' + this.props.glyph] = true;
 
     return (
-      <span {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <span {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </span>
     );
diff --git a/src/Grid.jsx b/src/Grid.jsx
index d4a645b81a..2d54180d9f 100644
--- a/src/Grid.jsx
+++ b/src/Grid.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 
 var Grid = React.createClass({
   propTypes: {
@@ -20,7 +20,7 @@ var Grid = React.createClass({
     return (
       <ComponentClass
         {...this.props}
-        className={joinClasses(this.props.className, className)}>
+        className={classSet(this.props.className, className)}>
         {this.props.children}
       </ComponentClass>
     );
diff --git a/src/Input.jsx b/src/Input.jsx
index 85231c093f..4ed0c18586 100644
--- a/src/Input.jsx
+++ b/src/Input.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var Button = require('./Button');
 
 var Input = React.createClass({
@@ -29,7 +29,7 @@ var Input = React.createClass({
   },
 
   getInputDOMNode: function () {
-    return this.refs.input.getDOMNode();
+    return React.findDOMNode(this.refs.input);
   },
 
   getValue: function () {
@@ -87,17 +87,17 @@ var Input = React.createClass({
     switch (this.props.type) {
       case 'select':
         input = (
-          <select {...this.props} className={joinClasses(this.props.className, 'form-control')} ref="input" key="input">
+          <select {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input">
             {this.props.children}
           </select>
         );
         break;
       case 'textarea':
-        input = <textarea {...this.props} className={joinClasses(this.props.className, 'form-control')} ref="input" key="input" />;
+        input = <textarea {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input" />;
         break;
       case 'static':
         input = (
-          <p {...this.props} className={joinClasses(this.props.className, 'form-control-static')} ref="input"  key="input">
+          <p {...this.props} className={classSet(this.props.className, 'form-control-static')} ref="input"  key="input">
             {this.props.value}
           </p>
         );
@@ -109,7 +109,7 @@ var Input = React.createClass({
         break;
       default:
         var className = this.isCheckboxOrRadio() || this.isFile() ? '' : 'form-control';
-        input = <input {...this.props} className={joinClasses(this.props.className, className)} ref="input" key="input" />;
+        input = <input {...this.props} className={classSet(this.props.className, className)} ref="input" key="input" />;
     }
 
     return input;
diff --git a/src/Jumbotron.jsx b/src/Jumbotron.jsx
index 4d24e1f36f..172e70e0cf 100644
--- a/src/Jumbotron.jsx
+++ b/src/Jumbotron.jsx
@@ -1,11 +1,11 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 
 var Jumbotron = React.createClass({
 
   render: function () {
     return (
-      <div {...this.props} className={joinClasses(this.props.className, 'jumbotron')}>
+      <div {...this.props} className={classSet(this.props.className, 'jumbotron')}>
         {this.props.children}
       </div>
     );
diff --git a/src/Label.jsx b/src/Label.jsx
index 864a4e1acf..871c14f7bc 100644
--- a/src/Label.jsx
+++ b/src/Label.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 var Label = React.createClass({
@@ -17,7 +17,7 @@ var Label = React.createClass({
     var classes = this.getBsClassSet();
 
     return (
-      <span {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <span {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </span>
     );
diff --git a/src/ListGroup.jsx b/src/ListGroup.jsx
index 8cc459323b..2ff5df8c23 100644
--- a/src/ListGroup.jsx
+++ b/src/ListGroup.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -19,8 +19,7 @@ var ListGroup = React.createClass({
   },
 
   renderListItem: function (child, index) {
-    return cloneWithProps(child, {
-      ref: child.ref,
+    return cloneElement(child, {
       key: child.key ? child.key : index
     });
   }
diff --git a/src/ListGroupItem.jsx b/src/ListGroupItem.jsx
index 6057a8c975..66d88bf202 100644
--- a/src/ListGroupItem.jsx
+++ b/src/ListGroupItem.jsx
@@ -1,8 +1,8 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var BootstrapMixin = require('./BootstrapMixin');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 
@@ -41,7 +41,7 @@ var ListGroupItem = React.createClass({
 
   renderSpan: function (classes) {
     return (
-      <span {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <span {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </span>
     );
@@ -51,7 +51,7 @@ var ListGroupItem = React.createClass({
     return (
       <a
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}
+        className={classSet(this.props.className, classes)}
       >
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </a>
@@ -61,27 +61,25 @@ var ListGroupItem = React.createClass({
   renderStructuredContent: function () {
     var header;
     if (React.isValidElement(this.props.header)) {
-      header = cloneWithProps(this.props.header, {
-        className: 'list-group-item-heading'
+      header = cloneElement(this.props.header, {
+        key: 'header',
+        className: classSet(this.props.header.props.className, 'list-group-item-heading')
       });
     } else {
       header = (
-        <h4 className="list-group-item-heading">
+        <h4 key='header' className="list-group-item-heading">
           {this.props.header}
         </h4>
       );
     }
 
     var content = (
-      <p className="list-group-item-text">
+      <p key='content' className="list-group-item-text">
         {this.props.children}
       </p>
     );
 
-    return {
-      header: header,
-      content: content
-    };
+    return [header, content];
   }
 });
 
diff --git a/src/MenuItem.jsx b/src/MenuItem.jsx
index 449c7cc07d..e86fdce21e 100644
--- a/src/MenuItem.jsx
+++ b/src/MenuItem.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 
 var MenuItem = React.createClass({
   propTypes: {
@@ -49,7 +49,7 @@ var MenuItem = React.createClass({
 
     return (
       <li {...this.props} role="presentation" title={null} href={null}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {children}
       </li>
     );
diff --git a/src/Modal.jsx b/src/Modal.jsx
index 52e7f24701..e8396cfe03 100644
--- a/src/Modal.jsx
+++ b/src/Modal.jsx
@@ -1,8 +1,8 @@
 /* global document:false */
 
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var FadeMixin = require('./FadeMixin');
 var EventListener = require('./utils/EventListener');
@@ -54,7 +54,7 @@ var Modal = React.createClass({
         tabIndex="-1"
         role="dialog"
         style={modalStyle}
-        className={joinClasses(this.props.className, classSet(classes))}
+        className={classSet(this.props.className, classes)}
         onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
         ref="modal">
         <div className={classSet(dialogClasses)}>
@@ -125,15 +125,15 @@ var Modal = React.createClass({
     // IOS only allows click events to be delegated to the document on elements
     // it considers 'clickable' - anchors, buttons, etc. We fake a click handler on the
     // DOM nodes themselves. Remove if handled by React: https://github.com/facebook/react/issues/1169
-    this.refs.modal.getDOMNode().onclick = function () {};
-    this.refs.backdrop.getDOMNode().onclick = function () {};
+    React.findDOMNode(this.refs.modal).onclick = function () {};
+    React.findDOMNode(this.refs.backdrop).onclick = function () {};
   },
 
   componentDidMount: function () {
     this._onDocumentKeyupListener =
       EventListener.listen(document, 'keyup', this.handleDocumentKeyUp);
 
-    var container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    var container = (this.props.container && React.findDOMNode(this.props.container)) || document.body;
     container.className += container.className.length ? ' modal-open' : 'modal-open';
 
     if (this.props.backdrop) {
@@ -149,7 +149,8 @@ var Modal = React.createClass({
 
   componentWillUnmount: function () {
     this._onDocumentKeyupListener.remove();
-    var container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    var container = (this.props.container && React.findDOMNode(this.props.container)) || document.body;
+
     container.className = container.className.replace(/ ?modal-open/, '');
   },
 
diff --git a/src/ModalTrigger.jsx b/src/ModalTrigger.jsx
index c4f2bece73..bb1525869c 100644
--- a/src/ModalTrigger.jsx
+++ b/src/ModalTrigger.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
 var OverlayMixin = require('./OverlayMixin');
-var cloneWithProps = require('./utils/cloneWithProps');
+var cloneElement = React.cloneElement;
 
 var createChainedFunction = require('./utils/createChainedFunction');
 
@@ -40,7 +40,7 @@ var ModalTrigger = React.createClass({
       return <span />;
     }
 
-    return cloneWithProps(
+    return cloneElement(
       this.props.modal,
       {
         onRequestHide: this.hide
@@ -50,7 +50,7 @@ var ModalTrigger = React.createClass({
 
   render: function () {
     var child = React.Children.only(this.props.children);
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         onClick: createChainedFunction(child.props.onClick, this.toggle)
diff --git a/src/Nav.jsx b/src/Nav.jsx
index 1a7cce60d2..1adb58ab23 100644
--- a/src/Nav.jsx
+++ b/src/Nav.jsx
@@ -1,10 +1,10 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var BootstrapMixin = require('./BootstrapMixin');
 var CollapsableMixin = require('./CollapsableMixin');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 var domUtils = require('./utils/domUtils');
-var cloneWithProps = require('./utils/cloneWithProps');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -32,11 +32,11 @@ var Nav = React.createClass({
   },
 
   getCollapsableDOMNode: function () {
-    return this.getDOMNode();
+    return React.findDOMNode(this);
   },
 
   getCollapsableDimensionValue: function () {
-    var node = this.refs.ul.getDOMNode(),
+    var node = React.findDOMNode(this.refs.ul),
         height = node.offsetHeight,
         computedStyles = domUtils.getComputedStyles(node);
 
@@ -53,7 +53,7 @@ var Nav = React.createClass({
     }
 
     return (
-      <nav {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <nav {...this.props} className={classSet(this.props.className, classes)}>
         {this.renderUl()}
       </nav>
     );
@@ -69,7 +69,7 @@ var Nav = React.createClass({
     classes['navbar-right'] = this.props.right;
 
     return (
-      <ul {...this.props} className={joinClasses(this.props.className, classSet(classes))} ref="ul">
+      <ul {...this.props} className={classSet(this.props.className, classes)} ref="ul">
         {ValidComponentChildren.map(this.props.children, this.renderNavItem)}
       </ul>
     );
@@ -94,14 +94,13 @@ var Nav = React.createClass({
   },
 
   renderNavItem: function (child, index) {
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         active: this.getChildActiveProp(child),
         activeKey: this.props.activeKey,
         activeHref: this.props.activeHref,
         onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
-        ref: child.ref,
         key: child.key ? child.key : index,
         navItem: true
       }
diff --git a/src/NavItem.jsx b/src/NavItem.jsx
index 86fb3040a9..9d61830378 100644
--- a/src/NavItem.jsx
+++ b/src/NavItem.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 var NavItem = React.createClass({
@@ -37,7 +37,7 @@ var NavItem = React.createClass({
         };
 
     return (
-      <li {...props} className={joinClasses(props.className, classSet(classes))}>
+      <li {...props} className={classSet(props.className, classes)}>
         <a
           href={href}
           title={title}
diff --git a/src/Navbar.jsx b/src/Navbar.jsx
index 2d0ce3bac4..02be032c7e 100644
--- a/src/Navbar.jsx
+++ b/src/Navbar.jsx
@@ -1,8 +1,8 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var BootstrapMixin = require('./BootstrapMixin');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -77,7 +77,7 @@ var Navbar = React.createClass({
     classes['navbar-inverse'] = this.props.inverse;
 
     return (
-      <ComponentClass {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <ComponentClass {...this.props} className={classSet(this.props.className, classes)}>
         <div className={this.props.fluid ? 'container-fluid' : 'container'}>
           {(this.props.brand || this.props.toggleButton || this.props.toggleNavKey != null) ? this.renderHeader() : null}
           {ValidComponentChildren.map(this.props.children, this.renderChild)}
@@ -87,12 +87,11 @@ var Navbar = React.createClass({
   },
 
   renderChild: function (child, index) {
-    return cloneWithProps(child, {
+    return cloneElement(child, {
       navbar: true,
       collapsable: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey,
       expanded: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey && this.isNavExpanded(),
       key: child.key ? child.key : index,
-      ref: child.ref
     });
   },
 
@@ -100,10 +99,13 @@ var Navbar = React.createClass({
     var brand;
 
     if (this.props.brand) {
-      brand = React.isValidElement(this.props.brand) ?
-        cloneWithProps(this.props.brand, {
-          className: 'navbar-brand'
-        }) : <span className="navbar-brand">{this.props.brand}</span>;
+      brand = this.props.brand;
+
+      brand = React.isValidElement(brand) ?
+        cloneElement(brand, {
+          className: classSet(brand.props.className,'navbar-brand')
+        }) 
+        : <span className="navbar-brand">{brand}</span>;
     }
 
     return (
@@ -118,8 +120,11 @@ var Navbar = React.createClass({
     var children;
 
     if (React.isValidElement(this.props.toggleButton)) {
-      return cloneWithProps(this.props.toggleButton, {
-        className: 'navbar-toggle',
+
+      return cloneElement(this.props.toggleButton, {
+        
+        className: classSet(this.props.toggleButton.props.className,'navbar-toggle'),
+
         onClick: createChainedFunction(this.handleToggle, this.props.toggleButton.props.onClick)
       });
     }
diff --git a/src/OverlayMixin.js b/src/OverlayMixin.js
index cbe0fdc5ef..eb5f23d449 100644
--- a/src/OverlayMixin.js
+++ b/src/OverlayMixin.js
@@ -6,21 +6,6 @@ module.exports = {
     container: CustomPropTypes.mountable
   },
 
-  getDefaultProps: function () {
-    return {
-      container: {
-        // Provide `getDOMNode` fn mocking a React component API. The `document.body`
-        // reference needs to be contained within this function so that it is not accessed
-        // in environments where it would not be defined, e.g. nodejs. Equally this is needed
-        // before the body is defined where `document.body === null`, this ensures
-        // `document.body` is only accessed after componentDidMount.
-        getDOMNode: function getDOMNode() {
-          return document.body;
-        }
-      }
-    };
-  },
-
   componentWillUnmount: function () {
     this._unrenderOverlay();
     if (this._overlayTarget) {
@@ -71,14 +56,13 @@ module.exports = {
     }
 
     if (this._overlayInstance) {
-      return this._overlayInstance.getDOMNode();
+      return React.findDOMNode(this._overlayInstance);
     }
 
     return null;
   },
 
   getContainerDOMNode: function () {
-    return this.props.container.getDOMNode ?
-      this.props.container.getDOMNode() : this.props.container;
+    return React.findDOMNode(this.props.container || document.body);
   }
 };
diff --git a/src/OverlayTrigger.jsx b/src/OverlayTrigger.jsx
index 574956c693..5fce5ce14e 100644
--- a/src/OverlayTrigger.jsx
+++ b/src/OverlayTrigger.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
 var OverlayMixin = require('./OverlayMixin');
 var domUtils = require('./utils/domUtils');
-var cloneWithProps = require('./utils/cloneWithProps');
+var cloneElement = React.cloneElement;
 
 var createChainedFunction = require('./utils/createChainedFunction');
 var assign = require('./utils/Object.assign');
@@ -76,7 +76,7 @@ var OverlayTrigger = React.createClass({
       return <span />;
     }
 
-    return cloneWithProps(
+    return cloneElement(
       this.props.overlay,
       {
         onRequestHide: this.hide,
@@ -108,7 +108,7 @@ var OverlayTrigger = React.createClass({
       props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
     }
 
-    return cloneWithProps(
+    return cloneElement(
       React.Children.only(this.props.children),
       props
     );
@@ -211,7 +211,7 @@ var OverlayTrigger = React.createClass({
   },
 
   getPosition: function () {
-    var node = this.getDOMNode();
+    var node = React.findDOMNode(this);
     var container = this.getContainerDOMNode();
 
     var offset = container.tagName == 'BODY' ?
diff --git a/src/PageHeader.jsx b/src/PageHeader.jsx
index 5c3d0a2a39..3f64e1feee 100644
--- a/src/PageHeader.jsx
+++ b/src/PageHeader.jsx
@@ -1,11 +1,11 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 
 var PageHeader = React.createClass({
 
   render: function () {
     return (
-      <div {...this.props} className={joinClasses(this.props.className, 'page-header')}>
+      <div {...this.props} className={classSet(this.props.className, 'page-header')}>
         <h1>{this.props.children}</h1>
       </div>
     );
diff --git a/src/PageItem.jsx b/src/PageItem.jsx
index 6aea6ddd95..740b4df756 100644
--- a/src/PageItem.jsx
+++ b/src/PageItem.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 
 var PageItem = React.createClass({
 
@@ -30,7 +30,7 @@ var PageItem = React.createClass({
     return (
       <li
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         <a
           href={this.props.href}
           title={this.props.title}
diff --git a/src/Pager.jsx b/src/Pager.jsx
index 2ae6550951..566ffeb457 100644
--- a/src/Pager.jsx
+++ b/src/Pager.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -15,18 +15,17 @@ var Pager = React.createClass({
     return (
       <ul
         {...this.props}
-        className={joinClasses(this.props.className, 'pager')}>
+        className={classSet(this.props.className, 'pager')}>
         {ValidComponentChildren.map(this.props.children, this.renderPageItem)}
       </ul>
     );
   },
 
   renderPageItem: function (child, index) {
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
-        ref: child.ref,
         key: child.key ? child.key : index
       }
     );
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 703ba75bed..fc6c95eb0b 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var BootstrapMixin = require('./BootstrapMixin');
 var CollapsableMixin = require('./CollapsableMixin');
@@ -42,7 +42,7 @@ var Panel = React.createClass({
   },
 
   getCollapsableDimensionValue: function () {
-    return this.refs.panel.getDOMNode().scrollHeight;
+    return React.findDOMNode(this.refs.panel).scrollHeight;
   },
 
   getCollapsableDOMNode: function () {
@@ -50,7 +50,7 @@ var Panel = React.createClass({
       return null;
     }
 
-    return this.refs.panel.getDOMNode();
+    return React.findDOMNode(this.refs.panel);
   },
 
   render: function () {
@@ -58,7 +58,7 @@ var Panel = React.createClass({
     classes['panel'] = true;
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}
+      <div {...this.props} className={classSet(this.props.className, classes)}
         id={this.props.collapsable ? null : this.props.id} onSelect={null}>
         {this.renderHeading()}
         {this.props.collapsable ? this.renderCollapsableBody() : this.renderBody()}
@@ -84,7 +84,7 @@ var Panel = React.createClass({
     }
 
     function addPanelChild (child) {
-      bodyElements.push(cloneWithProps(child, getProps()));
+      bodyElements.push(cloneElement(child, getProps()));
     }
 
     function addPanelBody (children) {
@@ -146,13 +146,15 @@ var Panel = React.createClass({
       header = this.props.collapsable ?
         this.renderCollapsableTitle(header) : header;
     } else if (this.props.collapsable) {
-      header = cloneWithProps(header, {
-        className: 'panel-title',
+
+      header = cloneElement(header, {
+        className: classSet(header.props.className, 'panel-title'),
         children: this.renderAnchor(header.props.children)
       });
     } else {
-      header = cloneWithProps(header, {
-        className: 'panel-title'
+
+      header = cloneElement(header, {
+        className: classSet(header.props.className, 'panel-title')
       });
     }
 
diff --git a/src/PanelGroup.jsx b/src/PanelGroup.jsx
index eb177b4a4d..a13e206a9c 100644
--- a/src/PanelGroup.jsx
+++ b/src/PanelGroup.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var BootstrapMixin = require('./BootstrapMixin');
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
@@ -33,7 +33,7 @@ var PanelGroup = React.createClass({
   render: function () {
     var classes = this.getBsClassSet();
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))} onSelect={null}>
+      <div {...this.props} className={classSet(this.props.className, classes)} onSelect={null}>
         {ValidComponentChildren.map(this.props.children, this.renderPanel)}
       </div>
     );
@@ -55,7 +55,7 @@ var PanelGroup = React.createClass({
       props.onSelect = this.handleSelect;
     }
 
-    return cloneWithProps(
+    return cloneElement(
       child,
       props
     );
diff --git a/src/Popover.jsx b/src/Popover.jsx
index 8c5a0d9bce..57046f5275 100644
--- a/src/Popover.jsx
+++ b/src/Popover.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 
@@ -38,7 +38,7 @@ var Popover = React.createClass({
     arrowStyle['top'] = this.props.arrowOffsetTop;
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))} style={style} title={null}>
+      <div {...this.props} className={classSet(this.props.className, classes)} style={style} title={null}>
         <div className="arrow" style={arrowStyle} />
         {this.props.title ? this.renderTitle() : null}
         <div className="popover-content">
diff --git a/src/ProgressBar.jsx b/src/ProgressBar.jsx
index 875f134c4f..df0ce06d13 100644
--- a/src/ProgressBar.jsx
+++ b/src/ProgressBar.jsx
@@ -1,9 +1,9 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var Interpolate = require('./Interpolate');
 var BootstrapMixin = require('./BootstrapMixin');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 
@@ -48,7 +48,7 @@ var ProgressBar = React.createClass({
     if (!ValidComponentChildren.hasValidComponent(this.props.children)) {
       if (!this.props.isChild) {
         return (
-          <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+          <div {...this.props} className={classSet(this.props.className, classes)}>
             {this.renderProgressBar()}
           </div>
         );
@@ -59,7 +59,7 @@ var ProgressBar = React.createClass({
       }
     } else {
       return (
-        <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+        <div {...this.props} className={classSet(this.props.className, classes)}>
           {ValidComponentChildren.map(this.props.children, this.renderChildBar)}
         </div>
       );
@@ -67,10 +67,9 @@ var ProgressBar = React.createClass({
   },
 
   renderChildBar: function (child, index) {
-    return cloneWithProps(child, {
+    return cloneElement(child, {
       isChild: true,
-      key: child.key ? child.key : index,
-      ref: child.ref
+      key: child.key ? child.key : index
     });
   },
 
@@ -96,7 +95,7 @@ var ProgressBar = React.createClass({
     var classes = this.getBsClassSet();
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))} role="progressbar"
+      <div {...this.props} className={classSet(this.props.className, classes)} role="progressbar"
         style={{width: percentage + '%'}}
         aria-valuenow={this.props.now}
         aria-valuemin={this.props.min}
diff --git a/src/Row.jsx b/src/Row.jsx
index ce07b337a6..0f2824647d 100644
--- a/src/Row.jsx
+++ b/src/Row.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 
 var Row = React.createClass({
   propTypes: {
@@ -16,7 +16,7 @@ var Row = React.createClass({
     var ComponentClass = this.props.componentClass;
 
     return (
-      <ComponentClass {...this.props} className={joinClasses(this.props.className, 'row')}>
+      <ComponentClass {...this.props} className={classSet(this.props.className, 'row')}>
         {this.props.children}
       </ComponentClass>
     );
diff --git a/src/SplitButton.jsx b/src/SplitButton.jsx
index 274c0a3ca4..6958ff673d 100644
--- a/src/SplitButton.jsx
+++ b/src/SplitButton.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var DropdownStateMixin = require('./DropdownStateMixin');
 var Button = require('./Button');
@@ -48,7 +48,7 @@ var SplitButton = React.createClass({
       <Button
         {...this.props}
         ref="dropdownButton"
-        className={joinClasses(this.props.className, 'dropdown-toggle')}
+        className={classSet(this.props.className, 'dropdown-toggle')}
         onClick={this.handleDropdownClick}
         title={null}
         href={null}
diff --git a/src/SubNav.jsx b/src/SubNav.jsx
index cf734a5898..5734056056 100644
--- a/src/SubNav.jsx
+++ b/src/SubNav.jsx
@@ -1,7 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
-var cloneWithProps = require('./utils/cloneWithProps');
+var classSet = require('classnames');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var createChainedFunction = require('./utils/createChainedFunction');
@@ -98,7 +97,7 @@ var SubNav = React.createClass({
     };
 
     return (
-      <li {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <li {...this.props} className={classSet(this.props.className, classes)}>
         <a
           href={this.props.href}
           title={this.props.title}
@@ -115,12 +114,11 @@ var SubNav = React.createClass({
   },
 
   renderNavItem: function (child, index) {
-    return cloneWithProps(
+    return cloneElement(
       child,
       {
         active: this.getChildActiveProp(child),
         onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
-        ref: child.ref,
         key: child.key ? child.key : index
       }
     );
diff --git a/src/TabPane.jsx b/src/TabPane.jsx
index 9cd3d33c91..cf4790f586 100644
--- a/src/TabPane.jsx
+++ b/src/TabPane.jsx
@@ -1,6 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 var TransitionEvents = require('./utils/TransitionEvents');
 
 var TabPane = React.createClass({
@@ -37,7 +36,7 @@ var TabPane = React.createClass({
     }
     if (this.state.animateOut) {
       TransitionEvents.addEndEventListener(
-        this.getDOMNode(),
+        React.findDOMNode(this),
         this.stopAnimateOut
       );
     }
@@ -72,7 +71,7 @@ var TabPane = React.createClass({
     };
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <div {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/TabbedArea.jsx b/src/TabbedArea.jsx
index a0033e2b8b..f8e1184f41 100644
--- a/src/TabbedArea.jsx
+++ b/src/TabbedArea.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
 var BootstrapMixin = require('./BootstrapMixin');
-var cloneWithProps = require('./utils/cloneWithProps');
+var cloneElement = React.cloneElement;
 
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
 var Nav = require('./Nav');
@@ -92,12 +92,11 @@ var TabbedArea = React.createClass({
   renderPane: function (child, index) {
     var activeKey = this.getActiveKey();
 
-    return cloneWithProps(
+    return cloneElement(
         child,
         {
           active: (child.props.eventKey === activeKey &&
             (this.state.previousActiveKey == null || !this.props.animation)),
-          ref: child.ref,
           key: child.key ? child.key : index,
           animation: this.props.animation,
           onAnimateOutEnd: (this.state.previousActiveKey != null &&
diff --git a/src/Table.jsx b/src/Table.jsx
index 04080b846b..f7ba8686ba 100644
--- a/src/Table.jsx
+++ b/src/Table.jsx
@@ -1,6 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 
 var Table = React.createClass({
   propTypes: {
@@ -20,7 +19,7 @@ var Table = React.createClass({
       'table-hover': this.props.hover
     };
     var table = (
-      <table {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <table {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </table>
     );
diff --git a/src/Tooltip.jsx b/src/Tooltip.jsx
index 371322a938..26370891c0 100644
--- a/src/Tooltip.jsx
+++ b/src/Tooltip.jsx
@@ -1,6 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 
@@ -36,7 +35,7 @@ var Tooltip = React.createClass({
     arrowStyle['top'] = this.props.arrowOffsetTop;
 
     return (
-        <div {...this.props} className={joinClasses(this.props.className, classSet(classes))} style={style}>
+        <div {...this.props} className={classSet(this.props.className, classes)} style={style}>
           <div className="tooltip-arrow" style={arrowStyle} />
           <div className="tooltip-inner">
             {this.props.children}
diff --git a/src/Well.jsx b/src/Well.jsx
index 74e6434e0c..c0f40fd82c 100644
--- a/src/Well.jsx
+++ b/src/Well.jsx
@@ -1,6 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 var Well = React.createClass({
@@ -16,7 +15,7 @@ var Well = React.createClass({
     var classes = this.getBsClassSet();
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <div {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/utils/CustomPropTypes.js b/src/utils/CustomPropTypes.js
index 2c02b081b7..226366f4b2 100644
--- a/src/utils/CustomPropTypes.js
+++ b/src/utils/CustomPropTypes.js
@@ -48,10 +48,10 @@ function createChainableTypeChecker(validate) {
 function createMountableChecker() {
   function validate(props, propName, componentName) {
     if (typeof props[propName] !== 'object' ||
-      typeof props[propName].getDOMNode !== 'function' && props[propName].nodeType !== 1) {
+      typeof props[propName].render !== 'function' && props[propName].nodeType !== 1) {
       return new Error(
         'Invalid prop `' + propName + '` supplied to ' +
-          '`' + componentName + '`, expected a DOM element or an object that has a `getDOMNode` method'
+          '`' + componentName + '`, expected a DOM element or an object that has a `render` method'
       );
     }
   }
diff --git a/src/utils/classSet.js b/src/utils/classSet.js
deleted file mode 100644
index 691c099acf..0000000000
--- a/src/utils/classSet.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2013-2014, Facebook, Inc.
- * All rights reserved.
- *
- * This file contains an unmodified version of:
- * https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/cx.js
- *
- * This source code is licensed under the BSD-style license found here:
- * https://github.com/facebook/react/blob/v0.12.0/LICENSE
- * An additional grant of patent rights can be found here:
- * https://github.com/facebook/react/blob/v0.12.0/PATENTS
- */
-
-/**
- * This function is used to mark string literals representing CSS class names
- * so that they can be transformed statically. This allows for modularization
- * and minification of CSS class names.
- *
- * In static_upstream, this function is actually implemented, but it should
- * eventually be replaced with something more descriptive, and the transform
- * that is used in the main stack should be ported for use elsewhere.
- *
- * @param string|object className to modularize, or an object of key/values.
- *                      In the object case, the values are conditions that
- *                      determine if the className keys should be included.
- * @param [string ...]  Variable list of classNames in the string case.
- * @return string       Renderable space-separated CSS className.
- */
-function cx(classNames) {
-  if (typeof classNames == 'object') {
-    return Object.keys(classNames).filter(function(className) {
-      return classNames[className];
-    }).join(' ');
-  } else {
-    return Array.prototype.join.call(arguments, ' ');
-  }
-}
-
-module.exports = cx;
\ No newline at end of file
diff --git a/src/utils/cloneWithProps.js b/src/utils/cloneWithProps.js
deleted file mode 100644
index b311d3d636..0000000000
--- a/src/utils/cloneWithProps.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Copyright 2013-2014, Facebook, Inc.
- * All rights reserved.
- *
- * This file contains modified versions of:
- * https://github.com/facebook/react/blob/v0.12.0/src/utils/cloneWithProps.js
- * https://github.com/facebook/react/blob/v0.12.0/src/core/ReactPropTransferer.js
- *
- * This source code is licensed under the BSD-style license found here:
- * https://github.com/facebook/react/blob/v0.12.0/LICENSE
- * An additional grant of patent rights can be found here:
- * https://github.com/facebook/react/blob/v0.12.0/PATENTS
- *
- * TODO: This should be replaced as soon as cloneWithProps is available via
- *  the core React package or a separate package.
- *  @see https://github.com/facebook/react/issues/1906
- */
-
-var React = require('react');
-var joinClasses = require('./joinClasses');
-var assign = require("./Object.assign");
-
-/**
- * Creates a transfer strategy that will merge prop values using the supplied
- * `mergeStrategy`. If a prop was previously unset, this just sets it.
- *
- * @param {function} mergeStrategy
- * @return {function}
- */
-function createTransferStrategy(mergeStrategy) {
-  return function(props, key, value) {
-    if (!props.hasOwnProperty(key)) {
-      props[key] = value;
-    } else {
-      props[key] = mergeStrategy(props[key], value);
-    }
-  };
-}
-
-var transferStrategyMerge = createTransferStrategy(function(a, b) {
-  // `merge` overrides the first object's (`props[key]` above) keys using the
-  // second object's (`value`) keys. An object's style's existing `propA` would
-  // get overridden. Flip the order here.
-  return assign({}, b, a);
-});
-
-function emptyFunction() {}
-
-/**
- * Transfer strategies dictate how props are transferred by `transferPropsTo`.
- * NOTE: if you add any more exceptions to this list you should be sure to
- * update `cloneWithProps()` accordingly.
- */
-var TransferStrategies = {
-  /**
-   * Never transfer `children`.
-   */
-  children: emptyFunction,
-  /**
-   * Transfer the `className` prop by merging them.
-   */
-  className: createTransferStrategy(joinClasses),
-  /**
-   * Transfer the `style` prop (which is an object) by merging them.
-   */
-  style: transferStrategyMerge
-};
-
-/**
- * Mutates the first argument by transferring the properties from the second
- * argument.
- *
- * @param {object} props
- * @param {object} newProps
- * @return {object}
- */
-function transferInto(props, newProps) {
-  for (var thisKey in newProps) {
-    if (!newProps.hasOwnProperty(thisKey)) {
-      continue;
-    }
-
-    var transferStrategy = TransferStrategies[thisKey];
-
-    if (transferStrategy && TransferStrategies.hasOwnProperty(thisKey)) {
-      transferStrategy(props, thisKey, newProps[thisKey]);
-    } else if (!props.hasOwnProperty(thisKey)) {
-      props[thisKey] = newProps[thisKey];
-    }
-  }
-  return props;
-}
-
-/**
- * Merge two props objects using TransferStrategies.
- *
- * @param {object} oldProps original props (they take precedence)
- * @param {object} newProps new props to merge in
- * @return {object} a new object containing both sets of props merged.
- */
-function mergeProps(oldProps, newProps) {
-  return transferInto(assign({}, oldProps), newProps);
-}
-
-
-var ReactPropTransferer = {
-  mergeProps: mergeProps
-};
-
-var CHILDREN_PROP = 'children';
-
-/**
- * Sometimes you want to change the props of a child passed to you. Usually
- * this is to add a CSS class.
- *
- * @param {object} child child component you'd like to clone
- * @param {object} props props you'd like to modify. They will be merged
- * as if you used `transferPropsTo()`.
- * @return {object} a clone of child with props merged in.
- */
-function cloneWithProps(child, props) {
-  var newProps = ReactPropTransferer.mergeProps(props, child.props);
-
-  // Use `child.props.children` if it is provided.
-  if (!newProps.hasOwnProperty(CHILDREN_PROP) &&
-    child.props.hasOwnProperty(CHILDREN_PROP)) {
-    newProps.children = child.props.children;
-  }
-
-  if (React.version.substr(0, 4) === '0.12'){
-    var mockLegacyFactory = function(){};
-    mockLegacyFactory.isReactLegacyFactory = true;
-    mockLegacyFactory.type = child.type;
-
-    return React.createElement(mockLegacyFactory, newProps);
-  }
-
-  // The current API doesn't retain _owner and _context, which is why this
-  // doesn't use ReactElement.cloneAndReplaceProps.
-  return React.createElement(child.type, newProps);
-}
-
-module.exports = cloneWithProps;
\ No newline at end of file
diff --git a/src/utils/joinClasses.js b/src/utils/joinClasses.js
deleted file mode 100644
index 5200f42a3c..0000000000
--- a/src/utils/joinClasses.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2013-2014, Facebook, Inc.
- * All rights reserved.
- *
- * This file contains an unmodified version of:
- * https://github.com/facebook/react/blob/v0.12.0/src/utils/joinClasses.js
- *
- * This source code is licensed under the BSD-style license found here:
- * https://github.com/facebook/react/blob/v0.12.0/LICENSE
- * An additional grant of patent rights can be found here:
- * https://github.com/facebook/react/blob/v0.12.0/PATENTS
- */
-
-"use strict";
-
-/**
- * Combines multiple className strings into one.
- * http://jsperf.com/joinclasses-args-vs-array
- *
- * @param {...?string} classes
- * @return {string}
- */
-function joinClasses(className/*, ... */) {
-  if (!className) {
-    className = '';
-  }
-  var nextClass;
-  var argLength = arguments.length;
-  if (argLength > 1) {
-    for (var ii = 1; ii < argLength; ii++) {
-      nextClass = arguments[ii];
-      if (nextClass) {
-        className = (className ? className + ' ' : '') + nextClass;
-      }
-    }
-  }
-  return className;
-}
-
-module.exports = joinClasses;
diff --git a/test/DropdownButtonSpec.jsx b/test/DropdownButtonSpec.jsx
index 61b9381b18..ddf4408ce7 100644
--- a/test/DropdownButtonSpec.jsx
+++ b/test/DropdownButtonSpec.jsx
@@ -12,7 +12,7 @@ describe('DropdownButton', function () {
 
   afterEach(function() {
     if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
-      React.unmountComponentAtNode(instance.getDOMNode().parent);
+      React.unmountComponentAtNode(instance.getDOMNode());
     }
   });
 
diff --git a/test/DropdownMenuSpec.jsx b/test/DropdownMenuSpec.jsx
index c91eb7421d..92c68f1c81 100644
--- a/test/DropdownMenuSpec.jsx
+++ b/test/DropdownMenuSpec.jsx
@@ -7,11 +7,19 @@ var MenuItem       = require('../lib/MenuItem');
 
 describe('DropdownMenu', function () {
   it('Should render menu correctly', function () {
+    var Parent = React.createClass({
+      render: function(){
+        return (
+          <DropdownMenu>
+            <MenuItem eventKey="1" ref="item1">MenuItem 1 content</MenuItem>
+            <MenuItem eventKey="2" ref="item2">MenuItem 2 content</MenuItem>
+          </DropdownMenu>
+        )
+      }
+    })
+
     var instance = ReactTestUtils.renderIntoDocument(
-      <DropdownMenu>
-        <MenuItem eventKey="1" ref="item1">MenuItem 1 content</MenuItem>
-        <MenuItem eventKey="2" ref="item2">MenuItem 2 content</MenuItem>
-      </DropdownMenu>
+      <Parent/>
     );
 
     var node = instance.getDOMNode();
@@ -100,4 +108,4 @@ describe('DropdownMenu', function () {
     ReactTestUtils.findRenderedDOMComponentWithTag(menuItems[1], 'a').getDOMNode()
       .dispatchEvent(evt);
   });
-});
+});
\ No newline at end of file
diff --git a/test/FadeMixinSpec.jsx b/test/FadeMixinSpec.jsx
index dc091cc955..b7c2c61805 100644
--- a/test/FadeMixinSpec.jsx
+++ b/test/FadeMixinSpec.jsx
@@ -40,6 +40,7 @@ describe('FadeMixin', function () {
     var instance = ReactTestUtils.renderIntoDocument(<Component />);
 
     setTimeout(function(){
+
       instance.componentWillUnmount()
       var element = instance._fadeOutEl.children[0]
       var child   = element.children[0]
diff --git a/test/ListGroupSpec.jsx b/test/ListGroupSpec.jsx
index 2876e28d58..089bd15b14 100644
--- a/test/ListGroupSpec.jsx
+++ b/test/ListGroupSpec.jsx
@@ -18,12 +18,15 @@ describe('ListGroup', function () {
   it('Should support "ListGroupItem" childs', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <ListGroup>
-        <ListGroupItem ref="child1">1st Child</ListGroupItem>
-        <ListGroupItem ref="child2">2nd Child</ListGroupItem>
+        <ListGroupItem>1st Child</ListGroupItem>
+        <ListGroupItem>2nd Child</ListGroupItem>
       </ListGroup>
     );
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.child1, 'list-group-item'));
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.child2, 'list-group-item'));
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, ListGroupItem);
+
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[0], 'list-group-item'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[1], 'list-group-item'));
   });
 
 });
diff --git a/test/NavSpec.jsx b/test/NavSpec.jsx
index a3ba344665..bcbaf1a6d4 100644
--- a/test/NavSpec.jsx
+++ b/test/NavSpec.jsx
@@ -10,12 +10,15 @@ describe('Nav', function () {
   it('Should set the correct item active', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Nav bsStyle="pills" activeKey={1}>
-        <NavItem eventKey={1} ref="item1">Pill 1 content</NavItem>
-        <NavItem eventKey={2} ref="item2">Pill 2 content</NavItem>
+        <NavItem eventKey={1}>Pill 1 content</NavItem>
+        <NavItem eventKey={2}>Pill 2 content</NavItem>
       </Nav>
     );
-    assert.ok(instance.refs.item1.props.active);
-    assert.notOk(instance.refs.item2.props.active);
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+
+    assert.ok(items[0].props.active);
+    assert.notOk(items[1].props.active);
   });
 
   it('Should adds style class', function () {
@@ -62,10 +65,11 @@ describe('Nav', function () {
   it('Should add navbar-right class', function () {
     var instance = ReactTestUtils.renderIntoDocument(
           <Nav bsStyle="tabs" right activeKey={1}>
-            <NavItem key={1} ref="item1">Tab 1 content</NavItem>
-            <NavItem key={2} ref="item2">Tab 2 content</NavItem>
+            <NavItem key={1}>Tab 1 content</NavItem>
+            <NavItem key={2}>Tab 2 content</NavItem>
           </Nav>
         );
+
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-right'));
   });
 
@@ -75,32 +79,41 @@ describe('Nav', function () {
       done();
     }
     var instance = ReactTestUtils.renderIntoDocument(
-      <Nav bsStyle="tabs" activeKey={1} onSelect={handleSelect}>
-        <NavItem eventKey={1} ref="item1">Tab 1 content</NavItem>
-        <NavItem eventKey={2} ref="item2"><span>Tab 2 content</span></NavItem>
-      </Nav>
-    );
-    ReactTestUtils.Simulate.click(instance.refs.item2.refs.anchor);
+          <Nav bsStyle="tabs" activeKey={1} onSelect={handleSelect}>
+            <NavItem eventKey={1}>Tab 1 content</NavItem>
+            <NavItem eventKey={2}><span>Tab 2 content</span></NavItem>
+          </Nav>
+        );
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+
+    ReactTestUtils.Simulate.click(items[1].refs.anchor);
   });
 
   it('Should set the correct item active by href', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Nav bsStyle="pills" activeHref="#item2">
-        <NavItem eventKey={1} ref="item1" href="#item1">Pill 1 content</NavItem>
-        <NavItem eventKey={2} ref="item2" href="#item2">Pill 2 content</NavItem>
+        <NavItem eventKey={1} href="#item1">Pill 1 content</NavItem>
+        <NavItem eventKey={2} href="#item2">Pill 2 content</NavItem>
       </Nav>
     );
-    assert.ok(instance.refs.item2.props.active);
-    assert.notOk(instance.refs.item1.props.active);
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+
+    assert.ok(items[1].props.active);
+    assert.notOk(items[0].props.active);
   });
 
   it('Should set navItem prop on passed in buttons', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Nav bsStyle="pills" activeHref="#item2">
-        <Button eventKey={1} ref="item1">Button 1 content</Button>
-        <NavItem eventKey={2} ref="item2" href="#item2">Pill 2 content</NavItem>
+        <Button eventKey={1}>Button 1 content</Button>
+        <NavItem eventKey={2} href="#item2">Pill 2 content</NavItem>
       </Nav>
     );
-    assert.ok(instance.refs.item1.props.navItem);
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+
+    assert.ok(items[0].props.navItem);
   });
-});
+});
\ No newline at end of file
diff --git a/test/NavbarSpec.jsx b/test/NavbarSpec.jsx
index 2bbeb1894c..b5402e6bd1 100644
--- a/test/NavbarSpec.jsx
+++ b/test/NavbarSpec.jsx
@@ -100,11 +100,13 @@ describe('Nav', function () {
   it('Should pass navbar prop to navs', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Navbar brand="Brand">
-        <Nav ref="nav"/>
+        <Nav />
       </Navbar>
     );
 
-    assert.ok(instance.refs.nav.props.navbar);
+    var nav = ReactTestUtils.findRenderedComponentWithType(instance, Nav)
+
+    assert.ok(nav.props.navbar);
   });
 
   it('Should pass nav prop to ul', function () {
diff --git a/test/OverlayMixinSpec.jsx b/test/OverlayMixinSpec.jsx
index 855affe9e8..c72f538882 100644
--- a/test/OverlayMixinSpec.jsx
+++ b/test/OverlayMixinSpec.jsx
@@ -21,7 +21,7 @@ describe('OverlayMixin', function () {
 
   afterEach(function() {
     if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
-      React.unmountComponentAtNode(instance.getDOMNode().parent);
+      React.unmountComponentAtNode(instance.getDOMNode());
     }
   });
 
diff --git a/test/PagerSpec.jsx b/test/PagerSpec.jsx
index ead2be4e6c..fd38a9133c 100644
--- a/test/PagerSpec.jsx
+++ b/test/PagerSpec.jsx
@@ -45,10 +45,15 @@ describe('Pager', function () {
     }
     var instance = ReactTestUtils.renderIntoDocument(
       <Pager onSelect={handleSelect}>
-        <PageItem eventKey={1} ref="item1" href="#prev">Previous</PageItem>
-        <PageItem eventKey={2} ref="item2" href="#next">Next</PageItem>
+        <PageItem eventKey={1} href="#prev">Previous</PageItem>
+        <PageItem eventKey={2} href="#next">Next</PageItem>
       </Pager>
     );
-    ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance.refs.item2, 'a'));
+
+    var items = ReactTestUtils.scryRenderedComponentsWithType(instance, PageItem);
+
+    ReactTestUtils.Simulate.click(
+      ReactTestUtils.findRenderedDOMComponentWithTag(items[1], 'a')
+    );
   });
 });
diff --git a/test/SplitButtonSpec.jsx b/test/SplitButtonSpec.jsx
index 60877cdae8..c26a2b18eb 100644
--- a/test/SplitButtonSpec.jsx
+++ b/test/SplitButtonSpec.jsx
@@ -10,7 +10,7 @@ describe('SplitButton', function () {
   var instance;
   afterEach(function() {
     if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
-      React.unmountComponentAtNode(instance.getDOMNode().parent);
+      React.unmountComponentAtNode(instance.getDOMNode());
     }
   });
 
diff --git a/test/TabbedAreaSpec.jsx b/test/TabbedAreaSpec.jsx
index a42aca0786..e9553c50eb 100644
--- a/test/TabbedAreaSpec.jsx
+++ b/test/TabbedAreaSpec.jsx
@@ -10,15 +10,19 @@ describe('TabbedArea', function () {
   it('Should show the correct tab', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea activeKey={1}>
-        <TabPane tab="Tab 1" eventKey={1} ref="pane1">Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2} ref="pane2">Tab 2 content</TabPane>
+        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
-    assert.equal(instance.refs.pane1.props.active, true);
-    assert.equal(instance.refs.pane2.props.active, false);
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
+
+    assert.equal(panes[0].props.active, true);
+    assert.equal(panes[1].props.active, false);
 
-    assert.equal(instance.refs.tabs.props.activeKey, 1);
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 1);
   });
 
   it('Should only show the tabs with `TabPane.props.tab` set', function () {
@@ -30,8 +34,10 @@ describe('TabbedArea', function () {
       </TabbedArea>
     );
 
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+
     assert.equal(ValidComponentChildren.numberOf(instance.refs.tabs.props.children), 2);
-    assert.equal(instance.refs.tabs.props.activeKey, 3);
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 3);
   });
 
   it('Should allow tab to have React components', function () {
@@ -58,10 +64,11 @@ describe('TabbedArea', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea onSelect={onSelect} activeKey={1}>
         <TabPane tab="Tab 1" eventKey='1'>Tab 1 content</TabPane>
-        <TabPane tab={tab2} eventKey='2' ref="tab2">Tab 2 content</TabPane>
+        <TabPane tab={tab2} eventKey='2'>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
+
     ReactTestUtils.Simulate.click(
       ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tab2')
     );
@@ -70,41 +77,50 @@ describe('TabbedArea', function () {
   it('Should have children with the correct DOM properties', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea activeKey={1}>
-        <TabPane tab="Tab 1" className="custom" id="pane0id" eventKey={1} ref="pane1">Tab 1 content</TabPane>
+        <TabPane tab="Tab 1" className="custom" id="pane0id" eventKey={1}>Tab 1 content</TabPane>
         <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
-    assert.ok(instance.refs.pane1.getDOMNode().className.match(/\bcustom\b/));
-    assert.equal(instance.refs.pane1.getDOMNode().id, 'pane0id');
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
+
+    assert.ok(panes[0].getDOMNode().className.match(/\bcustom\b/));
+    assert.equal(panes[0].getDOMNode().id, 'pane0id');
   });
 
   it('Should show the correct initial pane', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea defaultActiveKey={2}>
-        <TabPane tab="Tab 1" eventKey={1} ref="pane1">Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2} ref="pane2">Tab 2 content</TabPane>
+        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
-    assert.equal(instance.refs.pane1.props.active, false);
-    assert.equal(instance.refs.pane2.props.active, true);
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
 
-    assert.equal(instance.refs.tabs.props.activeKey, 2);
+    assert.equal(panes[0].props.active, false);
+    assert.equal(panes[1].props.active, true);
+
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 2);
   });
 
   it('Should show the correct first tab with no active key value', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea>
-        <TabPane tab="Tab 1" eventKey={1} ref="pane1">Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2} ref="pane2">Tab 2 content</TabPane>
+        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
-    assert.equal(instance.refs.pane1.props.active, true);
-    assert.equal(instance.refs.pane2.props.active, false);
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
 
-    assert.equal(instance.refs.tabs.props.activeKey, 1);
+    assert.equal(panes[0].props.active, true);
+    assert.equal(panes[1].props.active, false);
+
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 1);
   });
 
   it('Should show the correct first tab with `React.Children.map` children values', function () {
@@ -130,26 +146,29 @@ describe('TabbedArea', function () {
     var tab1 = <span className="tab1">Tab 1</span>;
     var instance = ReactTestUtils.renderIntoDocument(
       <TabbedArea defaultActiveKey={2} animation={false}>
-        <TabPane tab={tab1} eventKey={1} ref="pane1">Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2} ref="pane2">Tab 2 content</TabPane>
+        <TabPane tab={tab1} eventKey={1}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
       </TabbedArea>
     );
 
+    var tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+    var panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane)
+
     ReactTestUtils.Simulate.click(
       ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tab1')
     );
 
-    assert.equal(instance.refs.pane1.props.active, true);
-    assert.equal(instance.refs.pane2.props.active, false);
-    assert.equal(instance.refs.tabs.props.activeKey, 1);
+    assert.equal(panes[0].props.active, true);
+    assert.equal(panes[1].props.active, false);
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 1);
   });
 
   it('Should pass default bsStyle (of "tabs") to Nav', function () {
     var instance = ReactTestUtils.renderIntoDocument(
-      <TabbedArea defaultActiveKey={1} animation={false}>
-        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
-        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
-      </TabbedArea>
+        <TabbedArea defaultActiveKey={1} animation={false}>
+          <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+          <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
+        </TabbedArea>
     );
 
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'nav-tabs'));
diff --git a/tools/amd/bower.json b/tools/amd/bower.json
index b6e40e169f..d618cc2203 100644
--- a/tools/amd/bower.json
+++ b/tools/amd/bower.json
@@ -16,6 +16,7 @@
     "**/.*"
   ],
   "dependencies": {
-    "react": ">= 0.12.0"
+    "react": ">= 0.13.0",
+    "classnames": "1.1.4"
   }
 }
diff --git a/tools/cjs/package.json b/tools/cjs/package.json
index cdcf11a225..2d8f6d0517 100644
--- a/tools/cjs/package.json
+++ b/tools/cjs/package.json
@@ -19,7 +19,10 @@
   "bugs": {
     "url": "https://github.com/react-bootstrap/react-bootstrap/issues"
   },
+  "dependencies": {
+    "classnames": "1.1.4"
+  },
   "peerDependencies": {
-    "react": ">=0.12"
+    "react": ">=0.13"
   }
 }