diff --git a/README.md b/README.md
index 721c6f3c..17a9273b 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@
 
 `vue-mdc-adapter` is an integration of
 [Material Components](https://material.io/components/web/)
-for [Vue.js](https://vuejs.org) which follows the best practices 
+for [Vue.js](https://vuejs.org) which follows the best practices
 recommended by Google:
 [Using Foundations and Adapters](https://github.com/material-components/material-components-web/blob/master/docs/integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters)
 
@@ -47,11 +47,11 @@ customization while sticking to the _Vue Spirit_ (approachable, versatile, and p
 
 ## Quick Links
 
-- [Documentation & Demo](https://stasson.github.io/vue-mdc-adapter)
-- [CodePen](https://codepen.io/collection/XBpwxq/) & [CodeSandbox](https://codesandbox.io/s/r5o35xnn3q?module=%2Fsrc%2Fcomponents%2FHello.vue)
-- [Webpack Boilerplate](https://github.com/stasson/vue-mdc-adapter-template)
-- [Changelog](https://github.com/stasson/vue-mdc-adapter/blob/master/CHANGELOG.md)
-- [Contributing](https://github.com/stasson/vue-mdc-adapter/blob/master/CONTRIBUTING.md)
+* [Documentation & Demo](https://stasson.github.io/vue-mdc-adapter)
+* [CodePen](https://codepen.io/collection/XBpwxq/) & [CodeSandbox](https://codesandbox.io/s/r5o35xnn3q?module=%2Fsrc%2Fcomponents%2FHello.vue)
+* [Webpack Boilerplate](https://github.com/stasson/vue-mdc-adapter-template)
+* [Changelog](https://github.com/stasson/vue-mdc-adapter/blob/master/CHANGELOG.md)
+* [Contributing](https://github.com/stasson/vue-mdc-adapter/blob/master/CONTRIBUTING.md)
 
 ## Project Status
 
@@ -61,42 +61,42 @@ Do not hesitate to open an issue on [GitHub](https://github.com/stasson/vue-mdc-
 contact us on [Gitter](https://gitter.im/vue-mdc-adapter/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge),
 or follow us on Twitter [@vuemdc](https://twitter.com/vuemdc)
 
-> Each MDCWeb component is mapped to a single vue plugin 
-
-- [x] [button](https://stasson.github.io/vue-mdc-adapter/#/component/button) 
-- [x] [card](https://stasson.github.io/vue-mdc-adapter/#/component/card) 
-- [x] [checkbox](https://stasson.github.io/vue-mdc-adapter/#/component/checkbox) 
-- [x] [dialog](https://stasson.github.io/vue-mdc-adapter/#/component/dialog) 
-- [x] [drawer](https://stasson.github.io/vue-mdc-adapter/#/component/drawer) 
-- [x] [fab](https://stasson.github.io/vue-mdc-adapter/#/component/fab) 
-- [x] [grid-list](https://stasson.github.io/vue-mdc-adapter/#/component/grid-list) 
-- [x] [icon-toggle](https://stasson.github.io/vue-mdc-adapter/#/component/icon-toggle) 
-- [x] [layout-grid](https://stasson.github.io/vue-mdc-adapter/#/component/layout-grid) 
-- [x] [linear-progress](https://stasson.github.io/vue-mdc-adapter/#/component/linear-progress) 
-- [x] [list](https://stasson.github.io/vue-mdc-adapter/#/component/list) 
-- [x] [menu](https://stasson.github.io/vue-mdc-adapter/#/component/menu) 
-- [x] [radio](https://stasson.github.io/vue-mdc-adapter/#/component/radio) 
-- [x] [select](https://stasson.github.io/vue-mdc-adapter/#/component/select) 
-- [x] [slider](https://stasson.github.io/vue-mdc-adapter/#/component/slider) 
-- [x] [snackbar](https://stasson.github.io/vue-mdc-adapter/#/component/snackbar) 
-- [x] [switch](https://stasson.github.io/vue-mdc-adapter/#/component/switch) 
-- [x] [tabs](https://stasson.github.io/vue-mdc-adapter/#/component/tabs) 
-- [x] [textfield](https://stasson.github.io/vue-mdc-adapter/#/component/textfield) 
-- [x] [toolbar](https://stasson.github.io/vue-mdc-adapter/#/component/toolbar) 
-- [x] [typography](https://stasson.github.io/vue-mdc-adapter/#/component/typography) 
+> Each MDCWeb component is mapped to a single vue plugin
+
+* [x] [button](https://stasson.github.io/vue-mdc-adapter/#/component/button)
+* [x] [card](https://stasson.github.io/vue-mdc-adapter/#/component/card)
+* [x] [checkbox](https://stasson.github.io/vue-mdc-adapter/#/component/checkbox)
+* [x] [chips](https://stasson.github.io/vue-mdc-adapter/#/component/chips)
+* [x] [dialog](https://stasson.github.io/vue-mdc-adapter/#/component/dialog)
+* [x] [drawer](https://stasson.github.io/vue-mdc-adapter/#/component/drawer)
+* [x] [fab](https://stasson.github.io/vue-mdc-adapter/#/component/fab)
+* [x] [grid-list](https://stasson.github.io/vue-mdc-adapter/#/component/grid-list)
+* [x] [icon-toggle](https://stasson.github.io/vue-mdc-adapter/#/component/icon-toggle)
+* [x] [layout-grid](https://stasson.github.io/vue-mdc-adapter/#/component/layout-grid)
+* [x] [linear-progress](https://stasson.github.io/vue-mdc-adapter/#/component/linear-progress)
+* [x] [list](https://stasson.github.io/vue-mdc-adapter/#/component/list)
+* [x] [menu](https://stasson.github.io/vue-mdc-adapter/#/component/menu)
+* [x] [radio](https://stasson.github.io/vue-mdc-adapter/#/component/radio)
+* [x] [select](https://stasson.github.io/vue-mdc-adapter/#/component/select)
+* [x] [slider](https://stasson.github.io/vue-mdc-adapter/#/component/slider)
+* [x] [snackbar](https://stasson.github.io/vue-mdc-adapter/#/component/snackbar)
+* [x] [switch](https://stasson.github.io/vue-mdc-adapter/#/component/switch)
+* [x] [tabs](https://stasson.github.io/vue-mdc-adapter/#/component/tabs)
+* [x] [textfield](https://stasson.github.io/vue-mdc-adapter/#/component/textfield)
+* [x] [toolbar](https://stasson.github.io/vue-mdc-adapter/#/component/toolbar)
+* [x] [typography](https://stasson.github.io/vue-mdc-adapter/#/component/typography)
 
 > Extra plugins
 
-- [x] [layout-app](https://stasson.github.io/vue-mdc-adapter/#/component/layout-app): provides a flexible layout to simplify toolbar vs drawer positioning
-- [x] [icon](https://stasson.github.io/vue-mdc-adapter/#/component/icon): provides a material icon wrapper with support for font-awesome, svg, etc.
-
+* [x] [layout-app](https://stasson.github.io/vue-mdc-adapter/#/component/layout-app): provides a flexible layout to simplify toolbar vs drawer positioning
+* [x] [icon](https://stasson.github.io/vue-mdc-adapter/#/component/icon): provides a material icon wrapper with support for font-awesome, svg, etc.
 
 ## Quick Start
 
 #### Playground
 
 Fork the [reference codepen template](https://codepen.io/stasson/pen/XzmMKp)
-or one of the [vue-mdc-adapter codepen collection](https://codepen.io/collection/XBpwxq/) 
+or one of the [vue-mdc-adapter codepen collection](https://codepen.io/collection/XBpwxq/)
 or the [CodeSandbox](https://codesandbox.io/s/r5o35xnn3q?module=%2Fsrc%2Fcomponents%2FHello.vue)
 
 #### CDN
diff --git a/components/chips/README.md b/components/chips/README.md
new file mode 100644
index 00000000..5cd77c47
--- /dev/null
+++ b/components/chips/README.md
@@ -0,0 +1,40 @@
+## Usage
+
+```html
+<mdc-chip-set>
+  <mdc-chip>Chip content 1</mdc-chip>
+  <mdc-chip>Chip content 2</mdc-chip>
+  <mdc-chip>Chip content 3</mdc-chip>
+</mdc-chip-set>
+```
+
+### props
+
+#### mdc-chip
+
+mdc-chip is a compact element that allows a user to enter information or select a choice. mdc-chip dispatches
+`@MDCChip:interaction` event.
+
+| prop           | Type    | Default  | Description                                 |
+| -------------- | ------- | -------- | ------------------------------------------- |
+| `event`        | String  | optional | optional event to emit on click             |
+| `event-target` | Object  | vm.$root | optional event target, defaults to root bus |
+| `event-args`   | Array   | []       | optional event args                         |
+| `icon`         | String  | optional | optional leading or trailing icon           |
+| `trailing`     | Boolean | false    | if true icon is a trailing icon             |
+
+> emits `@MDCChip:interaction` event with the chip as parameter
+
+### Chips with icons
+
+```html
+<mdc-chip-set>
+  <mdc-chip icon="save">Chip content 1</mdc-chip>
+  <mdc-chip icon="delete" trailing>Chip content 2</mdc-chip>
+  <mdc-chip>Chip content 3</mdc-chip>
+</mdc-chip-set>
+```
+
+### reference
+
+* <https://material.io/components/web/catalog/chips>
diff --git a/components/chips/demo.vue b/components/chips/demo.vue
new file mode 100644
index 00000000..da447565
--- /dev/null
+++ b/components/chips/demo.vue
@@ -0,0 +1,9 @@
+<template>
+<div class="mdc-demo mdc-demo--container">
+  <mdc-chip-set>
+    <mdc-chip>Chip content 1</mdc-chip>
+    <mdc-chip>Chip content 2</mdc-chip>
+    <mdc-chip>Chip content 3</mdc-chip>
+  </mdc-chip-set>
+</div>
+</template>
diff --git a/components/chips/entry.js b/components/chips/entry.js
new file mode 100644
index 00000000..3046c05b
--- /dev/null
+++ b/components/chips/entry.js
@@ -0,0 +1,6 @@
+import './styles.scss'
+import {autoInit} from '../base'
+import plugin from './index.js'
+export default plugin
+
+autoInit(plugin)
diff --git a/components/chips/index.js b/components/chips/index.js
new file mode 100644
index 00000000..7db03fb4
--- /dev/null
+++ b/components/chips/index.js
@@ -0,0 +1,13 @@
+import {BasePlugin} from '../base'
+import mdcChip from './mdc-chip.vue'
+import mdcChipSet from './mdc-chip-set.vue'
+
+export { 
+  mdcChip, 
+  mdcChipSet 
+}
+
+export default BasePlugin({
+  mdcChip, 
+  mdcChipSet 
+})
diff --git a/components/chips/mdc-chip-set.vue b/components/chips/mdc-chip-set.vue
new file mode 100644
index 00000000..0d4582c8
--- /dev/null
+++ b/components/chips/mdc-chip-set.vue
@@ -0,0 +1,30 @@
+<template>
+  <div ref="root" class="mdc-chip-set" :class="classes">
+    <slot></slot>
+  </div>  
+</template>
+
+<script>
+import MDCChipSetFoundation from '@material/chips/chip-set/foundation';
+
+export default {
+  name: 'mdc-chip-set',
+  props: {},
+  data() {
+    return {
+      classes: {},
+    };
+  },
+  methods: {},
+  mounted() {
+    this.foundation = new MDCChipSetFoundation({
+      hasClass: className => this.$refs.root.classList.contains(className),
+    });
+
+    this.foundation.init();
+  },
+  beforeDestroy() {
+    this.foundation.destroy();
+  },
+};
+</script>
diff --git a/components/chips/mdc-chip.vue b/components/chips/mdc-chip.vue
new file mode 100644
index 00000000..243b8449
--- /dev/null
+++ b/components/chips/mdc-chip.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="mdc-chip" :class="classes" :style="styles" tabindex="0" @click="dispatchEvent">
+    <div classes="mdc-chip__text">
+      <i class="material-icons mdc-chip__icon mdc-chip__icon--leading" v-if="icon && !trailing">{{icon}}</i>
+      <slot></slot>
+      <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button" v-if="icon && trailing">{{icon}}</i>
+    </div>
+  </div>  
+</template>
+
+<script>
+import MDCChipFoundation from '@material/chips/chip/foundation';
+import { CustomLinkMixin, DispatchEventMixin, emitCustomEvent } from '../base';
+import { RippleBase } from '../ripple';
+
+export default {
+  name: 'mdc-chip',
+  mixins: [CustomLinkMixin, DispatchEventMixin],
+  props: {
+    icon: [String],
+    trailing: Boolean,
+  },
+  data() {
+    return {
+      classes: {},
+      styles: {},
+    };
+  },
+  methods: {},
+  mounted() {
+    this.foundation = new MDCChipFoundation({
+      registerInteractionHandler: (type, handler) => this.$el.addEventListener(type, handler),
+      deregisterInteractionHandler: (type, handler) => this.$el.removeEventListener(type, handler),
+      notifyInteraction: () =>
+        emitCustomEvent(this.$el, MDCChipFoundation.strings.INTERACTION_EVENT, { chip: this }, true),
+    });
+
+    this.foundation.init();
+
+    this.ripple = new RippleBase(this);
+    this.ripple.init();
+  },
+  beforeDestroy() {
+    this.ripple.destroy();
+    this.foundation.destroy();
+  },
+};
+</script>
diff --git a/components/chips/styles.scss b/components/chips/styles.scss
new file mode 100644
index 00000000..c217582d
--- /dev/null
+++ b/components/chips/styles.scss
@@ -0,0 +1 @@
+@import '@material/chips/mdc-chips';
diff --git a/components/chips/test.spec.js b/components/chips/test.spec.js
new file mode 100644
index 00000000..64642ae1
--- /dev/null
+++ b/components/chips/test.spec.js
@@ -0,0 +1,4 @@
+import { pluginSanityCheck } from '../unit-test'
+import plugin from './index.js';
+
+pluginSanityCheck(__dirname, plugin)
diff --git a/components/index.js b/components/index.js
index 295c1013..9df3f46d 100644
--- a/components/index.js
+++ b/components/index.js
@@ -4,6 +4,7 @@
 import VueMDCButton from './button'
 import VueMDCCard from './card'
 import VueMDCCheckbox from './checkbox'
+import VueMDCChipSet from './chips'
 import VueMDCDialog from './dialog'
 import VueMDCDrawer from './drawer'
 import VueMDCElevation from './elevation'
@@ -34,6 +35,7 @@ export default {
     vm.use(VueMDCButton)
     vm.use(VueMDCCard)
     vm.use(VueMDCCheckbox)
+    vm.use(VueMDCChipSet)
     vm.use(VueMDCDialog)
     vm.use(VueMDCDrawer)
     vm.use(VueMDCElevation)
diff --git a/components/styles.scss b/components/styles.scss
index 3ec09e7c..fe39c4fe 100644
--- a/components/styles.scss
+++ b/components/styles.scss
@@ -1,26 +1,27 @@
-@import "./button/styles";
-@import "./card/styles";
-@import "./checkbox/styles";
-@import "./dialog/styles";
-@import "./drawer/styles";
-@import "./elevation/styles";
-@import "./fab/styles";
-@import "./grid-list/styles";
-@import "./icon/styles";
-@import "./icon-toggle/styles";
-@import "./layout-app/styles";
-@import "./layout-grid/styles";
-@import "./linear-progress/styles";
-@import "./list/styles";
-@import "./menu/styles";
-@import "./radio/styles";
-@import "./ripple/styles";
-@import "./select/styles";
-@import "./slider/styles";
-@import "./snackbar/styles";
-@import "./switch/styles";
-@import "./tabs/styles";
-@import "./textfield/styles";
-@import "./toolbar/styles";
-@import "./theme/styles";
-@import "./typography/styles";
+@import './button/styles';
+@import './card/styles';
+@import './checkbox/styles';
+@import './chips/styles';
+@import './dialog/styles';
+@import './drawer/styles';
+@import './elevation/styles';
+@import './fab/styles';
+@import './grid-list/styles';
+@import './icon/styles';
+@import './icon-toggle/styles';
+@import './layout-app/styles';
+@import './layout-grid/styles';
+@import './linear-progress/styles';
+@import './list/styles';
+@import './menu/styles';
+@import './radio/styles';
+@import './ripple/styles';
+@import './select/styles';
+@import './slider/styles';
+@import './snackbar/styles';
+@import './switch/styles';
+@import './tabs/styles';
+@import './textfield/styles';
+@import './toolbar/styles';
+@import './theme/styles';
+@import './typography/styles';
diff --git a/demo/component.vue b/demo/component.vue
index 42ecd5e7..2fb83bf2 100644
--- a/demo/component.vue
+++ b/demo/component.vue
@@ -17,86 +17,87 @@
 </template>
 
 <script>
-import links from './links.js'
+import links from './links.js';
 
 const titles = links.reduce((result, link) => {
-  return {...result,  ...{ [link.id]: link.title}}
-},{})
+  return { ...result, ...{ [link.id]: link.title } };
+}, {});
 
 const icons = links.reduce((result, link) => {
-  return {...result,  ...{ [link.id]: link.icon}}
-},{})
+  return { ...result, ...{ [link.id]: link.icon } };
+}, {});
 
 export default {
   components: {
-      'button-readme': () => import('../components/button/README.md'),
-      'card-readme': () => import('../components/card/README.md'),
-      'checkbox-readme': () => import('../components/checkbox/README.md'),
-      'dialog-readme': () => import('../components/dialog/README.md'),
-      'drawer-readme': () => import('../components/drawer/README.md'),
-      'fab-readme': () => import('../components/fab/README.md'),
-      'grid-list-readme': () => import('../components/grid-list/README.md'),
-      'icon-readme': () => import('../components/icon/README.md'),
-      'icon-toggle-readme': () => import('../components/icon-toggle/README.md'),
-      'layout-app-readme': () => import('../components/layout-app/README.md'),
-      'layout-grid-readme': () => import('../components/layout-grid/README.md'),
-      'linear-progress-readme': () => import('../components/linear-progress/README.md'),
-      'list-readme': () => import('../components/list/README.md'),
-      'menu-readme': () => import('../components/menu/README.md'),
-      'radio-readme': () => import('../components/radio/README.md'),
-      'select-readme': () => import('../components/select/README.md'),
-      'slider-readme': () => import('../components/slider/README.md'),
-      'snackbar-readme': () => import('../components/snackbar/README.md'),
-      'switch-readme': () => import('../components/switch/README.md'),
-      'tabs-readme': () => import('../components/tabs/README.md'),
-      'textfield-readme': () => import('../components/textfield/README.md'),
-      'toolbar-readme': () => import('../components/toolbar/README.md'),
-      'typography-readme': () => import('../components/typography/README.md'),
-
-      'button-demo': () => import('../components/button/demo.vue'),
-      'card-demo': () => import('../components/card/demo.vue'),
-      'checkbox-demo': () => import('../components/checkbox/demo.vue'),
-      'dialog-demo': () => import('../components/dialog/demo.vue'),
-      'drawer-demo': () => import('../components/drawer/demo.vue'),
-      'fab-demo': () => import('../components/fab/demo.vue'),
-      'grid-list-demo': () => import('../components/grid-list/demo.vue'),
-      'icon-demo': () => import('../components/icon/demo.vue'),
-      'icon-toggle-demo': () => import('../components/icon-toggle/demo.vue'),
-      'layout-app-demo': () => import('../components/layout-app/demo.vue'),
-      'layout-grid-demo': () => import('../components/layout-grid/demo.vue'),
-      'linear-progress-demo': () => import('../components/linear-progress/demo.vue'),
-      'list-demo': () => import('../components/list/demo.vue'),
-      'menu-demo': () => import('../components/menu/demo.vue'),
-      'radio-demo': () => import('../components/radio/demo.vue'),
-      'select-demo': () => import('../components/select/demo.vue'),
-      'slider-demo': () => import('../components/slider/demo.vue'),
-      'snackbar-demo': () => import('../components/snackbar/demo.vue'),
-      'switch-demo': () => import('../components/switch/demo.vue'),
-      'tabs-demo': () => import('../components/tabs/demo.vue'),
-      'textfield-demo': () => import('../components/textfield/demo.vue'),
-      'toolbar-demo': () => import('../components/toolbar/demo.vue'),
-      'typography-demo': () => import('../components/typography/demo.vue'),
+    'button-readme': () => import('../components/button/README.md'),
+    'card-readme': () => import('../components/card/README.md'),
+    'chips-readme': () => import('../components/chips/README.md'),
+    'checkbox-readme': () => import('../components/checkbox/README.md'),
+    'dialog-readme': () => import('../components/dialog/README.md'),
+    'drawer-readme': () => import('../components/drawer/README.md'),
+    'fab-readme': () => import('../components/fab/README.md'),
+    'grid-list-readme': () => import('../components/grid-list/README.md'),
+    'icon-readme': () => import('../components/icon/README.md'),
+    'icon-toggle-readme': () => import('../components/icon-toggle/README.md'),
+    'layout-app-readme': () => import('../components/layout-app/README.md'),
+    'layout-grid-readme': () => import('../components/layout-grid/README.md'),
+    'linear-progress-readme': () => import('../components/linear-progress/README.md'),
+    'list-readme': () => import('../components/list/README.md'),
+    'menu-readme': () => import('../components/menu/README.md'),
+    'radio-readme': () => import('../components/radio/README.md'),
+    'select-readme': () => import('../components/select/README.md'),
+    'slider-readme': () => import('../components/slider/README.md'),
+    'snackbar-readme': () => import('../components/snackbar/README.md'),
+    'switch-readme': () => import('../components/switch/README.md'),
+    'tabs-readme': () => import('../components/tabs/README.md'),
+    'textfield-readme': () => import('../components/textfield/README.md'),
+    'toolbar-readme': () => import('../components/toolbar/README.md'),
+    'typography-readme': () => import('../components/typography/README.md'),
 
+    'button-demo': () => import('../components/button/demo.vue'),
+    'card-demo': () => import('../components/card/demo.vue'),
+    'checkbox-demo': () => import('../components/checkbox/demo.vue'),
+    'chips-demo': () => import('../components/chips/demo.vue'),
+    'dialog-demo': () => import('../components/dialog/demo.vue'),
+    'drawer-demo': () => import('../components/drawer/demo.vue'),
+    'fab-demo': () => import('../components/fab/demo.vue'),
+    'grid-list-demo': () => import('../components/grid-list/demo.vue'),
+    'icon-demo': () => import('../components/icon/demo.vue'),
+    'icon-toggle-demo': () => import('../components/icon-toggle/demo.vue'),
+    'layout-app-demo': () => import('../components/layout-app/demo.vue'),
+    'layout-grid-demo': () => import('../components/layout-grid/demo.vue'),
+    'linear-progress-demo': () => import('../components/linear-progress/demo.vue'),
+    'list-demo': () => import('../components/list/demo.vue'),
+    'menu-demo': () => import('../components/menu/demo.vue'),
+    'radio-demo': () => import('../components/radio/demo.vue'),
+    'select-demo': () => import('../components/select/demo.vue'),
+    'slider-demo': () => import('../components/slider/demo.vue'),
+    'snackbar-demo': () => import('../components/snackbar/demo.vue'),
+    'switch-demo': () => import('../components/switch/demo.vue'),
+    'tabs-demo': () => import('../components/tabs/demo.vue'),
+    'textfield-demo': () => import('../components/textfield/demo.vue'),
+    'toolbar-demo': () => import('../components/toolbar/demo.vue'),
+    'typography-demo': () => import('../components/typography/demo.vue'),
   },
-  computed : {
+  computed: {
     demo() {
-      let key = this.$route.params.id + '-demo'
-      return (key in this.$options.components) ? key : undefined
+      let key = this.$route.params.id + '-demo';
+      return key in this.$options.components ? key : undefined;
     },
     readme() {
-      let key = this.$route.params.id + '-readme'
-      return (key in this.$options.components) ? key : undefined
+      let key = this.$route.params.id + '-readme';
+      return key in this.$options.components ? key : undefined;
+    },
+    title() {
+      return titles[this.$route.params.id].split(' ');
     },
-    title () {
-      return titles[this.$route.params.id].split(' ') 
+    icon() {
+      return icons[this.$route.params.id];
     },
-    icon () {
-      return icons[this.$route.params.id] 
-    }
   },
-  beforeRouteUpdate (to, from, next) {
-    this.$nextTick(() => scrollTo(0,0))
-    next()
+  beforeRouteUpdate(to, from, next) {
+    this.$nextTick(() => scrollTo(0, 0));
+    next();
   },
-}
+};
 </script>
diff --git a/demo/links.js b/demo/links.js
index e844c337..c1665dd8 100644
--- a/demo/links.js
+++ b/demo/links.js
@@ -1,7 +1,8 @@
 import {capitalize} from './utils'
 
 import icButton from  './assets/ic_button_24px.svg' 
-import icCard from  './assets/ic_card_24px.svg' 
+import icCard from  './assets/ic_card_24px.svg'
+import icChips from  './assets/ic_card_24px.svg' 
 import icComponent from  './assets/ic_component_24px.svg' 
 import icDialog from  './assets/ic_dialog_24px.svg' 
 import icList from  './assets/ic_list_24px.svg' 
@@ -33,6 +34,7 @@ export default [
   link('button', icButton),
   link('card', icCard),
   link('checkbox',icSelectionControl),
+  link('chips',icChips),
   link('dialog',icDialog),
   link('drawer',icSideNavigation),
   link('fab', icButton,'FAB', 'Floating Action Button'),
diff --git a/rollup.config.js b/rollup.config.js
index 40cfcce9..c1134c22 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -17,6 +17,7 @@ const PLUGINS = [
   'button',
   'card',
   'checkbox',
+  'chips',
   'dialog',
   'drawer',
   'elevation',