diff --git a/dist/react-simpletabs.js b/dist/react-simpletabs.js
index 9834249..5cfa79b 100644
--- a/dist/react-simpletabs.js
+++ b/dist/react-simpletabs.js
@@ -20,41 +20,41 @@
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
-/******/
+
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
-/******/
+
 /******/ 		// Check if module is in cache
 /******/ 		if(installedModules[moduleId])
 /******/ 			return installedModules[moduleId].exports;
-/******/
+
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = installedModules[moduleId] = {
 /******/ 			exports: {},
 /******/ 			id: moduleId,
 /******/ 			loaded: false
 /******/ 		};
-/******/
+
 /******/ 		// Execute the module function
 /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
+
 /******/ 		// Flag the module as loaded
 /******/ 		module.loaded = true;
-/******/
+
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
-/******/
-/******/
+
+
 /******/ 	// expose the modules object (__webpack_modules__)
 /******/ 	__webpack_require__.m = modules;
-/******/
+
 /******/ 	// expose the module cache
 /******/ 	__webpack_require__.c = installedModules;
-/******/
+
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
-/******/
+
 /******/ 	// Load entry module and return exports
 /******/ 	return __webpack_require__(0);
 /******/ })
@@ -84,10 +84,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    onMount: React.PropTypes.func,
 	    onBeforeChange: React.PropTypes.func,
 	    onAfterChange: React.PropTypes.func,
-	    children: React.PropTypes.oneOfType([
-	      React.PropTypes.array,
-	      React.PropTypes.element
-	    ]).isRequired
+	    children: React.PropTypes.node.isRequired
 	  },
 	  getDefaultProps:function () {
 	    return { tabActive: 1 };
@@ -142,16 +139,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	      throw new Error('Tabs must contain at least one Tabs.Panel');
 	    }
 
