diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 39ba55d4..d6ed7bd4 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -6,15 +6,35 @@
 ```jsx
 import {Tab, Tabs} from 'react-toolbox';
 
-const TabsExample = () => (
-  <Tabs>
-    <Tab label='Primary'><small>Primary content</small></Tab>
-    <Tab label='Secondary'><small>Secondary content</small></Tab>
-    <Tab label='Third' disabled><small>Disabled content</small></Tab>
-    <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-    <Tab label='Fifth'><small>Fifth content</small></Tab>
-  </Tabs>
-);
+class TabsTest extends React.Component {
+  state = {
+    index: 1
+  };
+
+  handleTabChange = (index) => {
+    this.setState({index});
+  };
+
+  handleActive = () => {
+    console.log('Special one activated');
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Tabs</h5>
+        <p>This tabs can be disabled or hidden</p>
+        <Tabs index={this.state.index} onChange={this.handleTabChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+      </section>
+    );
+  }
+}
 ```
 
 ## Tabs
diff --git a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
index 84373983..fa36ddbf 100644
--- a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
@@ -1,11 +1,27 @@
-const TabsExample = () => (
-  <Tabs>
-    <Tab label='Primary'><small>Primary content</small></Tab>
-    <Tab label='Secondary'><small>Secondary content</small></Tab>
-    <Tab label='Third' disabled><small>Disabled content</small></Tab>
-    <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-    <Tab label='Fifth'><small>Fifth content</small></Tab>
-  </Tabs>
-);
+class TabsExample extends React.Component {
+  state = {
+    index: 1
+  };
+
+  handleTabChange = (index) => {
+    this.setState({index});
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Tabs</h5>
+        <p>This tabs can be disabled or hidden</p>
+        <Tabs index={this.state.index} onChange={this.handleTabChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary'><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+      </section>
+    );
+  }
+}
 
 return <TabsExample />;
diff --git a/spec/components/tabs.jsx b/spec/components/tabs.jsx
index 39318409..73d037f2 100644
--- a/spec/components/tabs.jsx
+++ b/spec/components/tabs.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Tabs, Tab } from '../../components/tabs';
 
 class TabsTest extends React.Component {
-
   state = {
     index: 1
   };
@@ -20,27 +19,12 @@ class TabsTest extends React.Component {
       <section>
         <h5>Tabs</h5>
         <p>This tabs can be disabled or hidden</p>
-
         <Tabs index={this.state.index} onChange={this.handleTabChange}>
-          <Tab label='Primary'>
-            <small>Primary content</small>
-          </Tab>
-
-          <Tab label='Secondary' onActive={this.handleActive}>
-            <small>Secondary content</small>
-          </Tab>
-
-          <Tab label='Third' disabled>
-            <small>Disabled content</small>
-          </Tab>
-
-          <Tab label='Fourth' hidden>
-            <small>Fourth content hidden</small>
-          </Tab>
-
-          <Tab label='Fifth'>
-            <small>Fifth content</small>
-          </Tab>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
         </Tabs>
       </section>
     );