diff --git a/src/templates/react-with-storybook.ts b/src/templates/react-with-storybook.ts
index 186aa6ee0..4f8699604 100644
--- a/src/templates/react-with-storybook.ts
+++ b/src/templates/react-with-storybook.ts
@@ -8,8 +8,12 @@ const storybookTemplate: Template = {
     '@babel/core',
     '@storybook/addon-actions',
     '@storybook/addon-links',
+    '@storybook/addon-info',
+    '@storybook/addon-docs',
     '@storybook/addons',
     '@storybook/react',
+    'react-docgen-typescript-loader',
+    'react-is',
     'babel-loader',
     'ts-loader',
   ],
diff --git a/templates/react-with-storybook/.storybook/addons.ts b/templates/react-with-storybook/.storybook/addons.ts
deleted file mode 100644
index 6aed412d0..000000000
--- a/templates/react-with-storybook/.storybook/addons.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
diff --git a/templates/react-with-storybook/.storybook/config.ts b/templates/react-with-storybook/.storybook/config.ts
deleted file mode 100644
index 5ded6090e..000000000
--- a/templates/react-with-storybook/.storybook/config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-configure(require.context('../stories', true, /\.stories\.(js|ts)x?$/), module);
diff --git a/templates/react-with-storybook/.storybook/main.js b/templates/react-with-storybook/.storybook/main.js
new file mode 100644
index 000000000..413d9ffff
--- /dev/null
+++ b/templates/react-with-storybook/.storybook/main.js
@@ -0,0 +1,24 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.(ts|tsx)'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+          },
+        },
+        {
+          loader: require.resolve('react-docgen-typescript-loader'),
+        },
+      ],
+    });
+
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    return config;
+  },
+};
diff --git a/templates/react-with-storybook/.storybook/webpack.config.js b/templates/react-with-storybook/.storybook/webpack.config.js
deleted file mode 100644
index 70264563f..000000000
--- a/templates/react-with-storybook/.storybook/webpack.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const path = require('path')
-module.exports = ({ config }) => {
-  config.module.rules.push({
-    test: /\.tsx?$/,
-    use: [
-      {
-        loader: require.resolve('ts-loader'),
-        options: {
-          reportFiles: ['stories/**/*.{ts|tsx}']
-        }
-      }
-    ]
-  })
-  config.resolve.extensions.push('.ts', '.tsx')
-  config.resolve.alias = Object.assign(config.resolve.alias, { '@': path.resolve(__dirname, '..') })
-  return config
-}
\ No newline at end of file
diff --git a/templates/react-with-storybook/src/index.tsx b/templates/react-with-storybook/src/index.tsx
index 19f82bd55..00e031166 100644
--- a/templates/react-with-storybook/src/index.tsx
+++ b/templates/react-with-storybook/src/index.tsx
@@ -1,6 +1,11 @@
-import * as React from 'react';
+import React, { FC, HTMLAttributes, ReactChild } from 'react';
 
-// Delete me
-export const Thing = () => {
-  return <div>the snozzberries taste like snozzberries</div>;
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactChild;
+}
+
+// Please do not use types off of a default export module or else Storybook Docs will suffer.
+// see: https://github.com/storybookjs/storybook/issues/9556
+export const Thing: FC<Props> = ({ children }) => {
+  return <div>{children || `the snozzberries taste like snozzberries`}</div>;
 };
diff --git a/templates/react-with-storybook/stories/0-Welcome.stories.tsx b/templates/react-with-storybook/stories/0-Welcome.stories.tsx
deleted file mode 100644
index 8160dc713..000000000
--- a/templates/react-with-storybook/stories/0-Welcome.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Thing } from '@';
-
-export default {
-  title: 'Welcome',
-};
-
-export const toStorybook = () => <Thing />;
-
-toStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/templates/react-with-storybook/stories/Thing.stories.tsx b/templates/react-with-storybook/stories/Thing.stories.tsx
new file mode 100644
index 000000000..276cd528e
--- /dev/null
+++ b/templates/react-with-storybook/stories/Thing.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Thing, Props } from '../src';
+
+export default {
+  title: 'Welcome',
+};
+
+// By passing optional props to this story, you can control the props of the component when
+// you consume the story in a test.
+export const Default = (props?: Partial<Props>) => <Thing {...props} />;
diff --git a/templates/react-with-storybook/test/blah.test.tsx b/templates/react-with-storybook/test/blah.test.tsx
index f05ba9b14..dd73ee473 100644
--- a/templates/react-with-storybook/test/blah.test.tsx
+++ b/templates/react-with-storybook/test/blah.test.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Thing } from '../src';
+import { Default as Thing } from '../stories/Thing.stories';
 
-describe('it', () => {
+describe('Thing', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<Thing />, div);