diff --git a/src/components/columns/components/column.js b/src/components/columns/components/column.js
index 1b03144e..f6e861b6 100644
--- a/src/components/columns/components/column.js
+++ b/src/components/columns/components/column.js
@@ -7,6 +7,7 @@ const sizes = [null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
   .concat(Object.keys(CONSTANTS.SIZES).map(key => CONSTANTS.SIZES[key]));
 
 export default class Column extends PureComponent {
+  static displayName = 'Columns.Column'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/dropdown/components/divider.js b/src/components/dropdown/components/divider.js
index 44915feb..a79ec8ac 100644
--- a/src/components/dropdown/components/divider.js
+++ b/src/components/dropdown/components/divider.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class DropdownDivider extends PureComponent {
+  static displayName = 'Dropdown.Divider'
   static propTypes = {
     style: PropTypes.shape({}),
     className: PropTypes.string,
diff --git a/src/components/dropdown/components/item.js b/src/components/dropdown/components/item.js
index e63a76f6..9c3e2f0f 100644
--- a/src/components/dropdown/components/item.js
+++ b/src/components/dropdown/components/item.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class DropdownItem extends PureComponent {
+  static displayName = 'Dropdown.Item'
   static propTypes = {
     active: PropTypes.bool,
     children: PropTypes.node,
diff --git a/src/components/form/components/field/field-body.js b/src/components/form/components/field/field-body.js
index 230be7c6..648976e8 100644
--- a/src/components/form/components/field/field-body.js
+++ b/src/components/form/components/field/field-body.js
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 
 
 export default class FieldBody extends PureComponent {
+  static displayName = 'Field.Body'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/form/components/field/field-label.js b/src/components/form/components/field/field-label.js
index 8fee0505..b4a66ece 100644
--- a/src/components/form/components/field/field-label.js
+++ b/src/components/form/components/field/field-label.js
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 
 
 export default class FieldLabel extends PureComponent {
+  static displayName = 'Field.Label'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/hero/components/hero-body.js b/src/components/hero/components/hero-body.js
index 0cfb3bbe..53008b8b 100644
--- a/src/components/hero/components/hero-body.js
+++ b/src/components/hero/components/hero-body.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class HeroBody extends PureComponent {
+  static displayName = 'Hero.Body'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/hero/components/hero-footer.js b/src/components/hero/components/hero-footer.js
index 96d3b147..80f51692 100644
--- a/src/components/hero/components/hero-footer.js
+++ b/src/components/hero/components/hero-footer.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class HeroFooter extends PureComponent {
+  static displayName = 'Hero.Footer'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/hero/components/hero-head.js b/src/components/hero/components/hero-head.js
index 79ffae74..f00d61c0 100644
--- a/src/components/hero/components/hero-head.js
+++ b/src/components/hero/components/hero-head.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class HeroHead extends PureComponent {
+  static displayName = 'Hero.Head'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/level/components/level-item.js b/src/components/level/components/level-item.js
index dac292f2..71c42d5b 100644
--- a/src/components/level/components/level-item.js
+++ b/src/components/level/components/level-item.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class LevelItem extends PureComponent {
+  static displayName = 'Level.Item'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/level/components/level-side.js b/src/components/level/components/level-side.js
index 9e1c2b81..ea79433f 100644
--- a/src/components/level/components/level-side.js
+++ b/src/components/level/components/level-side.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class LevelSide extends PureComponent {
+  static displayName = 'Level.Side'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/media/components/media-content.js b/src/components/media/components/media-content.js
index 16dc7158..5b512532 100644
--- a/src/components/media/components/media-content.js
+++ b/src/components/media/components/media-content.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class MediaContent extends PureComponent {
+  static displayName = 'Media.Content'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/media/components/media-item.js b/src/components/media/components/media-item.js
index 53dfa18d..66ead468 100644
--- a/src/components/media/components/media-item.js
+++ b/src/components/media/components/media-item.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class MediaItem extends PureComponent {
+  static displayName = 'Media.Item'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/modal/components/card/body.js b/src/components/modal/components/card/body.js
index 71a7c5bb..e807e3d9 100644
--- a/src/components/modal/components/card/body.js
+++ b/src/components/modal/components/card/body.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class ModalCardBody extends PureComponent {
+  static displayName = 'Modal.Card.Body'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/modal/components/card/card.js b/src/components/modal/components/card/card.js
index 08bec1d7..2a919d3c 100644
--- a/src/components/modal/components/card/card.js
+++ b/src/components/modal/components/card/card.js
@@ -8,6 +8,7 @@ import ModalCardFoot from './foot';
 import ModalCardTitle from './title';
 
 export default class ModalCard extends PureComponent {
+  static displayName = 'Modal.Card'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/modal/components/card/foot.js b/src/components/modal/components/card/foot.js
index 99f91c8d..4bb83328 100644
--- a/src/components/modal/components/card/foot.js
+++ b/src/components/modal/components/card/foot.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class ModalCardFoot extends PureComponent {
+  static displayName = 'Modal.Card.Foot'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/modal/components/card/head.js b/src/components/modal/components/card/head.js
index 635af00a..8d8ff5fe 100644
--- a/src/components/modal/components/card/head.js
+++ b/src/components/modal/components/card/head.js
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import Button from '../../../button';
 
 export default class ModalCardHead extends PureComponent {
+  static displayName = 'Modal.Card.Head'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/modal/components/card/title.js b/src/components/modal/components/card/title.js
index a9fdc5d5..d5e3b4c8 100644
--- a/src/components/modal/components/card/title.js
+++ b/src/components/modal/components/card/title.js
@@ -2,29 +2,35 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const ModalCardTitle = ({
-  children,
-  className,
-  ...props
-}) => (
-  <p
-    {...props}
-    className={classnames('modal-card-title', className)}
-  >
-    {children}
-  </p>
-);
+export default class ModalCardTitle extends React.PureComponent {
+  static displayName = 'Modal.Card.Title'
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    style: PropTypes.shape({}),
+  }
 
-ModalCardTitle.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.shape({}),
-};
+  static defaultProps = {
+    children: null,
+    className: '',
+    style: {},
+  }
 
-ModalCardTitle.defaultProps = {
-  children: null,
-  className: '',
-  style: {},
-};
+  render() {
+    const {
+      children,
+      className,
+      ...props
+    } = this.props;
+
+    return (
+      <p
+        {...props}
+        className={classnames('modal-card-title', className)}
+      >
+        {children}
+      </p>
+    );
+  }
+}
 
-export default ModalCardTitle;
diff --git a/src/components/modal/components/content.js b/src/components/modal/components/content.js
index 42c20e26..d548b82d 100644
--- a/src/components/modal/components/content.js
+++ b/src/components/modal/components/content.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class ModalContent extends PureComponent {
+  static displayName = 'Modal.Content'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/navbar/components/brand.js b/src/components/navbar/components/brand.js
index c8e59654..583ccabd 100644
--- a/src/components/navbar/components/brand.js
+++ b/src/components/navbar/components/brand.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Burger from './burger';
 
-export default class Brand extends React.PureComponent {
+export default class NavbarBrand extends React.PureComponent {
+  static displayName = 'Navbar.Brand'
   static propTypes = {
     style: PropTypes.shape({}),
     className: PropTypes.string,
diff --git a/src/components/navbar/components/burger.js b/src/components/navbar/components/burger.js
index 421e965f..c59b95f5 100644
--- a/src/components/navbar/components/burger.js
+++ b/src/components/navbar/components/burger.js
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-export default class Burger extends React.PureComponent {
+export default class NavbarBurger extends React.PureComponent {
+  static displayName = 'Navbar.Burger'
   static propTypes = {
     style: PropTypes.shape({}),
     className: PropTypes.string,
diff --git a/src/components/navbar/components/container.js b/src/components/navbar/components/container.js
index a405d464..520a7028 100644
--- a/src/components/navbar/components/container.js
+++ b/src/components/navbar/components/container.js
@@ -2,40 +2,44 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const Container = ({
-  className,
-  renderAs,
-  children,
-  position,
-  ...props
-}) => {
-  const Element = renderAs;
-  return (
-    <Element
-      {...props}
-      className={classnames({
-        [`navbar-${position}`]: position,
-      }, className)}
-    >
-      {children}
-    </Element>
-  );
-};
+export default class NavbarContainer extends React.PureComponent {
+  static displayName = 'Navbar.Container'
+  static propTypes = {
+    style: PropTypes.shape({}),
+    className: PropTypes.string,
+    children: PropTypes.node,
+    renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    position: PropTypes.oneOf(['start', 'end']),
+  }
 
-Container.propTypes = {
-  style: PropTypes.shape({}),
-  className: PropTypes.string,
-  children: PropTypes.node,
-  renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  position: PropTypes.oneOf(['start', 'end']),
-};
+  static defaultProps = {
+    style: {},
+    className: '',
+    children: null,
+    renderAs: 'div',
+    position: 'start',
+  }
 
-Container.defaultProps = {
-  style: {},
-  className: '',
-  children: null,
-  renderAs: 'div',
-  position: 'start',
-};
+  render() {
+    const {
+      className,
+      renderAs,
+      children,
+      position,
+      ...props
+    } = this.props;
+
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames({
+          [`navbar-${position}`]: position,
+        }, className)}
+      >
+        {children}
+      </Element>
+    );
+  }
+}
 
-export default Container;
diff --git a/src/components/navbar/components/divider.js b/src/components/navbar/components/divider.js
index aa3e684d..c3e058a8 100644
--- a/src/components/navbar/components/divider.js
+++ b/src/components/navbar/components/divider.js
@@ -2,24 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const Divider = ({
-  className,
-  ...props
-}) => (
-  <div
-    {...props}
-    className={classnames('navbar-divider', className)}
-  />
-);
+export default class NavbarDivider extends React.PureComponent {
+  static displayName = 'Navbar.Divider'
+  static propTypes = {
+    style: PropTypes.shape({}),
+    className: PropTypes.string,
+  }
 
-Divider.propTypes = {
-  style: PropTypes.shape({}),
-  className: PropTypes.string,
-};
+  static defaultProps = {
+    style: {},
+    className: '',
+  }
 
-Divider.defaultProps = {
-  style: {},
-  className: '',
-};
+  render() {
+    const {
+      className,
+      ...props
+    } = this.props;
+
+    return (
+      <div
+        {...props}
+        className={classnames('navbar-divider', className)}
+      />
+    );
+  }
+}
 
-export default Divider;
diff --git a/src/components/navbar/components/dropdown.js b/src/components/navbar/components/dropdown.js
index 465adb98..628bd289 100644
--- a/src/components/navbar/components/dropdown.js
+++ b/src/components/navbar/components/dropdown.js
@@ -2,44 +2,46 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const Dropdown = ({
-  className,
-  renderAs,
-  boxed,
-  right,
-  children,
-  ...props
-}) => {
-  const Element = renderAs;
-  return (
-    <Element
-      {...props}
-      className={classnames('navbar-dropdown', className, {
-        'is-boxed': boxed,
-        'is-right': right,
-      })}
-    >
-      {children}
-    </Element>
-  );
-};
+export default class NavbarDropdown extends React.PureComponent {
+  static displayName = 'Navbar.Dropdown'
+  static propTypes = {
+    style: PropTypes.shape({}),
+    className: PropTypes.string,
+    children: PropTypes.node,
+    renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    boxed: PropTypes.bool,
+    right: PropTypes.bool,
+  }
 
-Dropdown.propTypes = {
-  style: PropTypes.shape({}),
-  className: PropTypes.string,
-  children: PropTypes.node,
-  renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  boxed: PropTypes.bool,
-  right: PropTypes.bool,
-};
+  static defaultProps = {
+    style: {},
+    className: '',
+    children: null,
+    renderAs: 'span',
+    boxed: false,
+    right: false,
+  }
+  render() {
+    const {
+      className,
+      renderAs,
+      boxed,
+      right,
+      children,
+      ...props
+    } = this.props;
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames('navbar-dropdown', className, {
+            'is-boxed': boxed,
+            'is-right': right,
+          })}
+      >
+        {children}
+      </Element>
+    );
+  }
+}
 
-Dropdown.defaultProps = {
-  style: {},
-  className: '',
-  children: null,
-  renderAs: 'span',
-  boxed: false,
-  right: false,
-};
-
-export default Dropdown;
diff --git a/src/components/navbar/components/item.js b/src/components/navbar/components/item.js
index 215c73b2..73b2678b 100644
--- a/src/components/navbar/components/item.js
+++ b/src/components/navbar/components/item.js
@@ -2,55 +2,58 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const Item = ({
-  className,
-  active,
-  renderAs,
-  children,
-  dropdown,
-  dropdownUp,
-  hoverable,
-  ...props
-}) => {
-  let Element = renderAs;
-  if (dropdown && Element === 'a') {
-    Element = 'span';
+export default class NavbarItem extends React.PureComponent {
+  static displayName = 'Navbar.Item'
+  static propTypes = {
+    style: PropTypes.shape({}),
+    className: PropTypes.string,
+    active: PropTypes.bool,
+    dropdown: PropTypes.bool,
+    dropdownUp: PropTypes.bool,
+    hoverable: PropTypes.bool,
+    children: PropTypes.node,
+    renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   }
-  return (
-    <Element
-      {...props}
-      className={classnames('navbar-item', className, {
-      'is-active': active,
-      'has-dropdown': dropdown,
-      'is-hoverable': hoverable,
-      'has-dropdown-up': dropdownUp,
-    })}
-    >
-      {children}
-    </Element>
-  );
-};
 
-Item.propTypes = {
-  style: PropTypes.shape({}),
-  className: PropTypes.string,
-  active: PropTypes.bool,
-  dropdown: PropTypes.bool,
-  dropdownUp: PropTypes.bool,
-  hoverable: PropTypes.bool,
-  children: PropTypes.node,
-  renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-};
+  static defaultProps = {
+    style: {},
+    className: '',
+    active: false,
+    children: null,
+    dropdown: false,
+    hoverable: false,
+    dropdownUp: false,
+    renderAs: 'a',
+  }
+  render() {
+    const {
+      className,
+      active,
+      renderAs,
+      children,
+      dropdown,
+      dropdownUp,
+      hoverable,
+      ...props
+    } = this.props;
 
-Item.defaultProps = {
-  style: {},
-  className: '',
-  active: false,
-  children: null,
-  dropdown: false,
-  hoverable: false,
-  dropdownUp: false,
-  renderAs: 'a',
-};
+    let Element = renderAs;
+    if (dropdown && Element === 'a') {
+      Element = 'span';
+    }
+    return (
+      <Element
+        {...props}
+        className={classnames('navbar-item', className, {
+          'is-active': active,
+          'has-dropdown': dropdown,
+          'is-hoverable': hoverable,
+          'has-dropdown-up': dropdownUp,
+        })}
+      >
+        {children}
+      </Element>
+    );
+  }
+}
 
-export default Item;
diff --git a/src/components/navbar/components/link.js b/src/components/navbar/components/link.js
index 62c0ec1e..d750212f 100644
--- a/src/components/navbar/components/link.js
+++ b/src/components/navbar/components/link.js
@@ -2,35 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const Link = ({
-  className,
-  renderAs,
-  children,
-  ...props
-}) => {
-  const Element = renderAs;
-  return (
-    <Element
-      {...props}
-      className={classnames('navbar-link', className)}
-    >
-      {children}
-    </Element>
-  );
-};
+export default class NavbarLink extends React.PureComponent {
+  static displayName = 'Navbar.Link'
+  static propTypes = {
+    style: PropTypes.shape({}),
+    className: PropTypes.string,
+    children: PropTypes.node,
+    renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  }
 
-Link.propTypes = {
-  style: PropTypes.shape({}),
-  className: PropTypes.string,
-  children: PropTypes.node,
-  renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-};
+  static defaultProps = {
+    style: {},
+    className: '',
+    children: null,
+    renderAs: 'span',
+  }
+  render() {
+    const {
+      className,
+      renderAs,
+      children,
+      ...props
+    } = this.props;
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames('navbar-link', className)}
+      >
+        {children}
+      </Element>
+    );
+  }
+}
 
-Link.defaultProps = {
-  style: {},
-  className: '',
-  children: null,
-  renderAs: 'span',
-};
-
-export default Link;
diff --git a/src/components/navbar/components/menu.js b/src/components/navbar/components/menu.js
index 80efe767..a92c4d15 100644
--- a/src/components/navbar/components/menu.js
+++ b/src/components/navbar/components/menu.js
@@ -2,34 +2,40 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const Menu = ({
-  className,
-  active,
-  children,
-  ...props
-}) => (
-  <div
-    {...props}
-    className={classnames('navbar-menu', className, {
-      'is-active': active,
-    })}
-  >
-    {children}
-  </div>
-);
+export default class NavbarMenu extends React.PureComponent {
+  static displayName = 'Navbar.Menu'
+  static propTypes = {
+    style: PropTypes.shape({}),
+    className: PropTypes.string,
+    active: PropTypes.bool,
+    children: PropTypes.node,
+  }
 
-Menu.propTypes = {
-  style: PropTypes.shape({}),
-  className: PropTypes.string,
-  active: PropTypes.bool,
-  children: PropTypes.node,
-};
+  static defaultProps = {
+    style: {},
+    className: '',
+    active: false,
+    children: null,
+  }
 
-Menu.defaultProps = {
-  style: {},
-  className: '',
-  active: false,
-  children: null,
-};
+  render() {
+    const {
+      className,
+      active,
+      children,
+      ...props
+    } = this.props;
+
+    return (
+      <div
+        {...props}
+        className={classnames('navbar-menu', className, {
+          'is-active': active,
+        })}
+      >
+        {children}
+      </div>
+    );
+  }
+}
 
-export default Menu;
diff --git a/src/components/tabs/components/tab.js b/src/components/tabs/components/tab.js
index 85f0273d..ed1bfcfc 100644
--- a/src/components/tabs/components/tab.js
+++ b/src/components/tabs/components/tab.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class Tab extends PureComponent {
+  static displayName = 'Tabs.Tab'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/src/components/tag/components/tag-group.js b/src/components/tag/components/tag-group.js
index 22a53dcc..1f9c6f0a 100644
--- a/src/components/tag/components/tag-group.js
+++ b/src/components/tag/components/tag-group.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class TagGroup extends PureComponent {
+  static displayName = 'Tag.Group'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,