diff --git a/src/index.js b/src/index.js
index d933acff..4f9df69b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,4 @@
 import { getOtherProps, omitProps, pickProps } from './modules/filterObjectProps';
-import WebStyleComponent from './modules/WebStyleComponent';
-import StylePropTypes from './modules/StylePropTypes';
 import Image from './modules/Image';
 import Text from './modules/Text';
 import TextInput from './modules/TextInput';
@@ -10,8 +8,6 @@ export default {
   getOtherProps,
   omitProps,
   pickProps,
-  StylePropTypes,
-  WebStyleComponent,
   Image,
   Text,
   TextInput,
diff --git a/src/modules/Image/ImageStylePropTypes.js b/src/modules/Image/ImageStylePropTypes.js
index 86d49a96..c7d5fbe4 100644
--- a/src/modules/Image/ImageStylePropTypes.js
+++ b/src/modules/Image/ImageStylePropTypes.js
@@ -1,12 +1,9 @@
-import {
-  BorderThemePropTypes,
-  LayoutPropTypes
-} from '../StylePropTypes';
+import { StylePropTypes } from '../react-web-style';
 import { PropTypes } from 'react';
 
 export default {
-  ...BorderThemePropTypes,
-  ...LayoutPropTypes,
+  ...StylePropTypes.BorderThemePropTypes,
+  ...StylePropTypes.LayoutPropTypes,
   backgroundColor: PropTypes.string,
   boxShadow: PropTypes.string,
   opacity: PropTypes.number,
diff --git a/src/modules/Image/index.js b/src/modules/Image/index.js
index 53fb2b29..1c4faeea 100644
--- a/src/modules/Image/index.js
+++ b/src/modules/Image/index.js
@@ -1,7 +1,7 @@
 import { pickProps } from '../filterObjectProps';
+import { WebStyleComponent } from '../react-web-style';
 import ImageStylePropTypes, { ImageDefaultStyles } from './ImageStylePropTypes';
 import React, { PropTypes } from 'react';
-import WebStyleComponent from '../WebStyleComponent';
 
 class Image extends React.Component {
   static propTypes = {
@@ -29,7 +29,7 @@ class Image extends React.Component {
         {...other}
         alt={alt}
         className={`sdk-Image ${className}`}
-        element='img'
+        component='img'
         style={mergedStyle}
       />
     );
diff --git a/src/modules/Text/TextStylePropTypes.js b/src/modules/Text/TextStylePropTypes.js
index 8d3d93d0..80f82eff 100644
--- a/src/modules/Text/TextStylePropTypes.js
+++ b/src/modules/Text/TextStylePropTypes.js
@@ -1,9 +1,9 @@
-import { TypographicPropTypes } from '../StylePropTypes';
+import { StylePropTypes } from '../react-web-style';
 import { ViewStylePropTypes } from '../View/ViewStylePropTypes';
 
 export default {
   ...ViewStylePropTypes,
-  ...TypographicPropTypes
+  ...StylePropTypes.TypographicPropTypes
 };
 
 export const TextDefaultStyles = {
diff --git a/src/modules/Text/index.js b/src/modules/Text/index.js
index 19208582..78674abe 100644
--- a/src/modules/Text/index.js
+++ b/src/modules/Text/index.js
@@ -1,13 +1,13 @@
 import { pickProps } from '../filterObjectProps';
+import { WebStyleComponent } from '../react-web-style';
 import React, { PropTypes } from 'react';
 import TextStylePropTypes, { TextDefaultStyle } from './TextStylePropTypes';
-import WebStyleComponent from '../WebStyleComponent';
 
 class Text extends React.Component {
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string,
-    element: PropTypes.oneOfType([
+    component: PropTypes.oneOfType([
       PropTypes.func,
       PropTypes.string
     ]),
@@ -16,7 +16,7 @@ class Text extends React.Component {
 
   static defaultProps = {
     className: '',
-    element: 'div'
+    component: 'div'
   }
 
   render() {
diff --git a/src/modules/TextInput/TextInputStylePropTypes.js b/src/modules/TextInput/TextInputStylePropTypes.js
index 9c592d5e..f1ec5874 100644
--- a/src/modules/TextInput/TextInputStylePropTypes.js
+++ b/src/modules/TextInput/TextInputStylePropTypes.js
@@ -1,10 +1,10 @@
 import { PropTypes } from 'react';
-import { TypographicPropTypes } from '../StylePropTypes';
+import { StylePropTypes } from '../react-web-style';
 import ViewStylePropTypes from '../View/ViewStylePropTypes';
 
 export default {
   ...ViewStylePropTypes,
-  ...TypographicPropTypes
+  ...StylePropTypes.TypographicPropTypes
 };
 
 export const TextInputDefaultStyles = {
diff --git a/src/modules/TextInput/index.js b/src/modules/TextInput/index.js
index 7d650348..59799e65 100644
--- a/src/modules/TextInput/index.js
+++ b/src/modules/TextInput/index.js
@@ -1,7 +1,7 @@
 import { pickProps } from '../filterObjectProps';
+import { WebStyleComponent } from '../react-web-style';
 import React, { PropTypes } from 'react';
 import TextInputStylePropTypes, { TextInputDefaultStyles } from './TextInputStylePropTypes';
-import WebStyleComponent from '../WebStyleComponent';
 
 class TextInput extends React.Component {
   static propTypes = {
@@ -26,8 +26,8 @@ class TextInput extends React.Component {
       <WebStyleComponent
         {...other}
         className={`sdk-TextInput ${className}`}
+        component={multiline ? 'textarea' : 'input'}
         disabled={!editable}
-        element={multiline ? 'textarea' : 'input'}
         placeholder={placeholder}
         style={mergedStyle}
       />
diff --git a/src/modules/View/ViewStylePropTypes.js b/src/modules/View/ViewStylePropTypes.js
index 182c3f1d..d940c2ab 100644
--- a/src/modules/View/ViewStylePropTypes.js
+++ b/src/modules/View/ViewStylePropTypes.js
@@ -1,15 +1,10 @@
-import {
-  BackgroundPropTypes,
-  BorderThemePropTypes,
-  LayoutPropTypes
-} from '../StylePropTypes';
-
 import { PropTypes } from 'react';
+import { StylePropTypes } from '../react-web-style';
 
 export default {
-  ...BackgroundPropTypes,
-  ...BorderThemePropTypes,
-  ...LayoutPropTypes,
+  ...StylePropTypes.BackgroundPropTypes,
+  ...StylePropTypes.BorderThemePropTypes,
+  ...StylePropTypes.LayoutPropTypes,
   boxShadow: PropTypes.string,
   opacity: PropTypes.number,
   transform: PropTypes.string
diff --git a/src/modules/View/index.js b/src/modules/View/index.js
index 0444ff6c..f289dff8 100644
--- a/src/modules/View/index.js
+++ b/src/modules/View/index.js
@@ -1,13 +1,13 @@
 import { pickProps } from '../filterObjectProps';
+import { WebStyleComponent } from '../react-web-style';
 import React, { PropTypes } from 'react';
 import ViewStylePropTypes, { ViewDefaultStyle } from './ViewStylePropTypes';
-import WebStyleComponent from '../WebStyleComponent';
 
 class View extends React.Component {
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string,
-    element: PropTypes.oneOfType([
+    component: PropTypes.oneOfType([
       PropTypes.func,
       PropTypes.string
     ]),
@@ -22,11 +22,11 @@ class View extends React.Component {
 
   static defaultProps = {
     className: '',
-    element: 'div'
+    component: 'div'
   }
 
   render() {
-    const { className, element, pointerEvents, style, ...other } = this.props;
+    const { className, pointerEvents, style, ...other } = this.props;
     const filteredStyle = pickProps(style, Object.keys(ViewStylePropTypes));
     const pointerEventsStyle = pointerEvents && { pointerEvents };
     const mergedStyle = {
@@ -39,7 +39,6 @@ class View extends React.Component {
       <WebStyleComponent
         {...other}
         className={`sdk-View ${className}`}
-        element={element}
         style={mergedStyle}
       />
     );
diff --git a/src/modules/WebStyleComponent/index.js b/src/modules/WebStyleComponent/index.js
deleted file mode 100644
index edca6cfe..00000000
--- a/src/modules/WebStyleComponent/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import autoprefix from './lib/autoprefix';
-import React, {PropTypes} from 'react';
-import styleMap from './lib/styleMap';
-
-class WebStyleComponent extends React.Component {
-  static _getPropTypes() {
-    return {
-      className: PropTypes.string,
-      element: PropTypes.oneOfType([
-        PropTypes.string, PropTypes.func
-      ]),
-      style: PropTypes.object
-    };
-  }
-
-  static _getDefaultProps() {
-    return {
-      className: '',
-      element: 'div',
-      style: {}
-    };
-  }
-
-
-  render() {
-    const { element: Element, ...other } = this.props;
-    const { classNames, inlineStyles } = this._separateClassNamesAndStyles();
-
-    return (
-      <Element
-        {...other}
-        className={classNames.join(' ')}
-        style={autoprefix(inlineStyles)}
-      />
-    );
-  }
-
-  _getSinglePurposeClassName(prop, style) {
-    const uniqueClassName = `${prop}-${style[prop]}`;
-    if (
-      style.hasOwnProperty(prop) &&
-      styleMap[uniqueClassName]
-    ) {
-      return styleMap[uniqueClassName];
-    }
-  }
-
-  _separateClassNamesAndStyles() {
-    const styleProp = this.props.style;
-    let classNames = [ this.props.className ];
-    let inlineStyles = {};
-
-    for (let prop in styleProp) {
-      let singlePurposeClassName =
-          this._getSinglePurposeClassName(prop, styleProp);
-      if (singlePurposeClassName) {
-        classNames.push(singlePurposeClassName);
-      } else {
-        inlineStyles[prop] = styleProp[prop];
-      }
-    }
-
-    return { classNames, inlineStyles };
-  }
-}
-
-WebStyleComponent.propTypes = WebStyleComponent._getPropTypes();
-WebStyleComponent.defaultProps = WebStyleComponent._getDefaultProps();
-
-export default WebStyleComponent;
diff --git a/src/modules/StylePropTypes/Background.js b/src/modules/react-web-style/StylePropTypes/Background.js
similarity index 100%
rename from src/modules/StylePropTypes/Background.js
rename to src/modules/react-web-style/StylePropTypes/Background.js
diff --git a/src/modules/StylePropTypes/BorderTheme.js b/src/modules/react-web-style/StylePropTypes/BorderTheme.js
similarity index 100%
rename from src/modules/StylePropTypes/BorderTheme.js
rename to src/modules/react-web-style/StylePropTypes/BorderTheme.js
diff --git a/src/modules/StylePropTypes/BoxModel.js b/src/modules/react-web-style/StylePropTypes/BoxModel.js
similarity index 100%
rename from src/modules/StylePropTypes/BoxModel.js
rename to src/modules/react-web-style/StylePropTypes/BoxModel.js
diff --git a/src/modules/StylePropTypes/Flexbox.js b/src/modules/react-web-style/StylePropTypes/Flexbox.js
similarity index 100%
rename from src/modules/StylePropTypes/Flexbox.js
rename to src/modules/react-web-style/StylePropTypes/Flexbox.js
diff --git a/src/modules/StylePropTypes/Layout.js b/src/modules/react-web-style/StylePropTypes/Layout.js
similarity index 100%
rename from src/modules/StylePropTypes/Layout.js
rename to src/modules/react-web-style/StylePropTypes/Layout.js
diff --git a/src/modules/StylePropTypes/Position.js b/src/modules/react-web-style/StylePropTypes/Position.js
similarity index 100%
rename from src/modules/StylePropTypes/Position.js
rename to src/modules/react-web-style/StylePropTypes/Position.js
diff --git a/src/modules/StylePropTypes/Typographic.js b/src/modules/react-web-style/StylePropTypes/Typographic.js
similarity index 100%
rename from src/modules/StylePropTypes/Typographic.js
rename to src/modules/react-web-style/StylePropTypes/Typographic.js
diff --git a/src/modules/StylePropTypes/index.js b/src/modules/react-web-style/StylePropTypes/index.js
similarity index 100%
rename from src/modules/StylePropTypes/index.js
rename to src/modules/react-web-style/StylePropTypes/index.js
diff --git a/src/modules/WebStyleComponent/lib/autoprefix.js b/src/modules/react-web-style/autoprefix.js
similarity index 100%
rename from src/modules/WebStyleComponent/lib/autoprefix.js
rename to src/modules/react-web-style/autoprefix.js
diff --git a/src/modules/WebStyleComponent/lib/css/.gitkeep b/src/modules/react-web-style/css/.gitkeep
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/.gitkeep
rename to src/modules/react-web-style/css/.gitkeep
diff --git a/src/modules/WebStyleComponent/lib/css/appearance.css b/src/modules/react-web-style/css/appearance.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/appearance.css
rename to src/modules/react-web-style/css/appearance.css
diff --git a/src/modules/WebStyleComponent/lib/css/background.css b/src/modules/react-web-style/css/background.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/background.css
rename to src/modules/react-web-style/css/background.css
diff --git a/src/modules/WebStyleComponent/lib/css/border.css b/src/modules/react-web-style/css/border.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/border.css
rename to src/modules/react-web-style/css/border.css
diff --git a/src/modules/WebStyleComponent/lib/css/boxSizing.css b/src/modules/react-web-style/css/boxSizing.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/boxSizing.css
rename to src/modules/react-web-style/css/boxSizing.css
diff --git a/src/modules/WebStyleComponent/lib/css/clear.css b/src/modules/react-web-style/css/clear.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/clear.css
rename to src/modules/react-web-style/css/clear.css
diff --git a/src/modules/WebStyleComponent/lib/css/color.css b/src/modules/react-web-style/css/color.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/color.css
rename to src/modules/react-web-style/css/color.css
diff --git a/src/modules/WebStyleComponent/lib/css/direction.css b/src/modules/react-web-style/css/direction.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/direction.css
rename to src/modules/react-web-style/css/direction.css
diff --git a/src/modules/WebStyleComponent/lib/css/display.css b/src/modules/react-web-style/css/display.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/display.css
rename to src/modules/react-web-style/css/display.css
diff --git a/src/modules/WebStyleComponent/lib/css/flexbox.css b/src/modules/react-web-style/css/flexbox.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/flexbox.css
rename to src/modules/react-web-style/css/flexbox.css
diff --git a/src/modules/WebStyleComponent/lib/css/float.css b/src/modules/react-web-style/css/float.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/float.css
rename to src/modules/react-web-style/css/float.css
diff --git a/src/modules/WebStyleComponent/lib/css/font.css b/src/modules/react-web-style/css/font.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/font.css
rename to src/modules/react-web-style/css/font.css
diff --git a/src/modules/WebStyleComponent/lib/css/height.css b/src/modules/react-web-style/css/height.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/height.css
rename to src/modules/react-web-style/css/height.css
diff --git a/src/modules/WebStyleComponent/lib/css/lineHeight.css b/src/modules/react-web-style/css/lineHeight.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/lineHeight.css
rename to src/modules/react-web-style/css/lineHeight.css
diff --git a/src/modules/WebStyleComponent/lib/css/list.css b/src/modules/react-web-style/css/list.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/list.css
rename to src/modules/react-web-style/css/list.css
diff --git a/src/modules/WebStyleComponent/lib/css/margin.css b/src/modules/react-web-style/css/margin.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/margin.css
rename to src/modules/react-web-style/css/margin.css
diff --git a/src/modules/WebStyleComponent/lib/css/opacity.css b/src/modules/react-web-style/css/opacity.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/opacity.css
rename to src/modules/react-web-style/css/opacity.css
diff --git a/src/modules/WebStyleComponent/lib/css/overflow.css b/src/modules/react-web-style/css/overflow.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/overflow.css
rename to src/modules/react-web-style/css/overflow.css
diff --git a/src/modules/WebStyleComponent/lib/css/padding.css b/src/modules/react-web-style/css/padding.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/padding.css
rename to src/modules/react-web-style/css/padding.css
diff --git a/src/modules/WebStyleComponent/lib/css/pointerEvents.css b/src/modules/react-web-style/css/pointerEvents.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/pointerEvents.css
rename to src/modules/react-web-style/css/pointerEvents.css
diff --git a/src/modules/WebStyleComponent/lib/css/position.css b/src/modules/react-web-style/css/position.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/position.css
rename to src/modules/react-web-style/css/position.css
diff --git a/src/modules/WebStyleComponent/lib/css/text.css b/src/modules/react-web-style/css/text.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/text.css
rename to src/modules/react-web-style/css/text.css
diff --git a/src/modules/WebStyleComponent/lib/css/unicodeBidi.css b/src/modules/react-web-style/css/unicodeBidi.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/unicodeBidi.css
rename to src/modules/react-web-style/css/unicodeBidi.css
diff --git a/src/modules/WebStyleComponent/lib/css/userSelect.css b/src/modules/react-web-style/css/userSelect.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/userSelect.css
rename to src/modules/react-web-style/css/userSelect.css
diff --git a/src/modules/WebStyleComponent/lib/css/visibility.css b/src/modules/react-web-style/css/visibility.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/visibility.css
rename to src/modules/react-web-style/css/visibility.css
diff --git a/src/modules/WebStyleComponent/lib/css/whiteSpace.css b/src/modules/react-web-style/css/whiteSpace.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/whiteSpace.css
rename to src/modules/react-web-style/css/whiteSpace.css
diff --git a/src/modules/WebStyleComponent/lib/css/width.css b/src/modules/react-web-style/css/width.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/width.css
rename to src/modules/react-web-style/css/width.css
diff --git a/src/modules/WebStyleComponent/lib/css/word.css b/src/modules/react-web-style/css/word.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/word.css
rename to src/modules/react-web-style/css/word.css
diff --git a/src/modules/WebStyleComponent/lib/css/zIndex.css b/src/modules/react-web-style/css/zIndex.css
similarity index 100%
rename from src/modules/WebStyleComponent/lib/css/zIndex.css
rename to src/modules/react-web-style/css/zIndex.css
diff --git a/src/modules/react-web-style/index.js b/src/modules/react-web-style/index.js
new file mode 100644
index 00000000..552c43e8
--- /dev/null
+++ b/src/modules/react-web-style/index.js
@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react';
+import StylePropTypes from './StylePropTypes';
+import stylingStrategy from './strategy';
+
+class WebStyleComponent extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    component: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]),
+    style: PropTypes.object
+  }
+
+  static defaultProps = {
+    className: '',
+    element: 'div'
+  }
+
+
+  render() {
+    const { component: Component, ...other } = this.props;
+
+    return (
+      <Component
+        {...other}
+        {...stylingStrategy(this.props)}
+      />
+    );
+  }
+}
+
+export { StylePropTypes, WebStyleComponent };
diff --git a/src/modules/react-web-style/strategy.js b/src/modules/react-web-style/strategy.js
new file mode 100644
index 00000000..49931ea8
--- /dev/null
+++ b/src/modules/react-web-style/strategy.js
@@ -0,0 +1,38 @@
+import autoprefix from './autoprefix';
+import styleMap from './styleMap';
+
+/**
+ * Find declarations that correspond to single purpose classes
+ */
+function getSinglePurposeClassName(prop, style) {
+  const uniqueClassName = `${prop}-${style[prop]}`;
+  if (
+    style.hasOwnProperty(prop) &&
+    styleMap[uniqueClassName]
+  ) {
+    return styleMap[uniqueClassName];
+  }
+}
+
+/**
+ * Replace inline styles with single purpose classes where possible
+ */
+export default function stylingStrategy(props) {
+  const { className: origClassName, style: origStyle } = props;
+  const classNames = [ origClassName ];
+  const style = {};
+
+  for (const prop in origStyle) {
+    const singlePurposeClassName = getSinglePurposeClassName(prop, origStyle);
+    if (singlePurposeClassName) {
+      classNames.push(singlePurposeClassName);
+    } else {
+      style[prop] = origStyle[prop];
+    }
+  }
+
+  const className = classNames.join(' ');
+  const prefixedStyle = autoprefix(style);
+
+  return { className, style: prefixedStyle };
+}
diff --git a/src/modules/WebStyleComponent/lib/styleMap.js b/src/modules/react-web-style/styleMap.js
similarity index 100%
rename from src/modules/WebStyleComponent/lib/styleMap.js
rename to src/modules/react-web-style/styleMap.js