diff --git a/docs/src/App.vue b/docs/src/App.vue
index 4e3a9c8..a9f2e60 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -107,6 +107,10 @@
                   <router-link exact to="/components/radio">Radio</router-link>
                 </md-list-item>
 
+                <md-list-item class="md-inset">
+                  <router-link exact to="/components/rating-bar">Rating Bar</router-link>
+                </md-list-item>
+
                 <md-list-item class="md-inset">
                   <router-link exact to="/components/select">Select</router-link>
                 </md-list-item>
diff --git a/docs/src/pages/components/RatingBar.vue b/docs/src/pages/components/RatingBar.vue
new file mode 100644
index 0000000..6f27e17
--- /dev/null
+++ b/docs/src/pages/components/RatingBar.vue
@@ -0,0 +1,33 @@
+<template>
+  <page-content page-title="Components - Radio">
+    <docs-component>
+      <div slot="description">
+        <p>Rating Bar can be used to show a rating to user or capture a rating from user.</p>
+        <p>The following classes can be applied to change the color palette:</p>
+        <ul class="md-body-2">
+          <li><code>md-primary</code></li>
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+        </ul>
+      </div>
+
+      <div slot="api">
+
+      </div>
+
+      <div slot="example">
+
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
diff --git a/docs/src/routes.js b/docs/src/routes.js
index 4f220ea..1753e43 100644
--- a/docs/src/routes.js
+++ b/docs/src/routes.js
@@ -23,6 +23,7 @@ const List = (r) => require.ensure([], () => r(require('./pages/components/List'
 const Menu = (r) => require.ensure([], () => r(require('./pages/components/Menu')), 'menu');
 const Progress = (r) => require.ensure([], () => r(require('./pages/components/Progress')), 'progress');
 const Radio = (r) => require.ensure([], () => r(require('./pages/components/Radio')), 'radio');
+const RatingBar = (r) => require.ensure([], () => r(require('./pages/components/RatingBar')), 'rating-bar');
 const Select = (r) => require.ensure([], () => r(require('./pages/components/Select')), 'select');
 const Sidenav = (r) => require.ensure([], () => r(require('./pages/components/Sidenav')), 'sidenav');
 const Snackbar = (r) => require.ensure([], () => r(require('./pages/components/Snackbar')), 'snackbar');
@@ -158,6 +159,11 @@ const components = [
     name: 'components:radio',
     component: Radio
   },
+  {
+    path: '/components/rating-bar',
+    name: 'components:rating-bar',
+    component: RatingBar
+  },
   {
     path: '/components/select',
     name: 'components:select',