diff --git a/docs/essentials/auto-generated-controls/react.mdx b/docs/essentials/auto-generated-controls/react.mdx
index bf2f23322192..ab1b01981cfd 100644
--- a/docs/essentials/auto-generated-controls/react.mdx
+++ b/docs/essentials/auto-generated-controls/react.mdx
@@ -1,6 +1,8 @@
 To use auto-detected controls with React, you must fill in the `component` field in your story metadata:
 
 ```ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+
 import { Button } from './Button';
 
 export default {
diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md
index 8a466018730a..96356b3b135d 100644
--- a/docs/essentials/introduction.md
+++ b/docs/essentials/introduction.md
@@ -29,6 +29,8 @@ npm install --save-dev @storybook/addon-essentials
 Update your Storybook configuration (in `.storybook/main.js`) to include the essentials addon.
 
 ```js
+// .storybook/main.js
+
 module.exports = {
   addons: ['@storybook/addon-essentials'],
 };
diff --git a/docs/snippets/common/badge-story-custom-argtypes.js.mdx b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
index 4dd612f905e0..7ffb54787e47 100644
--- a/docs/snippets/common/badge-story-custom-argtypes.js.mdx
+++ b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Badge.stories.js | Badge.stories.ts
+// Badge.stories.js | Badge.stories.jsx  | Badge.stories.ts | Badge.stories.tsx
 
 export default {
   component: Badge,
diff --git a/docs/snippets/common/button-group-story-subcomponents.js.mdx b/docs/snippets/common/button-group-story-subcomponents.js.mdx
index 1522fe77d830..27c2aa1d48f6 100644
--- a/docs/snippets/common/button-group-story-subcomponents.js.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ButtonGroup.stories.js
+// ButtonGroup.stories.js | ButtonGroup.stories.jsx
 
 import { Button, ButtonGroup } from '../ButtonGroup';
 
diff --git a/docs/snippets/common/button-group-story-subcomponents.ts.mdx b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
index 53da77dce0a9..d5657305d92a 100644
--- a/docs/snippets/common/button-group-story-subcomponents.ts.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// ButtonGroup.stories.ts
+// ButtonGroup.stories.ts | ButtonGroup.stories.tsx
 
 import { Meta } from '@storybook/react/types-6-0';
 
diff --git a/docs/snippets/common/button-story-action-event-handle.js.mdx b/docs/snippets/common/button-story-action-event-handle.js.mdx
index f40b1655e1cb..653e01aef496 100644
--- a/docs/snippets/common/button-story-action-event-handle.js.mdx
+++ b/docs/snippets/common/button-story-action-event-handle.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
index 716aec51d730..cf247036634e 100644
--- a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
index 9bba6a872970..62e7cf67ebb9 100644
--- a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-controls-primary-variant.js.mdx b/docs/snippets/common/button-story-controls-primary-variant.js.mdx
index 8a5d6615f6f3..f36addd2d26d 100644
--- a/docs/snippets/common/button-story-controls-primary-variant.js.mdx
+++ b/docs/snippets/common/button-story-controls-primary-variant.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 const Primary = Template.bind({});
 Primary.args = {
diff --git a/docs/snippets/common/button-story-controls-radio-group.js.mdx b/docs/snippets/common/button-story-controls-radio-group.js.mdx
index fa59e415b90a..1806575b7996 100644
--- a/docs/snippets/common/button-story-controls-radio-group.js.mdx
+++ b/docs/snippets/common/button-story-controls-radio-group.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-default-export.js.mdx b/docs/snippets/common/button-story-default-export.js.mdx
index deb7867e2ef1..ec2b02425fd7 100644
--- a/docs/snippets/common/button-story-default-export.js.mdx
+++ b/docs/snippets/common/button-story-default-export.js.mdx
@@ -1,7 +1,7 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
-  title: 'Button'
-}
+  title: 'Button',
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-disable-addon.js.mdx b/docs/snippets/common/button-story-disable-addon.js.mdx
index e413e812141c..84656a63b51e 100644
--- a/docs/snippets/common/button-story-disable-addon.js.mdx
+++ b/docs/snippets/common/button-story-disable-addon.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js |  Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-disable-docspage-component.js.mdx b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
index 08d0f98ad4f0..9acd2461f7ba 100644
--- a/docs/snippets/common/button-story-disable-docspage-component.js.mdx
+++ b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/common/button-story-docs-code-type.js.mdx b/docs/snippets/common/button-story-docs-code-type.js.mdx
index 10357521bce4..c4130f7d16f2 100644
--- a/docs/snippets/common/button-story-docs-code-type.js.mdx
+++ b/docs/snippets/common/button-story-docs-code-type.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
@@ -10,7 +10,7 @@ export default {
   parameters: {
     docs: {
       source: {
-        type: 'code'
+        type: 'code',
       }
     }
   }
diff --git a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
index cc24230dd019..1cfd5c698d85 100644
--- a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
index a75971cf2d92..e81d979d98cf 100644
--- a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
@@ -1,6 +1,5 @@
 ```js
-
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/common/button-story-grouped.js.mdx b/docs/snippets/common/button-story-grouped.js.mdx
index e08768ce609c..94c157e22f0d 100644
--- a/docs/snippets/common/button-story-grouped.js.mdx
+++ b/docs/snippets/common/button-story-grouped.js.mdx
@@ -1,7 +1,7 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
-  title: 'Design System/Atoms/Button'
-}
+  title: 'Design System/Atoms/Button',
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
index dbabf7734b1e..bee9dd999ac9 100644
--- a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
+++ b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 
diff --git a/docs/snippets/common/button-story-hoisted.js.mdx b/docs/snippets/common/button-story-hoisted.js.mdx
index 1facba381002..f47bd55e388b 100644
--- a/docs/snippets/common/button-story-hoisted.js.mdx
+++ b/docs/snippets/common/button-story-hoisted.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button as ButtonComponent } from './Button';
 
diff --git a/docs/snippets/common/button-story-matching-argtypes.js.mdx b/docs/snippets/common/button-story-matching-argtypes.js.mdx
index c3e034294ec3..d2b13c760c9a 100644
--- a/docs/snippets/common/button-story-matching-argtypes.js.mdx
+++ b/docs/snippets/common/button-story-matching-argtypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
index b43af8fd9dca..4b6fd2c0735e 100644
--- a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
+++ b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-primary-composition.js.mdx b/docs/snippets/common/button-story-primary-composition.js.mdx
index 63332e4c58ea..17aaf25b50f3 100644
--- a/docs/snippets/common/button-story-primary-composition.js.mdx
+++ b/docs/snippets/common/button-story-primary-composition.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 const Primary = ButtonStory.bind({});
 Primary.args = {
diff --git a/docs/snippets/common/button-story-primary-long-name.js.mdx b/docs/snippets/common/button-story-primary-long-name.js.mdx
index 8c6473ff8512..265e78970bf2 100644
--- a/docs/snippets/common/button-story-primary-long-name.js.mdx
+++ b/docs/snippets/common/button-story-primary-long-name.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const PrimaryLongName = Template.bind({});
 
diff --git a/docs/snippets/common/button-story-remix-docspage.js.mdx b/docs/snippets/common/button-story-remix-docspage.js.mdx
index f081164723dd..3543dff88f8e 100644
--- a/docs/snippets/common/button-story-remix-docspage.js.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/common/button-story-remix-docspage.ts.mdx b/docs/snippets/common/button-story-remix-docspage.ts.mdx
index ed56362b453e..0fc74186b286 100644
--- a/docs/snippets/common/button-story-remix-docspage.ts.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/common/button-story-with-parameters.js.mdx b/docs/snippets/common/button-story-with-parameters.js.mdx
index 6d825b6920da..0664a5d6e430 100644
--- a/docs/snippets/common/button-story-with-parameters.js.mdx
+++ b/docs/snippets/common/button-story-with-parameters.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Primary = Template.bind({});
 Primary.args ={
diff --git a/docs/snippets/common/checkbox-story-csf.js.mdx b/docs/snippets/common/checkbox-story-csf.js.mdx
index bd693ded4c3f..4a114f056add 100644
--- a/docs/snippets/common/checkbox-story-csf.js.mdx
+++ b/docs/snippets/common/checkbox-story-csf.js.mdx
@@ -1,11 +1,11 @@
 ```js
-// Checkbox.stories.js
+// Checkbox.stories.js | Checkbox.stories.jsx 
 
 import { Checkbox } from './Checkbox';
 
 export default { 
-    title: 'MDX/Checkbox', 
-    component: Checkbox
+  title: 'MDX/Checkbox',
+  component: Checkbox,
 };
 
 const Template = (args) => <Checkbox {...args} />
diff --git a/docs/snippets/common/checkbox-story-grouped.js.mdx b/docs/snippets/common/checkbox-story-grouped.js.mdx
index 9d9a5febc842..86c94be35218 100644
--- a/docs/snippets/common/checkbox-story-grouped.js.mdx
+++ b/docs/snippets/common/checkbox-story-grouped.js.mdx
@@ -1,7 +1,7 @@
 ```js
-// Checkbox.stories.js | Checkbox.stories.ts
+// Checkbox.stories.js | Checkbox.stories.jsx | Checkbox.stories.ts | Checkbox.stories.tsx
 
 export default {
-  title: 'Design System/Atoms/Checkbox'
-}
+  title: 'Design System/Atoms/Checkbox',
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
index 5ec147578992..cb343482cbec 100644
--- a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
+++ b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/component-story-csf-description.js.mdx b/docs/snippets/common/component-story-csf-description.js.mdx
index a4072d78927c..846e38ef6da0 100644
--- a/docs/snippets/common/component-story-csf-description.js.mdx
+++ b/docs/snippets/common/component-story-csf-description.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'CustomDescription',
diff --git a/docs/snippets/common/component-story-custom-args-mapping.js.mdx b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
index e10a61d9eb7c..c80bbf2f0862 100644
--- a/docs/snippets/common/component-story-custom-args-mapping.js.mdx
+++ b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './button';
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
diff --git a/docs/snippets/common/component-story-custom-source.js.mdx b/docs/snippets/common/component-story-custom-source.js.mdx
index 353c4e972595..44ea73c129a2 100644
--- a/docs/snippets/common/component-story-custom-source.js.mdx
+++ b/docs/snippets/common/component-story-custom-source.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const CustomSource = () => Template.bind({});
 
diff --git a/docs/snippets/common/component-story-disable-controls-alt.js.mdx b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
index 7778a6fab407..9d208e4b5447 100644
--- a/docs/snippets/common/component-story-disable-controls-alt.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 import { YourComponent } from './your-component'
 
diff --git a/docs/snippets/common/component-story-disable-controls-regex.js.mdx b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
index a9f303658197..f2c55298d61e 100644
--- a/docs/snippets/common/component-story-disable-controls-regex.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 ArrayInclude = Template.bind({})
 ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } };
diff --git a/docs/snippets/common/component-story-disable-controls.js.mdx b/docs/snippets/common/component-story-disable-controls.js.mdx
index 818ea786e7bf..02494573a959 100644
--- a/docs/snippets/common/component-story-disable-controls.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 import { YourComponent } from './your-component'
 
diff --git a/docs/snippets/common/component-story-dynamic-title.js.mdx b/docs/snippets/common/component-story-dynamic-title.js.mdx
index 47d464d21335..7a0d96736792 100644
--- a/docs/snippets/common/component-story-dynamic-title.js.mdx
+++ b/docs/snippets/common/component-story-dynamic-title.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import base from 'paths.macro';
 
diff --git a/docs/snippets/common/component-story-sort-controls.js.mdx b/docs/snippets/common/component-story-sort-controls.js.mdx
index 6a816951b85a..65f4ee7f9ae6 100644
--- a/docs/snippets/common/component-story-sort-controls.js.mdx
+++ b/docs/snippets/common/component-story-sort-controls.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 import { YourComponent } from './your-component'
 
diff --git a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
index af66d57a8e2b..402274308b79 100644
--- a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
+++ b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-export const CustomDocumentationComponent: React.FC<{}> = () => {
+export const CustomDocumentationComponent: React.VFC<{}> = () => {
   return (
     <div>
       <h1>Replacing DocsPage with a custom component</h1>
diff --git a/docs/snippets/common/foo-bar-baz-story.js.mdx b/docs/snippets/common/foo-bar-baz-story.js.mdx
index 3e87aad910f8..5815debcec68 100644
--- a/docs/snippets/common/foo-bar-baz-story.js.mdx
+++ b/docs/snippets/common/foo-bar-baz-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// FooBar.stories.js | FooBar.stories.ts
+// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
 
 export default {
   title: 'Foo/Bar',
diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
index 1b090b4d1403..36501155756d 100644
--- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx
+++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Gizmo.stories.js | Gizmo.stories.ts
+// Gizmo.stories.js | Gizmo.stories.jsx | Gizmo.stories.ts | Gizmo.stories.tsx
 
 export default {
   title: 'Gizmo',
diff --git a/docs/snippets/common/my-component-story-import-json.js.mdx b/docs/snippets/common/my-component-story-import-json.js.mdx
index 9265c9d195ce..56b0e6431166 100644
--- a/docs/snippets/common/my-component-story-import-json.js.mdx
+++ b/docs/snippets/common/my-component-story-import-json.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 // This will automatically be parsed to the contents of `data.json`
 import data from './data.json';
diff --git a/docs/snippets/common/my-component-story-import-static-asset.js.mdx b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
index 816ad32dc8b1..8aa950ac4c07 100644
--- a/docs/snippets/common/my-component-story-import-static-asset.js.mdx
+++ b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 // This will include './static/image.png' in the bundle. 
 // And return a path to be included in a src attribute
diff --git a/docs/snippets/common/my-component-story-mandatory-export.js.mdx b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
index 4ec694947a11..3aa3727adb73 100644
--- a/docs/snippets/common/my-component-story-mandatory-export.js.mdx
+++ b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.story.js
+// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
 import MyComponent from './MyComponent';
 
diff --git a/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx
index 0ad97aa8bad1..4e588b246c7b 100644
--- a/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
diff --git a/docs/snippets/common/my-component-story-use-globaltype.js.mdx b/docs/snippets/common/my-component-story-use-globaltype.js.mdx
index dbf97c01c7ed..d6aaff1e96dc 100644
--- a/docs/snippets/common/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/common/my-component-story-use-globaltype.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 const getCaptionForLocale = (locale) => {
   switch(locale) {
diff --git a/docs/snippets/common/my-component-story-with-storyname.js.mdx b/docs/snippets/common/my-component-story-with-storyname.js.mdx
index 1b02fba82219..612c7e0478a2 100644
--- a/docs/snippets/common/my-component-story-with-storyname.js.mdx
+++ b/docs/snippets/common/my-component-story-with-storyname.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
 export const Simple = () => <MyComponent />;
 
diff --git a/docs/snippets/common/my-component-story.js.mdx b/docs/snippets/common/my-component-story.js.mdx
index 7bef33659bc4..0adef68983c9 100644
--- a/docs/snippets/common/my-component-story.js.mdx
+++ b/docs/snippets/common/my-component-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import { MyComponent } from './MyComponent';
 
diff --git a/docs/snippets/common/other-foo-bar-story.js.mdx b/docs/snippets/common/other-foo-bar-story.js.mdx
index 65ba2e3bac9c..482d8a60e39b 100644
--- a/docs/snippets/common/other-foo-bar-story.js.mdx
+++ b/docs/snippets/common/other-foo-bar-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// FooBar.stories.js | FooBar.stories.ts
+// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
 
 export default {
   title: 'OtherFoo/Bar',
diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
index 7db76a4ecf58..77d4cd2084a8 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 // To apply a set of backgrounds to all stories of Button:
 export default {
diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
index 12af04ed3de0..6f321c920850 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 // To apply a grid to all stories of Button:
 export default {
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
index 114e733b8d5a..6ff2e2b676a1 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 Large.parameters = {
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
index 32191fc1cd16..2946c92062b9 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
@@ -1,11 +1,11 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 Large.parameters = {
   backgrounds: {
     grid: {
-      disable: true
+      disable: true,
     }
   }
 };
diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
index 7b3832caa637..c11b02c7a26e 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx |  Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 Large.parameters = {
diff --git a/docs/snippets/common/storybook-component-layout-param.js.mdx b/docs/snippets/common/storybook-component-layout-param.js.mdx
index d1f4ba54cede..36098b96b765 100644
--- a/docs/snippets/common/storybook-component-layout-param.js.mdx
+++ b/docs/snippets/common/storybook-component-layout-param.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import Button from './Button';
 
diff --git a/docs/snippets/common/storybook-customize-argtypes.js.mdx b/docs/snippets/common/storybook-customize-argtypes.js.mdx
index 38972b03a1b6..7a45d3876c17 100644
--- a/docs/snippets/common/storybook-customize-argtypes.js.mdx
+++ b/docs/snippets/common/storybook-customize-argtypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/storybook-story-layout-param.js.mdx b/docs/snippets/common/storybook-story-layout-param.js.mdx
index d39352bab539..66669c9585ec 100644
--- a/docs/snippets/common/storybook-story-layout-param.js.mdx
+++ b/docs/snippets/common/storybook-story-layout-param.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const WithLayout = Template.bind({});
 WithLayout.parameters = {
diff --git a/docs/snippets/react/app-story-with-mock.js.mdx b/docs/snippets/react/app-story-with-mock.js.mdx
index d39a3953d2c6..db4426bd71b5 100644
--- a/docs/snippets/react/app-story-with-mock.js.mdx
+++ b/docs/snippets/react/app-story-with-mock.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// App.stories.js
+// App.stories.js | App.stories.jsx | App.stories.ts | App.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-component-with-proptypes.js.mdx b/docs/snippets/react/button-component-with-proptypes.js.mdx
index a89b0a8fe460..c0ed93eee7ac 100644
--- a/docs/snippets/react/button-component-with-proptypes.js.mdx
+++ b/docs/snippets/react/button-component-with-proptypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.js
+// Button.js | Button.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-component-with-proptypes.ts.mdx b/docs/snippets/react/button-component-with-proptypes.ts.mdx
index 8d36c40cb46f..9086f82d0201 100644
--- a/docs/snippets/react/button-component-with-proptypes.ts.mdx
+++ b/docs/snippets/react/button-component-with-proptypes.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.tsx
+// Button.ts | Button.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-group-story.js.mdx b/docs/snippets/react/button-group-story.js.mdx
index 68509b2b1728..7b033e48af4c 100644
--- a/docs/snippets/react/button-group-story.js.mdx
+++ b/docs/snippets/react/button-group-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ButtonGroup.stories.js
+// ButtonGroup.stories.js | ButtonGroup.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-group-story.ts.mdx b/docs/snippets/react/button-group-story.ts.mdx
index cfb2f5281292..b6bcf985a34f 100644
--- a/docs/snippets/react/button-group-story.ts.mdx
+++ b/docs/snippets/react/button-group-story.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// ButtonGroup.stories.tsx
+// ButtonGroup.stories.ts | ButtonGroup.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-implementation.js.mdx b/docs/snippets/react/button-implementation.js.mdx
index 45135e517751..b45bca83ecde 100644
--- a/docs/snippets/react/button-implementation.js.mdx
+++ b/docs/snippets/react/button-implementation.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.js
+// Button.js | Button.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-implementation.ts.mdx b/docs/snippets/react/button-implementation.ts.mdx
index 34ff8b42a2b0..8d406fcfb038 100644
--- a/docs/snippets/react/button-implementation.ts.mdx
+++ b/docs/snippets/react/button-implementation.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.ts
+// Button.ts | Button.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-click-handler-args.js.mdx b/docs/snippets/react/button-story-click-handler-args.js.mdx
index e9ceab29ccca..e35cfba2a78e 100644
--- a/docs/snippets/react/button-story-click-handler-args.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-args.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
 Text.args = {
diff --git a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
index c44f8ca4c626..9bb099c23554 100644
--- a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx b/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
index 5ca379db5365..241e12218e45 100644
--- a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Text = (args) => <Button {...args} />;
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler.js.mdx b/docs/snippets/react/button-story-click-handler.js.mdx
index 2de071bc23e7..eb9af4c0edf2 100644
--- a/docs/snippets/react/button-story-click-handler.js.mdx
+++ b/docs/snippets/react/button-story-click-handler.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-component-args-primary.js.mdx b/docs/snippets/react/button-story-component-args-primary.js.mdx
index d14c5bc35d24..a2004a6c85e1 100644
--- a/docs/snippets/react/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/react/button-story-component-args-primary.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-component-args-primary.ts.mdx b/docs/snippets/react/button-story-component-args-primary.ts.mdx
index 5cb7ff081a95..f692b8863d67 100644
--- a/docs/snippets/react/button-story-component-args-primary.ts.mdx
+++ b/docs/snippets/react/button-story-component-args-primary.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-default-docs-code.js.mdx b/docs/snippets/react/button-story-default-docs-code.js.mdx
index 41e9c359098f..b40ec572ce07 100644
--- a/docs/snippets/react/button-story-default-docs-code.js.mdx
+++ b/docs/snippets/react/button-story-default-docs-code.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-default-docs-code.ts.mdx b/docs/snippets/react/button-story-default-docs-code.ts.mdx
index f40fc193b37f..0d2f0091f6f5 100644
--- a/docs/snippets/react/button-story-default-docs-code.ts.mdx
+++ b/docs/snippets/react/button-story-default-docs-code.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-default-export-with-component.js.mdx b/docs/snippets/react/button-story-default-export-with-component.js.mdx
index 10598a149da7..625f39a703f7 100644
--- a/docs/snippets/react/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-default-export-with-component.ts.mdx b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
index 13155a6e2a6d..ab0873160ba5 100644
--- a/docs/snippets/react/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-rename-story.js.mdx b/docs/snippets/react/button-story-rename-story.js.mdx
index b8d720ad54c8..50b7c172cd50 100644
--- a/docs/snippets/react/button-story-rename-story.js.mdx
+++ b/docs/snippets/react/button-story-rename-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-rename-story.ts.mdx b/docs/snippets/react/button-story-rename-story.ts.mdx
index d39e823fc72e..0dd876a88651 100644
--- a/docs/snippets/react/button-story-rename-story.ts.mdx
+++ b/docs/snippets/react/button-story-rename-story.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-using-args.js.mdx b/docs/snippets/react/button-story-using-args.js.mdx
index 6df0223fcddd..91d890ff84da 100644
--- a/docs/snippets/react/button-story-using-args.js.mdx
+++ b/docs/snippets/react/button-story-using-args.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 //👇 We create a “template” of how args map to rendering
 const Template = (args) => <Button {...args} />;
diff --git a/docs/snippets/react/button-story-using-args.ts.mdx b/docs/snippets/react/button-story-using-args.ts.mdx
index 335312b8b6aa..cb603ac1300c 100644
--- a/docs/snippets/react/button-story-using-args.ts.mdx
+++ b/docs/snippets/react/button-story-using-args.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 //👇 We create a “template” of how args map to rendering
 const Template: Story<ButtonProps> = (args) => <Button {...args} />;
diff --git a/docs/snippets/react/button-story-with-addon-example.js.mdx b/docs/snippets/react/button-story-with-addon-example.js.mdx
index d61d1052d581..0c500b151291 100644
--- a/docs/snippets/react/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-blue-args.js.mdx b/docs/snippets/react/button-story-with-blue-args.js.mdx
index 3890ac8fa935..bd0773ff45ae 100644
--- a/docs/snippets/react/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-blue-args.ts.mdx b/docs/snippets/react/button-story-with-blue-args.ts.mdx
index 5290f1504896..ca4083f8f49e 100644
--- a/docs/snippets/react/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-emojis.js.mdx b/docs/snippets/react/button-story-with-emojis.js.mdx
index 4a88562eeb83..e7321676637d 100644
--- a/docs/snippets/react/button-story-with-emojis.js.mdx
+++ b/docs/snippets/react/button-story-with-emojis.js.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 export const Primary = () => <Button background="#ff0" label="Button" />;
 export const Secondary = () => <Button background="#ff0" label="😄👍😍💯" />;
diff --git a/docs/snippets/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx
index 57b31c266dba..65f8cb9a7c57 100644
--- a/docs/snippets/react/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/react/button-story-with-emojis.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 export const Primary: React.VFC<{}> = () => <Button background="#ff0" label="Button" />;
 export const Secondary: React.VFC<{}> = () => <Button background="#ff0" label="😄👍😍💯" />;
diff --git a/docs/snippets/react/button-story-with-parameters.js.mdx b/docs/snippets/react/button-story-with-parameters.js.mdx
index 8f03e7494e3b..552ef1ce2a58 100644
--- a/docs/snippets/react/button-story-with-parameters.js.mdx
+++ b/docs/snippets/react/button-story-with-parameters.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-parameters.ts.mdx b/docs/snippets/react/button-story-with-parameters.ts.mdx
index 13e257866407..71c2a7bfe06e 100644
--- a/docs/snippets/react/button-story-with-parameters.ts.mdx
+++ b/docs/snippets/react/button-story-with-parameters.ts.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-sample.js.mdx b/docs/snippets/react/button-story-with-sample.js.mdx
index 61669ccff261..512965eab21d 100644
--- a/docs/snippets/react/button-story-with-sample.js.mdx
+++ b/docs/snippets/react/button-story-with-sample.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx
index 22f05fff1656..0a4f6ea112a2 100644
--- a/docs/snippets/react/button-story.with-hooks.js.mdx
+++ b/docs/snippets/react/button-story.with-hooks.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx
 
 import React, { useState } from 'react';
 
diff --git a/docs/snippets/react/checkbox-story-csf.js.mdx b/docs/snippets/react/checkbox-story-csf.js.mdx
index 3f8920267f9a..b2c02b8831b9 100644
--- a/docs/snippets/react/checkbox-story-csf.js.mdx
+++ b/docs/snippets/react/checkbox-story-csf.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Checkbox.stories.js
+// Checkbox.stories.js | Checkbox.stories.jsx | // Checkbox.stories.ts | Checkbox.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-custom-args-complex.js.mdx b/docs/snippets/react/component-story-custom-args-complex.js.mdx
index 1dc4b8d96704..417dd18f0e04 100644
--- a/docs/snippets/react/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js
+// YourComponent.stories.js | YourComponent.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
index c9592fbd88fe..29ed6aa2e9a8 100644
--- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// YourComponent.stories.js
+// YourComponent.stories.ts | YourComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-static-asset-cdn.js.mdx b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
index 47793caa0486..b6a12b5e57d6 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-static-asset-with-import.js.mdx b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
index fb71f8310c5c..5f98c47ee1f4 100644
--- a/docs/snippets/react/component-story-static-asset-with-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-static-asset-without-import.js.mdx b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
index 003706a895c9..712932573c55 100644
--- a/docs/snippets/react/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-with-query.js.mdx b/docs/snippets/react/component-story-with-query.js.mdx
index 32a7388de942..e866c9bcd525 100644
--- a/docs/snippets/react/component-story-with-query.js.mdx
+++ b/docs/snippets/react/component-story-with-query.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// my-component-with-query.stories.js
+// my-component-with-query.stories.js | my-component-with-query.stories.jsx
 
 import MyComponentThatHasAQuery, { MyQuery } from '../component-that-has-a-query';
 
diff --git a/docs/snippets/react/component-styled-variables-object-notation.js.mdx b/docs/snippets/react/component-styled-variables-object-notation.js.mdx
index fe6216ffea4a..ee08893b9fb2 100644
--- a/docs/snippets/react/component-styled-variables-object-notation.js.mdx
+++ b/docs/snippets/react/component-styled-variables-object-notation.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.js
+// MyComponent.js | MyComponent.jsx
 
 const Component = styled.div(({ theme }) => ({
   background: theme.background.app,
diff --git a/docs/snippets/react/component-styled-variables-template-literals.js.mdx b/docs/snippets/react/component-styled-variables-template-literals.js.mdx
index 6d302f91c880..f74138241ec1 100644
--- a/docs/snippets/react/component-styled-variables-template-literals.js.mdx
+++ b/docs/snippets/react/component-styled-variables-template-literals.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.js
+// MyComponent.js | MyComponent.jsx
 
 const Component = styled.div`
   background: `${props => props.theme.background.app}`
diff --git a/docs/snippets/react/list-story-expanded.js.mdx b/docs/snippets/react/list-story-expanded.js.mdx
index 5031453778f3..adbae337e366 100644
--- a/docs/snippets/react/list-story-expanded.js.mdx
+++ b/docs/snippets/react/list-story-expanded.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-expanded.ts.mdx b/docs/snippets/react/list-story-expanded.ts.mdx
index f0ac9babacad..4f0ce279881c 100644
--- a/docs/snippets/react/list-story-expanded.ts.mdx
+++ b/docs/snippets/react/list-story-expanded.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-reuse-data.js.mdx b/docs/snippets/react/list-story-reuse-data.js.mdx
index 29451fe3602e..155848055f9f 100644
--- a/docs/snippets/react/list-story-reuse-data.js.mdx
+++ b/docs/snippets/react/list-story-reuse-data.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-reuse-data.ts.mdx b/docs/snippets/react/list-story-reuse-data.ts.mdx
index 2a7c4bdccfb8..9eca08e4002f 100644
--- a/docs/snippets/react/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/react/list-story-reuse-data.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-starter.js.mdx b/docs/snippets/react/list-story-starter.js.mdx
index 3bfb685eb130..3542f92faa1f 100644
--- a/docs/snippets/react/list-story-starter.js.mdx
+++ b/docs/snippets/react/list-story-starter.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-starter.ts.mdx b/docs/snippets/react/list-story-starter.ts.mdx
index 6aed7a893e8e..8cf7e37d0405 100644
--- a/docs/snippets/react/list-story-starter.ts.mdx
+++ b/docs/snippets/react/list-story-starter.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-template.js.mdx b/docs/snippets/react/list-story-template.js.mdx
index bf0ddfc9835e..e5e199487e50 100644
--- a/docs/snippets/react/list-story-template.js.mdx
+++ b/docs/snippets/react/list-story-template.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx
index e9c3b870bdf3..9e0f4aa2ec2d 100644
--- a/docs/snippets/react/list-story-template.ts.mdx
+++ b/docs/snippets/react/list-story-template.ts.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx
index d7f303c16e0d..9ae4ae4ce146 100644
--- a/docs/snippets/react/list-story-unchecked.js.mdx
+++ b/docs/snippets/react/list-story-unchecked.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx
index d6127c23c33f..d5de8e752d73 100644
--- a/docs/snippets/react/list-story-unchecked.ts.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts.mdx
@@ -1,7 +1,8 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
+
 import { List, ListProps } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
diff --git a/docs/snippets/react/list-story-with-subcomponents.js.mdx b/docs/snippets/react/list-story-with-subcomponents.js.mdx
index 96e0a19d2ab9..dc9f9a491761 100644
--- a/docs/snippets/react/list-story-with-subcomponents.js.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-with-subcomponents.ts.mdx b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
index 4a4ac92827eb..4ceb909024b5 100644
--- a/docs/snippets/react/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-with-unchecked-children.js.mdx b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
index 22bcb2d83042..c92ece6d0191 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.js.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
index dc8458cd00b1..628e57ec1ebd 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
@@ -1,9 +1,11 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
 import { List, ListProps } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 const Template: Story<ListProps> = (args) => <List {...args} />;
diff --git a/docs/snippets/react/loader-story.js.mdx b/docs/snippets/react/loader-story.js.mdx
index 9601a439cc80..b5ea01dec7c3 100644
--- a/docs/snippets/react/loader-story.js.mdx
+++ b/docs/snippets/react/loader-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// TodoItem.stories.js
+// TodoItem.stories.js | TodoItem.stories.jsx | TodoItem.stories.ts | TodoItem.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/mock-context-container-provider.js.mdx b/docs/snippets/react/mock-context-container-provider.js.mdx
index 234ebf9bafd4..23ee66b7568d 100644
--- a/docs/snippets/react/mock-context-container-provider.js.mdx
+++ b/docs/snippets/react/mock-context-container-provider.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// pages/profile.js
+// pages/profile.js | pages/profile.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/mock-context-container.js.mdx b/docs/snippets/react/mock-context-container.js.mdx
index cfcb39d72e48..1f2b3e0ee85f 100644
--- a/docs/snippets/react/mock-context-container.js.mdx
+++ b/docs/snippets/react/mock-context-container.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ProfilePage.stories.js
+// ProfilePage.stories.js | ProfilePage.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/mock-context-create.js.mdx b/docs/snippets/react/mock-context-create.js.mdx
index f6b463a1f2e8..5c935b9476e3 100644
--- a/docs/snippets/react/mock-context-create.js.mdx
+++ b/docs/snippets/react/mock-context-create.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ProfilePageContext.js
+// ProfilePageContext.js | ProfilePageContext.jsx
 
 import { createContext } from 'react';
 
diff --git a/docs/snippets/react/mock-context-in-use.js.mdx b/docs/snippets/react/mock-context-in-use.js.mdx
index b7ec7f082999..940b17d88539 100644
--- a/docs/snippets/react/mock-context-in-use.js.mdx
+++ b/docs/snippets/react/mock-context-in-use.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ProfilePage.js
+// ProfilePage.js | ProfilePage.jsx
 
 import { useContext } from 'react';
 
diff --git a/docs/snippets/react/my-component-story-basic-and-props.js.mdx b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
index 9ce316353aa6..011634486c56 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/my-component-story-configure-viewports.js.mdx b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
index 0ef2da44148f..9b8b55462be6 100644
--- a/docs/snippets/react/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.ts | MyComponent.stories.jsx | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/my-component-story-with-nonstory.js.mdx b/docs/snippets/react/my-component-story-with-nonstory.js.mdx
index 2798ea22a3fb..5cd1a4a71abc 100644
--- a/docs/snippets/react/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/react/my-component-story-with-nonstory.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.jsx | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/my-component-with-env-variables.js.mdx b/docs/snippets/react/my-component-with-env-variables.js.mdx
index a49eabd0ea94..5af331ed28fb 100644
--- a/docs/snippets/react/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/my-component-with-env-variables.ts.mdx b/docs/snippets/react/my-component-with-env-variables.ts.mdx
index cacb56fcce70..2953290c57b4 100644
--- a/docs/snippets/react/my-component-with-env-variables.ts.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// MyComponent.stories.tsx
+// MyComponent.stories.ts | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/page-story-slots.js.mdx b/docs/snippets/react/page-story-slots.js.mdx
index 57f0db2b181d..43d43695b730 100644
--- a/docs/snippets/react/page-story-slots.js.mdx
+++ b/docs/snippets/react/page-story-slots.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Page.stories.js
+// Page.stories.js | Page.stories.jsx
 
 import React from 'react';
 import Page from './Page';
diff --git a/docs/snippets/react/page-story-slots.ts.mdx b/docs/snippets/react/page-story-slots.ts.mdx
index 284505eee4fa..6fcf1182e064 100644
--- a/docs/snippets/react/page-story-slots.ts.mdx
+++ b/docs/snippets/react/page-story-slots.ts.mdx
@@ -1,5 +1,5 @@
-```js
-// Page.stories.js
+```ts
+// Page.stories.ts | Page.stories.tsx
 
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
diff --git a/docs/snippets/react/page-story-with-args-composition.js.mdx b/docs/snippets/react/page-story-with-args-composition.js.mdx
index 0da2bd65cb82..3c040ad80784 100644
--- a/docs/snippets/react/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourPage.stories.js
+// YourPage.stories.js | YourPage.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index 6f99607f3bc8..3344cc1eccc5 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -1,5 +1,5 @@
-```js
-// YourPage.stories.js
+```ts
+// YourPage.stories.ts | YourPage.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/page-story.js.mdx b/docs/snippets/react/page-story.js.mdx
index 9763a47e9d82..2f4b552da9a9 100644
--- a/docs/snippets/react/page-story.js.mdx
+++ b/docs/snippets/react/page-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Page.stories.js
+// Page.stories.js | Page.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/page-story.ts.mdx b/docs/snippets/react/page-story.ts.mdx
index daf83dac4941..00902298d735 100644
--- a/docs/snippets/react/page-story.ts.mdx
+++ b/docs/snippets/react/page-story.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Page.stories.tsx
+// Page.stories.ts | Page.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/simple-page-implementation.js.mdx b/docs/snippets/react/simple-page-implementation.js.mdx
index 8c397d2cd90b..db4f56463bda 100644
--- a/docs/snippets/react/simple-page-implementation.js.mdx
+++ b/docs/snippets/react/simple-page-implementation.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourPage.js
+// YourPage.js | YourPage.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/simple-page-implementation.ts.mdx b/docs/snippets/react/simple-page-implementation.ts.mdx
index 225a7c9633dc..906989a3a553 100644
--- a/docs/snippets/react/simple-page-implementation.ts.mdx
+++ b/docs/snippets/react/simple-page-implementation.ts.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourPage.tsx
+// YourPage.ts | YourPage.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/table-story-fully-customize-controls.js.mdx b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
index e9a4efd6ff7e..4ffba8cfc318 100644
--- a/docs/snippets/react/table-story-fully-customize-controls.js.mdx
+++ b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Table.stories.js
+// Table.stories.js | Table.stories.jsx
 
 const TableStory = ({ data, ...args }) => (
   <Table {...args} >
diff --git a/docs/snippets/react/your-component.js.mdx b/docs/snippets/react/your-component.js.mdx
index 917308ccbb00..8c226cbd9a1c 100644
--- a/docs/snippets/react/your-component.js.mdx
+++ b/docs/snippets/react/your-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js
+// YourComponent.stories.js | YourComponent.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/your-component.ts.mdx b/docs/snippets/react/your-component.ts.mdx
index 5c3348310463..a5dfee62eabd 100644
--- a/docs/snippets/react/your-component.ts.mdx
+++ b/docs/snippets/react/your-component.ts.mdx
@@ -1,9 +1,9 @@
 ```ts
-// YourComponent.stories.tsx
+// YourComponent.stories.ts | YourComponent.stories.tsx
 
 import React, { ComponentProps } from 'react';
 
-import { Story } from '@storybook/react';
+import { Story, Meta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
 
@@ -11,7 +11,7 @@ import { YourComponent } from './YourComponent';
 export default {
   title: 'YourComponent',
   component: YourComponent,
-};
+} as Meta;
 
 //👇 We create a “template” of how args map to rendering
 const Template: Story<ComponentProps<typeof YourComponent>> = (args) => <YourComponent {...args} />;
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index b3810870a8a2..9203a81d1854 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -11,8 +11,8 @@ Storybook uses the generic term arguments (args for short) when talking about Re
 A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, it won't be included in your production bundle.
 
 ```
-Button.js | ts
-Button.stories.js | ts
+Button.js | ts | jsx | tsx
+Button.stories.js | ts | jsx | tsx
 ```
 
 ## Component Story Format
diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md
index f516afd025a0..0257f7c62663 100644
--- a/docs/writing-stories/parameters.md
+++ b/docs/writing-stories/parameters.md
@@ -11,7 +11,7 @@ For example, let’s customize the backgrounds addon via a parameter. We’ll us
 We can set a parameter for a single story with the `parameters` key on a CSF export:
 
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx 
 
 export const Primary = Template.bind({});
 Primary.args = {
@@ -33,7 +33,7 @@ Primary.parameters = {
 We can set the parameters for all stories of a component using the `parameters` key on the default CSF export:
 
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx 
 
 import Button from './Button';