diff --git a/examples/angular-cli/.storybook/addons.js b/examples/angular-cli/.storybook/addons.js
index c558d2235028..85b68e06ab66 100644
--- a/examples/angular-cli/.storybook/addons.js
+++ b/examples/angular-cli/.storybook/addons.js
@@ -4,3 +4,4 @@ import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-notes/register';
 import '@storybook/addon-knobs/register';
+import '@storybook/addon-options/register';
diff --git a/examples/angular-cli/.storybook/config.js b/examples/angular-cli/.storybook/config.js
index 8fb37a998635..b7d5eaf2e962 100644
--- a/examples/angular-cli/.storybook/config.js
+++ b/examples/angular-cli/.storybook/config.js
@@ -1,15 +1,20 @@
 import { configure } from '@storybook/angular';
+import { setOptions } from '@storybook/addon-options';
 import addCssWarning from '../src/cssWarning';
 
 addCssWarning();
 
+setOptions({
+  hierarchyRootSeparator: /\|/,
+});
+
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed
   require('../src/stories');
 
   // automatically import all story ts files that end with *.stories.ts
-  const req = require.context('../src/stories', true, /\.stories\.ts$/)
-  req.keys().forEach((filename) => req(filename))
+  const req = require.context('../src/stories', true, /\.stories\.ts$/);
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 03fa83d5a7f4..2862fd1d887c 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -33,6 +33,7 @@
     "@storybook/addon-actions": "^3.4.0-alpha.8",
     "@storybook/addon-links": "^3.4.0-alpha.8",
     "@storybook/addon-notes": "^3.4.0-alpha.8",