-	    if (!Array.isArray(this.props.children)) {
-	      this.props.children = [this.props.children];
-	    }
+	    var $menuItems = React.Children
+	      .map(this.props.children, function($panel, index)  {
+	        if (typeof $panel === 'function') {
+	          $panel = $panel()
+	        }
 
-	    var $menuItems = this.props.children
-	      .map(function($panel)  {return typeof $panel === 'function' ? $panel() : $panel;})
-	      .filter(function($panel)  {return $panel;})
-	      .map(function($panel, index)  {
 	        var ref = ("tab-menu-" + (index + 1));
 	        var title = $panel.props.title;
+
 	        var classes = classNames(
 	          'tabs-menu-item',
 	          this.state.tabActive === (index + 1) && 'is-active'
@@ -174,7 +170,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	  },
 	  _getSelectedPanel:function () {
 	    var index = this.state.tabActive - 1;
-	    var $panel = this.props.children[index];
+	    var $panel
+	    React.Children.forEach(this.props.children, function ($item, i) {
+	      if (index === i) {
+	        $panel = $item;
+	        return;
+	      }
+	    })
 
 	    return (
 	      React.createElement("article", {ref: "tab-panel", className: "tab-panel"}, 
@@ -187,11 +189,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	Tabs.Panel = React.createClass({
 	  displayName: 'Panel',
 	  propTypes: {
-	    title: React.PropTypes.string.isRequired,
-	    children: React.PropTypes.oneOfType([
-	      React.PropTypes.array,
+	    title: React.PropTypes.oneOfType([
+	      React.PropTypes.string,
 	      React.PropTypes.element
-	    ]).isRequired
+	    ]).isRequired,
+	    children: React.PropTypes.node.isRequired
 	  },
 	  render:function () {
 	    return React.createElement("div", null, this.props.children);
@@ -252,3 +254,4 @@ return /******/ (function(modules) { // webpackBootstrap
 /***/ }
 /******/ ])
 });
+;
\ No newline at end of file
diff --git a/dist/react-simpletabs.min.js b/dist/react-simpletabs.min.js
index 864e691..12bc1b0 100644
--- a/dist/react-simpletabs.min.js
+++ b/dist/react-simpletabs.min.js
@@ -7,4 +7,4 @@
  *  @author Pedro Nauck (https://github.com/pedronauck)
  * 
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactSimpleTabs=t(require("react")):e.ReactSimpleTabs=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var s=r[n]={exports:{},id:n,loaded:!1};return e[n].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";var n=r(1),s=r(2);r(3);var i=n.createClass({displayName:"Tabs",propTypes:{className:n.PropTypes.oneOfType([n.PropTypes.array,n.PropTypes.string,n.PropTypes.object]),tabActive:n.PropTypes.number,onMount:n.PropTypes.func,onBeforeChange:n.PropTypes.func,onAfterChange:n.PropTypes.func,children:n.PropTypes.oneOfType([n.PropTypes.array,n.PropTypes.element]).isRequired},getDefaultProps:function(){return{tabActive:1}},getInitialState:function(){return{tabActive:this.props.tabActive}},componentDidMount:function(){var e=this.state.tabActive,t=this.refs["tab-panel"],r=this.refs["tab-menu-"+e];this.props.onMount&&this.props.onMount(e,t,r)},componentWillReceiveProps:function(e){e.tabActive&&this.setState({tabActive:e.tabActive})},render:function(){var e=s("tabs",this.props.className);return n.createElement("div",{className:e},this._getMenuItems(),this._getSelectedPanel())},setActive:function(e,t){var r=this.props.onAfterChange,n=this.props.onBeforeChange,s=this.refs["tab-panel"],i=this.refs["tab-menu-"+e];if(n){var a=n(e,s,i);if(a===!1)return}this.setState({tabActive:e},function(){r&&r(e,s,i)}),t.preventDefault()},_getMenuItems:function(){if(!this.props.children)throw new Error("Tabs must contain at least one Tabs.Panel");Array.isArray(this.props.children)||(this.props.children=[this.props.children]);var e=this.props.children.map(function(e){return"function"==typeof e?e():e}).filter(function(e){return e}).map(function(e,t){var r="tab-menu-"+(t+1),i=e.props.title,a=s("tabs-menu-item",this.state.tabActive===t+1&&"is-active");return n.createElement("li",{ref:r,key:t,className:a},n.createElement("a",{href:"#",onClick:this.setActive.bind(this,t+1)},i))}.bind(this));return n.createElement("nav",{className:"tabs-navigation"},n.createElement("ul",{className:"tabs-menu"},e))},_getSelectedPanel:function(){var e=this.state.tabActive-1,t=this.props.children[e];return n.createElement("article",{ref:"tab-panel",className:"tab-panel"},t)}});i.Panel=n.createClass({displayName:"Panel",propTypes:{title:n.PropTypes.string.isRequired,children:n.PropTypes.oneOfType([n.PropTypes.array,n.PropTypes.element]).isRequired},render:function(){return n.createElement("div",null,this.props.children)}}),e.exports=i},function(t){t.exports=e},function(e){function t(){for(var e,r="",n=0;n<arguments.length;n++)if(e=arguments[n])if("string"==typeof e||"number"==typeof e)r+=" "+e;else if("[object Array]"===Object.prototype.toString.call(e))r+=" "+t.apply(null,e);else if("object"==typeof e)for(var s in e)e.hasOwnProperty(s)&&e[s]&&(r+=" "+s);return r.substr(1)}"undefined"!=typeof e&&e.exports&&(e.exports=t)},function(){}])});
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactSimpleTabs=t(require("react")):e.ReactSimpleTabs=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var s=n[r]={exports:{},id:r,loaded:!1};return e[r].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";var r=n(1),s=n(2);n(3);var i=r.createClass({displayName:"Tabs",propTypes:{className:r.PropTypes.oneOfType([r.PropTypes.array,r.PropTypes.string,r.PropTypes.object]),tabActive:r.PropTypes.number,onMount:r.PropTypes.func,onBeforeChange:r.PropTypes.func,onAfterChange:r.PropTypes.func,children:r.PropTypes.node.isRequired},getDefaultProps:function(){return{tabActive:1}},getInitialState:function(){return{tabActive:this.props.tabActive}},componentDidMount:function(){var e=this.state.tabActive,t=this.refs["tab-panel"],n=this.refs["tab-menu-"+e];this.props.onMount&&this.props.onMount(e,t,n)},componentWillReceiveProps:function(e){e.tabActive&&this.setState({tabActive:e.tabActive})},render:function(){var e=s("tabs",this.props.className);return r.createElement("div",{className:e},this._getMenuItems(),this._getSelectedPanel())},setActive:function(e,t){var n=this.props.onAfterChange,r=this.props.onBeforeChange,s=this.refs["tab-panel"],i=this.refs["tab-menu-"+e];if(r){var a=r(e,s,i);if(a===!1)return}this.setState({tabActive:e},function(){n&&n(e,s,i)}),t.preventDefault()},_getMenuItems:function(){if(!this.props.children)throw new Error("Tabs must contain at least one Tabs.Panel");var e=r.Children.map(this.props.children,function(e,t){"function"==typeof e&&(e=e());var n="tab-menu-"+(t+1),i=e.props.title,a=s("tabs-menu-item",this.state.tabActive===t+1&&"is-active");return r.createElement("li",{ref:n,key:t,className:a},r.createElement("a",{href:"#",onClick:this.setActive.bind(this,t+1)},i))}.bind(this));return r.createElement("nav",{className:"tabs-navigation"},r.createElement("ul",{className:"tabs-menu"},e))},_getSelectedPanel:function(){var e,t=this.state.tabActive-1;return r.Children.forEach(this.props.children,function(n,r){return t===r?void(e=n):void 0}),r.createElement("article",{ref:"tab-panel",className:"tab-panel"},e)}});i.Panel=r.createClass({displayName:"Panel",propTypes:{title:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.element]).isRequired,children:r.PropTypes.node.isRequired},render:function(){return r.createElement("div",null,this.props.children)}}),e.exports=i},function(t,n,r){t.exports=e},function(e,t,n){function r(){for(var e,t="",n=0;n<arguments.length;n++)if(e=arguments[n])if("string"==typeof e||"number"==typeof e)t+=" "+e;else if("[object Array]"===Object.prototype.toString.call(e))t+=" "+r.apply(null,e);else if("object"==typeof e)for(var s in e)e.hasOwnProperty(s)&&e[s]&&(t+=" "+s);return t.substr(1)}"undefined"!=typeof e&&e.exports&&(e.exports=r)},function(e,t,n){}])});
\ No newline at end of file
diff --git a/lib/__tests__/test-reactsimpletabs.jsx b/lib/__tests__/test-reactsimpletabs.jsx
index d97f00f..9ebea84 100644
--- a/lib/__tests__/test-reactsimpletabs.jsx
+++ b/lib/__tests__/test-reactsimpletabs.jsx
@@ -157,6 +157,21 @@ describe('Tabs', function() {
       expect(panel.getDOMNode().children[0].innerHTML).toEqual('content1');
       expect(menuItem.getDOMNode().children[0].innerHTML).toEqual('item1');
     });
+    it('handles component titles', function() {
+      var instance = TU.renderIntoDocument(
+        <Tabs>
+          <Tabs.Panel title={<span><i>1</i>item</span>}>content1</Tabs.Panel>
+          <Tabs.Panel title={<span><i>2</i>item</span>}>content2</Tabs.Panel>
+        </Tabs>
+      );
+
+      var menuItem = TU.findRenderedDOMComponentWithClass(instance, 'tabs-menu-item is-active');
+      var panel = TU.findRenderedDOMComponentWithClass(instance, 'tab-panel');
+      var title = menuItem.getDOMNode().children[0].children[0];
+
+      expect(title.children[0].innerHTML).toEqual('1');
+      expect(title.children[1].innerHTML).toEqual('item');
+    });
   });
 
   describe('onBeforeChange', function(){
diff --git a/lib/react-simpletabs.jsx b/lib/react-simpletabs.jsx
index 0b0dc2f..95e7e38 100644
--- a/lib/react-simpletabs.jsx
+++ b/lib/react-simpletabs.jsx
@@ -19,10 +19,7 @@ var Tabs = React.createClass({
     onMount: React.PropTypes.func,
     onBeforeChange: React.PropTypes.func,
     onAfterChange: React.PropTypes.func,
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.array,
-      React.PropTypes.element
-    ]).isRequired
+    children: React.PropTypes.node.isRequired
   },
   getDefaultProps () {
     return { tabActive: 1 };
@@ -77,16 +74,15 @@ var Tabs = React.createClass({
       throw new Error('Tabs must contain at least one Tabs.Panel');
     }
 
-    if (!Array.isArray(this.props.children)) {
-      this.props.children = [this.props.children];
-    }
+    var $menuItems = React.Children
+      .map(this.props.children, ($panel, index) => {
+        if (typeof $panel === 'function') {
+          $panel = $panel()
+        }
 
-    var $menuItems = this.props.children
-      .map($panel => typeof $panel === 'function' ? $panel() : $panel)
-      .filter($panel => $panel)
-      .map(($panel, index) => {
         var ref = `tab-menu-${index + 1}`;
         var title = $panel.props.title;
+
         var classes = classNames(
           'tabs-menu-item',
           this.state.tabActive === (index + 1) && 'is-active'
@@ -109,7 +105,13 @@ var Tabs = React.createClass({
   },
   _getSelectedPanel () {
     var index = this.state.tabActive - 1;
-    var $panel = this.props.children[index];
+    var $panel
+    React.Children.forEach(this.props.children, function ($item, i) {
+      if (index === i) {
+        $panel = $item;
+        return;
+      }
+    })
 
     return (
       <article ref='tab-panel' className='tab-panel'>
@@ -122,11 +124,11 @@ var Tabs = React.createClass({
 Tabs.Panel = React.createClass({
   displayName: 'Panel',
   propTypes: {
-    title: React.PropTypes.string.isRequired,
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.array,
+    title: React.PropTypes.oneOfType([
+      React.PropTypes.string,
       React.PropTypes.element
-    ]).isRequired
+    ]).isRequired,
+    children: React.PropTypes.node.isRequired
   },
   render () {
     return <div>{this.props.children}</div>;