diff --git a/lib/cli/generators/METEOR/template/.storybook/config.js b/lib/cli/generators/METEOR/template/.storybook/config.js
index 639b168f733c..924c2f16cf70 100644
--- a/lib/cli/generators/METEOR/template/.storybook/config.js
+++ b/lib/cli/generators/METEOR/template/.storybook/config.js
@@ -1,9 +1,4 @@
-import { configure } from '@storybook/react';
+import { load } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/lib/cli/generators/METEOR/template/stories/Button.stories.js b/lib/cli/generators/METEOR/template/stories/Button.stories.js
new file mode 100644
index 000000000000..2d2526055de9
--- /dev/null
+++ b/lib/cli/generators/METEOR/template/stories/Button.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
diff --git a/lib/cli/generators/METEOR/template/stories/Welcome.stories.js b/lib/cli/generators/METEOR/template/stories/Welcome.stories.js
new file mode 100644
index 000000000000..fe4de2145a69
--- /dev/null
+++ b/lib/cli/generators/METEOR/template/stories/Welcome.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/lib/cli/generators/METEOR/template/stories/index.stories.js b/lib/cli/generators/METEOR/template/stories/index.stories.js
deleted file mode 100644
index aa04241802db..000000000000
--- a/lib/cli/generators/METEOR/template/stories/index.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/lib/cli/generators/PREACT/template/.storybook/config.js b/lib/cli/generators/PREACT/template/.storybook/config.js
index f28fdabd458e..6779717ae05f 100644
--- a/lib/cli/generators/PREACT/template/.storybook/config.js
+++ b/lib/cli/generators/PREACT/template/.storybook/config.js
@@ -1,9 +1,4 @@
-import { configure } from '@storybook/preact';
+import { load } from '@storybook/preact';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/lib/cli/generators/PREACT/template/stories/Button.stories.js b/lib/cli/generators/PREACT/template/stories/Button.stories.js
new file mode 100644
index 000000000000..c4c4e533038c
--- /dev/null
+++ b/lib/cli/generators/PREACT/template/stories/Button.stories.js
@@ -0,0 +1,19 @@
+/** @jsx h */
+import { h } from 'preact';
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
diff --git a/lib/cli/generators/PREACT/template/stories/Welcome.stories.js b/lib/cli/generators/PREACT/template/stories/Welcome.stories.js
new file mode 100644
index 000000000000..0d0669ee4076
--- /dev/null
+++ b/lib/cli/generators/PREACT/template/stories/Welcome.stories.js
@@ -0,0 +1,15 @@
+/** @jsx h */
+import { h } from 'preact';
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/lib/cli/generators/PREACT/template/stories/index.stories.js b/lib/cli/generators/PREACT/template/stories/index.stories.js
deleted file mode 100644
index 6702ffd81bd3..000000000000
--- a/lib/cli/generators/PREACT/template/stories/index.stories.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/** @jsx h */
-import { h } from 'preact';
-
-import { storiesOf } from '@storybook/preact';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from './Welcome';
-import Button from './Button';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/lib/cli/generators/REACT/template/.storybook/config.js b/lib/cli/generators/REACT/template/.storybook/config.js
index 639b168f733c..924c2f16cf70 100644
--- a/lib/cli/generators/REACT/template/.storybook/config.js
+++ b/lib/cli/generators/REACT/template/.storybook/config.js
@@ -1,9 +1,4 @@
-import { configure } from '@storybook/react';
+import { load } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/lib/cli/generators/REACT/template/stories/Button.stories.js b/lib/cli/generators/REACT/template/stories/Button.stories.js
new file mode 100644
index 000000000000..2d2526055de9
--- /dev/null
+++ b/lib/cli/generators/REACT/template/stories/Button.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
diff --git a/lib/cli/generators/REACT/template/stories/Welcome.stories.js b/lib/cli/generators/REACT/template/stories/Welcome.stories.js
new file mode 100644
index 000000000000..fe4de2145a69
--- /dev/null
+++ b/lib/cli/generators/REACT/template/stories/Welcome.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/lib/cli/generators/REACT/template/stories/index.stories.js b/lib/cli/generators/REACT/template/stories/index.stories.js
deleted file mode 100644
index aa04241802db..000000000000
--- a/lib/cli/generators/REACT/template/stories/index.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js b/lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js
index 35430210ce65..e5ac6bc7a628 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js
+++ b/lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js
@@ -1,7 +1,4 @@
-import { configure } from '@storybook/react';
+import { load } from '@storybook/react';
 
-function loadStories() {
-  require('../src/stories');
-}
-
-configure(loadStories, module);
+// automatically import all files ending in *.stories.js
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.stories.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.stories.js
new file mode 100644
index 000000000000..2d2526055de9
--- /dev/null
+++ b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.stories.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.stories.js
new file mode 100644
index 000000000000..fe4de2145a69
--- /dev/null
+++ b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/index.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/index.js
deleted file mode 100644
index aa04241802db..000000000000
--- a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/lib/cli/generators/WEBPACK_REACT/template/.storybook/config.js b/lib/cli/generators/WEBPACK_REACT/template/.storybook/config.js
index 639b168f733c..924c2f16cf70 100644
--- a/lib/cli/generators/WEBPACK_REACT/template/.storybook/config.js
+++ b/lib/cli/generators/WEBPACK_REACT/template/.storybook/config.js
@@ -1,9 +1,4 @@
-import { configure } from '@storybook/react';
+import { load } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/Button.stories.js b/lib/cli/generators/WEBPACK_REACT/template/stories/Button.stories.js
new file mode 100644
index 000000000000..ebee8e0c1c99
--- /dev/null
+++ b/lib/cli/generators/WEBPACK_REACT/template/stories/Button.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+emoji.story = {
+  name: 'with emoji',
+};
diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/Welcome.stories.js b/lib/cli/generators/WEBPACK_REACT/template/stories/Welcome.stories.js
new file mode 100644
index 000000000000..fe4de2145a69
--- /dev/null
+++ b/lib/cli/generators/WEBPACK_REACT/template/stories/Welcome.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/index.stories.js b/lib/cli/generators/WEBPACK_REACT/template/stories/index.stories.js
deleted file mode 100644
index aa04241802db..000000000000
--- a/lib/cli/generators/WEBPACK_REACT/template/stories/index.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));