diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts
new file mode 100644
index 000000000000..218395d09ff0
--- /dev/null
+++ b/code/addons/viewport/template/stories/parameters.stories.ts
@@ -0,0 +1,50 @@
+import globalThis from 'global';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    children: 'Click Me!',
+  },
+  parameters: {
+    viewport: {
+      viewports: MINIMAL_VIEWPORTS,
+    },
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {
+  parameters: {},
+};
+
+export const Selected = {
+  parameters: {
+    viewport: {
+      defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0],
+    },
+  },
+};
+
+export const Custom = {
+  parameters: {
+    viewport: {
+      viewports: {
+        phone: {
+          name: 'Phone Width',
+          styles: {
+            height: '600px',
+            width: '100vh',
+          },
+          type: 'mobile',
+        },
+      },
+    },
+  },
+};
+
+export const Disabled = {
+  parameters: {
+    viewport: { disable: true },
+  },
+};
diff --git a/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js b/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
deleted file mode 100644
index 8b6700546a25..000000000000
--- a/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const Panel = styled.div();
-
-export default {
-  title: 'Addons/Viewport/Custom Default (Kindle Fire 2)',
-  parameters: {
-    viewport: {
-      viewports: {
-        ...INITIAL_VIEWPORTS,
-        kindleFire2: {
-          name: 'Kindle Fire 2',
-          styles: {
-            width: '600px',
-            height: '963px',
-          },
-        },
-      },
-    },
-  },
-};
-
-export const Inherited = () => (
-  <Panel>
-    I've inherited <b>Kindle Fire 2</b> viewport from my parent.
-  </Panel>
-);
-
-export const OverriddenViaWithViewportParameterizedDecorator = () => (
-  <Panel>
-    I respect my parents but I should be looking good on <b>iPad</b>.
-  </Panel>
-);
-OverriddenViaWithViewportParameterizedDecorator.storyName =
-  'Overridden via "withViewport" parameterized decorator';
-OverriddenViaWithViewportParameterizedDecorator.parameters = {
-  viewport: { defaultViewport: 'ipad' },
-};
-
-export const Disabled = () => <Panel>There should be no viewport selector in the toolbar</Panel>;
-
-Disabled.parameters = {
-  viewport: { disable: true },
-};
diff --git a/code/examples/official-storybook/stories/addon-viewport/default.stories.js b/code/examples/official-storybook/stories/addon-viewport/default.stories.js
deleted file mode 100644
index bdd2ee5ed7fe..000000000000
--- a/code/examples/official-storybook/stories/addon-viewport/default.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const Panel = styled.div();
-
-export default {
-  title: 'Addons/Viewport',
-  parameters: {
-    viewport: {
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-export const DefaultFn = () => (
-  <Panel>I don't have problems being rendered using the default viewport.</Panel>
-);
-DefaultFn.storyName = 'default';
diff --git a/code/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts b/code/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts
deleted file mode 100644
index 6cd00ede64a3..000000000000
--- a/code/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { html } from 'lit';
-import type { Meta, StoryFn } from '@storybook/web-components';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-export default {
-  title: 'Addons / Viewport',
-  parameters: {
-    viewport: {
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-} as Meta;
-
-const Template: StoryFn<{ title: string }> = (args) => html`<h2>${args.title}</h2>`;
-
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Click on the viewports icon on toolbar to make the viewport change',
-};
-
-export const CustomViewports = Template.bind({});
-CustomViewports.args = {
-  title: 'I am using a custom viewport for Kindle Fire 2',
-};
-CustomViewports.parameters = {
-  viewport: {
-    viewports: {
-      kindleFire2: {
-        name: 'Kindle Fire 2',
-        styles: {
-          width: '600px',
-          height: '963px',
-        },
-      },
-    },
-    defaultViewport: 'kindleFire2',
-  },
-};
-
-export const Overriden = Template.bind({});
-Overriden.args = {
-  title: 'I have a different default viewport: ipad!',
-};
-Overriden.storyName = 'Overridden via "defaultViewport" parameter';
-Overriden.parameters = {
-  viewport: { defaultViewport: 'ipad' },
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  title: 'I have disabled viewports addon',
-};
-Disabled.parameters = {
-  viewport: { disable: true },
-};