diff --git a/.gitignore b/.gitignore
index 3969d0a..b2df391 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,6 @@ node_modules/*
 custom/*
 
 docs/index.md
+
+components/
+build/
\ No newline at end of file
diff --git a/component.json b/component.json
new file mode 100644
index 0000000..ccbf66c
--- /dev/null
+++ b/component.json
@@ -0,0 +1,23 @@
+{
+  "name": "stacked-bar",
+  "repo": "fredsterss/Chart.StackedBar.js",
+  "description": "Stacked bar for component/chart",
+  "version": "0.0.1",
+  "keywords": [
+    "bar chart"
+  ],
+  "dependencies": {},
+  "development": {
+    "component/chart": "*"
+  },
+  "license": "MIT",
+  "main": "src/Chart.StackedBar.js",
+  "scripts": [
+    "src/Chart.StackedBar.js"
+  ],
+  "remotes": [
+    "https://raw.githubusercontent.com",
+    "https://cdn.rawgit.com",
+    "https://rawgit.com"
+  ]
+}
\ No newline at end of file
diff --git a/samples/stacked-bar-using-component.html b/samples/stacked-bar-using-component.html
new file mode 100644
index 0000000..92e06f3
--- /dev/null
+++ b/samples/stacked-bar-using-component.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Stacked Bar Chart</title>
+    <script src="http://www.chartjs.org/assets/Chart.js"></script>
+    <script src="../build/build.js"></script>
+  </head>
+  <body>
+    <div style="width: 50%">
+      <canvas id="canvas" height="450" width="600"></canvas>
+    </div>
+
+
+  <script>
+  var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+
+  var barChartData = {
+    labels : ["January","February","March","April","May","June","July"],
+    datasets : [
+      {
+        fillColor : "rgba(220,220,220,0.5)",
+        strokeColor : "rgba(220,220,220,0.8)",
+        highlightFill: "rgba(220,220,220,0.75)",
+        highlightStroke: "rgba(220,220,220,1)",
+        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+      },
+      {
+        fillColor : "rgba(151,187,205,0.5)",
+        strokeColor : "rgba(151,187,205,0.8)",
+        highlightFill : "rgba(151,187,205,0.75)",
+        highlightStroke : "rgba(151,187,205,1)",
+        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+      },
+      {
+        fillColor : "rgba(240,73,73,0.5)",
+        strokeColor : "rgba(240,73,73,0.8)",
+        highlightFill : "rgba(240,73,73,0.75)",
+        highlightStroke : "rgba(240,73,73,1)",
+        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+      }
+    ]
+  };
+  window.onload = function(){
+    require('stacked-bar')
+    var ctx = document.getElementById("canvas").getContext("2d");
+    window.myBar = new Chart(ctx);
+    window.myBar.StackedBar(barChartData, {
+      responsive : true
+    });
+  };
+  </script>
+  </body>
+</html>
