diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..07d3cb5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,43 @@
+# Created by http://www.gitignore.io
+
+### Editor
+*.swp
+
+### Node ###
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
+node_modules
+
+# Users Environment Variables
+.lock-wscript
+
+
+### Project ###
+
+.module-cache
+bower_components
+public/assets
+public/index.html
+public/*.gz
diff --git a/AUTHORS b/AUTHORS
new file mode 100644
index 0000000..e63069d
--- /dev/null
+++ b/AUTHORS
@@ -0,0 +1,2 @@
+tomchentw <developer@tomchentw.com> (https://github.com/tomchentw)
+yfxie <yfxie@me.com> (http://www.json.tw)
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d58906d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,49 @@
+# react-toastr [![Travis CI][travis-image]][travis-url] [![Quality][codeclimate-image]][codeclimate-url] [![Coverage][coveralls-image]][coveralls-url] [![Dependencies][gemnasium-image]][gemnasium-url]
+> React.js toastr component
+
+[![Version][npm-image]][npm-url]
+
+
+## Example
+
+
+## Usage
+
+### Options
+
+
+### Development
+
+```shell
+git clone ...
+npm i
+npm run dev
+```
+
+Then open `[http://localhost:8080](http://localhost:8080)`.
+
+
+## Contributing
+
+[![devDependency Status][david-dm-image]][david-dm-url]
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+
+[npm-image]: https://img.shields.io/npm/v/react-toastr.svg
+[npm-url]: https://www.npmjs.org/package/react-toastr
+
+[travis-image]: https://travis-ci.org/tomchentw/react-toastr.svg?branch=master
+[travis-url]: https://travis-ci.org/tomchentw/react-toastr
+[codeclimate-image]: https://img.shields.io/codeclimate/github/tomchentw/react-toastr.svg
+[codeclimate-url]: https://codeclimate.com/github/tomchentw/react-toastr
+[coveralls-image]: https://img.shields.io/coveralls/tomchentw/react-toastr.svg
+[coveralls-url]: https://coveralls.io/r/tomchentw/react-toastr
+[gemnasium-image]: https://gemnasium.com/tomchentw/react-toastr.svg
+[gemnasium-url]: https://gemnasium.com/tomchentw/react-toastr
+[david-dm-image]: https://david-dm.org/tomchentw/react-toastr/dev-status.svg?theme=shields.io
+[david-dm-url]: https://david-dm.org/tomchentw/react-toastr#info=devDependencies
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..0df1ea8
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,23 @@
+{
+  "name": "react-toastr",
+  "main": "index.js",
+  "version": "0.0.1",
+  "homepage": "https://github.com/tomchentw/react-toastr",
+  "authors": [
+    "tomchentw <developer@tomchentw.com>"
+  ],
+  "description": "React.js toastr component",
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "webpack.config.js"
+  ],
+  "devDependencies": {
+    "bootstrap-sass-official": "~3.2.0"
+  }
+}
diff --git a/client/index.jade b/client/index.jade
new file mode 100644
index 0000000..d96381b
--- /dev/null
+++ b/client/index.jade
@@ -0,0 +1,10 @@
+doctype html
+html
+  head
+    meta(http-equiv="Content-type" content="text/html; charset=utf-8")
+    title React Toastr | tomchentw
+    link(rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css")
+  body
+    #react-root
+    script(type="text/javascript" src="//fb.me/react-with-addons-0.11.1.min.js")
+    script(type="text/javascript" src="#{assetsByChunkName.main}")
diff --git a/client/scripts/index.js b/client/scripts/index.js
new file mode 100755
index 0000000..70def9e
--- /dev/null
+++ b/client/scripts/index.js
@@ -0,0 +1,19 @@
+/** @jsx React.DOM */
+require("../styles/index.scss");
+var React = require("react/addons");
+var Container = require("../../src");
+
+var Hello = React.createClass({
+  addAlert () {
+    this.refs.container.success("hi", "title~~~~");
+  },
+
+  render: function() {
+    return <div onClick={this.addAlert}>
+      <Container ref="container" className="toast-top-left" />
+      Hello {this.props.name}
+    </div>;
+  }
+});
+ 
+React.renderComponent(<Hello name="World" />, document.body);
diff --git a/client/styles/_bootstrap_override.scss b/client/styles/_bootstrap_override.scss
new file mode 100644
index 0000000..65204aa
--- /dev/null
+++ b/client/styles/_bootstrap_override.scss
@@ -0,0 +1,50 @@
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";
diff --git a/client/styles/_bootstrap_variables.scss b/client/styles/_bootstrap_variables.scss
new file mode 100644
index 0000000..af8bce3
--- /dev/null
+++ b/client/styles/_bootstrap_variables.scss
@@ -0,0 +1 @@
+$icon-font-path: "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0";
\ No newline at end of file
diff --git a/client/styles/index.scss b/client/styles/index.scss
new file mode 100644
index 0000000..2520803
--- /dev/null
+++ b/client/styles/index.scss
@@ -0,0 +1,2 @@
+@import "./bootstrap_variables";
+@import "./bootstrap_override";
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..95d71b2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "react-toastr",
+  "version": "0.0.4",
+  "description": "React.js toastr component",
+  "main": "lib/index.js",
+  "scripts": {
+    "postinstall": "bower install",
+    "build": "jsx --harmony ./src ./lib",
+    "dev": "npm run dev_server & npm run dev_jade",
+    "dev_build": "jade -o ./public -O `2>&1 >/dev/null webpack` ./client",
+    "dev_server": "webpack-dev-server --inline --hot --content-base ./public",
+    "dev_jade": "jade -o ./public -O '{\"assetsByChunkName\":{\"main\":\"assets/bundle.js\"}}' -w ./client/*.jade"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tomchentw/react-toastr"
+  },
+  "keywords": [
+    "LiveScript",
+    "gulp"
+  ],
+  "author": {
+    "name": "tomchentw",
+    "email": "developer@tomchentw.com",
+    "url": "https://github.com/tomchentw"
+  },
+  "license": {
+    "type": "MIT",
+    "url": "http://tomchentw.mit-license.org"
+  },
+  "bugs": {
+    "url": "https://github.com/tomchentw/react-toastr/issues"
+  },
+  "homepage": "https://github.com/tomchentw/react-toastr",
+  "devDependencies": {
+    "bower": "^1.3.9",
+    "css-loader": "^0.7.1",
+    "jade": "^1.5.0",
+    "jsx-loader": "^0.11.0",
+    "react-tools": "^0.11.1",
+    "sass-loader": "^0.2.0",
+    "style-loader": "^0.7.0",
+    "tomchentw-npm-dev": "0.0.13",
+    "webpack": "^1.3.3-beta1",
+    "webpack-dev-server": "^1.4.10"
+  },
+  "dependencies": {
+    "react": "^0.11.1"
+  }
+}
diff --git a/public/CNAME b/public/CNAME
new file mode 100644
index 0000000..e69de29
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..7f9ddc2
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,83 @@
+/** @jsx React.DOM */
+var React = require("react/addons");
+
+var AlertMessage = React.createClass({
+  displayName: "AlertMessage",
+
+  getDefaultProps () {
+    return {
+      className: "toast-info",
+      titleClassName: "toast-title",
+      messageClassName: "toast-message",
+      closeButton: false
+    };
+  },
+
+  _render_close_button (props) {
+    return props.closeButton ? (
+      <button className="toast-close-button" role="button">&times;</button>
+    ) : false;
+  },
+
+  _render_title_element (props) {
+    return props.title ? (
+      <div className={props.titleClassName}>
+        {props.title}
+      </div>
+    ) : false;
+  },
+
+  _render_message_element (props) {
+    return props.message ? (
+      <div className={props.messageClassName}>
+        {props.message}
+      </div>
+    ) : false;
+  },
+
+  render () {
+    var cx = React.addons.classSet;
+    var props = this.props;
+    var toastClass = {
+      toast: true
+    };
+    toastClass[props.className] = true;
+     
+    return (
+      <div className={cx(toastClass)}>
+        {this._render_close_button(props)}
+        {this._render_title_element(props)}
+        {this._render_message_element(props)}
+      </div>
+    );
+  }
+});
+
+module.exports = React.createClass({
+  displayName: "Container",
+
+  getInitialState () {
+    return {
+      toasts: []
+    };
+  },
+
+  success(message, title, optionsOverride) {
+    this.state.toasts.push({
+      title,
+      message,
+      className: "toast-success"// error, info, success, warning
+    });
+    this.setState(this.state);
+  }, 
+
+  render () {
+    return this.transferPropsTo(
+      <div aria-live="polite" role="alert">
+        {this.state.toasts.map((toast) => {
+          return AlertMessage(toast);
+        })}
+      </div>
+    );
+  }
+});
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..f8fb2d3
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,41 @@
+var Path = require('path');
+var webpack = require('webpack');
+
+var JSX_LOADER = "jsx-loader?harmony";
+var SCSS_LOADER = "style-loader!css-loader!sass-loader?includePaths[]=" +
+        Path.resolve(__dirname, './bower_components/bootstrap-sass-official/assets/stylesheets');
+var IS_PRODUCTION = 'production' === process.env.NODE_ENV;
+
+var webpackConfig = module.exports = {
+  entry: "./client/scripts/index.js",
+  output: {
+    path: "./public",
+    filename: (IS_PRODUCTION ? "assets/[hash].js" : "assets/bundle.js")
+  },
+  externals: {
+    "react/addons": "React"
+  },
+  module: {
+    loaders: [
+      { test: /\.js(x?)$/, loader: JSX_LOADER },
+      { test: /\.scss$/, loader: SCSS_LOADER }
+    ]
+  },
+  plugins: [
+    function() {
+      this.plugin("done", function(stats) {
+        stats = stats.toJson();
+        console.error(JSON.stringify({
+          assetsByChunkName: stats.assetsByChunkName
+        }));
+      });
+    }
+  ]
+};
+
+if (IS_PRODUCTION) {
+  webpackConfig.plugins.push(
+    new webpack.optimize.UglifyJsPlugin(),
+    new webpack.optimize.DedupePlugin()
+  );
+}