diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..c50c310
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,12 @@
+var gulp = require('gulp');
+var react = require('gulp-react');
+
+gulp.task('build', function () {
+    return gulp.src('Tabs.js')
+        .pipe(react({
+            harmony: true
+        }))
+        .pipe(gulp.dest('lib'));
+});
+
+gulp.task('default', ['build']);
\ No newline at end of file
diff --git a/lib/Tabs.js b/lib/Tabs.js
new file mode 100644
index 0000000..0693288
--- /dev/null
+++ b/lib/Tabs.js
@@ -0,0 +1,86 @@
+var React=require('react/addons');
+
+var getChildrenArray=function(context){
+	var children=[];
+	React.Children.forEach(context.props.children,function(child){
+		children.push(child);
+	});
+	return children;
+};
+
+var noop=function(){};
+
+var Tabs=React.createClass({displayName: "Tabs",
+	propTypes:{
+		defaultTabNum:React.PropTypes.number,
+		tabNames:React.PropTypes.array.isRequired,
+		willChange:React.PropTypes.func,
+		didChange:React.PropTypes.func,
+		classPrefix:React.PropTypes.string
+	},
+	getDefaultProps:function(){
+		return {
+			defaultTabNum:0,
+			willChange:noop,
+			didChange:noop,
+			classPrefix:''
+		};
+	},
+	getInitialState:function(){
+		return {activeTabNum:this.props.defaultTabNum};
+	},
+	setActiveTabNum:function(num,callback){
+		this.setState({activeTabNum:num},callback);
+	},
+	getActiveTabNum:function(){
+		return this.state.activeTabNum;
+	},
+	_change:function(e){
+		var oldActiveTabNum=this.state.activeTabNum;
+		var newActiveTabNum=parseInt(e.target.getAttribute('data-tabnum'));
+
+		var allowChange=this.props.willChange(newActiveTabNum,oldActiveTabNum);
+		if (typeof allowChange !== 'undefined' && !allowChange){
+			return;
+		}
+		var callback=function(){
+			this.props.didChange(newActiveTabNum,oldActiveTabNum);
+		}.bind(this);
+
+		this.setActiveTabNum(newActiveTabNum,callback);
+	},
+	render:function(){
+		var children=getChildrenArray(this);
+		var activeTabContent=children[this.state.activeTabNum];
+		var classPrefix=this.props.classPrefix;
+		var tabClassName=classPrefix+'tab';
+		var activeTabClassName=tabClassName+' '+classPrefix+'active-tab';
+
+		var tabs=this.props.tabNames.map(function(tabName,tabNum){
+			var isActive= tabNum===this.state.activeTabNum;
+			return (
+				React.createElement("span", {
+					key: 'tab-'+tabNum, 
+					className: isActive? activeTabClassName : tabClassName, 
+					"data-tabnum": tabNum, 
+					onClick: this._change
+				}, 
+					tabName
+				)
+
+					);
+		}.bind(this));
+
+		return (
+			React.createElement("div", null, 
+			React.createElement("nav", {className: classPrefix+'tab-container'}, tabs), 
+			activeTabContent
+			)
+
+		);
+	}
+
+});
+
+
+module.exports=Tabs;
\ No newline at end of file
diff --git a/package.json b/package.json
index e3b0f64..13ecf06 100755
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/mheiber/react-tabs-component"
   },
-  "main": "Tabs.js",
+  "main": "lib/Tabs.js",
   "dependencies": {
     "envify": "^3.4.0",
     "react": "^0.12.0",
@@ -36,6 +36,8 @@
     ]
   },
   "devDependencies": {
+    "gulp": "^3.8.11",
+    "gulp-react": "^3.0.1",
     "jest-cli": "0.4.0",
     "react-tools": "0.13.1",
     "reactify": "1.1.0"