diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts
index 2e9f24f39363..cf731c965252 100644
--- a/app/react/src/server/framework-preset-react-docgen.ts
+++ b/app/react/src/server/framework-preset-react-docgen.ts
@@ -1,15 +1,27 @@
 import { TransformOptions } from '@babel/core';
 import { Configuration } from 'webpack';
+import type { StorybookOptions } from '@storybook/core/types';
+
+const DEFAULT_DOCGEN = 'react-docgen-typescript';
+
+const getDocgen = (typescriptOptions: StorybookOptions['typescriptOptions']) => {
+  const docgen = typescriptOptions?.reactDocgen;
+  return typeof docgen === 'undefined' ? DEFAULT_DOCGEN : docgen;
+};
 
 export function babel(
   config: TransformOptions,
-  { typescript: { docgen = 'react-docgen-typescript' } = {} } = {}
+  { typescriptOptions }: StorybookOptions = { typescriptOptions: {} }
 ) {
+  const reactDocgen = getDocgen(typescriptOptions);
+  if (!reactDocgen) {
+    return config;
+  }
   return {
     ...config,
     overrides: [
       {
-        test: docgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+        test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
         plugins: [
           [
             require.resolve('babel-plugin-react-docgen'),
@@ -25,9 +37,10 @@ export function babel(
 
 export function webpackFinal(
   config: Configuration,
-  { typescript: { docgen = 'react-docgen-typescript' } } = { typescript: {} }
+  { typescriptOptions }: StorybookOptions = { typescriptOptions: {} }
 ) {
-  if (docgen !== 'react-docgen-typescript') return config;
+  const reactDocgen = getDocgen(typescriptOptions);
+  if (reactDocgen !== 'react-docgen-typescript') return config;
   return {
     ...config,
     module: {
@@ -35,7 +48,14 @@ export function webpackFinal(
       rules: [
         ...config.module.rules,
         {
-          loader: require.resolve('react-docgen-typescript-loader'),
+          test: /\.tsx?$/,
+          // include: path.resolve(__dirname, "../src"),
+          use: [
+            {
+              loader: require.resolve('react-docgen-typescript-loader'),
+              options: typescriptOptions?.reactDocgenTypescriptOptions,
+            },
+          ],
         },
       ],
     },
diff --git a/examples/react-ts/main.js b/examples/react-ts/main.js
index 752ddf1f25e9..e901e7decb65 100644
--- a/examples/react-ts/main.js
+++ b/examples/react-ts/main.js
@@ -1,7 +1,12 @@
 module.exports = {
   stories: ['./src/*.stories.*'],
+  addons: ['@storybook/addon-essentials'],
   typescript: {
     check: true,
     checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => ['label', 'disabled'].includes(prop.name),
+    },
   },
 };
diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json
index ee22103c642f..c5c9f2a57822 100644
--- a/examples/react-ts/package.json
+++ b/examples/react-ts/package.json
@@ -8,6 +8,7 @@
     "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll"
   },
   "dependencies": {
+    "@storybook/addon-essentials": "6.0.0-beta.7",
     "@storybook/react": "6.0.0-beta.7",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx
index 41ea8e4e19c0..b2350a28722f 100644
--- a/examples/react-ts/src/button.stories.tsx
+++ b/examples/react-ts/src/button.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import { argsStory } from '@storybook/react';
 import { Button } from './button';
 
-export default { component: Button, title: 'Examples / Button' };
+export default { component: Button, title: 'Examples/Button' };
 
-export const SimpleButton = () => <Button label="Click me" />;
+export const WithArgs = argsStory({ label: 'With args' });
+export const Basic = () => <Button label="Click me" />;
diff --git a/examples/react-ts/src/button.tsx b/examples/react-ts/src/button.tsx
index 9f2285349f2f..d91f88f34b38 100644
--- a/examples/react-ts/src/button.tsx
+++ b/examples/react-ts/src/button.tsx
@@ -1,7 +1,14 @@
 import React, { FC, ButtonHTMLAttributes } from 'react';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A label to show on the button
+   */
   label: string;
 }
 
-export const Button = ({ label }: ButtonProps) => <button type="button">{label}</button>;
+export const Button = ({ label, disabled }: ButtonProps) => (
+  <button type="button" disabled={disabled}>
+    {label}
+  </button>
+);
diff --git a/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button-ts.stories.storyshot b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button-ts.stories.storyshot
new file mode 100644
index 000000000000..7c84cb5492f3
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button-ts.stories.storyshot
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button (Typescript) Button Ts Story 1`] = `
+<button
+  class="button"
+>
+  Storybook has builtin Typescript support for Vue components
+</button>
+`;
diff --git a/lib/core/package.json b/lib/core/package.json
index fe53259c654c..2f05cf416e8e 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -20,6 +20,7 @@
   "files": [
     "dist/**/*",
     "dll/**/*",
+    "types/**/*",
     "README.md",
     "*.js",
     "*.d.ts",
diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js
index a01816dae014..5aff0e31b297 100644
--- a/lib/core/src/server/config.js
+++ b/lib/core/src/server/config.js
@@ -3,10 +3,10 @@ import loadPresets from './presets';
 import loadCustomPresets from './common/custom-presets';
 
 async function getPreviewWebpackConfig(options, presets) {
-  const babelOptions = await presets.apply('babel', {}, options);
+  const typescriptOptions = await presets.apply('typescript', {}, options);
+  const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions });
   const entries = await presets.apply('entries', [], options);
   const stories = await presets.apply('stories', [], options);
-  const typescriptOptions = await presets.apply('typescript', {}, options);
 
   return presets.apply(
     'webpack',
diff --git a/lib/core/types/index.ts b/lib/core/types/index.ts
new file mode 100644
index 000000000000..ed98b6d293a3
--- /dev/null
+++ b/lib/core/types/index.ts
@@ -0,0 +1,10 @@
+type ReactDocgen = 'react-docgen' | 'react-docgen-typescript' | false;
+
+export interface StorybookOptions {
+  typescriptOptions?: {
+    reactDocgen?: ReactDocgen;
+    reactDocgenTypescriptOptions?: any;
+    check?: boolean;
+    checkOptions?: any;
+  };
+}