diff --git a/client/components/dialog/dialog-base.jsx b/client/components/dialog/dialog-base.jsx
index 66651844c6c9a..1074efd3987b4 100644
--- a/client/components/dialog/dialog-base.jsx
+++ b/client/components/dialog/dialog-base.jsx
@@ -5,7 +5,7 @@ var React = require( 'react' ),
 	clickOutside = require( 'click-outside' ),
 	closest = require( 'component-closest' ),
 	noop = require( 'lodash/utility/noop' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 /**
  * Internal dependencies
@@ -60,17 +60,17 @@ var DialogBase = React.createClass( {
 			contentClassName = baseClassName + '__content';
 
 		if ( this.props.additionalClassNames ) {
-			dialogClassName = joinClasses( this.props.additionalClassNames, dialogClassName );
+			dialogClassName = classnames( this.props.additionalClassNames, dialogClassName );
 		}
 
 		if ( this.props.isFullScreen ) {
-			backdropClassName = joinClasses( 'is-full-screen', backdropClassName );
+			backdropClassName = classnames( 'is-full-screen', backdropClassName );
 		}
 
 		return (
 			<div className={ backdropClassName } ref="backdrop">
 				<Card className={ dialogClassName } role="dialog" ref="dialog">
-					<div className={ joinClasses( this.props.className, contentClassName ) } ref="content" tabIndex="-1">
+					<div className={ classnames( this.props.className, contentClassName ) } ref="content" tabIndex="-1">
 						{ this.props.children }
 					</div>
 					{ this._renderButtonsBar() }
diff --git a/client/components/forms/form-button/index.jsx b/client/components/forms/form-button/index.jsx
index 43971c081f358..98c07d69f7432 100644
--- a/client/components/forms/form-button/index.jsx
+++ b/client/components/forms/form-button/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	classNames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' ),
 	isEmpty = require( 'lodash/lang/isEmpty' );
@@ -37,7 +37,7 @@ module.exports = React.createClass( {
 			<Button
 				{ ...omit( this.props, 'className' ) }
 				primary={ this.props.isPrimary }
-				className={ joinClasses( this.props.className, buttonClasses ) }>
+				className={ classnames( this.props.className, buttonClasses ) }>
 				{ isEmpty( this.props.children ) ? this.getDefaultButtonAction() : this.props.children }
 			</Button>
 		);
diff --git a/client/components/forms/form-buttons-bar/index.jsx b/client/components/forms/form-buttons-bar/index.jsx
index d4cf8fb2ddd8f..648770684c31c 100644
--- a/client/components/forms/form-buttons-bar/index.jsx
+++ b/client/components/forms/form-buttons-bar/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -13,7 +13,7 @@ module.exports = React.createClass( {
 		return (
 			<div
 				{ ...omit( this.props, 'className' ) }
-				className={ joinClasses( this.props.className, 'form-buttons-bar' ) } >
+				className={ classnames( this.props.className, 'form-buttons-bar' ) } >
 				{ this.props.children }
 			</div>
 		);
diff --git a/client/components/forms/form-checkbox/index.jsx b/client/components/forms/form-checkbox/index.jsx
index 9726f31b7b742..6bf108a32991d 100644
--- a/client/components/forms/form-checkbox/index.jsx
+++ b/client/components/forms/form-checkbox/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -13,7 +13,7 @@ module.exports = React.createClass( {
 		var otherProps = omit( this.props, [ 'className', 'type' ] );
 
 		return (
-			<input { ...otherProps } type="checkbox" className={ joinClasses( this.props.className, 'form-checkbox' ) } />
+			<input { ...otherProps } type="checkbox" className={ classnames( this.props.className, 'form-checkbox' ) } />
 		);
 	}
 } );
diff --git a/client/components/forms/form-country-select/index.jsx b/client/components/forms/form-country-select/index.jsx
index 93a8e11f7bc4a..c88956cbddc9d 100644
--- a/client/components/forms/form-country-select/index.jsx
+++ b/client/components/forms/form-country-select/index.jsx
@@ -3,7 +3,7 @@
  */
 var React = require( 'react/addons' ),
 	isEmpty = require( 'lodash/lang/isEmpty' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	observe = require( 'lib/mixins/data-observe' ),
 	omit = require( 'lodash/object/omit' );
 
@@ -29,7 +29,7 @@ module.exports = React.createClass( {
 		return (
 			<select
 				{ ...omit( this.props, 'className' ) }
-				className={ joinClasses( this.props.className, 'form-country-select' ) }
+				className={ classnames( this.props.className, 'form-country-select' ) }
 				onChange={ this.props.onChange }
 			>
 				{ options.map( function( option ) {
diff --git a/client/components/forms/form-fieldset/index.jsx b/client/components/forms/form-fieldset/index.jsx
index 45c9bf66b4768..e7e41efa70873 100644
--- a/client/components/forms/form-fieldset/index.jsx
+++ b/client/components/forms/form-fieldset/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<fieldset { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-fieldset' ) } >
+			<fieldset { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-fieldset' ) } >
 				{ this.props.children }
 			</fieldset>
 		);
diff --git a/client/components/forms/form-label/index.jsx b/client/components/forms/form-label/index.jsx
index 2f7120428a1ce..d9546c02e5eef 100644
--- a/client/components/forms/form-label/index.jsx
+++ b/client/components/forms/form-label/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<label { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-label' ) } >
+			<label { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-label' ) } >
 				{ this.props.children }
 			</label>
 		);
diff --git a/client/components/forms/form-legend/index.jsx b/client/components/forms/form-legend/index.jsx
index 1eafc6669d2be..394174984a124 100644
--- a/client/components/forms/form-legend/index.jsx
+++ b/client/components/forms/form-legend/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<legend { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-legend' ) } >
+			<legend { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-legend' ) } >
 				{ this.props.children }
 			</legend>
 		);
diff --git a/client/components/forms/form-phone-input/index.jsx b/client/components/forms/form-phone-input/index.jsx
index 596c0757e9010..bc2d2002bb96b 100644
--- a/client/components/forms/form-phone-input/index.jsx
+++ b/client/components/forms/form-phone-input/index.jsx
@@ -13,7 +13,7 @@ var FormLabel = require( 'components/forms/form-label' ),
 	FormTelInput = require( 'components/forms/form-tel-input' ),
 	FormFieldset = require( 'components/forms/form-fieldset' ),
 	CountrySelect = require( 'components/forms/form-country-select' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	phoneValidation = require( 'lib/phone-validation' );
 
 var CLEAN_REGEX = /^0|[\s.\-()]+/g;
@@ -68,7 +68,7 @@ module.exports = React.createClass( {
 			};
 
 		return (
-			<div className={ joinClasses( this.props.className, 'form-phone-input' ) }>
+			<div className={ classnames( this.props.className, 'form-phone-input' ) }>
 				<FormFieldset className="form-fieldset__country">
 					<FormLabel htmlFor="country_code">{ this.translate( 'Country Code', { context: 'The country code for the phone for the user.' } ) }</FormLabel>
 					<CountrySelect
diff --git a/client/components/forms/form-radio/index.jsx b/client/components/forms/form-radio/index.jsx
index 72d50c388e641..73c62cb6bd5cb 100644
--- a/client/components/forms/form-radio/index.jsx
+++ b/client/components/forms/form-radio/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -16,7 +16,7 @@ module.exports = React.createClass( {
 			<input
 				{ ...otherProps }
 				type="radio"
-				className={ joinClasses( this.props.className, 'form-radio' ) } />
+				className={ classnames( this.props.className, 'form-radio' ) } />
 		);
 	}
 } );
diff --git a/client/components/forms/form-section-heading/index.jsx b/client/components/forms/form-section-heading/index.jsx
index f427b6f7cd1cd..075867ae40b09 100644
--- a/client/components/forms/form-section-heading/index.jsx
+++ b/client/components/forms/form-section-heading/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<h3 { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-section-heading' ) } >
+			<h3 { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-section-heading' ) } >
 				{ this.props.children }
 			</h3>
 		);
diff --git a/client/components/forms/form-select/index.jsx b/client/components/forms/form-select/index.jsx
index 4a8a563b75679..cbe714e20ca1c 100644
--- a/client/components/forms/form-select/index.jsx
+++ b/client/components/forms/form-select/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<select { ...omit( this.props, 'classname' ) } className={ joinClasses( this.props.className, 'form-select' ) } >
+			<select { ...omit( this.props, 'classname' ) } className={ classnames( this.props.className, 'form-select' ) } >
 				{ this.props.children }
 			</select>
 		);
diff --git a/client/components/forms/form-setting-explanation/index.jsx b/client/components/forms/form-setting-explanation/index.jsx
index 9a57cbd61fa4d..f64c46eabdd2c 100644
--- a/client/components/forms/form-setting-explanation/index.jsx
+++ b/client/components/forms/form-setting-explanation/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<p { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-setting-explanation' ) } >
+			<p { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-setting-explanation' ) } >
 				{ this.props.children }
 			</p>
 		);
diff --git a/client/components/forms/form-tel-input/index.jsx b/client/components/forms/form-tel-input/index.jsx
index 52bc5088a5305..16955a178349a 100644
--- a/client/components/forms/form-tel-input/index.jsx
+++ b/client/components/forms/form-tel-input/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' ),
 	classNames = require( 'classnames' );
 
@@ -28,7 +28,7 @@ module.exports = React.createClass( {
 				{ ...otherProps }
 				type={ 'tel' }
 				pattern={ '[0-9]*'}
-				className={ joinClasses( this.props.className, classes ) } />
+				className={ classnames( this.props.className, classes ) } />
 		);
 	}
 } );
diff --git a/client/components/forms/form-text-input/index.jsx b/client/components/forms/form-text-input/index.jsx
index 1777e3fb7f36d..4cc686293d23e 100644
--- a/client/components/forms/form-text-input/index.jsx
+++ b/client/components/forms/form-text-input/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' ),
 	classNames = require( 'classnames' );
 
@@ -31,7 +31,7 @@ module.exports = React.createClass( {
 			<input
 				{ ...otherProps }
 				type={ this.props.type }
-				className={ joinClasses( this.props.className, classes ) }
+				className={ classnames( this.props.className, classes ) }
 				onClick={ this.props.selectOnFocus ? this.selectOnFocus : null }
 				/>
 		);
diff --git a/client/components/forms/form-textarea/index.jsx b/client/components/forms/form-textarea/index.jsx
index a7e10328b0b82..b42c0f2465ac3 100644
--- a/client/components/forms/form-textarea/index.jsx
+++ b/client/components/forms/form-textarea/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<textarea { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-textarea' ) } >
+			<textarea { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-textarea' ) } >
 				{ this.props.children }
 			</textarea>
 		);
diff --git a/client/components/main/index.jsx b/client/components/main/index.jsx
index f4382490ce201..e8f4bcb345c0b 100644
--- a/client/components/main/index.jsx
+++ b/client/components/main/index.jsx
@@ -2,14 +2,14 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 module.exports = React.createClass( {
 	displayName: 'Main',
 
 	render: function() {
 		return (
-			<div className={ joinClasses( this.props.className, 'main' ) } role="main">
+			<div className={ classnames( this.props.className, 'main' ) } role="main">
 				{ this.props.children }
 			</div>
 		);
diff --git a/client/components/popover/menu-item.jsx b/client/components/popover/menu-item.jsx
index e09685c720fb1..181471b76b703 100644
--- a/client/components/popover/menu-item.jsx
+++ b/client/components/popover/menu-item.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 var MenuItem = React.createClass( {
 	getDefaultProps: function() {
@@ -16,7 +16,7 @@ var MenuItem = React.createClass( {
 	render: function() {
 		var onMouseOver = this.props.focusOnHover ? this._onMouseOver : null;
 		return (
-			<button className={ joinClasses( 'popover__menu-item', this.props.className ) }
+			<button className={ classnames( 'popover__menu-item', this.props.className ) }
 					role="menuitem"
 					disabled={ this.props.disabled }
 					onClick={ this.props.onClick }
diff --git a/client/components/post-excerpt/index.jsx b/client/components/post-excerpt/index.jsx
index b54e4c4a843b0..442cc6af52aac 100644
--- a/client/components/post-excerpt/index.jsx
+++ b/client/components/post-excerpt/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 var PostExcerpt = React.createClass( {
 
@@ -21,7 +21,7 @@ var PostExcerpt = React.createClass( {
 		textClass = textClass.join( ' ' );
 
 		return (
-			<div className={ joinClasses( this.props.className, 'post-excerpt' ) }>
+			<div className={ classnames( this.props.className, 'post-excerpt' ) }>
 				<p className={ textClass }>{ text }</p>
 			</div>
 		);
diff --git a/client/components/progress-bar/index.jsx b/client/components/progress-bar/index.jsx
index 06969a2875193..364e609c694e8 100644
--- a/client/components/progress-bar/index.jsx
+++ b/client/components/progress-bar/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 module.exports = React.createClass( {
 
@@ -35,7 +35,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<div className={ joinClasses( this.props.className, 'progress-bar' ) }>
+			<div className={ classnames( this.props.className, 'progress-bar' ) }>
 				{ this.renderBar() }
 			</div>
 		);
diff --git a/client/components/progress-indicator/index.jsx b/client/components/progress-indicator/index.jsx
index 77fa92db7ccba..d8b4af4ae7774 100644
--- a/client/components/progress-indicator/index.jsx
+++ b/client/components/progress-indicator/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	classNames = require( 'classnames' );
 
 module.exports = React.createClass( {
@@ -38,7 +38,7 @@ module.exports = React.createClass( {
 		} );
 
 		return (
-			<div className={ joinClasses( this.props.className, classes ) }>
+			<div className={ classnames( this.props.className, classes ) }>
 				<div className="progress-indicator__half" />
 				<div className="progress-indicator__half is-latter" />
 				{ last }
diff --git a/client/components/site-selector-modal/index.jsx b/client/components/site-selector-modal/index.jsx
index e296a7d90801d..367ddb1b9c902 100644
--- a/client/components/site-selector-modal/index.jsx
+++ b/client/components/site-selector-modal/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 /**
  * Internal dependencies
@@ -69,7 +69,7 @@ var SiteSelectorModal = React.createClass( {
 				{ action: 'back', label: this.translate( 'Back' ) },
 				mainLink
 			],
-			classNames = joinClasses( 'site-selector-modal', this.props.className );
+			classNames = classnames( 'site-selector-modal', this.props.className );
 
 		return (
 			<Dialog className={ classNames }
diff --git a/client/me/action-remove/index.jsx b/client/me/action-remove/index.jsx
index e57329dde2c20..3bbdbebb26da4 100644
--- a/client/me/action-remove/index.jsx
+++ b/client/me/action-remove/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' ),
 	classNames = require( 'classnames' );
 
@@ -26,7 +26,7 @@ module.exports = React.createClass( {
 			<button
 				title={ this.translate( 'Remove', { textOnly: true } ) }
 				{ ...omit( this.props, 'className' ) }
-				className={ joinClasses( this.props.className, buttonClasses ) } >
+				className={ classnames( this.props.className, buttonClasses ) } >
 				{ this.props.children }
 			</button>
 		);
diff --git a/client/me/sidebar/sidebar-item.jsx b/client/me/sidebar/sidebar-item.jsx
index 7611d10cd2840..be785e58bb2cf 100644
--- a/client/me/sidebar/sidebar-item.jsx
+++ b/client/me/sidebar/sidebar-item.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 /**
  * Internal Dependencies
@@ -26,7 +26,7 @@ module.exports = React.createClass( {
 	render: function() {
 		const selected = this.props.selected ? 'selected' : null;
 		return (
-			<li className={ joinClasses( this.props.className, selected, 'me-sidebar-item' ) } >
+			<li className={ classnames( this.props.className, selected, 'me-sidebar-item' ) } >
 				<a href={ this.props.href } onClick={ this.onClick } target={ 'true' === this.props.external ? '_blank' : null }>
 					<Gridicon icon={ this.props.icon } size={ 24 } className="me-sidebar-item__gridicon" />
 					<span className="menu-link-text">{ this.props.label }</span>
diff --git a/client/my-sites/plugins/plugins-browser-item/index.jsx b/client/my-sites/plugins/plugins-browser-item/index.jsx
index 28e8fc480acc0..60eeefd7ceaa1 100644
--- a/client/my-sites/plugins/plugins-browser-item/index.jsx
+++ b/client/my-sites/plugins/plugins-browser-item/index.jsx
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+var React = require( 'react' );
 
 /**
  * Internal dependencies
diff --git a/client/my-sites/site-settings/settings-card-footer/index.jsx b/client/my-sites/site-settings/settings-card-footer/index.jsx
index ec89c4117e1c5..30b378c240e28 100644
--- a/client/my-sites/site-settings/settings-card-footer/index.jsx
+++ b/client/my-sites/site-settings/settings-card-footer/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' ),
 	classNames = require( 'classnames' );
 
@@ -18,7 +18,7 @@ module.exports = React.createClass( {
 		return (
 			<div
 				{ ...omit( this.props, 'className' ) }
-			className={ joinClasses( this.props.className, buttonClasses ) } >
+			className={ classnames( this.props.className, buttonClasses ) } >
 				{ this.props.children }
 			</div>
 		);
diff --git a/client/notices/notice.jsx b/client/notices/notice.jsx
index 215b6ae0220f8..8ce3ea54b1dcc 100644
--- a/client/notices/notice.jsx
+++ b/client/notices/notice.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 /**
  * Internal dependencies
@@ -81,7 +81,7 @@ module.exports = React.createClass( {
 		}
 
 		return (
-			<div className={ joinClasses( this.props.className, alertClass ) }>
+			<div className={ classnames( this.props.className, alertClass ) }>
 				{ text }
 				{ dismiss }
 			</div>
diff --git a/client/notices/simple-notice.jsx b/client/notices/simple-notice.jsx
index 9095ca63120ad..c55b73af44e30 100644
--- a/client/notices/simple-notice.jsx
+++ b/client/notices/simple-notice.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	noop = require( 'lodash/utility/noop' );
 
 /**
@@ -56,16 +56,16 @@ module.exports = React.createClass( {
 
 		// The class determines the nature of a notice
 		// and its status.
-		noticeClass = joinClasses( 'notice', this.props.status );
+		noticeClass = classnames( 'notice', this.props.status );
 
 		if ( this.props.isCompact ) {
-			noticeClass = joinClasses( noticeClass, 'is-compact' );
+			noticeClass = classnames( noticeClass, 'is-compact' );
 		}
 
 		// By default, a dismiss button is rendered to
 		// allow the user to hide the notice
 		if ( this.props.showDismiss ) {
-			noticeClass = joinClasses( noticeClass, 'is-dismissable' );
+			noticeClass = classnames( noticeClass, 'is-dismissable' );
 			dismiss = (
 				<span tabIndex="0" className="notice__dismiss" onClick={ this.props.onClick } >
 					<Gridicon icon="cross" size={ 24 } />
@@ -75,7 +75,7 @@ module.exports = React.createClass( {
 		}
 
 		return (
-			<div className={ joinClasses( this.props.className, noticeClass ) }>
+			<div className={ classnames( this.props.className, noticeClass ) }>
 				{ this.renderChildren() }
 				{ dismiss }
 			</div>
diff --git a/client/signup/logged-out-form/index.jsx b/client/signup/logged-out-form/index.jsx
index 8fc42df0d291b..4bc3ab8312055 100644
--- a/client/signup/logged-out-form/index.jsx
+++ b/client/signup/logged-out-form/index.jsx
@@ -4,7 +4,7 @@
  */
 var React = require( 'react' ),
 	classNames = require( 'classnames' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ module.exports = React.createClass( {
 		var classes = classNames( { 'logged-out-form': true, } );
 
 		return (
-			<div className={ joinClasses( this.props.className, classes ) } >
+			<div className={ classnames( this.props.className, classes ) } >
 				<Card>
 					<form onSubmit={ this.props.onSubmit } noValidate={ true }>
 						{ this.props.formHeader &&
diff --git a/client/vip/vip-logs/logs-table.jsx b/client/vip/vip-logs/logs-table.jsx
index d0e33add0b917..e08b8a500b002 100644
--- a/client/vip/vip-logs/logs-table.jsx
+++ b/client/vip/vip-logs/logs-table.jsx
@@ -3,7 +3,7 @@
  */
 var React = require( 'react' ),
 	isEmpty = require( 'lodash/lang/isEmpty' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	debug = require( 'debug' )( 'calypso:vip:logs' );
 
 /**
@@ -67,10 +67,10 @@ module.exports = React.createClass( {
 			}
 
 			return (
-				<tr key={ i } className={ joinClasses( 'vip-logs__log', 'vip-logs__log-' + log.type ) }>
+				<tr key={ i } className={ classnames( 'vip-logs__log', 'vip-logs__log-' + log.type ) }>
 					<td className="vip-logs__date"> { this.formatDate( log.timestamp ) }</td>
 					<td className="vip-logs__log">
-						<span className={ joinClasses( 'vip-logs__log-prefix', 'vip-logs__log-prefix-' + log.type ) }>{ prefix }</span>
+						<span className={ classnames( 'vip-logs__log-prefix', 'vip-logs__log-prefix-' + log.type ) }>{ prefix }</span>
 						{ log.log }
 					</td>
 				</tr>
diff --git a/shared/components/card/compact.jsx b/shared/components/card/compact.jsx
index 7b89e9188cd18..cc809a6961854 100644
--- a/shared/components/card/compact.jsx
+++ b/shared/components/card/compact.jsx
@@ -3,7 +3,7 @@
  */
 var React = require( 'react/addons' ),
 	assign = require( 'lodash/object/assign' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ module.exports = React.createClass( {
 	displayName: 'CompactCard',
 
 	render: function() {
-		const props = assign( {}, this.props, { className: joinClasses( this.props.className, 'is-compact' ) } );
+		const props = assign( {}, this.props, { className: classnames( this.props.className, 'is-compact' ) } );
 
 		return (
 			<Card { ...props }>
diff --git a/shared/components/card/index.jsx b/shared/components/card/index.jsx
index 71bb6d10ae0c0..cf807adb41f5e 100644
--- a/shared/components/card/index.jsx
+++ b/shared/components/card/index.jsx
@@ -3,7 +3,7 @@
  */
 var React = require( 'react/addons' ),
 	assign = require( 'lodash/object/assign' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 /**
  * Internal dependencies
@@ -23,7 +23,7 @@ module.exports = React.createClass( {
 	render: function() {
 		var element = this.props.tagName || 'div',
 			linkClassName = this.props.href ? 'is-card-link' : null,
-			props = assign( {}, this.props, { className: joinClasses( this.props.className, 'card', linkClassName ) } ),
+			props = assign( {}, this.props, { className: classnames( this.props.className, 'card', linkClassName ) } ),
 			linkIndicator = null;
 
 		if ( this.props.href ) {