+    "@storybook/addon-options": "^3.4.0-alpha.8",
     "@storybook/addon-storyshots": "^3.4.0-alpha.8",
     "@storybook/addons": "^3.4.0-alpha.8",
     "@storybook/angular": "^3.4.0-alpha.8",
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
index 744f3a1be919..252d7be8acc7 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Actions Action and method 1`] = `
+exports[`Storyshots Addon|Actions Action and method 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c5=""
+    _nghost-c4=""
   >
     
         
     <button
-      _ngcontent-c5=""
+      _ngcontent-c4=""
     >
       Action and Method
     </button>
@@ -22,19 +22,19 @@ exports[`Storyshots Addon Actions Action and method 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Addon Actions Action only 1`] = `
+exports[`Storyshots Addon|Actions Action only 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c4=""
+    _nghost-c3=""
   >
     
         
     <button
-      _ngcontent-c4=""
+      _ngcontent-c3=""
     >
       Action only
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
index 59e126d4c6db..c33cc5239ccc 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Knobs All knobs 1`] = `
+exports[`Storyshots Addon|Knobs All knobs 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -84,7 +84,7 @@ exports[`Storyshots Addon Knobs All knobs 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Addon Knobs Simple 1`] = `
+exports[`Storyshots Addon|Knobs Simple 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
index 08d0da6171b5..a1b6f66194a9 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Another Button button with link to another story 1`] = `
+exports[`Storyshots Addon|Links button with link to another story 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c6=""
+    _nghost-c5=""
   >
     
         
     <button
-      _ngcontent-c6=""
+      _ngcontent-c5=""
     >
       Go to Welcome Story
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
index 94b5ff1c35a0..03dd16736718 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c8=""
+    _nghost-c7=""
   >
     
         
     <button
-      _ngcontent-c8=""
+      _ngcontent-c7=""
     >
       Notes with HTML
     </button>
@@ -22,19 +22,19 @@ exports[`Storyshots Addon Notes Note with HTML 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Addon Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes Simple note 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c7=""
+    _nghost-c6=""
   >
     
         
     <button
-      _ngcontent-c7=""
+      _ngcontent-c6=""
     >
       Notes on some Button
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot
new file mode 100644
index 000000000000..3616eacf80cd
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|ng-content Default 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    <storybook-with-ng-content>
+      <div
+        style="color: #1e88e5;"
+      >
+        <h1>
+          This is rendered in ng-content
+        </h1>
+      </div>
+    </storybook-with-ng-content>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot
new file mode 100644
index 000000000000..b2a69015ad53
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|Pipes Simple 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </storybook-name>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom|Pipes With Knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </storybook-name>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot
similarity index 51%
rename from examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
rename to examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot
index d927a530a22b..97aa11aaed47 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot
@@ -1,34 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Custom Pipe Default 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-name>
-    <h1>
-      CustomPipe: foobar
-    </h1>
-  </storybook-name>
-</storybook-dynamic-app-root>
-`;
-
-exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-name>
-    <h1>
-      CustomPipe: foobar
-    </h1>
-  </storybook-name>
-</storybook-dynamic-app-root>
-`;
-
-exports[`Storyshots Custom ngModule metadata simple 1`] = `
+exports[`Storyshots Custom|Providers Simple 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -55,7 +27,7 @@ exports[`Storyshots Custom ngModule metadata simple 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
+exports[`Storyshots Custom|Providers With knobs 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
index 454a8bf5b983..0b26e9da8a43 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Custom Style Default 1`] = `
+exports[`Storyshots Custom|Style Default 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -8,13 +8,13 @@ exports[`Storyshots Custom Style Default 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-c9=""
+      _nghost-c8=""
       ng-reflect-text="Button with custom styles"
     >
       
         
       <button
-        _ngcontent-c9=""
+        _ngcontent-c8=""
       >
         Button with custom styles
       </button>
@@ -25,24 +25,24 @@ exports[`Storyshots Custom Style Default 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Custom Style With Knobs 1`] = `
+exports[`Storyshots Custom|Style With Knobs 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <ng-component
-    _nghost-c10=""
+    _nghost-c9=""
   >
     <storybook-button-component
-      _ngcontent-c10=""
-      _nghost-c11=""
+      _ngcontent-c9=""
+      _nghost-c10=""
       ng-reflect-text="Button with custom styles"
     >
       
         
       <button
-        _ngcontent-c11=""
+        _ngcontent-c10=""
       >
         Button with custom styles
       </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
index 4b9cce2ec8be..30483889802a 100644
--- a/examples/angular-cli/src/stories/__snapshots__/index.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
@@ -6,19 +6,22 @@ exports[`Storyshots Button with some emoji 1`] = `
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <storybook-button-component
-    _nghost-c3=""
-  >
-    
-        
-    <button
-      _ngcontent-c3=""
+  <ng-component>
+    <storybook-button-component
+      _nghost-c2=""
+      ng-reflect-text="😀 😎 👍 💯"
     >
-      😀 😎 👍 💯
-    </button>
-    
+      
+        
+      <button
+        _ngcontent-c2=""
+      >
+        😀 😎 👍 💯
+      </button>
+      
     
-  </storybook-button-component>
+    </storybook-button-component>
+  </ng-component>
 </storybook-dynamic-app-root>
 `;
 
@@ -29,13 +32,6 @@ exports[`Storyshots Button with text 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <ng-component>
-    
-        
-    <h1>
-       This is a template 
-    </h1>
-    
-        
     <storybook-button-component
       _nghost-c1=""
       ng-reflect-text="Hello Button"
@@ -50,39 +46,48 @@ exports[`Storyshots Button with text 1`] = `
       
     
     </storybook-button-component>
-    
-        
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
     <storybook-welcome-component
-      _nghost-c2=""
+      _nghost-c0=""
     >
       
         
       <main
-        _ngcontent-c2=""
+        _ngcontent-c0=""
       >
         
           
         <h1
-          _ngcontent-c2=""
+          _ngcontent-c0=""
         >
           Welcome to storybook
         </h1>
         
           
         <p
-          _ngcontent-c2=""
+          _ngcontent-c0=""
         >
           This is a UI component dev environment for your app.
         </p>
         
           
         <p
-          _ngcontent-c2=""
+          _ngcontent-c0=""
         >
           
             We've added some basic stories inside the 
           <span
-            _ngcontent-c2=""
+            _ngcontent-c0=""
             class="inline-code"
           >
             src/stories
@@ -90,14 +95,14 @@ exports[`Storyshots Button with text 1`] = `
            directory.
             
           <br
-            _ngcontent-c2=""
+            _ngcontent-c0=""
           />
           
             A story is a single state of one or more UI components. You can have as many stories as
             you want.
             
           <br
-            _ngcontent-c2=""
+            _ngcontent-c0=""
           />
           
             (Basically a story is like a visual test case.)
@@ -106,12 +111,12 @@ exports[`Storyshots Button with text 1`] = `
         
           
         <p
-          _ngcontent-c2=""
+          _ngcontent-c0=""
         >
           
             See these sample 
           <a
-            _ngcontent-c2=""
+            _ngcontent-c0=""
             role="button"
             tabindex="0"
           >
@@ -120,7 +125,7 @@ exports[`Storyshots Button with text 1`] = `
            for a component called
             
           <span
-            _ngcontent-c2=""
+            _ngcontent-c0=""
             class="inline-code"
           >
             Button
@@ -131,24 +136,24 @@ exports[`Storyshots Button with text 1`] = `
         
           
         <p
-          _ngcontent-c2=""
+          _ngcontent-c0=""
         >
           
             Just like that, you can add your own components as stories.
             
           <br
-            _ngcontent-c2=""
+            _ngcontent-c0=""
           />
           
             You can also edit those components and see changes right away.
             
           <br
-            _ngcontent-c2=""
+            _ngcontent-c0=""
           />
           
             (Try editing the 
           <span
-            _ngcontent-c2=""
+            _ngcontent-c0=""
             class="inline-code"
           >
             Button
@@ -156,7 +161,7 @@ exports[`Storyshots Button with text 1`] = `
            stories
             located at 
           <span
-            _ngcontent-c2=""
+            _ngcontent-c0=""
             class="inline-code"
           >
             src/stories/index.js
@@ -167,17 +172,17 @@ exports[`Storyshots Button with text 1`] = `
         
           
         <p
-          _ngcontent-c2=""
+          _ngcontent-c0=""
         >
           
             Usually we create stories with smaller UI components in the app.
           <br
-            _ngcontent-c2=""
+            _ngcontent-c0=""
           />
           
             Have a look at the 
           <a
-            _ngcontent-c2=""
+            _ngcontent-c0=""
             href="https://storybook.js.org/basics/writing-stories"
             rel="noopener noreferrer"
             target="_blank"
@@ -192,25 +197,25 @@ exports[`Storyshots Button with text 1`] = `
         
           
         <p
-          _ngcontent-c2=""
+          _ngcontent-c0=""
           class="note"
         >
           
             
           <b
-            _ngcontent-c2=""
+            _ngcontent-c0=""
           >
             NOTE:
           </b>
           
             
           <br
-            _ngcontent-c2=""
+            _ngcontent-c0=""
           />
           
             Have a look at the 
           <span
-            _ngcontent-c2=""
+            _ngcontent-c0=""
             class="inline-code"
           >
             .storybook/webpack.config.js
@@ -225,190 +230,6 @@ exports[`Storyshots Button with text 1`] = `
       
     
     </storybook-welcome-component>
-    
-      
   </ng-component>
 </storybook-dynamic-app-root>
 `;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-welcome-component
-    _nghost-c0=""
-  >
-    
-        
-    <main
-      _ngcontent-c0=""
-    >
-      
-          
-      <h1
-        _ngcontent-c0=""
-      >
-        Welcome to storybook
-      </h1>
-      
-          
-      <p
-        _ngcontent-c0=""
-      >
-        This is a UI component dev environment for your app.
-      </p>
-      
-          
-      <p
-        _ngcontent-c0=""
-      >
-        
-            We've added some basic stories inside the 
-        <span
-          _ngcontent-c0=""
-          class="inline-code"
-        >
-          src/stories
-        </span>
-         directory.
-            
-        <br
-          _ngcontent-c0=""
-        />
-        
-            A story is a single state of one or more UI components. You can have as many stories as
-            you want.
-            
-        <br
-          _ngcontent-c0=""
-        />
-        
-            (Basically a story is like a visual test case.)
-          
-      </p>
-      
-          
-      <p
-        _ngcontent-c0=""
-      >
-        
-            See these sample 
-        <a
-          _ngcontent-c0=""
-          role="button"
-          tabindex="0"
-        >
-          stories
-        </a>
-         for a component called
-            
-        <span
-          _ngcontent-c0=""
-          class="inline-code"
-        >
-          Button
-        </span>
-         .
-          
-      </p>
-      
-          
-      <p
-        _ngcontent-c0=""
-      >
-        
-            Just like that, you can add your own components as stories.
-            
-        <br
-          _ngcontent-c0=""
-        />
-        
-            You can also edit those components and see changes right away.
-            
-        <br
-          _ngcontent-c0=""
-        />
-        
-            (Try editing the 
-        <span
-          _ngcontent-c0=""
-          class="inline-code"
-        >
-          Button
-        </span>
-         stories
-            located at 
-        <span
-          _ngcontent-c0=""
-          class="inline-code"
-        >
-          src/stories/index.js
-        </span>
-        .)
-          
-      </p>
-      
-          
-      <p
-        _ngcontent-c0=""
-      >
-        
-            Usually we create stories with smaller UI components in the app.
-        <br
-          _ngcontent-c0=""
-        />
-        
-            Have a look at the 
-        <a
-          _ngcontent-c0=""
-          href="https://storybook.js.org/basics/writing-stories"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          
-              Writing Stories
-            
-        </a>
-         section in our documentation.
-          
-      </p>
-      
-          
-      <p
-        _ngcontent-c0=""
-        class="note"
-      >
-        
-            
-        <b
-          _ngcontent-c0=""
-        >
-          NOTE:
-        </b>
-        
-            
-        <br
-          _ngcontent-c0=""
-        />
-        
-            Have a look at the 
-        <span
-          _ngcontent-c0=""
-          class="inline-code"
-        >
-          .storybook/webpack.config.js
-        </span>
-        
-            to add webpack loaders and plugins you are using in this project.
-          
-      </p>
-      
-        
-    </main>
-    
-    
-  </storybook-welcome-component>
-</storybook-dynamic-app-root>
-`;
diff --git a/examples/angular-cli/src/stories/addon-actions.stories.ts b/examples/angular-cli/src/stories/addon-actions.stories.ts
index 6820b38ce4cb..6e20fd02b1ac 100644
--- a/examples/angular-cli/src/stories/addon-actions.stories.ts
+++ b/examples/angular-cli/src/stories/addon-actions.stories.ts
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/angular/demo';
 
-storiesOf('Addon Actions', module)
+storiesOf('Addon|Actions', module)
   .add('Action only', () => ({
     component: Button,
     props: {
diff --git a/examples/angular-cli/src/stories/addon-knobs.stories.ts b/examples/angular-cli/src/stories/addon-knobs.stories.ts
index 29708d2a8bb7..f4a1cd90b38c 100644
--- a/examples/angular-cli/src/stories/addon-knobs.stories.ts
+++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts
@@ -16,7 +16,7 @@ import {
 import { SimpleKnobsComponent } from './knobs.component';
 import { AllKnobsComponent } from './all-knobs.component';
 
-storiesOf('Addon Knobs', module)
+storiesOf('Addon|Knobs', module)
   .addDecorator(withKnobs)
   .add('Simple', () => {
     const name = text('name', 'John Doe');
diff --git a/examples/angular-cli/src/stories/addon-links.stories.ts b/examples/angular-cli/src/stories/addon-links.stories.ts
index c33f82b72565..61c583d620aa 100644
--- a/examples/angular-cli/src/stories/addon-links.stories.ts
+++ b/examples/angular-cli/src/stories/addon-links.stories.ts
@@ -2,7 +2,7 @@ import { linkTo } from '@storybook/addon-links';
 import { storiesOf } from '@storybook/angular';
 import { Button } from '@storybook/angular/demo';
 
-storiesOf('Another Button', module).add('button with link to another story', () => ({
+storiesOf('Addon|Links', module).add('button with link to another story', () => ({
   component: Button,
   props: {
     text: 'Go to Welcome Story',
diff --git a/examples/angular-cli/src/stories/addon-notes.stories.ts b/examples/angular-cli/src/stories/addon-notes.stories.ts
index 64468bb5e256..c47e63d39cba 100644
--- a/examples/angular-cli/src/stories/addon-notes.stories.ts
+++ b/examples/angular-cli/src/stories/addon-notes.stories.ts
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/angular';
 import { withNotes } from '@storybook/addon-notes';
 import { Button } from '@storybook/angular/demo';
 
-storiesOf('Addon Notes', module)
+storiesOf('Addon|Notes', module)
   .add(
     'Simple note',
     withNotes({ text: 'My notes on some button' })(() => ({
diff --git a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
index 84e7b5be377d..eb31a6b0eec5 100644
--- a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
@@ -89,3 +89,93 @@ exports[`Storyshots Component dependencies inputs and inject dependencies with k
   </storybook-di-component>
 </storybook-dynamic-app-root>
 `;
+
+exports[`Storyshots Custom|Dependencies inputs and inject dependencies 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-di-component>
+    <div>
+      
+    
+      <div>
+        All dependencies are defined: true
+      </div>
+      
+    
+      <div>
+        Title: Component dependencies
+      </div>
+      
+    
+      <div>
+        Injector: function Injector_(view, elDef) {
+          this.view = view;
+          this.elDef = elDef;
+      }
+      </div>
+      
+    
+      <div>
+        ElementRef: {"nativeElement":{}}
+      </div>
+      
+    
+      <div>
+        TestToken: 123
+      </div>
+      
+  
+    </div>
+    
+  
+  </storybook-di-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom|Dependencies inputs and inject dependencies with knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-di-component>
+    <div>
+      
+    
+      <div>
+        All dependencies are defined: true
+      </div>
+      
+    
+      <div>
+        Title: Component dependencies
+      </div>
+      
+    
+      <div>
+        Injector: function Injector_(view, elDef) {
+          this.view = view;
+          this.elDef = elDef;
+      }
+      </div>
+      
+    
+      <div>
+        ElementRef: {"nativeElement":{}}
+      </div>
+      
+    
+      <div>
+        TestToken: 123
+      </div>
+      
+  
+    </div>
+    
+  
+  </storybook-di-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
index e17f46d47c23..f72fd8e040a9 100644
--- a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
+++ b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/angular';
 import { withKnobs, text } from '@storybook/addon-knobs/angular';
 import { DiComponent } from './di.component';
 
-storiesOf('Component dependencies', module)
+storiesOf('Custom|Dependencies', module)
   .add('inputs and inject dependencies', () => ({
     component: DiComponent,
     props: {
diff --git a/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot
index d2a95b1f3523..937109ba6e3b 100644
--- a/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot
@@ -37,3 +37,41 @@ exports[`Storyshots Component styles Component with styles 1`] = `
   </storybook-styled-component>
 </storybook-dynamic-app-root>
 `;
+
+exports[`Storyshots Custom|styleUrls Component with styles 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-styled-component>
+    <div>
+      
+    
+      <p
+        class="red-color"
+      >
+        Styled with scoped CSS
+      </p>
+      
+    
+      <p
+        class="blue-color"
+      >
+        Styled with scoped SCSS
+      </p>
+      
+    
+      <p
+        class="green-color"
+      >
+        Styled with global CSS
+      </p>
+      
+  
+    </div>
+    
+  
+  </storybook-styled-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
index b1ec85245c3a..6df1a5405b29 100644
--- a/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
+++ b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/angular';
 import { StyledComponent } from './styled.component';
 
-storiesOf('Component styles', module).add('Component with styles', () => ({
+storiesOf('Custom|styleUrls', module).add('Component with styles', () => ({
   component: StyledComponent,
 }));
diff --git a/examples/angular-cli/src/stories/custom-metadata.stories.ts b/examples/angular-cli/src/stories/custom-metadata.stories.ts
deleted file mode 100644
index 48c03a3ed644..000000000000
--- a/examples/angular-cli/src/stories/custom-metadata.stories.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { storiesOf } from '@storybook/angular';
-import { withKnobs, text } from '@storybook/addon-knobs/angular';
-
-import { NameComponent } from './moduleMetadata/name.component';
-import { CustomPipePipe } from './moduleMetadata/custom.pipe';
-import { DummyService } from './moduleMetadata/dummy.service';
-import { ServiceComponent } from './moduleMetadata/service.component';
-
-storiesOf('Custom Pipe', module).add('Default', () => ({
-  component: NameComponent,
-  props: {
-    field: 'foobar',
-  },
-  moduleMetadata: {
-    imports: [],
-    schemas: [],
-    declarations: [CustomPipePipe],
-    providers: [],
-  },
-}));
-
-storiesOf('Custom Pipe/With Knobs', module)
-  .addDecorator(withKnobs)
-  .add('NameComponent', () => ({
-    component: NameComponent,
-    props: {
-      field: text('field', 'foobar'),
-    },
-    moduleMetadata: {
-      imports: [],
-      schemas: [],
-      declarations: [CustomPipePipe],
-      providers: [],
-    },
-  }));
-
-storiesOf('Custom ngModule metadata', module)
-  .add('simple', () => ({
-    component: ServiceComponent,
-    props: {
-      name: 'Static name',
-    },
-    moduleMetadata: {
-      imports: [],
-      schemas: [],
-      declarations: [],
-      providers: [DummyService],
-    },
-  }))
-  .addDecorator(withKnobs)
-  .add('with knobs', () => {
-    const name = text('name', 'Dynamic knob');
-
-    return {
-      component: ServiceComponent,
-      props: {
-        name,
-      },
-      moduleMetadata: {
-        imports: [],
-        schemas: [],
-        declarations: [],
-        providers: [DummyService],
-      },
-    };
-  });
diff --git a/examples/angular-cli/src/stories/custom-ng-content.stories.ts b/examples/angular-cli/src/stories/custom-ng-content.stories.ts
new file mode 100644
index 000000000000..5baa440d797b
--- /dev/null
+++ b/examples/angular-cli/src/stories/custom-ng-content.stories.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { storiesOf } from '@storybook/angular';
+
+@Component({
+  selector: 'storybook-with-ng-content',
+  template: `<div style="color: #1e88e5;"><ng-content></ng-content></div>`,
+})
+class WithNgContentComponent {}
+
+storiesOf('Custom|ng-content', module).add('Default', () => ({
+  template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
+  moduleMetadata: {
+    declarations: [WithNgContentComponent],
+  },
+}));
diff --git a/examples/angular-cli/src/stories/custom-pipes.stories.ts b/examples/angular-cli/src/stories/custom-pipes.stories.ts
new file mode 100644
index 000000000000..45b84c68ff0e
--- /dev/null
+++ b/examples/angular-cli/src/stories/custom-pipes.stories.ts
@@ -0,0 +1,32 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text } from '@storybook/addon-knobs/angular';
+
+import { NameComponent } from './moduleMetadata/name.component';
+import { CustomPipePipe } from './moduleMetadata/custom.pipe';
+
+storiesOf('Custom|Pipes', module)
+  .add('Simple', () => ({
+    component: NameComponent,
+    props: {
+      field: 'foobar',
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [CustomPipePipe],
+      providers: [],
+    },
+  }))
+  .addDecorator(withKnobs)
+  .add('With Knobs', () => ({
+    component: NameComponent,
+    props: {
+      field: text('field', 'foobar'),
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [CustomPipePipe],
+      providers: [],
+    },
+  }));
diff --git a/examples/angular-cli/src/stories/custom-providers.stories.ts b/examples/angular-cli/src/stories/custom-providers.stories.ts
new file mode 100644
index 000000000000..420c2f1c64a2
--- /dev/null
+++ b/examples/angular-cli/src/stories/custom-providers.stories.ts
@@ -0,0 +1,36 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text } from '@storybook/addon-knobs/angular';
+
+import { DummyService } from './moduleMetadata/dummy.service';
+import { ServiceComponent } from './moduleMetadata/service.component';
+
+storiesOf('Custom|Providers', module)
+  .add('Simple', () => ({
+    component: ServiceComponent,
+    props: {
+      name: 'Static name',
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [],
+      providers: [DummyService],
+    },
+  }))
+  .addDecorator(withKnobs)
+  .add('With knobs', () => {
+    const name = text('name', 'Dynamic knob');
+
+    return {
+      component: ServiceComponent,
+      props: {
+        name,
+      },
+      moduleMetadata: {
+        imports: [],
+        schemas: [],
+        declarations: [],
+        providers: [DummyService],
+      },
+    };
+  });
diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts
index 7bf4e59958c0..6d8cabd8f2df 100644
--- a/examples/angular-cli/src/stories/custom-styles.stories.ts
+++ b/examples/angular-cli/src/stories/custom-styles.stories.ts
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, text } from '@storybook/addon-knobs/angular';
 import { Button } from '@storybook/angular/demo';
 
-storiesOf('Custom Style', module)
+storiesOf('Custom|Style', module)
   .add('Default', () => ({
     template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
     moduleMetadata: {
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
index 63c11a12c5e8..1efc604e67ad 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
@@ -1,5 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Custom|ngModel custom ControlValueAccessor 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-custom-cva-component>
+    
+      
+    <div>
+      Type anything
+    </div>
+    
+      
+    <input
+      class="ng-untouched ng-pristine ng-valid"
+      ng-reflect-model="Type anything"
+      type="text"
+    />
+    
+    
+  </storybook-custom-cva-component>
+</storybook-dynamic-app-root>
+`;
+
 exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
index 441aa4459edc..500c43ac11f3 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
@@ -7,7 +7,7 @@ const description = `
   This is an example of component that implements ControlValueAccessor interface
 `;
 
-storiesOf('ngModel', module).add(
+storiesOf('Custom|ngModel', module).add(
   'custom ControlValueAccessor',
   withNotes(description)(() => ({
     component: CustomCvaComponent,
diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.ts
index 08fc7eac3698..625a86f6bc64 100644
--- a/examples/angular-cli/src/stories/index.ts
+++ b/examples/angular-cli/src/stories/index.ts
@@ -2,14 +2,18 @@ import { storiesOf } from '@storybook/angular';
 import { Welcome, Button } from '@storybook/angular/demo';
 
 storiesOf('Welcome', module).add('to Storybook', () => ({
-  component: Welcome,
+  template: `<storybook-welcome-component></storybook-welcome-component>`,
   props: {},
+  moduleMetadata: {
+    declarations: [Welcome],
+  },
 }));
 
 storiesOf('Button', module)
   .add('with text', () => ({
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
     moduleMetadata: {
-      declarations: [Button, Welcome],
+      declarations: [Button],
     },
     props: {
       text: 'Hello Button',
@@ -18,14 +22,12 @@ storiesOf('Button', module)
         console.log(event);
       },
     },
-    template: `
-      <h1> This is a template </h1>
-      <storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>
-      <storybook-welcome-component></storybook-welcome-component>
-    `,
   }))
   .add('with some emoji', () => ({
-    component: Button,
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+    moduleMetadata: {
+      declarations: [Button],
+    },
     props: {
       text: '😀 😎 👍 💯',
       onClick: () => {},
diff --git a/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot b/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot
index 67e21a5c1f77..720d41b34c54 100644
--- a/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot
+++ b/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot
@@ -1,5 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Custom|Inheritance base button 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-base-button>
+    
+      
+    <button>
+      this is label
+    </button>
+    
+    
+  </storybook-base-button>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom|Inheritance icon button 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-icon-button>
+    
+      
+    <button>
+      this is label - this is icon
+    </button>
+    
+    
+  </storybook-icon-button>
+</storybook-dynamic-app-root>
+`;
+
 exports[`Storyshots Inheritance base button 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
diff --git a/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts b/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
index 23cd031a3a0e..48b7ff887da6 100644
--- a/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
+++ b/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/angular';
 import { IconButtonComponent } from './icon-button.component';
 import { BaseButtonComponent } from './base-button.component';
 
-storiesOf('Inheritance', module)
+storiesOf('Custom|Inheritance', module)
   .add('icon button', () => ({
     component: IconButtonComponent,
     props: {
diff --git a/examples/polymer-cli/.storybook/addons.js b/examples/polymer-cli/.storybook/addons.js
index 1191fbebf304..40db03219095 100644
--- a/examples/polymer-cli/.storybook/addons.js
+++ b/examples/polymer-cli/.storybook/addons.js
@@ -2,3 +2,4 @@ import '@storybook/addon-actions/register';
 import '@storybook/addon-notes/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-viewport/register';
+import '@storybook/addon-options/register';
diff --git a/examples/polymer-cli/.storybook/config.js b/examples/polymer-cli/.storybook/config.js
index 37ff65014786..ae9f20d8481b 100644
--- a/examples/polymer-cli/.storybook/config.js
+++ b/examples/polymer-cli/.storybook/config.js
@@ -1,10 +1,15 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-
 import { configure } from '@storybook/polymer';
+import { setOptions } from '@storybook/addon-options';
+
+setOptions({
+  hierarchyRootSeparator: /\|/,
+});
 
 function loadStories() {
   require('../src/stories/index.stories');
-  require('../src/stories/advanced.stories');
+
+  const req = require.context('../src/stories', true, /\.stories\.js$/);
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index e697232008a6..da064a39a126 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -11,6 +11,7 @@
     "@storybook/addon-actions": "^3.4.0-alpha.8",
     "@storybook/addon-knobs": "^3.4.0-alpha.8",
     "@storybook/addon-notes": "^3.4.0-alpha.8",
+    "@storybook/addon-options": "^3.4.0-alpha.8",
     "@storybook/addon-viewport": "^3.4.0-alpha.8",
     "@storybook/polymer": "^3.4.0-alpha.8",
     "@webcomponents/webcomponentsjs": "^1.1.0",
diff --git a/examples/polymer-cli/src/playground-button.html b/examples/polymer-cli/src/playground-button.html
index 272d6b2acc0d..51a4b0ed5daa 100644
--- a/examples/polymer-cli/src/playground-button.html
+++ b/examples/polymer-cli/src/playground-button.html
@@ -4,7 +4,15 @@
   <template>
     <style>
       .square {
-        border: 1px solid black;
+        border: 1px solid #3c763d;
+        background-color: #5cb85c;
+        padding: 10px;
+      }
+      .rounded {
+        border-radius: 5px;
+        border: 1px solid #1b6d85;
+        background-color: #5bc0de;
+        padding: 10px;
       }
     </style>
     <button on-click="handleTap"
@@ -41,7 +49,7 @@
       }
 
       _computeClass(isSquare) {
-        return isSquare && 'square';
+        return isSquare ? 'square' : 'rounded';
       }
     }
 
diff --git a/examples/polymer-cli/src/stories/addon-actions.stories.js b/examples/polymer-cli/src/stories/addon-actions.stories.js
new file mode 100644
index 000000000000..a39f87544aa3
--- /dev/null
+++ b/examples/polymer-cli/src/stories/addon-actions.stories.js
@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/polymer';
+import { action } from '@storybook/addon-actions';
+import { document } from 'global';
+
+storiesOf('Addon|Actions', module)
+  .add('Action only', () => {
+    const el = document.createElement('playground-button');
+    el.addEventListener('click', action('log1'));
+    return el;
+  })
+  .add('Action and method', () => {
+    const el = document.createElement('playground-button');
+    el.addEventListener('click', e => action('log2')(e.target));
+    return el;
+  });
diff --git a/examples/polymer-cli/src/stories/addon-knobs.stories.js b/examples/polymer-cli/src/stories/addon-knobs.stories.js
new file mode 100644
index 000000000000..3473a82b7fe8
--- /dev/null
+++ b/examples/polymer-cli/src/stories/addon-knobs.stories.js
@@ -0,0 +1,56 @@
+import { storiesOf } from '@storybook/polymer';
+import { action } from '@storybook/addon-actions';
+import { document } from 'global';
+
+import {
+  withKnobs,
+  text,
+  button,
+  number,
+  select,
+  date,
+  color,
+  array,
+  boolean,
+} from '@storybook/addon-knobs/polymer';
+
+storiesOf('Addon|Knobs', module)
+  .addDecorator(withKnobs)
+  .add('simple', () => {
+    const title = text('Button title', 'Hello');
+    const el = document.createElement('playground-button');
+    el.setAttribute('title', title);
+    button('callback', () => el.setAttribute('title', 'testing'));
+    return el;
+  })
+  .add('complex', () => {
+    const name = text('Name', 'Jane');
+    const stock = number('Stock', 20, { range: true, min: 0, max: 30, step: 5 });
+    const fruits = { apples: 'Apple', bananas: 'Banana', cherries: 'Cherry' };
+    const fruit = select('Fruit', fruits, 'apple');
+    const price = number('Price', 2.25);
+    const colour = color('Border', 'deeppink');
+    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const nice = boolean('Nice', true);
+
+    const stockMessage = stock
+      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+    button('Arbitrary action', action('You clicked it!'));
+
+    return `
+          <div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
+            <h1>My name is ${name},</h1>
+            <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
+            <p>${stockMessage}</p>
+            <p>Also, I have:</p>
+            <ul>
+              ${items.map(item => `<li>${item}</li>`).join('')}
+            </ul>
+            <p>${nice ? 'Nice to meet you!' : 'Leave me alone!'}</p>
+          </div>
+        `;
+  });
diff --git a/examples/polymer-cli/src/stories/addon-notes.stories.js b/examples/polymer-cli/src/stories/addon-notes.stories.js
new file mode 100644
index 000000000000..cab392df79fe
--- /dev/null
+++ b/examples/polymer-cli/src/stories/addon-notes.stories.js
@@ -0,0 +1,23 @@
+import { storiesOf } from '@storybook/polymer';
+import { withNotes } from '@storybook/addon-notes';
+
+storiesOf('Addon|Notes', module)
+  .add(
+    'Simple note',
+    withNotes({ text: 'My notes on some bold text' })(
+      () =>
+        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>'
+    )
+  )
+  .add(
+    'Note with HTML',
+    withNotes({
+      text: `
+      <h2>My notes on emojies</h2>
+
+      <em>It's not all that important to be honest, but..</em>
+
+      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+    `,
+    })(() => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>')
+  );
diff --git a/examples/polymer-cli/src/stories/advanced.stories.js b/examples/polymer-cli/src/stories/advanced.stories.js
deleted file mode 100644
index 509e4b512e0a..000000000000
--- a/examples/polymer-cli/src/stories/advanced.stories.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import { storiesOf } from '@storybook/polymer';
-import { action } from '@storybook/addon-actions';
-import { withNotes } from '@storybook/addon-notes';
-import {
-  withKnobs,
-  text,
-  button,
-  number,
-  select,
-  date,
-  color,
-  array,
-  boolean,
-} from '@storybook/addon-knobs/polymer';
-import { document } from 'global';
-import '../polymer-playground-app.html';
-import '../playground-button.html';
-import '../separated-button/separated-button.html';
-import './storybook-welcome-to-polymer.html';
-
-storiesOf('Advanced/Decorator', module)
-  .addDecorator(story => {
-    const el = story();
-    el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
-    return el;
-  })
-  .add('example decoration', () => {
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', 'An example title');
-    return el;
-  });
-
-storiesOf('Advanced/Addon Actions', module)
-  .add('Action only', () => {
-    const el = document.createElement('playground-button');
-    el.addEventListener('click', action('log1'));
-    return el;
-  })
-  .add('Action and method', () => {
-    const el = document.createElement('playground-button');
-    el.addEventListener('click', e => action('log2')(e.target));
-    return el;
-  });
-
-storiesOf('Advanced/Addon Notes', module)
-  .add(
-    'Simple note',
-    withNotes({ text: 'My notes on some bold text' })(
-      () =>
-        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>'
-    )
-  )
-  .add(
-    'Note with HTML',
-    withNotes({
-      text: `
-      <h2>My notes on emojies</h2>
-
-      <em>It's not all that important to be honest, but..</em>
-
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    })(() => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>')
-  );
-
-storiesOf('Advanced/Addon Knobs', module)
-  .addDecorator(withKnobs)
-  .add('simple', () => {
-    const title = text('Button title', 'Hello');
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', title);
-    button('callback', () => el.setAttribute('title', 'testing'));
-    return el;
-  })
-  .add('complex', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, { range: true, min: 0, max: 30, step: 5 });
-    const fruits = { apples: 'Apple', bananas: 'Banana', cherries: 'Cherry' };
-    const fruit = select('Fruit', fruits, 'apple');
-    const price = number('Price', 2.25);
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
-
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
-
-    button('Arbitrary action', action('You clicked it!'));
-
-    return `
-          <div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
-            <h1>My name is ${name},</h1>
-            <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
-            <p>${stockMessage}</p>
-            <p>Also, I have:</p>
-            <ul>
-              ${items.map(item => `<li>${item}</li>`).join('')}
-            </ul>
-            <p>${nice ? 'Nice to meet you!' : 'Leave me alone!'}</p>
-          </div>
-        `;
-  });
diff --git a/examples/polymer-cli/src/stories/custom-decorators.stories.js b/examples/polymer-cli/src/stories/custom-decorators.stories.js
new file mode 100644
index 000000000000..c2ef4cdf3ddb
--- /dev/null
+++ b/examples/polymer-cli/src/stories/custom-decorators.stories.js
@@ -0,0 +1,14 @@
+import { storiesOf } from '@storybook/polymer';
+import { document } from 'global';
+
+storiesOf('Custom|Decorator', module)
+  .addDecorator(story => {
+    const el = story();
+    el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
+    return el;
+  })
+  .add('example decoration', () => {
+    const el = document.createElement('playground-button');
+    el.setAttribute('title', 'An example title');
+    return el;
+  });
diff --git a/examples/polymer-cli/src/stories/custom-rendering.stories.js b/examples/polymer-cli/src/stories/custom-rendering.stories.js
new file mode 100644
index 000000000000..d33bdc8c045f
--- /dev/null
+++ b/examples/polymer-cli/src/stories/custom-rendering.stories.js
@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/polymer';
+import { document } from 'global';
+import { StringTemplateButton } from '../string-template-button';
+
+import '../separated-button/separated-button.html';
+
+storiesOf('Custom|Methods for rendering', module)
+  .add('html string', () => '<div>Rendered with string</div>')
+  .add('html with custom elements', () => '<separated-button title="Click me!"></separated-button>')
+  .add('document.createElement', () => {
+    const el = document.createElement('playground-button');
+    el.setAttribute('title', 'Rendered with document.createElement');
+    return el;
+  })
+  .add('Polymer instance', () => new StringTemplateButton());
diff --git a/examples/polymer-cli/src/stories/index.stories.js b/examples/polymer-cli/src/stories/index.stories.js
index f17d1fa3dbee..641787592c40 100644
--- a/examples/polymer-cli/src/stories/index.stories.js
+++ b/examples/polymer-cli/src/stories/index.stories.js
@@ -1,34 +1,19 @@
 import { storiesOf } from '@storybook/polymer';
-import { withKnobs, text } from '@storybook/addon-knobs/polymer';
-import { document } from 'global';
+
 import '../polymer-playground-app.html';
 import '../playground-button.html';
-import '../separated-button/separated-button.html';
 import './storybook-welcome-to-polymer.html';
-import { StringTemplateButton } from '../string-template-button';
 
 storiesOf('Welcome', module).add(
   'Welcome',
   () => '<storybook-welcome-to-polymer></storybook-welcome-to-polymer>'
 );
 
-storiesOf('App', module)
-  .addDecorator(withKnobs)
-  .add('full app', () => {
-    const title = text('title', 'This title can be edited via a knob');
-    return `<polymer-playground-app title="${title}"></polymer-playground-app>`;
-  });
+storiesOf('App', module).add(
+  'full app',
+  () => '<polymer-playground-app title="Storybook fro Polymer"></polymer-playground-app>'
+);
 
 storiesOf('Button', module)
   .add('rounded', () => '<playground-button></playground-button>')
   .add('square', () => '<playground-button is-square></playground-button>');
-
-storiesOf('Methods for rendering', module)
-  .add('html string', () => '<div>Rendered with string</div>')
-  .add('html with custom elements', () => '<separated-button title="Click me!"></separated-button>')
-  .add('document.createElement', () => {
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', 'Rendered with document.createElement');
-    return el;
-  })
-  .add('Polymer instance', () => new StringTemplateButton());
diff --git a/examples/vue-kitchen-sink/.storybook/addons.js b/examples/vue-kitchen-sink/.storybook/addons.js
index 2d7b52c620bd..8f0c06885db4 100644
--- a/examples/vue-kitchen-sink/.storybook/addons.js
+++ b/examples/vue-kitchen-sink/.storybook/addons.js
@@ -3,3 +3,4 @@ import '@storybook/addon-links/register';
 import '@storybook/addon-notes/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-viewport/register';
+import '@storybook/addon-options/register';
\ No newline at end of file
diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js
index 385320a351f4..697f131b66da 100644
--- a/examples/vue-kitchen-sink/.storybook/config.js
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@@ -1,5 +1,5 @@
 import { configure } from '@storybook/vue';
-
+import { setOptions } from '@storybook/addon-options';
 import Vue from 'vue'
 import Vuex from 'vuex'
 
@@ -8,8 +8,15 @@ import MyButton from '../src/stories/Button.vue'
 Vue.component('my-button', MyButton);
 Vue.use(Vuex);
 
+setOptions({
+  hierarchyRootSeparator: /\|/,
+});
+
 function loadStories() {
   require('../src/stories');
+
+  const req = require.context('../src/stories', true, /\.stories\.js$/);
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 467067d8ef86..6f0e5d57140a 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -18,6 +18,7 @@
     "@storybook/addon-knobs": "^3.4.0-alpha.8",
     "@storybook/addon-links": "^3.4.0-alpha.8",
     "@storybook/addon-notes": "^3.4.0-alpha.8",
+    "@storybook/addon-options": "^3.4.0-alpha.8",
     "@storybook/addon-storyshots": "^3.4.0-alpha.8",
     "@storybook/addon-viewport": "^3.4.0-alpha.8",
     "@storybook/addons": "^3.4.0-alpha.8",
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..7691db827094
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action and method 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Action only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
new file mode 100644
index 000000000000..4838600b62f3
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Centered rounded 1`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
+>
+  <div
+    style="margin: auto;"
+  >
+    <button
+      class="button rounded"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with rounded edges!
+    </button>
+  </div>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..f2a13b0fcadf
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Knobs All knobs 1`] = `
+<div
+  style="padding: 8px 22px; border-radius: 8px;"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+   
+  <h3>
+    today is January 20, 2017
+  </h3>
+   
+  <p>
+    I have a stock of 20 apple, costing $2.25 each.
+  </p>
+   
+  <p>
+    Also, I have:
+  </p>
+   
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+   
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
new file mode 100644
index 000000000000..a005840d537d
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+<p>
+  🤔😳😯😮
+  <br />
+  😄😩😓😱
+  <br />
+  🤓😑😶😊
+</p>
+`;
+
+exports[`Storyshots Addon|Notes Simple note 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
new file mode 100644
index 000000000000..eb88673228af
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|Decorator for Vue render 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+    >
+      renders component: MyButton!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Custom|Decorator for Vue template 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      MyButton with template!
+    </button>
+  </div>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot
new file mode 100644
index 000000000000..b2c1b397beba
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered with JSX!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
+<p>
+  <em>
+    This component was pre-registered in .storybook/config.js
+  </em>
+  <br />
+   
+  <button
+    class="button"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
+<button
+  class="button"
+>
+  renders component: MyButton!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered in a template!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
+<p>
+  <em>
+    Clicking the button will navigate to another story using the 'addon-links'
+  </em>
+  <br />
+   
+  <button
+    class="button rounded"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template + props & methods!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with vuex: 0!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with awesomeness: 0!
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
index 8f065230c187..4ba02911bcbc 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
@@ -1,85 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Actions Action and method 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  Click me to log the action!
-</button>
-`;
-
-exports[`Storyshots Addon Actions Action only 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  Click me to log the action!
-</button>
-`;
-
-exports[`Storyshots Addon Knobs All knobs 1`] = `
-<div
-  style="padding: 8px 22px; border-radius: 8px;"
->
-  <h1>
-    My name is Jane,
-  </h1>
-   
-  <h3>
-    today is January 20, 2017
-  </h3>
-   
-  <p>
-    I have a stock of 20 apple, costing $2.25 each.
-  </p>
-   
-  <p>
-    Also, I have:
-  </p>
-   
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-   
-  <p>
-    Nice to meet you!
-  </p>
-</div>
-`;
-
-exports[`Storyshots Addon Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addon Notes Note with HTML 1`] = `
-<p>
-  🤔😳😯😮
-  <br />
-  😄😩😓😱
-  <br />
-  🤓😑😶😊
-</p>
-`;
-
-exports[`Storyshots Addon Notes Simple note 1`] = `
-<p>
-  <strong>
-    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
-  </strong>
-</p>
-`;
-
 exports[`Storyshots App App 1`] = `
 <div
   id="app"
@@ -177,163 +97,20 @@ exports[`Storyshots App App 1`] = `
 `;
 
 exports[`Storyshots Button rounded 1`] = `
-<div
-  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
->
-  <div
-    style="margin: auto;"
-  >
-    <button
-      class="button rounded"
-      style="color: rgb(66, 185, 131); border-color: #42b983;"
-    >
-      A Button with rounded edges!
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Button square 1`] = `
-<div
-  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
->
-  <div
-    style="margin: auto;"
-  >
-    <button
-      class="button"
-      style="color: rgb(66, 185, 131); border-color: #42b983;"
-    >
-      A Button with square edges!
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Decorator for Vue render 1`] = `
-<div
-  style="border: medium solid blue;"
->
-  <div
-    style="border: medium solid red;"
-  >
-    <button
-      class="button"
-    >
-      renders component: MyButton!
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Decorator for Vue template 1`] = `
-<div
-  style="border: medium solid blue;"
->
-  <div
-    style="border: medium solid red;"
-  >
-    <button
-      class="button"
-      style="color: rgb(66, 185, 131); border-color: #42b983;"
-    >
-      MyButton with template!
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Method for rendering Vue JSX 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  MyButton rendered with JSX!
-</button>
-`;
-
-exports[`Storyshots Method for rendering Vue pre-registered component 1`] = `
-<p>
-  <em>
-    This component was pre-registered in .storybook/config.js
-  </em>
-  <br />
-   
-  <button
-    class="button"
-    style="color: rgb(66, 185, 131); border-color: #42b983;"
-  >
-    MyButton rendered in a template!
-  </button>
-</p>
-`;
-
-exports[`Storyshots Method for rendering Vue render + component 1`] = `
-<button
-  class="button"
->
-  renders component: MyButton!
-</button>
-`;
-
-exports[`Storyshots Method for rendering Vue render 1`] = `
-<div>
-  renders a div with some text in it..
-</div>
-`;
-
-exports[`Storyshots Method for rendering Vue template + component 1`] = `
 <button
-  class="button"
+  class="button rounded"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
 >
-  MyButton rendered in a template!
+  A Button with rounded edges!
 </button>
 `;
 
-exports[`Storyshots Method for rendering Vue template + methods 1`] = `
-<p>
-  <em>
-    Clicking the button will navigate to another story using the 'addon-links'
-  </em>
-  <br />
-   
-  <button
-    class="button rounded"
-    style="color: rgb(66, 185, 131); border-color: #42b983;"
-  >
-    MyButton rendered in a template + props & methods!
-  </button>
-</p>
-`;
-
-exports[`Storyshots Method for rendering Vue template 1`] = `
-<div>
-  <h1>
-    A template
-  </h1>
-   
-  <p>
-    rendered in vue in storybook
-  </p>
-</div>
-`;
-
-exports[`Storyshots Method for rendering Vue vuex + actions 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  with vuex: 0!
-</button>
-`;
-
-exports[`Storyshots Method for rendering Vue whatever you want 1`] = `
+exports[`Storyshots Button square 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
 >
-  with awesomeness: 0!
+  A Button with square edges!
 </button>
 `;
 
diff --git a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
new file mode 100644
index 000000000000..e7c24137dda3
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Addon|Actions', module)
+  .add('Action only', () => ({
+    template: '<my-button :handle-click="log">Click me to log the action</my-button>',
+    methods: {
+      log: action('log1'),
+    },
+  }))
+  .add('Action and method', () => ({
+    template: '<my-button :handle-click="log">Click me to log the action</my-button>',
+    methods: {
+      log: e => {
+        e.preventDefault();
+        action('log2')(e.target);
+      },
+    },
+  }));
diff --git a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
new file mode 100644
index 000000000000..d202fc947c07
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
@@ -0,0 +1,11 @@
+import { storiesOf } from '@storybook/vue';
+import Centered from '@storybook/addon-centered';
+
+import MyButton from './Button.vue';
+
+storiesOf('Addon|Centered', module)
+  .addDecorator(Centered)
+  .add('rounded', () => ({
+    components: { MyButton },
+    template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
+  }));
diff --git a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
new file mode 100644
index 000000000000..a63f1646792f
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -0,0 +1,69 @@
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import {
+  withKnobs,
+  text,
+  number,
+  boolean,
+  array,
+  select,
+  color,
+  date,
+  button,
+} from '@storybook/addon-knobs/vue';
+
+storiesOf('Addon|Knobs', module)
+  .addDecorator(withKnobs)
+  .add('Simple', () => {
+    const name = text('Name', 'John Doe');
+    const age = number('Age', 44);
+    const content = `I am ${name} and I'm ${age} years old.`;
+
+    return {
+      template: `<div>${content}</div>`,
+    };
+  })
+  .add('All knobs', () => {
+    const name = text('Name', 'Jane');
+    const stock = number('Stock', 20, {
+      range: true,
+      min: 0,
+      max: 30,
+      step: 5,
+    });
+    const fruits = {
+      apples: 'Apple',
+      bananas: 'Banana',
+      cherries: 'Cherry',
+    };
+    const fruit = select('Fruit', fruits, 'apple');
+    const price = number('Price', 2.25);
+
+    const colour = color('Border', 'deeppink');
+    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const nice = boolean('Nice', true);
+
+    const stockMessage = stock
+      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+    button('Arbitrary action', action('You clicked it!'));
+
+    return {
+      template: `
+          <div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
+            <h1>My name is ${name},</h1>
+            <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
+            <p>${stockMessage}</p>
+            <p>Also, I have:</p>
+            <ul>
+              ${items.map(item => `<li key=${item}>${item}</li>`).join('')}
+            </ul>
+            <p>${salutation}</p>
+          </div>
+        `,
+    };
+  });
diff --git a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
new file mode 100644
index 000000000000..a35213b8ff2e
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
@@ -0,0 +1,25 @@
+import { storiesOf } from '@storybook/vue';
+import { withNotes } from '@storybook/addon-notes';
+
+storiesOf('Addon|Notes', module)
+  .add(
+    'Simple note',
+    withNotes({ text: 'My notes on some bold text' })(() => ({
+      template:
+        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
+    }))
+  )
+  .add(
+    'Note with HTML',
+    withNotes({
+      text: `
+      <h2>My notes on emojies</h2>
+
+      <em>It's not all that important to be honest, but..</em>
+
+      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+    `,
+    })(() => ({
+      template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>',
+    }))
+  );
diff --git a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
new file mode 100644
index 000000000000..3ff256088776
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
@@ -0,0 +1,33 @@
+import { storiesOf } from '@storybook/vue';
+
+import MyButton from './Button.vue';
+
+storiesOf('Custom|Decorator for Vue', module)
+  .addDecorator(story => {
+    // Decorated with story function
+    const WrapButton = story();
+    return {
+      components: { WrapButton },
+      template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
+      data() {
+        return { borderStyle: 'medium solid red' };
+      },
+    };
+  })
+  .addDecorator(() => ({
+    // Decorated with `story` component
+    template: '<div :style="{ border: borderStyle }"><story/></div>',
+    data() {
+      return {
+        borderStyle: 'medium solid blue',
+      };
+    },
+  }))
+  .add('template', () => ({
+    template: '<my-button>MyButton with template</my-button>',
+  }))
+  .add('render', () => ({
+    render(h) {
+      return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
+    },
+  }));
diff --git a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
new file mode 100644
index 000000000000..cfbde6349393
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
@@ -0,0 +1,92 @@
+import Vuex from 'vuex';
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './Button.vue';
+
+storiesOf('Custom|Method for rendering Vue', module)
+  .add('render', () => ({
+    render: h => h('div', ['renders a div with some text in it..']),
+  }))
+  .add('render + component', () => ({
+    render(h) {
+      return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
+    },
+  }))
+  .add('template', () => ({
+    template: `
+      <div>
+        <h1>A template</h1>
+        <p>rendered in vue in storybook</p>
+      </div>`,
+  }))
+  .add('template + component', () => ({
+    components: { MyButton },
+    template: '<my-button>MyButton rendered in a template</my-button>',
+  }))
+  .add('template + methods', () => ({
+    components: { MyButton },
+    template: `
+      <p>
+        <em>Clicking the button will navigate to another story using the 'addon-links'</em><br/>
+        <my-button :rounded="true" :handle-click="action">MyButton rendered in a template + props & methods</my-button>
+      </p>`,
+    methods: {
+      action: linkTo('Button'),
+    },
+  }))
+  .add('JSX', () => ({
+    components: { MyButton },
+    render() {
+      // eslint-disable-next-line react/react-in-jsx-scope
+      return <my-button>MyButton rendered with JSX</my-button>;
+    },
+  }))
+  .add('vuex + actions', () => ({
+    components: { MyButton },
+    template: '<my-button :handle-click="log">with vuex: {{ $store.state.count }}</my-button>',
+    store: new Vuex.Store({
+      state: { count: 0 },
+      mutations: {
+        increment(state) {
+          state.count += 1; // eslint-disable-line
+          action('vuex state')(state);
+        },
+      },
+    }),
+    methods: {
+      log() {
+        this.$store.commit('increment');
+      },
+    },
+  }))
+  .add('whatever you want', () => ({
+    components: { MyButton },
+    template:
+      '<my-button :handle-click="log">with awesomeness: {{ $store.state.count }}</my-button>',
+    store: new Vuex.Store({
+      state: { count: 0 },
+      mutations: {
+        increment(state) {
+          state.count += 1; // eslint-disable-line
+          action('vuex state')(state);
+        },
+      },
+    }),
+    methods: {
+      log() {
+        this.$store.commit('increment');
+      },
+    },
+  }))
+  .add('pre-registered component', () => ({
+    /* By pre-registering component in config.js,
+     * the need to register all components with each story is removed.
+     * You'll only need the template */
+    template: `
+      <p>
+        <em>This component was pre-registered in .storybook/config.js</em><br/>
+        <my-button>MyButton rendered in a template</my-button>
+      </p>`,
+  }));
diff --git a/examples/vue-kitchen-sink/src/stories/index.js b/examples/vue-kitchen-sink/src/stories/index.js
index 645a4b23cc32..1a6eb3db1688 100644
--- a/examples/vue-kitchen-sink/src/stories/index.js
+++ b/examples/vue-kitchen-sink/src/stories/index.js
@@ -1,24 +1,5 @@
-/* eslint-disable react/react-in-jsx-scope */
-
-import Vuex from 'vuex';
 import { storiesOf } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-import { withNotes } from '@storybook/addon-notes';
-import {
-  withKnobs,
-  text,
-  number,
-  boolean,
-  array,
-  select,
-  color,
-  date,
-  button,
-} from '@storybook/addon-knobs/vue';
-import Centered from '@storybook/addon-centered';
 
-import MyButton from './Button.vue';
 import Welcome from './Welcome.vue';
 import App from '../App.vue';
 
@@ -31,7 +12,6 @@ storiesOf('App', module).add('App', () => ({
 }));
 
 storiesOf('Button', module)
-  .addDecorator(Centered)
   // Works if Vue.component is called in the config.js in .storybook
   .add('rounded', () => ({
     template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
@@ -39,216 +19,3 @@ storiesOf('Button', module)
   .add('square', () => ({
     template: '<my-button :rounded="false">A Button with square edges</my-button>',
   }));
-
-storiesOf('Method for rendering Vue', module)
-  .add('render', () => ({
-    render: h => h('div', ['renders a div with some text in it..']),
-  }))
-  .add('render + component', () => ({
-    render(h) {
-      return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
-    },
-  }))
-  .add('template', () => ({
-    template: `
-      <div>
-        <h1>A template</h1>
-        <p>rendered in vue in storybook</p>
-      </div>`,
-  }))
-  .add('template + component', () => ({
-    components: { MyButton },
-    template: '<my-button>MyButton rendered in a template</my-button>',
-  }))
-  .add('template + methods', () => ({
-    components: { MyButton },
-    template: `
-      <p>
-        <em>Clicking the button will navigate to another story using the 'addon-links'</em><br/>
-        <my-button :rounded="true" :handle-click="action">MyButton rendered in a template + props & methods</my-button>
-      </p>`,
-    methods: {
-      action: linkTo('Button'),
-    },
-  }))
-  .add('JSX', () => ({
-    components: { MyButton },
-    render() {
-      return <my-button>MyButton rendered with JSX</my-button>;
-    },
-  }))
-  .add('vuex + actions', () => ({
-    components: { MyButton },
-    template: '<my-button :handle-click="log">with vuex: {{ $store.state.count }}</my-button>',
-    store: new Vuex.Store({
-      state: { count: 0 },
-      mutations: {
-        increment(state) {
-          state.count += 1; // eslint-disable-line
-          action('vuex state')(state);
-        },
-      },
-    }),
-    methods: {
-      log() {
-        this.$store.commit('increment');
-      },
-    },
-  }))
-  .add('whatever you want', () => ({
-    components: { MyButton },
-    template:
-      '<my-button :handle-click="log">with awesomeness: {{ $store.state.count }}</my-button>',
-    store: new Vuex.Store({
-      state: { count: 0 },
-      mutations: {
-        increment(state) {
-          state.count += 1; // eslint-disable-line
-          action('vuex state')(state);
-        },
-      },
-    }),
-    methods: {
-      log() {
-        this.$store.commit('increment');
-      },
-    },
-  }))
-  .add('pre-registered component', () => ({
-    /* By pre-registering component in config.js,
-     * the need to register all components with each story is removed.
-     * You'll only need the template */
-    template: `
-      <p>
-        <em>This component was pre-registered in .storybook/config.js</em><br/>
-        <my-button>MyButton rendered in a template</my-button>
-      </p>`,
-  }));
-
-storiesOf('Decorator for Vue', module)
-  .addDecorator(story => {
-    // Decorated with story function
-    const WrapButton = story();
-    return {
-      components: { WrapButton },
-      template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
-      data() {
-        return { borderStyle: 'medium solid red' };
-      },
-    };
-  })
-  .addDecorator(() => ({
-    // Decorated with `story` component
-    template: '<div :style="{ border: borderStyle }"><story/></div>',
-    data() {
-      return {
-        borderStyle: 'medium solid blue',
-      };
-    },
-  }))
-  .add('template', () => ({
-    template: '<my-button>MyButton with template</my-button>',
-  }))
-  .add('render', () => ({
-    render(h) {
-      return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
-    },
-  }));
-
-storiesOf('Addon Actions', module)
-  .add('Action only', () => ({
-    template: '<my-button :handle-click="log">Click me to log the action</my-button>',
-    methods: {
-      log: action('log1'),
-    },
-  }))
-  .add('Action and method', () => ({
-    template: '<my-button :handle-click="log">Click me to log the action</my-button>',
-    methods: {
-      log: e => {
-        e.preventDefault();
-        action('log2')(e.target);
-      },
-    },
-  }));
-
-storiesOf('Addon Notes', module)
-  .add(
-    'Simple note',
-    withNotes({ text: 'My notes on some bold text' })(() => ({
-      template:
-        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
-    }))
-  )
-  .add(
-    'Note with HTML',
-    withNotes({
-      text: `
-      <h2>My notes on emojies</h2>
-
-      <em>It's not all that important to be honest, but..</em>
-
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    })(() => ({
-      template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>',
-    }))
-  );
-
-storiesOf('Addon Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-    const content = `I am ${name} and I'm ${age} years old.`;
-
-    return {
-      template: `<div>${content}</div>`,
-    };
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      apples: 'Apple',
-      bananas: 'Banana',
-      cherries: 'Cherry',
-    };
-    const fruit = select('Fruit', fruits, 'apple');
-    const price = number('Price', 2.25);
-
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
-
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
-
-    button('Arbitrary action', action('You clicked it!'));
-
-    return {
-      template: `
-          <div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
-            <h1>My name is ${name},</h1>
-            <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
-            <p>${stockMessage}</p>
-            <p>Also, I have:</p>
-            <ul>
-              ${items.map(item => `<li key=${item}>${item}</li>`).join('')}
-            </ul>
-            <p>${salutation}</p>
-          </div>
-        `,
-    };
-  });
-
-/* eslint-enable react/react-in-jsx-scope */