diff --git a/packages/grafana-ui/.storybook/webpack.config.js b/packages/grafana-ui/.storybook/webpack.config.js
index 37d6ed67edc..2b0967ccee0 100644
--- a/packages/grafana-ui/.storybook/webpack.config.js
+++ b/packages/grafana-ui/.storybook/webpack.config.js
@@ -73,7 +73,7 @@ module.exports = ({ config, mode }) => {
     ],
   });
 
-  config.resolve.extensions.push('.ts', '.tsx');
+  config.resolve.extensions.push('.ts', '.tsx', '.mdx');
   config.stats = {
     warningsFilter: /export .* was not found in/,
   };
diff --git a/packages/grafana-ui/src/components/Switch/Switch.mdx b/packages/grafana-ui/src/components/Switch/Switch.mdx
new file mode 100644
index 00000000000..f347718b212
--- /dev/null
+++ b/packages/grafana-ui/src/components/Switch/Switch.mdx
@@ -0,0 +1,3 @@
+# Switch
+
+A basic docs for Switch component
diff --git a/packages/grafana-ui/src/components/Switch/Switch.story.tsx b/packages/grafana-ui/src/components/Switch/Switch.story.tsx
index 5d6daadd3ca..0e6e27a2ea3 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.story.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.story.tsx
@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
 
-// import { storiesOf } from '@storybook/react';
-// import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Switch } from './Switch';
 import { text } from '@storybook/addon-knobs';
+import mdx from './Switch.mdx';
 
 const getStory = (title: string, component: any) => ({
   title,
   parameters: {
     component,
+    docs: {
+      page: mdx,
+    },
   },
 });
 
diff --git a/packages/grafana-ui/src/types/mdx.d.ts b/packages/grafana-ui/src/types/mdx.d.ts
new file mode 100644
index 00000000000..8df3b3856a6
--- /dev/null
+++ b/packages/grafana-ui/src/types/mdx.d.ts
@@ -0,0 +1,4 @@
+declare module '*.mdx' {
+  let MDXComponent: (props: any) => JSX.Element;
+  export default MDXComponent;
+}