diff --git a/packages/fluentui/docs/.storybook/main.js b/packages/fluentui/docs/.storybook/main.js
new file mode 100644
index 0000000000000..66664d8a0eeec
--- /dev/null
+++ b/packages/fluentui/docs/.storybook/main.js
@@ -0,0 +1,41 @@
+const path = require('path');
+const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
+
+module.exports = /** @type {import('../../../../.storybook/main').StorybookBaseConfig} */ ({
+  stories: ['../src/**/*.stories.tsx'],
+  core: {
+    builder: 'webpack5',
+  },
+  babel: {},
+  typescript: {
+    // disable react-docgen-typescript (totally not needed here, slows things down a lot)
+    reactDocgen: false,
+  },
+  webpackFinal: config => {
+    const tsPaths = new TsconfigPathsPlugin({
+      configFile: path.resolve(__dirname, '../../../../tsconfig.base.json'),
+    });
+
+    if (config.resolve) {
+      config.resolve.plugins ? config.resolve.plugins.push(tsPaths) : (config.resolve.plugins = [tsPaths]);
+    }
+
+    if (config.module) {
+      config.module.rules?.unshift({
+        test: /\.(ts|tsx)$/,
+        use: [
+          {
+            loader: '@griffel/webpack-loader',
+            options: {
+              babelOptions: {
+                presets: ['@babel/preset-typescript'],
+              },
+            },
+          },
+        ],
+      });
+    }
+
+    return config;
+  },
+});
diff --git a/packages/fluentui/docs/.storybook/preview.js b/packages/fluentui/docs/.storybook/preview.js
new file mode 100644
index 0000000000000..93a606a0ba906
--- /dev/null
+++ b/packages/fluentui/docs/.storybook/preview.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Provider, teamsTheme } from '@fluentui/react-northstar';
+import Screener from 'screener-storybook/src/screener';
+
+/** @type {import("@fluentui/react-storybook-addon").FluentParameters} */
+export const parameters = { layout: 'none' };
+/** @type {import("@storybook/react").DecoratorFn[]} */
+export const decorators = [
+  (story, context) => {
+    const isRtl = context.id.toLowerCase().includes('rtl');
+
+    return (
+      <Provider theme={teamsTheme} dir={isRtl ? 'rtl' : 'ltr'}>
+        <div className="testWrapper" style={{ width: '600px' }}>
+          {story()}
+        </div>
+      </Provider>
+    );
+  },
+];
+
+// For static storybook per https://github.com/screener-io/screener-storybook#testing-with-static-storybook-app
+if (typeof window === 'object') {
+  /** @type {*} */ (window).__screener_storybook__ = require('@storybook/react').getStorybook;
+}
diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json
index 86439cfdcdee9..f9acb8e53d6b3 100644
--- a/packages/fluentui/docs/package.json
+++ b/packages/fluentui/docs/package.json
@@ -58,17 +58,22 @@
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-virtualized": "^9.21.8",
-    "@types/react-window": "^1.8.2"
+    "@types/react-window": "^1.8.2",
+    "storywright": "0.0.26-beta.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "gulp build:docs",
+    "build:storybook": "build-storybook -o dist/storybook",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "lint:fix": "yarn lint --fix",
     "start": "gulp docs",
+    "screener:build": "yarn build:storybook",
     "start:profile": "cross-env NODE_ENV=production PERF=true gulp docs",
+    "start:storybook": "start-storybook",
+    "test:component": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
     "vr:build": "cross-env NODE_ENV=production gulp screener:build",
     "vr:test": "gulp screener:runner"
   }
diff --git a/packages/fluentui/docs/src/vr-tests/Accordion/Accordion.stories.tsx b/packages/fluentui/docs/src/vr-tests/Accordion/Accordion.stories.tsx
new file mode 100644
index 0000000000000..3f593fdae0ac5
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Accordion/Accordion.stories.tsx
@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Accordion } from '@fluentui/react-northstar';
+import AccordionDefaultBsize from '../../examples/components/Accordion/Performance/AccordionDefault.bsize';
+import AccordionExampleRtl from '../../examples/components/Accordion/Rtl/AccordionExample.rtl';
+import AccordionExample from '../../examples/components/Accordion/Types/AccordionExample.shorthand';
+import AccordionExclusiveExample from '../../examples/components/Accordion/Types/AccordionExclusiveExample.shorthand';
+import AccordionExclusiveExpandedExample from '../../examples/components/Accordion/Types/AccordionExclusiveExpandedExample.shorthand';
+import AccordionPanelCustomContentExample from '../../examples/components/Accordion/Usage/AccordionPanelCustomContentExample.shorthand';
+import AccordionPanelCustomTitleExample from '../../examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand';
+import AccordionDefaultExample from '../../examples/components/Accordion/Visual/AccordionExampleDefault.shorthand';
+
+export default { component: Accordion, title: 'Accordion' } as ComponentMeta<typeof Accordion>;
+
+export {
+  AccordionDefaultBsize,
+  AccordionExampleRtl,
+  AccordionExample,
+  AccordionExclusiveExample,
+  AccordionExclusiveExpandedExample,
+  AccordionPanelCustomContentExample,
+  AccordionPanelCustomTitleExample,
+  AccordionDefaultExample,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx b/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx
new file mode 100644
index 0000000000000..9df7d4734e843
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Accordion, accordionTitleSlotClassNames } from '@fluentui/react-northstar';
+import AccordionExampleCustomTitle from '../../examples/components/Accordion/Visual/AccordionExampleCustomTitle.shorthand';
+
+export default {
+  component: Accordion,
+  title: 'Accordion',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .focus(`.${accordionTitleSlotClassNames.contentWrapper}`)
+          .snapshot('Focuses the accordion title')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Accordion>;
+
+export { AccordionExampleCustomTitle };
diff --git a/packages/fluentui/docs/src/vr-tests/Alert/Alert.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/Alert.stories.tsx
new file mode 100644
index 0000000000000..3457c7ce6ca3a
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Alert/Alert.stories.tsx
@@ -0,0 +1,48 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import AlertDefaultBsize from '../../examples/components/Alert/Performance/AlertDefault.bsize';
+import AlertExampleRtl from '../../examples/components/Alert/Rtl/AlertExample.rtl';
+import AlertExampleChildrenRtl from '../../examples/components/Alert/Rtl/AlertExampleChildren.rtl';
+import AlertExampleDismissActionRtl from '../../examples/components/Alert/Rtl/AlertExampleDismissAction.rtl';
+import AlertExampleDismissAction from '../../examples/components/Alert/Slots/AlertExampleActions.shorthand';
+import AlertExampleHeader from '../../examples/components/Alert/Slots/AlertExampleHeader.shorthand';
+import AlertExampleIcon from '../../examples/components/Alert/Slots/AlertExampleIcon.shorthand';
+import AlertExampleDismissible from '../../examples/components/Alert/State/AlertExampleVisible.shorthand';
+import AlertExample from '../../examples/components/Alert/Types/AlertExample.shorthand';
+import AlertExampleDismissActions from '../../examples/components/Alert/Usage/AlertExampleDismissActions.shorthand';
+import AlertExampleImportantMessage from '../../examples/components/Alert/Usage/AlertExampleImportantMessage.shorthand';
+import AlertExampleWidth from '../../examples/components/Alert/Usage/AlertExampleWidth.shorthand';
+import AlertExampleShorthand from '../../examples/components/Alert/Variations/AlertExampleAttached.shorthand';
+import AlertExampleDanger from '../../examples/components/Alert/Variations/AlertExampleDanger';
+import AlertExampleFitted from '../../examples/components/Alert/Variations/AlertExampleFitted.shorthand';
+import AlertExampleInfo from '../../examples/components/Alert/Variations/AlertExampleInfo';
+import AlertExampleOof from '../../examples/components/Alert/Variations/AlertExampleOofs';
+import AlertExampleSuccess from '../../examples/components/Alert/Variations/AlertExampleSuccess.shorthand';
+import AlertExampleUrgent from '../../examples/components/Alert/Variations/AlertExampleUrgent';
+import AlertExampleWarning from '../../examples/components/Alert/Variations/AlertExampleWarning.shorthand';
+
+export default { component: Alert, title: 'Alert' } as ComponentMeta<typeof Alert>;
+
+export {
+  AlertDefaultBsize,
+  AlertExampleRtl,
+  AlertExampleChildrenRtl,
+  AlertExampleDismissActionRtl,
+  AlertExampleDismissAction,
+  AlertExampleHeader,
+  AlertExampleIcon,
+  AlertExampleDismissible,
+  AlertExample,
+  AlertExampleDismissActions,
+  AlertExampleImportantMessage,
+  AlertExampleWidth,
+  AlertExampleShorthand,
+  AlertExampleDanger,
+  AlertExampleFitted,
+  AlertExampleInfo,
+  AlertExampleOof,
+  AlertExampleSuccess,
+  AlertExampleUrgent,
+  AlertExampleWarning,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx
new file mode 100644
index 0000000000000..7cac651f0cdba
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleDanger from '../../examples/components/Alert/Variations/AlertExampleDanger.shorthand';
+
+export default {
+  component: Alert,
+  title: 'Alert',
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleDangerTeams = getThemeStoryVariant(AlertExampleDanger, 'teamsV2');
+
+const AlertExampleDangerTeamsDark = getThemeStoryVariant(AlertExampleDanger, 'teamsDarkV2');
+
+const AlertExampleDangerTeamsHighContrast = getThemeStoryVariant(AlertExampleDanger, 'teamsHighContrast');
+
+export {
+  AlertExampleDanger,
+  AlertExampleDangerTeams,
+  AlertExampleDangerTeamsDark,
+  AlertExampleDangerTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx
new file mode 100644
index 0000000000000..fbf5ee76f398b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import screenerSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleDismissible from '../../examples/components/Alert/Types/AlertExampleDismissible.shorthand';
+
+export default {
+  component: Alert,
+  title: 'Alert',
+  decorators: [story => <StoryWright steps={screenerSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleDismissibleTeams = getThemeStoryVariant(AlertExampleDismissible, 'teamsV2');
+
+const AlertExampleDismissibleTeamsDark = getThemeStoryVariant(AlertExampleDismissible, 'teamsDarkV2');
+
+const AlertExampleDismissibleTeamsHighContrast = getThemeStoryVariant(AlertExampleDismissible, 'teamsHighContrast');
+
+export {
+  AlertExampleDismissible,
+  AlertExampleDismissibleTeams,
+  AlertExampleDismissibleTeamsDark,
+  AlertExampleDismissibleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx
new file mode 100644
index 0000000000000..ff50fad180f6b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleInfo from '../../examples/components/Alert/Variations/AlertExampleInfo.shorthand';
+
+export default {
+  component: Alert,
+  title: 'Alert',
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleInfoTeams = getThemeStoryVariant(AlertExampleInfo, 'teamsV2');
+
+const AlertExampleInfoTeamsDark = getThemeStoryVariant(AlertExampleInfo, 'teamsDarkV2');
+
+const AlertExampleInfoTeamsHighContrast = getThemeStoryVariant(AlertExampleInfo, 'teamsHighContrast');
+
+export { AlertExampleInfo, AlertExampleInfoTeams, AlertExampleInfoTeamsDark, AlertExampleInfoTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx
new file mode 100644
index 0000000000000..1e7cc02cc8095
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import screenerSteps from './commonStoryWrightSteps';
+
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleOof from '../../examples/components/Alert/Variations/AlertExampleOofs.shorthand';
+
+export default {
+  component: Alert,
+  title: 'Alert',
+  decorators: [story => <StoryWright steps={screenerSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleOofTeams = getThemeStoryVariant(AlertExampleOof, 'teamsV2');
+
+const AlertExampleOofTeamsDark = getThemeStoryVariant(AlertExampleOof, 'teamsDarkV2');
+
+const AlertExampleOofTeamsHighContrast = getThemeStoryVariant(AlertExampleOof, 'teamsHighContrast');
+
+export { AlertExampleOof, AlertExampleOofTeams, AlertExampleOofTeamsDark, AlertExampleOofTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx
new file mode 100644
index 0000000000000..ec7a66820ee08
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import screenerSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleUrgent from '../../examples/components/Alert/Variations/AlertExampleUrgent.shorthand';
+
+export default {
+  component: Alert,
+  title: 'Alert',
+  decorators: [story => <StoryWright steps={screenerSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleUrgentTeams = getThemeStoryVariant(AlertExampleUrgent, 'teamsV2');
+
+const AlertExampleUrgentTeamsDark = getThemeStoryVariant(AlertExampleUrgent, 'teamsDarkV2');
+
+const AlertExampleUrgentTeamsHighContrast = getThemeStoryVariant(AlertExampleUrgent, 'teamsHighContrast');
+
+export {
+  AlertExampleUrgent,
+  AlertExampleUrgentTeams,
+  AlertExampleUrgentTeamsDark,
+  AlertExampleUrgentTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts
new file mode 100644
index 0000000000000..f5e0e96b18a2e
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, Steps } from 'storywright';
+import { alertDismissActionClassName } from '@fluentui/react-northstar';
+
+const selectors = {
+  dismissAction: `.${alertDismissActionClassName}`,
+};
+
+const screenerSteps = new Steps()
+  .hover(selectors.dismissAction)
+  .snapshot('Hovers the action button')
+  .keys('body', Keys.tab)
+  .snapshot('Focuses the action button')
+  .hover(selectors.dismissAction)
+  .snapshot('Hovers the focused action button')
+  .end();
+
+export default screenerSteps;
diff --git a/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx b/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx
new file mode 100644
index 0000000000000..117fde8f07603
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx
@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Animation } from '@fluentui/react-northstar';
+import AnimationExample from '../../examples/components/Animation/Types/AnimationExample.shorthand';
+import AnimationExampleDelay from '../../examples/components/Animation/Types/AnimationExampleDelay.shorthand';
+import AnimationExampleDirection from '../../examples/components/Animation/Types/AnimationExampleDirection.shorthand';
+import AnimationExampleDuration from '../../examples/components/Animation/Types/AnimationExampleDuration.shorthand';
+import AnimationExampleFillMode from '../../examples/components/Animation/Types/AnimationExampleFillMode.shorthand';
+import AnimationExampleIterationCount from '../../examples/components/Animation/Types/AnimationExampleIterationCount.shorthand';
+import AnimationExampleTimingFunction from '../../examples/components/Animation/Types/AnimationExampleTimingFunction.shorthand';
+import AnimationExampleVisible from '../../examples/components/Animation/Usage/AnimationExampleVisible.shorthand';
+
+export default { component: Animation, title: 'Animation' } as ComponentMeta<typeof Animation>;
+
+export {
+  AnimationExample,
+  AnimationExampleDelay,
+  AnimationExampleDirection,
+  AnimationExampleDuration,
+  AnimationExampleFillMode,
+  AnimationExampleIterationCount,
+  AnimationExampleTimingFunction,
+  AnimationExampleVisible,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/Attachment.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/Attachment.stories.tsx
new file mode 100644
index 0000000000000..cba097e72b552
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Attachment/Attachment.stories.tsx
@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Attachment } from '@fluentui/react-northstar';
+import AttachmentDefaultBsize from '../../examples/components/Attachment/Performance/AttachmentDefault.bsize';
+import AttachmentExampleRtl from '../../examples/components/Attachment/Rtl/AttachmentExample.rtl';
+import AttachmentDescriptionExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentDescriptionExample.shorthand';
+import AttachmentHeaderExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentHeaderExample.shorthand';
+import AttachmentIconExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentIconExample.shorthand';
+import AttachmentExampleShorthand from '../../examples/components/Attachment/Types/AttachmentExample.shorthand';
+import AttachmentProgressExampleShorthand from '../../examples/components/Attachment/Types/AttachmentProgressExample.shorthand';
+
+export default { component: Attachment, title: 'Attachment' } as ComponentMeta<typeof Attachment>;
+
+export {
+  AttachmentDefaultBsize,
+  AttachmentExampleRtl,
+  AttachmentDescriptionExampleShorthand,
+  AttachmentHeaderExampleShorthand,
+  AttachmentIconExampleShorthand,
+  AttachmentExampleShorthand,
+  AttachmentProgressExampleShorthand,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..e61a2c34b9fbf
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Attachment } from '@fluentui/react-northstar';
+import { CloseIcon, MoreIcon } from '@fluentui/react-icons-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+
+const handleClick = action => () => alert(`'${action}' was clicked`);
+
+const AttachmentActionExampleShorthand = () => (
+  <div>
+    <Attachment
+      header="Picture.jpg"
+      actionable
+      action={{ icon: <CloseIcon />, onClick: handleClick('Remove'), title: 'Close' }}
+    />
+    <Attachment
+      header="Document.docx"
+      actionable
+      action={{ icon: <MoreIcon />, onClick: handleClick('Show more'), title: 'Show more' }}
+    />
+  </div>
+);
+
+export default {
+  component: Attachment,
+  title: 'Attachment',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Attachment>;
+
+const AttachmentActionExampleShorthandTeams = getThemeStoryVariant(AttachmentActionExampleShorthand, 'teamsV2');
+
+const AttachmentActionExampleShorthandTeamsDark = getThemeStoryVariant(AttachmentActionExampleShorthand, 'teamsDarkV2');
+
+const AttachmentActionExampleShorthandTeamsHighContrast = getThemeStoryVariant(
+  AttachmentActionExampleShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  AttachmentActionExampleShorthand,
+  AttachmentActionExampleShorthandTeams,
+  AttachmentActionExampleShorthandTeamsDark,
+  AttachmentActionExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..933bf93c02e3d
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Attachment } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import { MoreIcon, TableIcon } from '@fluentui/react-icons-northstar';
+
+const handleClick = message => e => {
+  alert(`'${message}' was clicked`);
+  e.stopPropagation();
+};
+
+const AttachmentActionableExampleShorthand = () => (
+  <Attachment
+    actionable
+    icon={<TableIcon />}
+    header="Document.docx"
+    description="800 Kb"
+    action={{ icon: <MoreIcon />, onClick: handleClick('More Action'), title: 'More Action' }}
+    progress={33}
+    onClick={handleClick('Attachment')}
+  />
+);
+
+export default {
+  component: Attachment,
+  title: 'Attachment',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Attachment>;
+
+const AttachmentActionableExampleShorthandTeams = getThemeStoryVariant(AttachmentActionableExampleShorthand, 'teamsV2');
+
+const AttachmentActionableExampleShorthandTeamsDark = getThemeStoryVariant(
+  AttachmentActionableExampleShorthand,
+  'teamsDarkV2',
+);
+
+const AttachmentActionableExampleShorthandTeamsHighContrast = getThemeStoryVariant(
+  AttachmentActionableExampleShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  AttachmentActionableExampleShorthand,
+  AttachmentActionableExampleShorthandTeams,
+  AttachmentActionableExampleShorthandTeamsDark,
+  AttachmentActionableExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Attachment/commonStoryWrightSteps.ts
new file mode 100644
index 0000000000000..956c533340b0d
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Attachment/commonStoryWrightSteps.ts
@@ -0,0 +1,22 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { Keys, Steps } from 'storywright';
+import { attachmentClassName, attachmentActionClassName } from '@fluentui/react-northstar';
+
+const selectors = {
+  root: `.${attachmentClassName}`,
+  action: `.${attachmentActionClassName}`,
+};
+
+const StoryWrightSteps = new Steps()
+  .hover(selectors.root)
+  .snapshot('Hovers root')
+  .keys('body', Keys.tab)
+  .snapshot('Focuses root')
+  .hover(selectors.action)
+  .snapshot('Hovers action')
+  .keys('body', Keys.tab)
+  .keys('body', Keys.tab)
+  .snapshot('Focuses action')
+  .end();
+
+export default StoryWrightSteps;
diff --git a/packages/fluentui/docs/src/vr-tests/Avatar/Avatar.stories.tsx b/packages/fluentui/docs/src/vr-tests/Avatar/Avatar.stories.tsx
new file mode 100644
index 0000000000000..49cff3e878e5b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Avatar/Avatar.stories.tsx
@@ -0,0 +1,38 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Avatar } from '@fluentui/react-northstar';
+import AvatarDefaultBsize from '../../examples/components/Avatar/Performance/AvatarDefault.bsize';
+import AvatarExampleRtl from '../../examples/components/Avatar/Rtl/AvatarExample.rtl';
+import AvatarExampleShorthand from '../../examples/components/Avatar/Types/AvatarExample.shorthand';
+import AvatarUsageExampleShorthand from '../../examples/components/Avatar/Usage/AvatarUsageExample.shorthand';
+import AvatarExampleExcludedInitialsShorthand from '../../examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand';
+import AvatarExampleGetInitialsShorthand from '../../examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand';
+import AvatarExampleIconShorthand from '../../examples/components/Avatar/Variations/AvatarExampleIcon.shorthand';
+import AvatarExampleImageShorthand from '../../examples/components/Avatar/Variations/AvatarExampleImage.shorthand';
+import AvatarExampleLabelShorthand from '../../examples/components/Avatar/Variations/AvatarExampleLabel.shorthand';
+import AvatarExampleNameShorthand from '../../examples/components/Avatar/Variations/AvatarExampleName.shorthand';
+import AvatarExampleSizeShorthand from '../../examples/components/Avatar/Variations/AvatarExampleSize.shorthand';
+import AvatarExampleSquare from '../../examples/components/Avatar/Variations/AvatarExampleSquare.shorthand';
+import AvatarExampleStatusShorthand from '../../examples/components/Avatar/Variations/AvatarExampleStatus.shorthand';
+import AvatarExampleStatusCustomizationShorthand from '../../examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand';
+import AvatarExampleStatusImageShorthand from '../../examples/components/Avatar/Variations/AvatarExampleStatusImage.shorthand';
+
+export default { component: Avatar, title: 'Avatar' } as ComponentMeta<typeof Avatar>;
+
+export {
+  AvatarDefaultBsize,
+  AvatarExampleRtl,
+  AvatarExampleShorthand,
+  AvatarUsageExampleShorthand,
+  AvatarExampleExcludedInitialsShorthand,
+  AvatarExampleGetInitialsShorthand,
+  AvatarExampleIconShorthand,
+  AvatarExampleImageShorthand,
+  AvatarExampleLabelShorthand,
+  AvatarExampleNameShorthand,
+  AvatarExampleSizeShorthand,
+  AvatarExampleSquare,
+  AvatarExampleStatusShorthand,
+  AvatarExampleStatusCustomizationShorthand,
+  AvatarExampleStatusImageShorthand,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Box/Box.stories.tsx b/packages/fluentui/docs/src/vr-tests/Box/Box.stories.tsx
new file mode 100644
index 0000000000000..62c3e637b34a3
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Box/Box.stories.tsx
@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Box } from '@fluentui/react-northstar';
+import BoxDefaultBsize from '../../examples/components/Box/Performance/BoxDefault.bsize';
+import BoxShorthandExample from '../../examples/components/Box/Types/BoxExample.shorthand';
+import BoxExample from '../../examples/components/Box/Types/BoxExample';
+
+export default { component: Box, title: 'Box' } as ComponentMeta<typeof Box>;
+
+export { BoxDefaultBsize, BoxShorthandExample, BoxExample };
diff --git a/packages/fluentui/docs/src/vr-tests/Breadcrumb/Breadcrumb.stories.tsx b/packages/fluentui/docs/src/vr-tests/Breadcrumb/Breadcrumb.stories.tsx
new file mode 100644
index 0000000000000..913ebe7f2406c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Breadcrumb/Breadcrumb.stories.tsx
@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Breadcrumb } from '@fluentui/react-northstar';
+import BreadcrumbExampleIconDivider from '../../examples/components/Breadcrumb/Content/BreadcrumbExampleIconDivider';
+import BreadcrumbExample from '../../examples/components/Breadcrumb/Types/BreadcrumbExampleBasic';
+import BreadcrumbExampleSizes from '../../examples/components/Breadcrumb/Variations/BreadcrumbExampleSizes';
+
+export default { component: Breadcrumb, title: 'Breadcrumb' } as ComponentMeta<typeof Breadcrumb>;
+
+export { BreadcrumbExampleIconDivider, BreadcrumbExample, BreadcrumbExampleSizes };
diff --git a/packages/fluentui/docs/src/vr-tests/Button/Button.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/Button.stories.tsx
new file mode 100644
index 0000000000000..5774bd627b4f5
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Button/Button.stories.tsx
@@ -0,0 +1,42 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Button } from '@fluentui/react-northstar';
+import ButtonDefaultBsize from '../../examples/components/Button/Performance/ButtonDefault.bsize';
+import ButtonExampleRtl from '../../examples/components/Button/Rtl/ButtonExample.rtl';
+import ButtonExampleDisabled from '../../examples/components/Button/States/ButtonExampleDisabled';
+import ButtonExampleDisabledFocusable from '../../examples/components/Button/States/ButtonExampleDisabledFocusable.shorthand';
+import ButtonExampleLoading from '../../examples/components/Button/States/ButtonExampleLoading.shorthand';
+import ButtonExample from '../../examples/components/Button/Types/ButtonExample';
+import ButtonExampleEmphasis from '../../examples/components/Button/Types/ButtonExampleEmphasis.shorthand';
+import ButtonExampleIconOnly from '../../examples/components/Button/Types/ButtonExampleIconOnly.shorthand';
+import ButtonExampleInverted from '../../examples/components/Button/Types/ButtonExampleInverted';
+import ButtonExampleText from '../../examples/components/Button/Types/ButtonExampleText';
+import ButtonExampleContentAndIcon from '../../examples/components/Button/Usage/ButtonExampleContentAndIcon';
+import ButtonExampleOverflow from '../../examples/components/Button/Usage/ButtonExampleOverflow.shorthand';
+import ButtonUsageExampleShorthand from '../../examples/components/Button/Usage/ButtonUsageExample.shorthand';
+import ButtonExampleCircular from '../../examples/components/Button/Variations/ButtonExampleCircular.shorthand';
+import ButtonExampleFlat from '../../examples/components/Button/Variations/ButtonExampleFlat.shorthand';
+import ButtonExampleFluid from '../../examples/components/Button/Variations/ButtonExampleFluid.shorthand';
+import ButtonExampleSizeShorthand from '../../examples/components/Button/Variations/ButtonExampleSize.shorthand';
+
+export default { component: Button, title: 'Button' } as ComponentMeta<typeof Button>;
+
+export {
+  ButtonDefaultBsize,
+  ButtonExampleRtl,
+  ButtonExampleDisabled,
+  ButtonExampleDisabledFocusable,
+  ButtonExampleLoading,
+  ButtonExample,
+  ButtonExampleEmphasis,
+  ButtonExampleIconOnly,
+  ButtonExampleInverted,
+  ButtonExampleText,
+  ButtonExampleContentAndIcon,
+  ButtonExampleOverflow,
+  ButtonUsageExampleShorthand,
+  ButtonExampleCircular,
+  ButtonExampleFlat,
+  ButtonExampleFluid,
+  ButtonExampleSizeShorthand,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx
new file mode 100644
index 0000000000000..04f52023ca606
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Button } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import ButtonExample from '../../examples/components/Button/Types/ButtonExample.shorthand';
+
+export default {
+  component: Button,
+  title: 'Button',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Button>;
+
+const ButtonExampleTeams = getThemeStoryVariant(ButtonExample, 'teamsV2');
+
+const ButtonExampleTeamsDark = getThemeStoryVariant(ButtonExample, 'teamsDarkV2');
+
+const ButtonExampleTeamsHighContrast = getThemeStoryVariant(ButtonExample, 'teamsHighContrast');
+
+export { ButtonExample, ButtonExampleTeams, ButtonExampleTeamsDark, ButtonExampleTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx
new file mode 100644
index 0000000000000..ec12f635cf312
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Button } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import ButtonExampleContentAndIcon from '../../examples/components/Button/Usage/ButtonExampleContentAndIcon.shorthand';
+
+export default {
+  component: Button,
+  title: 'Button',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Button>;
+
+const ButtonExampleContentAndIconTeams = getThemeStoryVariant(ButtonExampleContentAndIcon, 'teamsV2');
+
+const ButtonExampleContentAndIconTeamsDark = getThemeStoryVariant(ButtonExampleContentAndIcon, 'teamsDarkV2');
+
+const ButtonExampleContentAndIconTeamsHighContrast = getThemeStoryVariant(
+  ButtonExampleContentAndIcon,
+  'teamsHighContrast',
+);
+
+export {
+  ButtonExampleContentAndIcon,
+  ButtonExampleContentAndIconTeams,
+  ButtonExampleContentAndIconTeamsDark,
+  ButtonExampleContentAndIconTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx
new file mode 100644
index 0000000000000..9a36eeef45b9a
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Button } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import ButtonExampleDisabled from '../../examples/components/Button/States/ButtonExampleDisabled.shorthand';
+
+export default {
+  component: Button,
+  title: 'Button',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Button>;
+
+const ButtonExampleDisabledTeams = getThemeStoryVariant(ButtonExampleDisabled, 'teamsV2');
+
+const ButtonExampleDisabledTeamsDark = getThemeStoryVariant(ButtonExampleDisabled, 'teamsDarkV2');
+
+const ButtonExampleDisabledTeamsHighContrast = getThemeStoryVariant(ButtonExampleDisabled, 'teamsHighContrast');
+
+export {
+  ButtonExampleDisabled,
+  ButtonExampleDisabledTeams,
+  ButtonExampleDisabledTeamsDark,
+  ButtonExampleDisabledTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx
new file mode 100644
index 0000000000000..9ceed7b8cb59a
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Button } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import ButtonExampleTextShorthand from '../../examples/components/Button/Types/ButtonExampleText.shorthand';
+
+export default {
+  component: Button,
+  title: 'Button',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Button>;
+
+const ButtonExampleTextShorthandTeams = getThemeStoryVariant(ButtonExampleTextShorthand, 'teamsV2');
+
+const ButtonExampleTextShorthandTeamsDark = getThemeStoryVariant(ButtonExampleTextShorthand, 'teamsDarkV2');
+
+const ButtonExampleTextShorthandTeamsHighContrast = getThemeStoryVariant(
+  ButtonExampleTextShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  ButtonExampleTextShorthand,
+  ButtonExampleTextShorthandTeams,
+  ButtonExampleTextShorthandTeamsDark,
+  ButtonExampleTextShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx
new file mode 100644
index 0000000000000..92c3762e737b5
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Button } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import ButtonExampleWithTooltip from '../../examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand';
+
+export default {
+  component: Button,
+  title: 'Button',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Button>;
+
+const ButtonExampleWithTooltipTeams = getThemeStoryVariant(ButtonExampleWithTooltip, 'teamsV2');
+
+const ButtonExampleWithTooltipTeamsDark = getThemeStoryVariant(ButtonExampleWithTooltip, 'teamsDarkV2');
+
+const ButtonExampleWithTooltipTeamsHighContrast = getThemeStoryVariant(ButtonExampleWithTooltip, 'teamsHighContrast');
+
+export {
+  ButtonExampleWithTooltip,
+  ButtonExampleWithTooltipTeams,
+  ButtonExampleWithTooltipTeamsDark,
+  ButtonExampleWithTooltipTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..35d75f5371a2e
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Button } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import ButtonGroupCircularExampleShorthand from '../../examples/components/Button/Groups/ButtonGroupCircularExample.shorthand';
+
+export default {
+  component: Button,
+  title: 'Button',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Button>;
+
+const ButtonGroupCircularExampleShorthandTeams = getThemeStoryVariant(ButtonGroupCircularExampleShorthand, 'teamsV2');
+
+const ButtonGroupCircularExampleShorthandTeamsDark = getThemeStoryVariant(
+  ButtonGroupCircularExampleShorthand,
+  'teamsDarkV2',
+);
+
+const ButtonGroupCircularExampleShorthandTeamsHighContrast = getThemeStoryVariant(
+  ButtonGroupCircularExampleShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  ButtonGroupCircularExampleShorthand,
+  ButtonGroupCircularExampleShorthandTeams,
+  ButtonGroupCircularExampleShorthandTeamsDark,
+  ButtonGroupCircularExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..8f93f0dc9f798
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Button } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import ButtonGroupExampleShorthand from '../../examples/components/Button/Groups/ButtonGroupExample.shorthand';
+
+export default {
+  component: Button,
+  title: 'Button',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Button>;
+
+const ButtonGroupExampleShorthandTeams = getThemeStoryVariant(ButtonGroupExampleShorthand, 'teamsV2');
+
+const ButtonGroupExampleShorthandTeamsDark = getThemeStoryVariant(ButtonGroupExampleShorthand, 'teamsDarkV2');
+
+const ButtonGroupExampleShorthandTeamsHighContrast = getThemeStoryVariant(
+  ButtonGroupExampleShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  ButtonGroupExampleShorthand,
+  ButtonGroupExampleShorthandTeams,
+  ButtonGroupExampleShorthandTeamsDark,
+  ButtonGroupExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Button/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Button/commonStoryWrightSteps.ts
new file mode 100644
index 0000000000000..ad5d5fbcfc608
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Button/commonStoryWrightSteps.ts
@@ -0,0 +1,16 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, Steps } from 'storywright';
+import { buttonClassName } from '@fluentui/react-northstar';
+
+const button = `.${buttonClassName}`;
+
+const StoryWrightSteps = new Steps()
+  .hover(button)
+  .snapshot('Hovers the first button')
+  .click(button)
+  .snapshot('Clicks the first button')
+  .keys(button, Keys.tab)
+  .snapshot('Focuses on the second button')
+  .end();
+
+export default StoryWrightSteps;
diff --git a/packages/fluentui/docs/src/vr-tests/Card/Card.stories.tsx b/packages/fluentui/docs/src/vr-tests/Card/Card.stories.tsx
new file mode 100644
index 0000000000000..4ea560a01c5d5
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Card/Card.stories.tsx
@@ -0,0 +1,44 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Card } from '@fluentui/react-northstar';
+import CardExampleBody from '../../examples/components/Card/Slots/CardExampleBody';
+import CardExampleFooter from '../../examples/components/Card/Slots/CardExampleFooter';
+import CardExampleHeader from '../../examples/components/Card/Slots/CardExampleHeader';
+import CardExamplePreview from '../../examples/components/Card/Slots/CardExamplePreview';
+import CardExampleDisabled from '../../examples/components/Card/States/CardExampleDisabled';
+import CardExampleSelected from '../../examples/components/Card/States/CardExampleSelected';
+import CardExampleContextMenu from '../../examples/components/Card/Usage/CardExampleContextMenu';
+import CardExampleExpandable from '../../examples/components/Card/Usage/CardExampleExpandable';
+import CardExampleFocusableGrid from '../../examples/components/Card/Usage/CardExampleFocusableChildrenGrid';
+import CardExampleSelectableGrid from '../../examples/components/Card/Usage/CardExampleSelectableGrid';
+import CardExampleSimple from '../../examples/components/Card/Usage/CardExampleSimple';
+import CardExampleCentered from '../../examples/components/Card/Variations/CardExampleCentered';
+import CardExampleElevated from '../../examples/components/Card/Variations/CardExampleElevated';
+import ImageExampleFluent from '../../examples/components/Card/Variations/CardExampleFluid';
+import CardExampleHorizontal from '../../examples/components/Card/Variations/CardExampleHorizontal';
+import CardExampleInverted from '../../examples/components/Card/Variations/CardExampleInverted';
+import CardExampleQuiet from '../../examples/components/Card/Variations/CardExampleQuiet';
+import CardExampleSize from '../../examples/components/Card/Variations/CardExampleSize';
+
+export default { component: Card, title: 'Card' } as ComponentMeta<typeof Card>;
+
+export {
+  CardExampleBody,
+  CardExampleFooter,
+  CardExampleHeader,
+  CardExamplePreview,
+  CardExampleDisabled,
+  CardExampleSelected,
+  CardExampleContextMenu,
+  CardExampleExpandable,
+  CardExampleFocusableGrid,
+  CardExampleSelectableGrid,
+  CardExampleSimple,
+  CardExampleCentered,
+  CardExampleElevated,
+  ImageExampleFluent,
+  CardExampleHorizontal,
+  CardExampleInverted,
+  CardExampleQuiet,
+  CardExampleSize,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx
new file mode 100644
index 0000000000000..583336c5e7e5f
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Card } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import CardExampleFocusable from '../../examples/components/Card/Usage/CardExampleFocusable';
+
+export default {
+  component: Card,
+  title: 'Card',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().keys('body', Keys.tab).snapshot('Focus on a card').end()}>{story()}</StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Card>;
+
+const CardExampleFocusableTeams = getThemeStoryVariant(CardExampleFocusable, 'teamsV2');
+
+const CardExampleFocusableTeamsDark = getThemeStoryVariant(CardExampleFocusable, 'teamsDarkV2');
+
+const CardExampleFocusableTeamsHighContrast = getThemeStoryVariant(CardExampleFocusable, 'teamsHighContrast');
+
+export {
+  CardExampleFocusable,
+  CardExampleFocusableTeams,
+  CardExampleFocusableTeamsDark,
+  CardExampleFocusableTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Card/CardExampleWithPreview.stories.tsx b/packages/fluentui/docs/src/vr-tests/Card/CardExampleWithPreview.stories.tsx
new file mode 100644
index 0000000000000..e8847b42d4ee6
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Card/CardExampleWithPreview.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Card } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import CardExampleWithPreview from '../../examples/components/Card/Usage/CardExampleWithPreview';
+
+export default {
+  component: Card,
+  title: 'Card',
+} as ComponentMeta<typeof Card>;
+
+const CardExampleWithPreviewTeams = getThemeStoryVariant(CardExampleWithPreview, 'teamsV2');
+
+const CardExampleWithPreviewTeamsDark = getThemeStoryVariant(CardExampleWithPreview, 'teamsDarkV2');
+
+const CardExampleWithPreviewTeamsHighContrast = getThemeStoryVariant(CardExampleWithPreview, 'teamsHighContrast');
+
+export {
+  CardExampleWithPreview,
+  CardExampleWithPreviewTeams,
+  CardExampleWithPreviewTeamsDark,
+  CardExampleWithPreviewTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Carousel/Carousel.stories.tsx b/packages/fluentui/docs/src/vr-tests/Carousel/Carousel.stories.tsx
new file mode 100644
index 0000000000000..da38b1e68ab46
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Carousel/Carousel.stories.tsx
@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Carousel } from '@fluentui/react-northstar';
+import CarouselExample from '../../examples/components/Carousel/Types/CarouselExample.shorthand';
+import CarouselSlideAnimationExample from '../../examples/components/Carousel/Variations/CarouselSlideAnimationExample.shorthand';
+
+export default { component: Carousel, title: 'Carousel' } as ComponentMeta<typeof Carousel>;
+
+export { CarouselExample, CarouselSlideAnimationExample };
diff --git a/packages/fluentui/docs/src/vr-tests/Chat/Chat.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/Chat.stories.tsx
new file mode 100644
index 0000000000000..f677372623de5
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Chat/Chat.stories.tsx
@@ -0,0 +1,28 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Chat } from '@fluentui/react-northstar';
+import ChatExampleHeader from '../../examples/components/Chat/Content/ChatExampleHeader.shorthand';
+import ChatExampleHeaderOverride from '../../examples/components/Chat/Content/ChatExampleHeaderOverride.shorthand';
+import ChatExampleReactionGroup from '../../examples/components/Chat/Content/ChatExampleReactionGroup.shorthand';
+import ChatExampleReadStatus from '../../examples/components/Chat/Content/ChatExampleReadStatus.shorthand';
+import ChatPlayground from '../../examples/components/Chat/Playground';
+import ChatExampleRtl from '../../examples/components/Chat/Rtl/ChatExample.rtl';
+import ChatExampleComfyRefresh from '../../examples/components/Chat/Types/ChatExampleComfyRefresh';
+import ChatExampleCompact from '../../examples/components/Chat/Types/ChatExampleCompact';
+import ChatExampleContentPosition from '../../examples/components/Chat/Types/ChatExampleContentPosition.shorthand';
+import ChatMessageExampleStyled from '../../examples/components/Chat/Types/ChatMessageExampleStyled.shorthand';
+
+export default { component: Chat, title: 'Chat' } as ComponentMeta<typeof Chat>;
+
+export {
+  ChatExampleHeader,
+  ChatExampleHeaderOverride,
+  ChatExampleReactionGroup,
+  ChatExampleReadStatus,
+  ChatPlayground,
+  ChatExampleRtl,
+  ChatExampleComfyRefresh,
+  ChatExampleCompact,
+  ChatExampleContentPosition,
+  ChatMessageExampleStyled,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatExample.stories.tsx
new file mode 100644
index 0000000000000..c2ba51a629292
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatExample.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Chat } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ChatExample from '../../examples/components/Chat/Types/ChatExample.shorthand';
+
+export default {
+  component: Chat,
+  title: 'Chat',
+} as ComponentMeta<typeof Chat>;
+
+const ChatExampleTeams = getThemeStoryVariant(ChatExample, 'teamsV2');
+
+const ChatExampleTeamsDark = getThemeStoryVariant(ChatExample, 'teamsDarkV2');
+
+const ChatExampleTeamsHighContrast = getThemeStoryVariant(ChatExample, 'teamsHighContrast');
+
+export { ChatExample, ChatExampleTeams, ChatExampleTeamsDark, ChatExampleTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleCompact.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleCompact.stories.tsx
new file mode 100644
index 0000000000000..766ad72775fe1
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleCompact.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Chat } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ChatExampleCompact from '../../examples/components/Chat/Types/ChatExampleCompact.shorthand';
+
+export default {
+  component: Chat,
+  title: 'Chat',
+} as ComponentMeta<typeof Chat>;
+
+const ChatExampleCompactTeams = getThemeStoryVariant(ChatExampleCompact, 'teamsV2');
+
+const ChatExampleCompactTeamsDark = getThemeStoryVariant(ChatExampleCompact, 'teamsDarkV2');
+
+const ChatExampleCompactTeamsHighContrast = getThemeStoryVariant(ChatExampleCompact, 'teamsHighContrast');
+
+export {
+  ChatExampleCompact,
+  ChatExampleCompactTeams,
+  ChatExampleCompactTeamsDark,
+  ChatExampleCompactTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleDetails.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleDetails.stories.tsx
new file mode 100644
index 0000000000000..574a51b06e0a1
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleDetails.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Chat } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ChatExampleDetails from '../../examples/components/Chat/Types/ChatExampleDetails.shorthand';
+
+export default {
+  component: Chat,
+  title: 'Chat',
+} as ComponentMeta<typeof Chat>;
+
+const ChatExampleDetailsTeams = getThemeStoryVariant(ChatExampleDetails, 'teamsV2');
+
+const ChatExampleDetailsTeamsDark = getThemeStoryVariant(ChatExampleDetails, 'teamsDarkV2');
+
+const ChatExampleDetailsTeamsHighContrast = getThemeStoryVariant(ChatExampleDetails, 'teamsHighContrast');
+
+export {
+  ChatExampleDetails,
+  ChatExampleDetailsTeams,
+  ChatExampleDetailsTeamsDark,
+  ChatExampleDetailsTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleInScrollableShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleInScrollableShorthand.stories.tsx
new file mode 100644
index 0000000000000..bff8e72477204
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleInScrollableShorthand.stories.tsx
@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Chat } from '@fluentui/react-northstar';
+import ChatExampleInScrollableShorthand from '../../examples/components/Chat/Usage/ChatExampleInScrollable.shorthand';
+
+export default {
+  component: Chat,
+  title: 'Chat',
+} as ComponentMeta<typeof Chat>;
+
+export { ChatExampleInScrollableShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatMessageExampleBadge.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatMessageExampleBadge.stories.tsx
new file mode 100644
index 0000000000000..045ed696f6be8
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatMessageExampleBadge.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Chat } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ChatMessageExampleBadge from '../../examples/components/Chat/Types/ChatMessageExampleBadge.shorthand';
+
+export default {
+  component: Chat,
+  title: 'Chat',
+} as ComponentMeta<typeof Chat>;
+
+const ChatMessageExampleBadgeTeams = getThemeStoryVariant(ChatMessageExampleBadge, 'teamsV2');
+
+const ChatMessageExampleBadgeTeamsDark = getThemeStoryVariant(ChatMessageExampleBadge, 'teamsDarkV2');
+
+const ChatMessageExampleBadgeTeamsHighContrast = getThemeStoryVariant(ChatMessageExampleBadge, 'teamsHighContrast');
+
+export {
+  ChatMessageExampleBadge,
+  ChatMessageExampleBadgeTeams,
+  ChatMessageExampleBadgeTeamsDark,
+  ChatMessageExampleBadgeTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Chat/MessageReactionsWithPopup.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/MessageReactionsWithPopup.stories.tsx
new file mode 100644
index 0000000000000..159eab757981d
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Chat/MessageReactionsWithPopup.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Chat } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import MessageReactionsWithPopup from '../../examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand';
+
+export default {
+  component: Chat,
+  title: 'Chat',
+} as ComponentMeta<typeof Chat>;
+
+const MessageReactionsWithPopupTeams = getThemeStoryVariant(MessageReactionsWithPopup, 'teamsV2');
+
+const MessageReactionsWithPopupTeamsDark = getThemeStoryVariant(MessageReactionsWithPopup, 'teamsDarkV2');
+
+const MessageReactionsWithPopupTeamsHighContrast = getThemeStoryVariant(MessageReactionsWithPopup, 'teamsHighContrast');
+
+export {
+  MessageReactionsWithPopup,
+  MessageReactionsWithPopupTeams,
+  MessageReactionsWithPopupTeamsDark,
+  MessageReactionsWithPopupTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/Checkbox.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 0000000000000..460c9c1f37ace
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Checkbox } from '@fluentui/react-northstar';
+import CheckboxExampleRtl from '../../examples/components/Checkbox/Rtl/CheckboxExample.rtl';
+import CheckboxExampleLabel from '../../examples/components/Checkbox/Slots/CheckboxExampleLabel.shorthand';
+import CheckboxExampleChecked from '../../examples/components/Checkbox/States/CheckboxExampleChecked.shorthand';
+import CheckboxExampleDisabled from '../../examples/components/Checkbox/States/CheckboxExampleDisabled.shorthand';
+import CheckboxExampleLabelFlexColumn from '../../examples/components/Checkbox/Visual/CheckboxExampleLabelFlexColumn.shorthand';
+
+export default { component: Checkbox, title: 'Checkbox' } as ComponentMeta<typeof Checkbox>;
+
+export {
+  CheckboxExampleRtl,
+  CheckboxExampleLabel,
+  CheckboxExampleChecked,
+  CheckboxExampleDisabled,
+  CheckboxExampleLabelFlexColumn,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx
new file mode 100644
index 0000000000000..b7484ab19838d
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Checkbox } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import CheckboxExample from '../../examples/components/Checkbox/Types/CheckboxExample.shorthand';
+
+export default {
+  component: Checkbox,
+  title: 'Checkbox',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Checkbox>;
+
+export { CheckboxExample };
diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx
new file mode 100644
index 0000000000000..f63dacc50b601
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Checkbox } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import CheckboxExampleCheckedMixed from '../../examples/components/Checkbox/States/CheckboxExampleCheckedMixed';
+
+export default {
+  component: Checkbox,
+  title: 'Checkbox',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Checkbox>;
+
+const CheckboxExampleCheckedMixedTeams = getThemeStoryVariant(CheckboxExampleCheckedMixed, 'teamsV2');
+
+const CheckboxExampleCheckedMixedTeamsDark = getThemeStoryVariant(CheckboxExampleCheckedMixed, 'teamsDarkV2');
+
+const CheckboxExampleCheckedMixedTeamsHighContrast = getThemeStoryVariant(
+  CheckboxExampleCheckedMixed,
+  'teamsHighContrast',
+);
+
+export {
+  CheckboxExampleCheckedMixed,
+  CheckboxExampleCheckedMixedTeams,
+  CheckboxExampleCheckedMixedTeamsDark,
+  CheckboxExampleCheckedMixedTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx
new file mode 100644
index 0000000000000..9e1091650ad44
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Checkbox } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import CheckboxExampleToggle from '../../examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand';
+
+export default {
+  component: Checkbox,
+  title: 'Checkbox',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Checkbox>;
+
+export { CheckboxExampleToggle };
diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Checkbox/commonStoryWrightSteps.ts
new file mode 100644
index 0000000000000..00bc345b2bb42
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Checkbox/commonStoryWrightSteps.ts
@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, Steps } from 'storywright';
+import { checkboxClassName } from '@fluentui/react-northstar';
+
+const StoryWrightSteps = new Steps()
+  .click(`.${checkboxClassName}`)
+  .snapshot('Checks checkbox')
+  .keys('body', Keys.tab)
+  .snapshot('Focuses checkbox')
+  .end();
+
+export default StoryWrightSteps;
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/Datepicker.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/Datepicker.stories.tsx
new file mode 100644
index 0000000000000..99b8e6e76e549
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/Datepicker.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker } from '@fluentui/react-northstar';
+import DatepickerHeaderExample from '../../examples/components/Datepicker/Slots/DatepickerHeaderExample.shorthand';
+import DatepickerExampleDisabled from '../../examples/components/Datepicker/States/DatepickerExampleDisabled.shorthand';
+import DatepickerExampleSelectedDate from '../../examples/components/Datepicker/States/DatepickerExampleSelectedDate.shorthand';
+import DatepickerExample from '../../examples/components/Datepicker/Types/DatepickerExample.shorthand';
+import DatepickerExampleOpen from '../../examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand';
+import DatepickerFirstWeekDayExample from '../../examples/components/Datepicker/Usage/DatepickerFirstWeekDayExample.shorthand';
+import DatepickerNoInputPlaceholderExample from '../../examples/components/Datepicker/Usage/DatepickerNoInputPlaceholderExample.shorthand';
+import DatepickerParseExample from '../../examples/components/Datepicker/Usage/DatepickerParseExample.shorthand';
+import DatepickerExampleStandaloneCalendarInput from '../../examples/components/Datepicker/Variations/DatepickerExampleStandaloneCalendarInput.shorthand';
+
+export default { component: Datepicker, title: 'Datepicker' } as ComponentMeta<typeof Datepicker>;
+
+export {
+  DatepickerHeaderExample,
+  DatepickerExampleDisabled,
+  DatepickerExampleSelectedDate,
+  DatepickerExample,
+  DatepickerExampleOpen,
+  DatepickerFirstWeekDayExample,
+  DatepickerNoInputPlaceholderExample,
+  DatepickerParseExample,
+  DatepickerExampleStandaloneCalendarInput,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx
new file mode 100644
index 0000000000000..cf9cb5319849b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, inputClassName } from '@fluentui/react-northstar';
+import { datepickerCalendarCellSelector } from './utils';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerCellExample from '../../examples/components/Datepicker/Slots/DatepickerCellExample.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${inputClassName}`)
+          .snapshot('Shows datepicker popup.')
+          .hover(datepickerCalendarCellSelector(19))
+          .snapshot("Does not show tooltip on not today's date.")
+          .hover(datepickerCalendarCellSelector(20))
+          .snapshot("Shows tooltip on today's date.")
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerCellExampleTeams = getThemeStoryVariant(DatepickerCellExample, 'teamsV2');
+
+const DatepickerCellExampleTeamsDark = getThemeStoryVariant(DatepickerCellExample, 'teamsDarkV2');
+
+const DatepickerCellExampleTeamsHighContrast = getThemeStoryVariant(DatepickerCellExample, 'teamsHighContrast');
+
+export {
+  DatepickerCellExample,
+  DatepickerCellExampleTeams,
+  DatepickerCellExampleTeamsDark,
+  DatepickerCellExampleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx
new file mode 100644
index 0000000000000..64af91cd11a4c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, inputClassName } from '@fluentui/react-northstar';
+import { datepickerCalendarCellSelector } from './utils';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerExampleClearable from '../../examples/components/Datepicker/Slots/DatepickerExampleClearable.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${inputClassName}`)
+          .click(datepickerCalendarCellSelector(16))
+          .snapshot('Shows selected date in input with clear possibility.')
+          .click(`.${inputClassName}__icon`)
+          .snapshot('Shows cleared input.')
+          .click(`.${inputClassName}`)
+          .snapshot('Shows cleared calendar.')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerExampleClearableTeams = getThemeStoryVariant(DatepickerExampleClearable, 'teamsV2');
+
+const DatepickerExampleClearableTeamsDark = getThemeStoryVariant(DatepickerExampleClearable, 'teamsDarkV2');
+
+const DatepickerExampleClearableTeamsHighContrast = getThemeStoryVariant(
+  DatepickerExampleClearable,
+  'teamsHighContrast',
+);
+
+export {
+  DatepickerExampleClearable,
+  DatepickerExampleClearableTeams,
+  DatepickerExampleClearableTeamsDark,
+  DatepickerExampleClearableTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx
new file mode 100644
index 0000000000000..59fe8a14216a1
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, buttonClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerExampleLocalizationStrings from '../../examples/components/Datepicker/Types/DatepickerExampleLocalizationStrings.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(`.${buttonClassName}`).snapshot('Shows localized calendar.').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerExampleLocalizationStringsTeams = getThemeStoryVariant(DatepickerExampleLocalizationStrings, 'teamsV2');
+
+const DatepickerExampleLocalizationStringsTeamsDark = getThemeStoryVariant(
+  DatepickerExampleLocalizationStrings,
+  'teamsDarkV2',
+);
+
+const DatepickerExampleLocalizationStringsTeamsHighContrast = getThemeStoryVariant(
+  DatepickerExampleLocalizationStrings,
+  'teamsHighContrast',
+);
+
+export {
+  DatepickerExampleLocalizationStrings,
+  DatepickerExampleLocalizationStringsTeams,
+  DatepickerExampleLocalizationStringsTeamsDark,
+  DatepickerExampleLocalizationStringsTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx
new file mode 100644
index 0000000000000..ce0397d377a0a
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, buttonClassName, datepickerCalendarHeaderActionClassName } from '@fluentui/react-northstar';
+import { datepickerCalendarCellSelector } from './utils';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerExampleMinMaxDate from '../../examples/components/Datepicker/Types/DatepickerExampleMinMaxDate.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${buttonClassName}`)
+          .snapshot('Shows min max dates.')
+          .click(datepickerCalendarCellSelector(10))
+          .snapshot('Disabled date is not clickable.')
+          .click(`.${datepickerCalendarHeaderActionClassName}:nth-of-type(1)`)
+          .snapshot('Month icon is not clickable.')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerExampleMinMaxDateTeams = getThemeStoryVariant(DatepickerExampleMinMaxDate, 'teamsV2');
+
+const DatepickerExampleMinMaxDateTeamsDark = getThemeStoryVariant(DatepickerExampleMinMaxDate, 'teamsDarkV2');
+
+const DatepickerExampleMinMaxDateTeamsHighContrast = getThemeStoryVariant(
+  DatepickerExampleMinMaxDate,
+  'teamsHighContrast',
+);
+
+export {
+  DatepickerExampleMinMaxDate,
+  DatepickerExampleMinMaxDateTeams,
+  DatepickerExampleMinMaxDateTeamsDark,
+  DatepickerExampleMinMaxDateTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx
new file mode 100644
index 0000000000000..1ae0ada3dbac7
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, buttonClassName, inputClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerExampleNoInput from '../../examples/components/Datepicker/Types/DatepickerExampleNoInput.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${buttonClassName}`)
+          .snapshot('Shows calendar.')
+          .click(`.${inputClassName}`)
+          .snapshot('Keeps calendar open.')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerExampleNoInputTeams = getThemeStoryVariant(DatepickerExampleNoInput, 'teamsV2');
+
+const DatepickerExampleNoInputTeamsDark = getThemeStoryVariant(DatepickerExampleNoInput, 'teamsDarkV2');
+
+const DatepickerExampleNoInputTeamsHighContrast = getThemeStoryVariant(DatepickerExampleNoInput, 'teamsHighContrast');
+
+export {
+  DatepickerExampleNoInput,
+  DatepickerExampleNoInputTeams,
+  DatepickerExampleNoInputTeamsDark,
+  DatepickerExampleNoInputTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx
new file mode 100644
index 0000000000000..fedb0e323842c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, buttonClassName } from '@fluentui/react-northstar';
+import { datepickerCalendarCellSelector } from './utils';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerExampleRequired from '../../examples/components/Datepicker/States/DatepickerExampleRequired.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .snapshot('Input shows error.')
+          .click(`.${buttonClassName}`)
+          .snapshot('Shows datepicker popup through button and error is shown.')
+          .click(datepickerCalendarCellSelector(15))
+          .snapshot('Shows selected date in input without error.')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerExampleRequiredTeams = getThemeStoryVariant(DatepickerExampleRequired, 'teamsV2');
+
+const DatepickerExampleRequiredTeamsDark = getThemeStoryVariant(DatepickerExampleRequired, 'teamsDarkV2');
+
+const DatepickerExampleRequiredTeamsHighContrast = getThemeStoryVariant(DatepickerExampleRequired, 'teamsHighContrast');
+
+export {
+  DatepickerExampleRequired,
+  DatepickerExampleRequiredTeams,
+  DatepickerExampleRequiredTeamsDark,
+  DatepickerExampleRequiredTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx
new file mode 100644
index 0000000000000..00869d7137a36
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, buttonClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerExampleRestrictedDates from '../../examples/components/Datepicker/Types/DatepickerExampleRestrictedDates.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(`.${buttonClassName}`).snapshot('Shows disabled dates.').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerExampleRestrictedDatesTeams = getThemeStoryVariant(DatepickerExampleRestrictedDates, 'teamsV2');
+
+const DatepickerExampleRestrictedDatesTeamsDark = getThemeStoryVariant(DatepickerExampleRestrictedDates, 'teamsDarkV2');
+
+const DatepickerExampleRestrictedDatesTeamsHighContrast = getThemeStoryVariant(
+  DatepickerExampleRestrictedDates,
+  'teamsHighContrast',
+);
+
+export {
+  DatepickerExampleRestrictedDates,
+  DatepickerExampleRestrictedDatesTeams,
+  DatepickerExampleRestrictedDatesTeamsDark,
+  DatepickerExampleRestrictedDatesTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx
new file mode 100644
index 0000000000000..c668c56784679
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, buttonClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerExampleStandaloneCalendarButton from '../../examples/components/Datepicker/Variations/DatepickerExampleStandaloneCalendarButton.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(`.${buttonClassName}`).snapshot('Shows datepicker calendar.').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerExampleStandaloneCalendarButtonTeams = getThemeStoryVariant(
+  DatepickerExampleStandaloneCalendarButton,
+  'teamsV2',
+);
+
+const DatepickerExampleStandaloneCalendarButtonTeamsDark = getThemeStoryVariant(
+  DatepickerExampleStandaloneCalendarButton,
+  'teamsDarkV2',
+);
+
+const DatepickerExampleStandaloneCalendarButtonTeamsHighContrast = getThemeStoryVariant(
+  DatepickerExampleStandaloneCalendarButton,
+  'teamsHighContrast',
+);
+
+export {
+  DatepickerExampleStandaloneCalendarButton,
+  DatepickerExampleStandaloneCalendarButtonTeams,
+  DatepickerExampleStandaloneCalendarButtonTeamsDark,
+  DatepickerExampleStandaloneCalendarButtonTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx
new file mode 100644
index 0000000000000..e7e18196f1fe0
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, buttonClassName } from '@fluentui/react-northstar';
+import { datepickerCalendarCellSelector } from './utils';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerExampleToday from '../../examples/components/Datepicker/States/DatepickerExampleToday.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${buttonClassName}`)
+          .snapshot('Shows datepicker popup through button.')
+          .click(datepickerCalendarCellSelector(15))
+          .snapshot('Shows selected date in input.')
+          .click(`.${buttonClassName}`)
+          .snapshot('Shows selected date in calendar.')
+          .hover(datepickerCalendarCellSelector(22))
+          .snapshot('Shows calendar with hover.')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerExampleTodayTeams = getThemeStoryVariant(DatepickerExampleToday, 'teamsV2');
+
+const DatepickerExampleTodayTeamsDark = getThemeStoryVariant(DatepickerExampleToday, 'teamsDarkV2');
+
+const DatepickerExampleTodayTeamsHighContrast = getThemeStoryVariant(DatepickerExampleToday, 'teamsHighContrast');
+
+export {
+  DatepickerExampleToday,
+  DatepickerExampleTodayTeams,
+  DatepickerExampleTodayTeamsDark,
+  DatepickerExampleTodayTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx
new file mode 100644
index 0000000000000..4b57bd595750c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, buttonClassName, datepickerCalendarCellClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerExampleWeek from '../../examples/components/Datepicker/Types/DatepickerExampleWeek.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${buttonClassName}`)
+          .snapshot('Shows calendar.')
+          .hover(`.${datepickerCalendarCellClassName}:nth-child(1)`)
+          .snapshot('Calendar is opened with the entire week highlighted on hover.')
+          .click(`.${datepickerCalendarCellClassName}:nth-child(1)`)
+          .click(`.${buttonClassName}`)
+          .snapshot('Calendar is opened with selected week highlighted.')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerExampleWeekTeams = getThemeStoryVariant(DatepickerExampleWeek, 'teamsV2');
+
+const DatepickerExampleWeekTeamsDark = getThemeStoryVariant(DatepickerExampleWeek, 'teamsDarkV2');
+
+const DatepickerExampleWeekTeamsHighContrast = getThemeStoryVariant(DatepickerExampleWeek, 'teamsHighContrast');
+
+export {
+  DatepickerExampleWeek,
+  DatepickerExampleWeekTeams,
+  DatepickerExampleWeekTeamsDark,
+  DatepickerExampleWeekTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx
new file mode 100644
index 0000000000000..d95dafcec6726
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, inputClassName } from '@fluentui/react-northstar';
+import { datepickerCalendarCellSelector } from './utils';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerFormatExample from '../../examples/components/Datepicker/Usage/DatepickerFormatExample.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${inputClassName}`)
+          .snapshot('Shows datepicker popup')
+          .click(datepickerCalendarCellSelector(20))
+          .snapshot('Shows selected date')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerFormatExampleTeams = getThemeStoryVariant(DatepickerFormatExample, 'teamsV2');
+
+const DatepickerFormatExampleTeamsDark = getThemeStoryVariant(DatepickerFormatExample, 'teamsDarkV2');
+
+const DatepickerFormatExampleTeamsHighContrast = getThemeStoryVariant(DatepickerFormatExample, 'teamsHighContrast');
+
+export {
+  DatepickerFormatExample,
+  DatepickerFormatExampleTeams,
+  DatepickerFormatExampleTeamsDark,
+  DatepickerFormatExampleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx
new file mode 100644
index 0000000000000..d78737cd37672
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Datepicker, datepickerCalendarHeaderCellClassName, inputClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DatepickerHeaderCellExample from '../../examples/components/Datepicker/Slots/DatepickerHeaderCellExample.shorthand';
+
+export default {
+  component: Datepicker,
+  title: 'Datepicker',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${inputClassName}`)
+          .snapshot('Shows datepicker popup.')
+          .hover(`.${datepickerCalendarHeaderCellClassName}:nth-child(1)`)
+          .snapshot("Shows tooltip on today's date.")
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Datepicker>;
+
+const DatepickerHeaderCellExampleTeams = getThemeStoryVariant(DatepickerHeaderCellExample, 'teamsV2');
+
+const DatepickerHeaderCellExampleTeamsDark = getThemeStoryVariant(DatepickerHeaderCellExample, 'teamsDarkV2');
+
+const DatepickerHeaderCellExampleTeamsHighContrast = getThemeStoryVariant(
+  DatepickerHeaderCellExample,
+  'teamsHighContrast',
+);
+
+export {
+  DatepickerHeaderCellExample,
+  DatepickerHeaderCellExampleTeams,
+  DatepickerHeaderCellExampleTeamsDark,
+  DatepickerHeaderCellExampleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/utils.ts b/packages/fluentui/docs/src/vr-tests/Datepicker/utils.ts
new file mode 100644
index 0000000000000..381fe6724a49a
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Datepicker/utils.ts
@@ -0,0 +1,13 @@
+import {
+  datepickerCalendarCellClassName,
+  datepickerCalendarCellButtonClassName,
+  datepickerCalendarGridRowClassName,
+} from '@fluentui/react-northstar';
+
+export const datepickerCalendarCellSelector = index => {
+  const row = Math.floor((index - 1) / 7);
+  const col = index - row * 7;
+  return `.${datepickerCalendarGridRowClassName}:nth-child(${row})
+            >.${datepickerCalendarCellClassName}:nth-child(${col})
+            >.${datepickerCalendarCellButtonClassName}`;
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/Dialog.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/Dialog.stories.tsx
new file mode 100644
index 0000000000000..d29b9e78a7d9b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/Dialog.stories.tsx
@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dialog } from '@fluentui/react-northstar';
+import DialogExample from '../../examples/components/Dialog/Types/DialogExample.shorthand';
+import DialogExampleCallbacks from '../../examples/components/Dialog/Usage/DialogExampleCallbacks.shorthand';
+
+export default { component: Dialog, title: 'Dialog' } as ComponentMeta<typeof Dialog>;
+
+export { DialogExample, DialogExampleCallbacks };
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx
new file mode 100644
index 0000000000000..b52b282bacda4
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dialog } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import DialogExampleBackdrop from '../../examples/components/Dialog/Variations/DialogExampleBackdrop.shorthand';
+
+export default {
+  component: Dialog,
+  title: 'Dialog',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Dialog>;
+
+const DialogExampleBackdropTeams = getThemeStoryVariant(DialogExampleBackdrop, 'teamsV2');
+
+const DialogExampleBackdropTeamsDark = getThemeStoryVariant(DialogExampleBackdrop, 'teamsDarkV2');
+
+const DialogExampleBackdropTeamsHighContrast = getThemeStoryVariant(DialogExampleBackdrop, 'teamsHighContrast');
+
+export {
+  DialogExampleBackdrop,
+  DialogExampleBackdropTeams,
+  DialogExampleBackdropTeamsDark,
+  DialogExampleBackdropTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx
new file mode 100644
index 0000000000000..81e6d8ee80e0b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dialog } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import DialogExampleContent from '../../examples/components/Dialog/Content/DialogExampleContent.shorthand';
+
+export default {
+  component: Dialog,
+  title: 'Dialog',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Dialog>;
+
+const DialogExampleContentTeams = getThemeStoryVariant(DialogExampleContent, 'teamsV2');
+
+const DialogExampleContentTeamsDark = getThemeStoryVariant(DialogExampleContent, 'teamsDarkV2');
+
+const DialogExampleContentTeamsHighContrast = getThemeStoryVariant(DialogExampleContent, 'teamsHighContrast');
+
+export {
+  DialogExampleContent,
+  DialogExampleContentTeams,
+  DialogExampleContentTeamsDark,
+  DialogExampleContentTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx
new file mode 100644
index 0000000000000..1a06d2da20563
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dialog } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import DialogExampleFooter from '../../examples/components/Dialog/Content/DialogExampleFooter.shorthand';
+
+export default {
+  component: Dialog,
+  title: 'Dialog',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Dialog>;
+
+export { DialogExampleFooter };
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx
new file mode 100644
index 0000000000000..6b56ddc7c8893
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dialog } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import DialogExampleFullWidth from '../../examples/components/Dialog/Content/DialogExampleFullWidth.shorthand';
+
+export default {
+  component: Dialog,
+  title: 'Dialog',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Dialog>;
+
+export { DialogExampleFullWidth };
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx
new file mode 100644
index 0000000000000..213b5c8cbd39c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dialog } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import DialogExampleHeaderAction from '../../examples/components/Dialog/Content/DialogExampleHeaderAction.shorthand';
+
+export default {
+  component: Dialog,
+  title: 'Dialog',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Dialog>;
+
+const DialogExampleHeaderActionTeams = getThemeStoryVariant(DialogExampleHeaderAction, 'teamsV2');
+
+const DialogExampleHeaderActionTeamsDark = getThemeStoryVariant(DialogExampleHeaderAction, 'teamsDarkV2');
+
+const DialogExampleHeaderActionTeamsHighContrast = getThemeStoryVariant(DialogExampleHeaderAction, 'teamsHighContrast');
+
+export {
+  DialogExampleHeaderAction,
+  DialogExampleHeaderActionTeams,
+  DialogExampleHeaderActionTeamsDark,
+  DialogExampleHeaderActionTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx
new file mode 100644
index 0000000000000..a51568d661115
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dialog } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import DialogExampleRtl from '../../examples/components/Dialog/Rtl/DialogExample.rtl';
+
+export default {
+  component: Dialog,
+  title: 'Dialog',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Dialog>;
+
+export { DialogExampleRtl };
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx
new file mode 100644
index 0000000000000..e8facf50a6d20
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dialog } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import DialogExampleScroll from '../../examples/components/Dialog/Variations/DialogExampleScroll.shorthand';
+
+export default {
+  component: Dialog,
+  title: 'Dialog',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Dialog>;
+
+const DialogExampleScrollTeams = getThemeStoryVariant(DialogExampleScroll, 'teamsV2');
+
+const DialogExampleScrollTeamsDark = getThemeStoryVariant(DialogExampleScroll, 'teamsDarkV2');
+
+const DialogExampleScrollTeamsHighContrast = getThemeStoryVariant(DialogExampleScroll, 'teamsHighContrast');
+
+export {
+  DialogExampleScroll,
+  DialogExampleScrollTeams,
+  DialogExampleScrollTeamsDark,
+  DialogExampleScrollTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx
new file mode 100644
index 0000000000000..e83155f52d647
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dialog } from '@fluentui/react-northstar';
+import StoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import DialogExampleZoomContent from '../../examples/components/Dialog/Content/DialogExampleZoomCustomFooter.shorthand';
+
+export default {
+  component: Dialog,
+  title: 'Dialog',
+  decorators: [story => <StoryWright steps={StoryWrightSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Dialog>;
+
+const DialogExampleZoomContentTeams = getThemeStoryVariant(DialogExampleZoomContent, 'teamsV2');
+
+const DialogExampleZoomContentTeamsDark = getThemeStoryVariant(DialogExampleZoomContent, 'teamsDarkV2');
+
+const DialogExampleZoomContentTeamsHighContrast = getThemeStoryVariant(DialogExampleZoomContent, 'teamsHighContrast');
+
+export {
+  DialogExampleZoomContent,
+  DialogExampleZoomContentTeams,
+  DialogExampleZoomContentTeamsDark,
+  DialogExampleZoomContentTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Dialog/commonStoryWrightSteps.ts
new file mode 100644
index 0000000000000..0a8740e215787
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dialog/commonStoryWrightSteps.ts
@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Steps } from 'storywright';
+import { buttonClassName } from '@fluentui/react-northstar';
+
+const button = `.${buttonClassName}`;
+
+const StoryWrightSteps = new Steps().click(button).snapshot('Clicks the trigger button').end();
+
+export default StoryWrightSteps;
diff --git a/packages/fluentui/docs/src/vr-tests/Divider/Divider.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/Divider.stories.tsx
new file mode 100644
index 0000000000000..93247c8aabb70
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Divider/Divider.stories.tsx
@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider } from '@fluentui/react-northstar';
+import DividerExampleContent from '../../examples/components/Divider/Types/DividerExampleContent';
+import DividerExampleImportant from '../../examples/components/Divider/Variations/DividerExampleImportant';
+import DividerExampleSize from '../../examples/components/Divider/Variations/DividerExampleSize';
+import DividerVerticalExampleShorthand from '../../examples/components/Divider/Variations/DividerExampleVertical.shorthand';
+
+export default { component: Divider, title: 'Divider' } as ComponentMeta<typeof Divider>;
+
+export { DividerExampleContent, DividerExampleImportant, DividerExampleSize, DividerVerticalExampleShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleColor.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleColor.stories.tsx
new file mode 100644
index 0000000000000..a739f43d23ef5
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleColor.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DividerExampleColor from '../../examples/components/Divider/Variations/DividerExampleColor.shorthand';
+
+export default {
+  component: Divider,
+  title: 'Divider',
+} as ComponentMeta<typeof Divider>;
+
+const DividerExampleColorTeams = getThemeStoryVariant(DividerExampleColor, 'teamsV2');
+
+const DividerExampleColorTeamsDark = getThemeStoryVariant(DividerExampleColor, 'teamsDarkV2');
+
+const DividerExampleColorTeamsHighContrast = getThemeStoryVariant(DividerExampleColor, 'teamsHighContrast');
+
+export {
+  DividerExampleColor,
+  DividerExampleColorTeams,
+  DividerExampleColorTeamsDark,
+  DividerExampleColorTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleContent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleContent.stories.tsx
new file mode 100644
index 0000000000000..6a4b9741ffebb
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleContent.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DividerExampleContent from '../../examples/components/Divider/Types/DividerExampleContent.shorthand';
+
+export default {
+  component: Divider,
+  title: 'Divider',
+} as ComponentMeta<typeof Divider>;
+
+const DividerExampleContentTeams = getThemeStoryVariant(DividerExampleContent, 'teamsV2');
+
+const DividerExampleContentTeamsDark = getThemeStoryVariant(DividerExampleContent, 'teamsDarkV2');
+
+const DividerExampleContentTeamsHighContrast = getThemeStoryVariant(DividerExampleContent, 'teamsHighContrast');
+
+export {
+  DividerExampleContent,
+  DividerExampleContentTeams,
+  DividerExampleContentTeamsDark,
+  DividerExampleContentTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleFittedShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleFittedShorthand.stories.tsx
new file mode 100644
index 0000000000000..85a58f86f0e88
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleFittedShorthand.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DividerExampleFittedShorthand from '../../examples/components/Divider/Variations/DividerExampleFitted.shorthand';
+
+export default {
+  component: Divider,
+  title: 'Divider',
+} as ComponentMeta<typeof Divider>;
+
+const DividerExampleFittedShorthandTeams = getThemeStoryVariant(DividerExampleFittedShorthand, 'teamsV2');
+
+const DividerExampleFittedShorthandTeamsDark = getThemeStoryVariant(DividerExampleFittedShorthand, 'teamsDarkV2');
+
+const DividerExampleFittedShorthandTeamsHighContrast = getThemeStoryVariant(
+  DividerExampleFittedShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  DividerExampleFittedShorthand,
+  DividerExampleFittedShorthandTeams,
+  DividerExampleFittedShorthandTeamsDark,
+  DividerExampleFittedShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleImportantShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleImportantShorthand.stories.tsx
new file mode 100644
index 0000000000000..d0010f19ec715
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleImportantShorthand.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DividerExampleImportantShorthand from '../../examples/components/Divider/Variations/DividerExampleImportant.shorthand';
+
+export default {
+  component: Divider,
+  title: 'Divider',
+} as ComponentMeta<typeof Divider>;
+
+const DividerExampleImportantShorthandTeams = getThemeStoryVariant(DividerExampleImportantShorthand, 'teamsV2');
+
+const DividerExampleImportantShorthandTeamsDark = getThemeStoryVariant(DividerExampleImportantShorthand, 'teamsDarkV2');
+
+const DividerExampleImportantShorthandTeamsHighContrast = getThemeStoryVariant(
+  DividerExampleImportantShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  DividerExampleImportantShorthand,
+  DividerExampleImportantShorthandTeams,
+  DividerExampleImportantShorthandTeamsDark,
+  DividerExampleImportantShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtl.stories.tsx
new file mode 100644
index 0000000000000..fcc611f680128
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtl.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DividerExampleRtl from '../../examples/components/Divider/Rtl/DividerExample.rtl';
+
+export default {
+  component: Divider,
+  title: 'Divider',
+} as ComponentMeta<typeof Divider>;
+
+const DividerExampleRtlTeams = getThemeStoryVariant(DividerExampleRtl, 'teamsV2');
+
+const DividerExampleRtlTeamsDark = getThemeStoryVariant(DividerExampleRtl, 'teamsDarkV2');
+
+const DividerExampleRtlTeamsHighContrast = getThemeStoryVariant(DividerExampleRtl, 'teamsHighContrast');
+
+export { DividerExampleRtl, DividerExampleRtlTeams, DividerExampleRtlTeamsDark, DividerExampleRtlTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtlAndLtr.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtlAndLtr.stories.tsx
new file mode 100644
index 0000000000000..cef84f33c8c3d
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtlAndLtr.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DividerExampleRtlAndLtr from '../../examples/components/Divider/Visuals/DividerExampleRtlAndLtr';
+
+export default {
+  component: Divider,
+  title: 'Divider',
+} as ComponentMeta<typeof Divider>;
+
+const DividerExampleRtlAndLtrTeams = getThemeStoryVariant(DividerExampleRtlAndLtr, 'teamsV2');
+
+const DividerExampleRtlAndLtrTeamsDark = getThemeStoryVariant(DividerExampleRtlAndLtr, 'teamsDarkV2');
+
+const DividerExampleRtlAndLtrTeamsHighContrast = getThemeStoryVariant(DividerExampleRtlAndLtr, 'teamsHighContrast');
+
+export {
+  DividerExampleRtlAndLtr,
+  DividerExampleRtlAndLtrTeams,
+  DividerExampleRtlAndLtrTeamsDark,
+  DividerExampleRtlAndLtrTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..97d14293dfa73
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleShorthand.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DividerExampleShorthand from '../../examples/components/Divider/Types/DividerExample.shorthand';
+
+export default {
+  component: Divider,
+  title: 'Divider',
+} as ComponentMeta<typeof Divider>;
+
+const DividerExampleShorthandTeams = getThemeStoryVariant(DividerExampleShorthand, 'teamsV2');
+
+const DividerExampleShorthandTeamsDark = getThemeStoryVariant(DividerExampleShorthand, 'teamsDarkV2');
+
+const DividerExampleShorthandTeamsHighContrast = getThemeStoryVariant(DividerExampleShorthand, 'teamsHighContrast');
+
+export {
+  DividerExampleShorthand,
+  DividerExampleShorthandTeams,
+  DividerExampleShorthandTeamsDark,
+  DividerExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx
new file mode 100644
index 0000000000000..244330bacb4d0
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx
@@ -0,0 +1,29 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Divider } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DividerExampleSize from '../../examples/components/Divider/Variations/DividerExampleSize.shorthand';
+
+export default {
+  component: Divider,
+  title: 'Divider',
+} as ComponentMeta<typeof Divider>;
+
+const DividerExampleSizeTeams = getThemeStoryVariant((DividerExampleSize as unknown) as ComponentStory<any>, 'teamsV2');
+
+const DividerExampleSizeTeamsDark = getThemeStoryVariant(
+  (DividerExampleSize as unknown) as ComponentStory<any>,
+  'teamsDarkV2',
+);
+
+const DividerExampleSizeTeamsHighContrast = getThemeStoryVariant(
+  (DividerExampleSize as unknown) as ComponentStory<any>,
+  'teamsHighContrast',
+);
+
+export {
+  DividerExampleSize,
+  DividerExampleSizeTeams,
+  DividerExampleSizeTeamsDark,
+  DividerExampleSizeTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx
new file mode 100644
index 0000000000000..795e92f39f264
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown } from '@fluentui/react-northstar';
+import DropdownExampleFreeform from '../../examples/components/Dropdown/Types/DropdownExampleFreeform.shorthand';
+import DropdownExampleInline from '../../examples/components/Dropdown/Types/DropdownExampleInline.shorthand';
+import DropdownExampleInverted from '../../examples/components/Dropdown/Types/DropdownExampleInverted.shorthand';
+import DropdownExampleSearch from '../../examples/components/Dropdown/Types/DropdownExampleSearch.shorthand';
+import DropdownExampleRender from '../../examples/components/Dropdown/Usage/DropdownExampleRender.shorthand';
+import DropdownExamplePosition from '../../examples/components/Dropdown/Variations/DropdownExamplePosition.shorthand';
+import DropdownExampleSearchMultipleFluid from '../../examples/components/Dropdown/Variations/DropdownExampleSearchMultipleFluid.shorthand';
+import DropdownExampleSearchMultipleFrenchLanguage from '../../examples/components/Dropdown/Variations/DropdownExampleSearchMultipleFrenchLanguage.shorthand';
+import DropdownExampleSearchMultipleImageAndContent from '../../examples/components/Dropdown/Variations/DropdownExampleSearchMultipleImageAndContent.shorthand';
+
+export default { component: Dropdown, title: 'Dropdown' } as ComponentMeta<typeof Dropdown>;
+
+export {
+  DropdownExampleFreeform,
+  DropdownExampleInline,
+  DropdownExampleInverted,
+  DropdownExampleSearch,
+  DropdownExampleRender,
+  DropdownExamplePosition,
+  DropdownExampleSearchMultipleFluid,
+  DropdownExampleSearchMultipleFrenchLanguage,
+  DropdownExampleSearchMultipleImageAndContent,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx
new file mode 100644
index 0000000000000..495664a9eba75
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar';
+import DropdownClearableExample from '../../examples/components/Dropdown/Types/DropdownExampleClearable.shorthand';
+
+const selectors = {
+  clearIndicator: `.${dropdownSlotClassNames.clearIndicator}`,
+  triggerButton: `.${dropdownSlotClassNames.triggerButton}`,
+  item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`,
+};
+
+const steps = new Steps()
+  .click(selectors.triggerButton)
+  .click(selectors.item(3))
+  .snapshot('Selects an item')
+  .click(selectors.clearIndicator)
+  .snapshot('Clears the value')
+  .end();
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+  decorators: [story => <StoryWright steps={steps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Dropdown>;
+
+export { DropdownClearableExample };
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownCustomClearableExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownCustomClearableExample.stories.tsx
new file mode 100644
index 0000000000000..9ec49db2e8670
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownCustomClearableExample.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DropdownCustomClearableExample from '../../examples/components/Dropdown/Visual/DropdownExampleCustomClearable.shorthand';
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+} as ComponentMeta<typeof Dropdown>;
+
+const DropdownCustomClearableExampleTeams = getThemeStoryVariant(DropdownCustomClearableExample, 'teamsV2');
+
+const DropdownCustomClearableExampleTeamsDark = getThemeStoryVariant(DropdownCustomClearableExample, 'teamsDarkV2');
+
+const DropdownCustomClearableExampleTeamsHighContrast = getThemeStoryVariant(
+  DropdownCustomClearableExample,
+  'teamsHighContrast',
+);
+
+export {
+  DropdownCustomClearableExample,
+  DropdownCustomClearableExampleTeams,
+  DropdownCustomClearableExampleTeamsDark,
+  DropdownCustomClearableExampleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx
new file mode 100644
index 0000000000000..b4ccf74aa6958
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DropdownExample from '../../examples/components/Dropdown/Types/DropdownExample.shorthand';
+
+const selectors = {
+  triggerButton: `.${dropdownSlotClassNames.triggerButton}`,
+  item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`,
+};
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(selectors.triggerButton).snapshot('Shows list').end()}>
+        {story()}
+      </StoryWright>
+    ),
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(selectors.triggerButton)
+          .click(selectors.item(3))
+          .snapshot('Selects an item')
+          .click(selectors.triggerButton)
+          .snapshot('Opens with selected item highlighted')
+          .hover(selectors.item(2))
+          .snapshot('Highlights another item')
+          .click(selectors.triggerButton)
+          .snapshot('Closes the list')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .keys('body', Keys.tab)
+          .snapshot('Focuses trigger')
+          .keys(selectors.triggerButton, Keys.downArrow)
+          .snapshot('Focuses first item')
+          .keys(selectors.triggerButton, Keys.downArrow)
+          .snapshot('Focuses second item')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Dropdown>;
+
+const DropdownExampleTeams = getThemeStoryVariant(DropdownExample, 'teamsV2');
+
+const DropdownExampleTeamsDark = getThemeStoryVariant(DropdownExample, 'teamsDarkV2');
+
+const DropdownExampleTeamsHighContrast = getThemeStoryVariant(DropdownExample, 'teamsHighContrast');
+
+export { DropdownExample, DropdownExampleTeams, DropdownExampleTeamsDark, DropdownExampleTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx
new file mode 100644
index 0000000000000..b7cc64ca2860d
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown, dropdownSlotClassNames, dropdownSearchInputSlotClassNames } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DropdownExampleDisabled from '../../examples/components/Dropdown/State/DropdownExampleDisabled.shorthand';
+
+const selectors = {
+  triggerButton: `.${dropdownSlotClassNames.triggerButton}`,
+  input: `.${dropdownSearchInputSlotClassNames.input}`,
+};
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().hover(selectors.triggerButton).snapshot('Mouse hover on trigger').end()}>
+        {story()}
+      </StoryWright>
+    ),
+    story => (
+      <StoryWright steps={new Steps().hover(selectors.input).snapshot('Mouse hover on input').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Dropdown>;
+
+const DropdownExampleDisabledTeams = getThemeStoryVariant(DropdownExampleDisabled, 'teamsV2');
+
+const DropdownExampleDisabledTeamsDark = getThemeStoryVariant(DropdownExampleDisabled, 'teamsDarkV2');
+
+const DropdownExampleDisabledTeamsHighContrast = getThemeStoryVariant(DropdownExampleDisabled, 'teamsHighContrast');
+
+export {
+  DropdownExampleDisabled,
+  DropdownExampleDisabledTeams,
+  DropdownExampleDisabledTeamsDark,
+  DropdownExampleDisabledTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx
new file mode 100644
index 0000000000000..e72eadd9b8b77
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar';
+import DropdownExampleHeaderMessage from '../../examples/components/Dropdown/Slots/DropdownExampleHeaderMessage.shorthand';
+
+const selectors = {
+  triggerButton: `.${dropdownSlotClassNames.triggerButton}`,
+};
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(selectors.triggerButton).snapshot('Shows header message').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Dropdown>;
+
+export { DropdownExampleHeaderMessage };
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx
new file mode 100644
index 0000000000000..0c50032002c00
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown, dropdownSlotClassNames, dropdownSearchInputSlotClassNames } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DropdownExampleLoading from '../../examples/components/Dropdown/State/DropdownExampleLoading.shorthand';
+
+const selectors = {
+  triggerButton: `.${dropdownSlotClassNames.toggleIndicator}`,
+  input: `.${dropdownSearchInputSlotClassNames.input}`,
+};
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(selectors.triggerButton).snapshot('List with loading state').end()}>
+        {story()}
+      </StoryWright>
+    ),
+    story => (
+      <StoryWright
+        steps={new Steps().keys(selectors.input, Keys.upArrow).snapshot('showing loading in the bottom').end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Dropdown>;
+
+const DropdownExampleLoadingTeams = getThemeStoryVariant(DropdownExampleLoading, 'teamsV2');
+
+const DropdownExampleLoadingTeamsDark = getThemeStoryVariant(DropdownExampleLoading, 'teamsDarkV2');
+
+const DropdownExampleLoadingTeamsHighContrast = getThemeStoryVariant(DropdownExampleLoading, 'teamsHighContrast');
+
+export {
+  DropdownExampleLoading,
+  DropdownExampleLoadingTeams,
+  DropdownExampleLoadingTeamsDark,
+  DropdownExampleLoadingTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx
new file mode 100644
index 0000000000000..28af72c92ea00
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown, dropdownSlotClassNames, dropdownSelectedItemSlotClassNames } from '@fluentui/react-northstar';
+import DropdownExampleMultiple from '../../examples/components/Dropdown/Types/DropdownExampleMultiple.shorthand';
+
+const selectors = {
+  triggerButton: `.${dropdownSlotClassNames.triggerButton}`,
+  item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`,
+  removeItemIcon: (itemIndex: number) =>
+    `.${dropdownSlotClassNames.selectedItems} span:nth-child(${itemIndex}) .${dropdownSelectedItemSlotClassNames.icon}`,
+};
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(selectors.triggerButton)
+          .click(selectors.item(3))
+          .click(selectors.triggerButton)
+          .click(selectors.item(2))
+          .click(selectors.triggerButton)
+          .snapshot('Opened dropdown with two items selected')
+          .click(selectors.removeItemIcon(1))
+          .click(selectors.triggerButton)
+          .click(selectors.removeItemIcon(1))
+          .click(selectors.triggerButton)
+          .snapshot('Opened dropdown with no items selected')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Dropdown>;
+
+export { DropdownExampleMultiple };
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx
new file mode 100644
index 0000000000000..e464cb567129c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar';
+import DropdownExamplePosition from '../../examples/components/Dropdown/Variations/DropdownExampleOffset.shorthand';
+
+const selectors = {
+  trigger: `.${dropdownSlotClassNames.triggerButton}`,
+};
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(selectors.trigger).snapshot('Opens a dropdown').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Dropdown>;
+
+export { DropdownExamplePosition };
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx
new file mode 100644
index 0000000000000..03feabd314240
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar';
+import DropdownExampleRtl from '../../examples/components/Dropdown/Rtl/DropdownExample.rtl';
+
+const selectors = {
+  triggerButton: `.${dropdownSlotClassNames.triggerButton}`,
+  item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`,
+};
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(selectors.triggerButton)
+          .snapshot('RTL: Shows list')
+          .click(selectors.item(3))
+          .snapshot('RTL: Selects an item')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Dropdown>;
+
+export { DropdownExampleRtl };
diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx
new file mode 100644
index 0000000000000..767d8148e5165
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Dropdown, dropdownSearchInputSlotClassNames, dropdownSlotClassNames } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import DropdownExampleSearchMultiple from '../../examples/components/Dropdown/Types/DropdownExampleSearchMultiple.shorthand';
+
+const selectors = {
+  toggleIndicator: `.${dropdownSlotClassNames.toggleIndicator}`,
+  input: `.${dropdownSearchInputSlotClassNames.input}`,
+  item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`,
+  selectedItem: (itemIndex: number) => `.${dropdownSlotClassNames.selectedItems} span:nth-child(${itemIndex})`,
+};
+
+export default {
+  component: Dropdown,
+  title: 'Dropdown',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(selectors.toggleIndicator)
+          .click(selectors.item(2))
+          .click(selectors.toggleIndicator)
+          .click(selectors.item(2))
+          .keys(selectors.input, Keys.leftArrow)
+          .snapshot('Selects last selected element')
+          .hover(selectors.selectedItem(1))
+          .snapshot('Hovers first selected element')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Dropdown>;
+
+const DropdownExampleSearchMultipleTeams = getThemeStoryVariant(DropdownExampleSearchMultiple, 'teamsV2');
+
+const DropdownExampleSearchMultipleTeamsDark = getThemeStoryVariant(DropdownExampleSearchMultiple, 'teamsDarkV2');
+
+const DropdownExampleSearchMultipleTeamsHighContrast = getThemeStoryVariant(
+  DropdownExampleSearchMultiple,
+  'teamsHighContrast',
+);
+
+export {
+  DropdownExampleSearchMultiple,
+  DropdownExampleSearchMultipleTeams,
+  DropdownExampleSearchMultipleTeamsDark,
+  DropdownExampleSearchMultipleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Embed/Embed.stories.tsx b/packages/fluentui/docs/src/vr-tests/Embed/Embed.stories.tsx
new file mode 100644
index 0000000000000..ecb979a3c6bda
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Embed/Embed.stories.tsx
@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Embed } from '@fluentui/react-northstar';
+import EmbedExampleVideo from '../../examples/components/Embed/Slots/EmbedExampleVideo.shorthand';
+import EmbedExampleYouTube from '../../examples/components/Embed/Usage/EmbedExampleYouTube.shorthand';
+
+export default { component: Embed, title: 'Embed' } as ComponentMeta<typeof Embed>;
+
+export { EmbedExampleVideo, EmbedExampleYouTube };
diff --git a/packages/fluentui/docs/src/vr-tests/Flex/Flex.stories.tsx b/packages/fluentui/docs/src/vr-tests/Flex/Flex.stories.tsx
new file mode 100644
index 0000000000000..93c956286ba52
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Flex/Flex.stories.tsx
@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Flex } from '@fluentui/react-northstar';
+import FlexExampleMediaCard from '../../examples/components/Flex/Rtl/FlexExample.rtl';
+import FlexExampleColumns from '../../examples/components/Flex/Types/FlexExampleColumns.shorthand';
+import FlexExampleInput from '../../examples/components/Flex/Types/FlexExampleInput.shorthand';
+import FlexExampleItemsAlignment from '../../examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand';
+import FlexExampleMixedAlignment from '../../examples/components/Flex/Types/FlexExampleMixedAlignment.shorthand';
+import FlexExampleNavMenu from '../../examples/components/Flex/Types/FlexExampleNavMenu.shorthand';
+
+export default { component: Flex, title: 'Flex' } as ComponentMeta<typeof Flex>;
+
+export {
+  FlexExampleMediaCard,
+  FlexExampleColumns,
+  FlexExampleInput,
+  FlexExampleItemsAlignment,
+  FlexExampleMixedAlignment,
+  FlexExampleNavMenu,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Form/Form.stories.tsx b/packages/fluentui/docs/src/vr-tests/Form/Form.stories.tsx
new file mode 100644
index 0000000000000..5c2a329bb911d
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Form/Form.stories.tsx
@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Form } from '@fluentui/react-northstar';
+import FormExampleRtl from '../../examples/components/Form/Rtl/FormExample.rtl';
+import FormExample from '../../examples/components/Form/Types/FormExampleBase';
+import FormExampleCheckbox from '../../examples/components/Form/Usage/FormExampleCheckbox';
+import FormExampleDatepicker from '../../examples/components/Form/Usage/FormExampleDatepicker';
+import FormExampleErrorAndSatisfactory from '../../examples/components/Form/Usage/FormExampleErrorAndSuccessful';
+import FormExampleSlider from '../../examples/components/Form/Usage/FormExampleSlider';
+import FormExampleComponents from '../../examples/components/Form/Variants/FormExampleComponents';
+
+export default { component: Form, title: 'Form' } as ComponentMeta<typeof Form>;
+
+export {
+  FormExampleRtl,
+  FormExample,
+  FormExampleCheckbox,
+  FormExampleDatepicker,
+  FormExampleErrorAndSatisfactory,
+  FormExampleSlider,
+  FormExampleComponents,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Grid/Grid.stories.tsx b/packages/fluentui/docs/src/vr-tests/Grid/Grid.stories.tsx
new file mode 100644
index 0000000000000..aec55dbd24397
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Grid/Grid.stories.tsx
@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Grid } from '@fluentui/react-northstar';
+import GridExample from '../../examples/components/Grid/Rtl/GridExample.rtl';
+
+export default { component: Grid, title: 'Grid' } as ComponentMeta<typeof Grid>;
+
+export { GridExample };
diff --git a/packages/fluentui/docs/src/vr-tests/Header/Header.stories.tsx b/packages/fluentui/docs/src/vr-tests/Header/Header.stories.tsx
new file mode 100644
index 0000000000000..3f93ba878bfaf
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Header/Header.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Header } from '@fluentui/react-northstar';
+import HeaderExampleRtl from '../../examples/components/Header/Rtl/HeaderExample.rtl';
+import HeadersExampleShorthand from '../../examples/components/Header/Types/HeaderExample.shorthand';
+import HeaderExample from '../../examples/components/Header/Types/HeaderExample';
+import HeaderExampleAlign from '../../examples/components/Header/Variations/HeaderExample.shorthand';
+import HeaderExampleColor from '../../examples/components/Header/Variations/HeaderExampleColor.shorthand';
+import HeaderExampleDescriptionShorthand from '../../examples/components/Header/Variations/HeaderExampleDescription.shorthand';
+import HeaderExampleDescription from '../../examples/components/Header/Variations/HeaderExampleDescription';
+import HeaderExampleDescriptionCustomizationShorthand from '../../examples/components/Header/Variations/HeaderExampleDescriptionCustomization.shorthand';
+import HeaderExampleDescriptionCustomization from '../../examples/components/Header/Variations/HeaderExampleDescriptionCustomization';
+
+export default { component: Header, title: 'Header' } as ComponentMeta<typeof Header>;
+
+export {
+  HeaderExampleRtl,
+  HeadersExampleShorthand,
+  HeaderExample,
+  HeaderExampleAlign,
+  HeaderExampleColor,
+  HeaderExampleDescriptionShorthand,
+  HeaderExampleDescription,
+  HeaderExampleDescriptionCustomizationShorthand,
+  HeaderExampleDescriptionCustomization,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Image/Image.stories.tsx b/packages/fluentui/docs/src/vr-tests/Image/Image.stories.tsx
new file mode 100644
index 0000000000000..457790498a5e9
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Image/Image.stories.tsx
@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Image } from '@fluentui/react-northstar';
+import ImageExampleRtl from '../../examples/components/Image/Rtl/ImageExample.rtl';
+import ImageExample from '../../examples/components/Image/Types/ImageExample.shorthand';
+import ImageExampleAvatar from '../../examples/components/Image/Types/ImageExampleAvatar.shorthand';
+import ImageExampleCircular from '../../examples/components/Image/Variations/ImageExampleCircular';
+import ImageExampleFluent from '../../examples/components/Image/Variations/ImageExampleFluid';
+
+export default { component: Image, title: 'Image' } as ComponentMeta<typeof Image>;
+
+export { ImageExampleRtl, ImageExample, ImageExampleAvatar, ImageExampleCircular, ImageExampleFluent };
diff --git a/packages/fluentui/docs/src/vr-tests/Input/Input.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/Input.stories.tsx
new file mode 100644
index 0000000000000..aa24a7f51d6c8
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Input/Input.stories.tsx
@@ -0,0 +1,28 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Input } from '@fluentui/react-northstar';
+import InputExampleRtl from '../../examples/components/Input/Rtl/InputExample.rtl';
+import InputExampleDisabled from '../../examples/components/Input/State/InputExampleDisabled.shorthand';
+import InputExampleFluid from '../../examples/components/Input/Variations/InputExampleFluid.shorthand';
+import InputExampleIcon from '../../examples/components/Input/Variations/InputExampleIcon.shorthand';
+import InputExampleIconClearableShorthand from '../../examples/components/Input/Variations/InputExampleIconClearable.shorthand';
+import InputExampleIconPosition from '../../examples/components/Input/Variations/InputExampleIconPosition.shorthand';
+import InputExampleInline from '../../examples/components/Input/Variations/InputExampleInline.shorthand';
+import InputExampleInputSlot from '../../examples/components/Input/Variations/InputExampleInputSlot.shorthand';
+import InputExampleTargeting from '../../examples/components/Input/Variations/InputExampleTargeting.shorthand';
+import InputExampleWrapperSlot from '../../examples/components/Input/Variations/InputExampleWrapperSlot.shorthand';
+
+export default { component: Input, title: 'Input' } as ComponentMeta<typeof Input>;
+
+export {
+  InputExampleRtl,
+  InputExampleDisabled,
+  InputExampleFluid,
+  InputExampleIcon,
+  InputExampleIconClearableShorthand,
+  InputExampleIconPosition,
+  InputExampleInline,
+  InputExampleInputSlot,
+  InputExampleTargeting,
+  InputExampleWrapperSlot,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Input/InputExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/InputExample.stories.tsx
new file mode 100644
index 0000000000000..641127ce2db3b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Input/InputExample.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Input } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import InputExample from '../../examples/components/Input/Types/InputInvertedExample.shorthand';
+
+export default {
+  component: Input,
+  title: 'Input',
+} as ComponentMeta<typeof Input>;
+
+const InputExampleTeams = getThemeStoryVariant(InputExample, 'teamsV2');
+
+const InputExampleTeamsDark = getThemeStoryVariant(InputExample, 'teamsDarkV2');
+
+const InputExampleTeamsHighContrast = getThemeStoryVariant(InputExample, 'teamsHighContrast');
+
+export { InputExample, InputExampleTeams, InputExampleTeamsDark, InputExampleTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx
new file mode 100644
index 0000000000000..0f8d8e21738fa
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Input, inputClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import InputExampleClearable from '../../examples/components/Input/Variations/InputExampleClearable.shorthand';
+
+export default {
+  component: Input,
+  title: 'Input',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps().setValue(`.${inputClassName} input`, 'Some text...').snapshot('Can be clearable').end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Input>;
+
+const InputExampleClearableTeams = getThemeStoryVariant(InputExampleClearable, 'teamsV2');
+
+const InputExampleClearableTeamsDark = getThemeStoryVariant(InputExampleClearable, 'teamsDarkV2');
+
+const InputExampleClearableTeamsHighContrast = getThemeStoryVariant(InputExampleClearable, 'teamsHighContrast');
+
+export {
+  InputExampleClearable,
+  InputExampleClearableTeams,
+  InputExampleClearableTeamsDark,
+  InputExampleClearableTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx
new file mode 100644
index 0000000000000..ff853d0b38a6b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Input } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import InputExampleLabelShorthand from '../../examples/components/Input/Slots/InputExampleLabel.shorthand';
+
+export default {
+  component: Input,
+  title: 'Input',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .snapshot('Input: Labels')
+          .setValue(`#inside-label`, 'Some text...')
+          .snapshot('Input: Inside Label with Value')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Input>;
+
+const InputExampleLabelShorthandTeams = getThemeStoryVariant(InputExampleLabelShorthand, 'teamsV2');
+
+const InputExampleLabelShorthandTeamsDark = getThemeStoryVariant(InputExampleLabelShorthand, 'teamsDarkV2');
+
+const InputExampleLabelShorthandTeamsHighContrast = getThemeStoryVariant(
+  InputExampleLabelShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  InputExampleLabelShorthand,
+  InputExampleLabelShorthandTeams,
+  InputExampleLabelShorthandTeamsDark,
+  InputExampleLabelShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/ItemLayout/ItemLayout.stories.tsx b/packages/fluentui/docs/src/vr-tests/ItemLayout/ItemLayout.stories.tsx
new file mode 100644
index 0000000000000..1856782500696
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/ItemLayout/ItemLayout.stories.tsx
@@ -0,0 +1,28 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { ItemLayout } from '@fluentui/react-northstar';
+import ItemLayoutExampleContent from '../../examples/components/ItemLayout/Content/ItemLayoutExampleContent.shorthand';
+import ItemLayoutExampleContentMediaShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleContentMedia.shorthand';
+import ItemLayoutExampleEndMediaShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleEndMedia.shorthand';
+import ItemLayoutExampleHeader from '../../examples/components/ItemLayout/Content/ItemLayoutExampleHeader.shorthand';
+import ItemLayoutExampleHeaderContentShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleHeaderContent.shorthand';
+import ItemLayoutExampleHeaderMediaShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleHeaderMedia.shorthand';
+import ItemLayoutExampleMediaShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleMedia.shorthand';
+import ItemLayoutExampleRtlShorthand from '../../examples/components/ItemLayout/Rtl/ItemLayoutExample.rtl';
+import ItemLayoutExampleShorthand from '../../examples/components/ItemLayout/Types/ItemLayoutExample.shorthand';
+import ItemLayoutExampleSelectionShorthand from '../../examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand';
+
+export default { component: ItemLayout, title: 'ItemLayout' } as ComponentMeta<typeof ItemLayout>;
+
+export {
+  ItemLayoutExampleContent,
+  ItemLayoutExampleContentMediaShorthand,
+  ItemLayoutExampleEndMediaShorthand,
+  ItemLayoutExampleHeader,
+  ItemLayoutExampleHeaderContentShorthand,
+  ItemLayoutExampleHeaderMediaShorthand,
+  ItemLayoutExampleMediaShorthand,
+  ItemLayoutExampleRtlShorthand,
+  ItemLayoutExampleShorthand,
+  ItemLayoutExampleSelectionShorthand,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Label/Label.stories.tsx b/packages/fluentui/docs/src/vr-tests/Label/Label.stories.tsx
new file mode 100644
index 0000000000000..f6561b9a50867
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Label/Label.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Label } from '@fluentui/react-northstar';
+import LabelExampleShorthand from '../../examples/components/Label/Content/LabelExample.shorthand';
+import LabelExample from '../../examples/components/Label/Content/LabelExample';
+import LabelExampleContentCustomizationShorthand from '../../examples/components/Label/Content/LabelExampleContentCustomization.shorthand';
+import LabelExampleIconShorthand from '../../examples/components/Label/Content/LabelExampleIcon.shorthand';
+import LabelExampleIconPositionShorthand from '../../examples/components/Label/Content/LabelExampleIconPosition.shorthand';
+import LabelExampleImageShorthand from '../../examples/components/Label/Content/LabelExampleImage.shorthand';
+import LabelExampleRtl from '../../examples/components/Label/Rtl/LabelExample.rtl';
+import LabelExampleCircularShorthand from '../../examples/components/Label/Variations/LabelExampleCircular.shorthand';
+import LabelExampleColor from '../../examples/components/Label/Variations/LabelExampleColor.shorthand';
+
+export default { component: Label, title: 'Label' } as ComponentMeta<typeof Label>;
+
+export {
+  LabelExampleShorthand,
+  LabelExample,
+  LabelExampleContentCustomizationShorthand,
+  LabelExampleIconShorthand,
+  LabelExampleIconPositionShorthand,
+  LabelExampleImageShorthand,
+  LabelExampleRtl,
+  LabelExampleCircularShorthand,
+  LabelExampleColor,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Layout/Layout.stories.tsx b/packages/fluentui/docs/src/vr-tests/Layout/Layout.stories.tsx
new file mode 100644
index 0000000000000..eb68894e63079
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Layout/Layout.stories.tsx
@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Layout } from '@fluentui/react-northstar';
+import LayoutExample from '../../examples/components/Layout/Types/LayoutExample.shorthand';
+import LayoutExampleVertical from '../../examples/components/Layout/Types/LayoutExampleVertical.shorthand';
+import LayoutExampleDisappearing from '../../examples/components/Layout/Variations/LayoutExampleDisappearing.shorthand';
+import LayoutExampleGap from '../../examples/components/Layout/Variations/LayoutExampleGap.shorthand';
+import LayoutExampleReducing from '../../examples/components/Layout/Variations/LayoutExampleReducing.shorthand';
+
+export default { component: Layout, title: 'Layout' } as ComponentMeta<typeof Layout>;
+
+export { LayoutExample, LayoutExampleVertical, LayoutExampleDisappearing, LayoutExampleGap, LayoutExampleReducing };
diff --git a/packages/fluentui/docs/src/vr-tests/List/List.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/List.stories.tsx
new file mode 100644
index 0000000000000..59d1fcc09496c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/List/List.stories.tsx
@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { List } from '@fluentui/react-northstar';
+import ListExample from '../../examples/components/List/Content/ListExampleContent.shorthand';
+import ListExampleMediaShorthand from '../../examples/components/List/Content/ListExampleMedia.shorthand';
+import ListExampleMedia from '../../examples/components/List/Content/ListExampleMedia';
+import ListExampleRtl from '../../examples/components/List/Rtl/ListExample.rtl';
+import ListExampleSelectable from '../../examples/components/List/Types/ListExample.shorthand';
+import ListExampleNavigable from '../../examples/components/List/Types/ListExampleNavigable';
+import SelectableListControlledExample from '../../examples/components/List/Types/ListExampleSelectableControlled.shorthand';
+
+export default { component: List, title: 'List' } as ComponentMeta<typeof List>;
+
+export {
+  ListExample,
+  ListExampleMediaShorthand,
+  ListExampleMedia,
+  ListExampleRtl,
+  ListExampleSelectable,
+  ListExampleNavigable,
+  SelectableListControlledExample,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx
new file mode 100644
index 0000000000000..6b548b82a93d7
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { List, listItemClassName, listClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ListExampleNavigable from '../../examples/components/List/Types/ListExampleNavigable.shorthand';
+
+const selectors = {
+  list: `.${listClassName}`,
+  item: (itemIndex: number) => `.${listClassName} .${listItemClassName}:nth-of-type(${itemIndex})`,
+};
+
+export default {
+  component: List,
+  title: 'List',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .hover(selectors.item(2))
+          .snapshot('Highlights an item')
+          .click(selectors.item(2))
+          .snapshot('Clicks on an item')
+          .hover(selectors.item(3))
+          .snapshot('Highlights another item')
+          .keys(selectors.item(2), Keys.downArrow)
+          .snapshot('Focuses last item using keyboard')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+    story => (
+      <StoryWright steps={new Steps().keys('body', Keys.tab).snapshot('Focuses item').end()}>{story()}</StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof List>;
+
+const ListExampleNavigableTeams = getThemeStoryVariant(ListExampleNavigable, 'teamsV2');
+
+const ListExampleNavigableTeamsDark = getThemeStoryVariant(ListExampleNavigable, 'teamsDarkV2');
+
+const ListExampleNavigableTeamsHighContrast = getThemeStoryVariant(ListExampleNavigable, 'teamsHighContrast');
+
+export {
+  ListExampleNavigable,
+  ListExampleNavigableTeams,
+  ListExampleNavigableTeamsDark,
+  ListExampleNavigableTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx
new file mode 100644
index 0000000000000..bb9085ec35d0c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { List, listItemClassName, listClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ListExampleSelectable from '../../examples/components/List/Types/ListExampleSelectable.shorthand';
+
+const selectors = {
+  list: `.${listClassName}`,
+  item: (itemIndex: number) => `.${listClassName} .${listItemClassName}:nth-of-type(${itemIndex})`,
+};
+
+export default {
+  component: List,
+  title: 'List',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .hover(selectors.item(2))
+          .snapshot('Highlights an item')
+          .click(selectors.item(2))
+          .snapshot('Selects an item')
+          .hover(selectors.item(3))
+          .snapshot('Highlights another item')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+    story => (
+      <StoryWright steps={new Steps().keys('body', Keys.tab).snapshot('Focuses item').end()}>{story()}</StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof List>;
+
+const ListExampleSelectableTeams = getThemeStoryVariant(ListExampleSelectable, 'teamsV2');
+
+const ListExampleSelectableTeamsDark = getThemeStoryVariant(ListExampleSelectable, 'teamsDarkV2');
+
+const ListExampleSelectableTeamsHighContrast = getThemeStoryVariant(ListExampleSelectable, 'teamsHighContrast');
+
+export {
+  ListExampleSelectable,
+  ListExampleSelectableTeams,
+  ListExampleSelectableTeamsDark,
+  ListExampleSelectableTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Loader/Loader.stories.tsx b/packages/fluentui/docs/src/vr-tests/Loader/Loader.stories.tsx
new file mode 100644
index 0000000000000..8fd2001869c70
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Loader/Loader.stories.tsx
@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Loader } from '@fluentui/react-northstar';
+import LoaderExampleRtl from '../../examples/components/Loader/Rtl/LoaderExample.rtl';
+import LoaderExample from '../../examples/components/Loader/Types/LoaderExample.shorthand';
+import LoaderExampleLabel from '../../examples/components/Loader/Types/LoaderExampleLabel.shorthand';
+import LoaderExampleDelay from '../../examples/components/Loader/Usage/LoaderExampleDelay';
+import LoaderExampleInline from '../../examples/components/Loader/Variations/LoaderExampleInline';
+import LoaderExampleSecondary from '../../examples/components/Loader/Variations/LoaderExampleSecondary';
+import LoaderExampleSize from '../../examples/components/Loader/Variations/LoaderExampleSize';
+
+export default { component: Loader, title: 'Loader' } as ComponentMeta<typeof Loader>;
+
+export {
+  LoaderExampleRtl,
+  LoaderExample,
+  LoaderExampleLabel,
+  LoaderExampleDelay,
+  LoaderExampleInline,
+  LoaderExampleSecondary,
+  LoaderExampleSize,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/Menu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/Menu.stories.tsx
new file mode 100644
index 0000000000000..8ab6200b11561
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/Menu.stories.tsx
@@ -0,0 +1,42 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import MenuPlayground from '../../examples/components/Menu/Playground';
+import MenuExample from '../../examples/components/Menu/Rtl/MenuExample.rtl';
+import MenuExampleKind from '../../examples/components/Menu/Slots/MenuExampleDivider.shorthand';
+import MenuExampleDividerHorizontal from '../../examples/components/Menu/Slots/MenuExampleDividerHorizontal';
+import MenuExampleIconOnly from '../../examples/components/Menu/Slots/MenuExampleIconOnly';
+import MenuExampleSlot from '../../examples/components/Menu/Slots/MenuExampleSlot';
+import MenuExampleWithIcons from '../../examples/components/Menu/Slots/MenuExampleWithIcons';
+import MenuControlledExampleDisabled from '../../examples/components/Menu/States/MenuControlledExample.shorthand';
+import MenuItemExampleDisabled from '../../examples/components/Menu/States/MenuItemExampleDisabled.shorthand';
+import MenuExamplePointing from '../../examples/components/Menu/Types/MenuExamplePointing';
+import MenuExampleUnderlined from '../../examples/components/Menu/Types/MenuExampleUnderlined';
+import MenuExampleTabShorthand from '../../examples/components/Menu/Usage/MenuExampleTabList.shorthand';
+import MenuWithSubmenuControlledExample from '../../examples/components/Menu/Usage/MenuExampleWithSubmenuControlled.shorthand';
+import MenuExampleWithTooltip from '../../examples/components/Menu/Usage/MenuExampleWithTooltip';
+import MenuExampleFluid from '../../examples/components/Menu/Variations/MenuExampleFluid.shorthand';
+import MenuExampleVerticalPointing from '../../examples/components/Menu/Variations/MenuExampleVerticalPointing';
+import MenuExampleVertical from '../../examples/components/Menu/Visual/MenuExampleVertical';
+
+export default { component: Menu, title: 'Menu' } as ComponentMeta<typeof Menu>;
+
+export {
+  MenuPlayground,
+  MenuExample,
+  MenuExampleKind,
+  MenuExampleDividerHorizontal,
+  MenuExampleIconOnly,
+  MenuExampleSlot,
+  MenuExampleWithIcons,
+  MenuControlledExampleDisabled,
+  MenuItemExampleDisabled,
+  MenuExamplePointing,
+  MenuExampleUnderlined,
+  MenuExampleTabShorthand,
+  MenuWithSubmenuControlledExample,
+  MenuExampleWithTooltip,
+  MenuExampleFluid,
+  MenuExampleVerticalPointing,
+  MenuExampleVertical,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx
new file mode 100644
index 0000000000000..5fc97487cb5b6
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import getStoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import MenuExample from '../../examples/components/Menu/Slots/MenuExampleSlot.shorthand';
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [story => <StoryWright steps={getStoryWrightSteps({})}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Menu>;
+
+const MenuExampleTeams = getThemeStoryVariant(MenuExample, 'teamsV2');
+
+const MenuExampleTeamsDark = getThemeStoryVariant(MenuExample, 'teamsDarkV2');
+
+const MenuExampleTeamsHighContrast = getThemeStoryVariant(MenuExample, 'teamsHighContrast');
+
+export { MenuExample, MenuExampleTeams, MenuExampleTeamsDark, MenuExampleTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx
new file mode 100644
index 0000000000000..8889264b2847b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import getStoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import MenuExampleIconOnly from '../../examples/components/Menu/Slots/MenuExampleIconOnly.shorthand';
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [story => <StoryWright steps={getStoryWrightSteps({})}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Menu>;
+
+const MenuExampleIconOnlyTeams = getThemeStoryVariant(MenuExampleIconOnly, 'teamsV2');
+
+const MenuExampleIconOnlyTeamsDark = getThemeStoryVariant(MenuExampleIconOnly, 'teamsDarkV2');
+
+const MenuExampleIconOnlyTeamsHighContrast = getThemeStoryVariant(MenuExampleIconOnly, 'teamsHighContrast');
+
+export {
+  MenuExampleIconOnly,
+  MenuExampleIconOnlyTeams,
+  MenuExampleIconOnlyTeamsDark,
+  MenuExampleIconOnlyTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx
new file mode 100644
index 0000000000000..70e05bf89284b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import getStoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import MenuExamplePointing from '../../examples/components/Menu/Types/MenuExamplePointing.shorthand';
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [story => <StoryWright steps={getStoryWrightSteps({})}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Menu>;
+
+const MenuExamplePointingTeams = getThemeStoryVariant(MenuExamplePointing, 'teamsV2');
+
+const MenuExamplePointingTeamsDark = getThemeStoryVariant(MenuExamplePointing, 'teamsDarkV2');
+
+const MenuExamplePointingTeamsHighContrast = getThemeStoryVariant(MenuExamplePointing, 'teamsHighContrast');
+
+export {
+  MenuExamplePointing,
+  MenuExamplePointingTeams,
+  MenuExamplePointingTeamsDark,
+  MenuExamplePointingTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx
new file mode 100644
index 0000000000000..396cc9eb582a0
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import MenuExamplePositioningShorthand from '../../examples/components/Menu/Visual/MenuExamplePositioning.shorthand';
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click('#set-open')
+          .snapshot('Default positioning')
+          .click('#above')
+          .snapshot('Sets positions to above')
+          .click('#before')
+          .snapshot('Sets positions to before')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Menu>;
+
+export { MenuExamplePositioningShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx
new file mode 100644
index 0000000000000..44d20004f67e7
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import MenuExamplePositioningUpdateShorthand from '../../examples/components/Menu/Visual/MenuExamplePositioningUpdate.shorthand';
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click('#set-open')
+          .snapshot('Default positioning')
+          .click('#set-height')
+          .snapshot('Updates height to collide with top edge')
+          .click('#reposition')
+          .snapshot('Repositions properly')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Menu>;
+
+export { MenuExamplePositioningUpdateShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx
new file mode 100644
index 0000000000000..f2309eb6ca83f
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu, menuClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import MenuExampleToolbarShorthand from '../../examples/components/Menu/Usage/MenuExampleToolbar.shorthand';
+
+const selectors = {
+  menu: `.${menuClassName}`,
+  item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`,
+  lastItem: `.${menuClassName} li:last-child a`,
+};
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .hover(selectors.item(2))
+          .snapshot('Hovers 2nd item (hover state styles)')
+          .click(selectors.item(2))
+          .snapshot('Clicks on 2nd item (active state styles)')
+          .keys(selectors.item(2), Keys.rightArrow)
+          .snapshot('Navigates to next item (focus state styles)')
+          .keys(selectors.item(5), Keys.leftArrow)
+          .snapshot('Navigates to previous item (active and focus state styles)')
+          .click(selectors.lastItem)
+          .snapshot('Clicks on the last item and opens submenu')
+          .keys(selectors.lastItem, Keys.downArrow)
+          .snapshot('Focuses on the first element in the submenu')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Menu>;
+
+const MenuExampleToolbarShorthandTeams = getThemeStoryVariant(MenuExampleToolbarShorthand, 'teamsV2');
+
+const MenuExampleToolbarShorthandTeamsDark = getThemeStoryVariant(MenuExampleToolbarShorthand, 'teamsDarkV2');
+
+const MenuExampleToolbarShorthandTeamsHighContrast = getThemeStoryVariant(
+  MenuExampleToolbarShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  MenuExampleToolbarShorthand,
+  MenuExampleToolbarShorthandTeams,
+  MenuExampleToolbarShorthandTeamsDark,
+  MenuExampleToolbarShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx
new file mode 100644
index 0000000000000..3c15c156d962a
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import getStoryWrightSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import MenuExampleUnderlined from '../../examples/components/Menu/Types/MenuExampleUnderlined.shorthand';
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [story => <StoryWright steps={getStoryWrightSteps({})}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Menu>;
+
+const MenuExampleUnderlinedTeams = getThemeStoryVariant(MenuExampleUnderlined, 'teamsV2');
+
+const MenuExampleUnderlinedTeamsDark = getThemeStoryVariant(MenuExampleUnderlined, 'teamsDarkV2');
+
+const MenuExampleUnderlinedTeamsHighContrast = getThemeStoryVariant(MenuExampleUnderlined, 'teamsHighContrast');
+
+export {
+  MenuExampleUnderlined,
+  MenuExampleUnderlinedTeams,
+  MenuExampleUnderlinedTeamsDark,
+  MenuExampleUnderlinedTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx
new file mode 100644
index 0000000000000..71ebb9f84e6b5
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu, menuClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import MenuExampleVertical from '../../examples/components/Menu/Variations/MenuExampleVerticalPrimary.shorthand';
+
+const selectors = {
+  menu: `.${menuClassName}`,
+  item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`,
+};
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .hover(selectors.item(4))
+          .snapshot('Hovers 4th item (hover state styles)')
+          .click(selectors.item(4))
+          .snapshot('Clicks on 4th item (opens submenu)')
+          .hover(selectors.item(1))
+          .snapshot('Hovers 1st item (hover state styles)')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Menu>;
+
+const MenuExampleVerticalTeams = getThemeStoryVariant(MenuExampleVertical, 'teamsV2');
+
+const MenuExampleVerticalTeamsDark = getThemeStoryVariant(MenuExampleVertical, 'teamsDarkV2');
+
+const MenuExampleVerticalTeamsHighContrast = getThemeStoryVariant(MenuExampleVertical, 'teamsHighContrast');
+
+export {
+  MenuExampleVertical,
+  MenuExampleVerticalTeams,
+  MenuExampleVerticalTeamsDark,
+  MenuExampleVerticalTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx
new file mode 100644
index 0000000000000..f115f44d8f9e9
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import getStoryWrightSteps from './commonStoryWrightSteps';
+import MenuExampleVerticalPointing from '../../examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand';
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [story => <StoryWright steps={getStoryWrightSteps({ vertical: true })}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Menu>;
+
+export { MenuExampleVerticalPointing };
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx
new file mode 100644
index 0000000000000..d24d38bf0cc58
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import getStoryWrightSteps from './commonStoryWrightSteps';
+import MenuExampleWithIcons from '../../examples/components/Menu/Slots/MenuExampleWithIcons.shorthand';
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [story => <StoryWright steps={getStoryWrightSteps({})}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Menu>;
+
+export { MenuExampleWithIcons };
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx
new file mode 100644
index 0000000000000..829f3c38f5627
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu } from '@fluentui/react-northstar';
+import getStoryWrightSteps from './commonStoryWrightSteps';
+import MenuExampleWithSubMenu from '../../examples/components/Menu/Usage/MenuExampleWithSubmenu.shorthand';
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [story => <StoryWright steps={getStoryWrightSteps({})}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Menu>;
+
+export { MenuExampleWithSubMenu };
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx
new file mode 100644
index 0000000000000..e75a990215a1a
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu, menuClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import MenuExampleWithSubMenuHover from '../../examples/components/Menu/Usage/MenuExampleWithSubmenuHover.shorthand';
+
+const selectors = {
+  item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`,
+};
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(selectors.item(1))
+          .snapshot('Click 1st item, open menu')
+          .hover(selectors.item(3))
+          .snapshot('Hovers 2nd item, open submenu')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Menu>;
+
+const MenuExampleWithSubMenuHoverTeams = getThemeStoryVariant(MenuExampleWithSubMenuHover, 'teamsV2');
+
+const MenuExampleWithSubMenuHoverTeamsDark = getThemeStoryVariant(MenuExampleWithSubMenuHover, 'teamsDarkV2');
+
+const MenuExampleWithSubMenuHoverTeamsHighContrast = getThemeStoryVariant(
+  MenuExampleWithSubMenuHover,
+  'teamsHighContrast',
+);
+
+export {
+  MenuExampleWithSubMenuHover,
+  MenuExampleWithSubMenuHoverTeams,
+  MenuExampleWithSubMenuHoverTeamsDark,
+  MenuExampleWithSubMenuHoverTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx
new file mode 100644
index 0000000000000..92b5a487a162a
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Menu, menuClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import MenuExampleWithTooltip from '../../examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand';
+
+const selectors = {
+  menu: `.${menuClassName}`,
+  item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`,
+};
+
+export default {
+  component: Menu,
+  title: 'Menu',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .hover(selectors.item(1))
+          .snapshot('Hovers 1st item (show tooltip)')
+          .click(selectors.item(1))
+          .keys(selectors.item(1), Keys.rightArrow)
+          .snapshot('Navigates to next item (shows tooltip)')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Menu>;
+
+const MenuExampleWithTooltipTeams = getThemeStoryVariant(MenuExampleWithTooltip, 'teamsV2');
+
+const MenuExampleWithTooltipTeamsDark = getThemeStoryVariant(MenuExampleWithTooltip, 'teamsDarkV2');
+
+const MenuExampleWithTooltipTeamsHighContrast = getThemeStoryVariant(MenuExampleWithTooltip, 'teamsHighContrast');
+
+export {
+  MenuExampleWithTooltip,
+  MenuExampleWithTooltipTeams,
+  MenuExampleWithTooltipTeamsDark,
+  MenuExampleWithTooltipTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Menu/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Menu/commonStoryWrightSteps.ts
new file mode 100644
index 0000000000000..3408e69718afd
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Menu/commonStoryWrightSteps.ts
@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, Steps } from 'storywright';
+import { menuClassName } from '@fluentui/react-northstar';
+
+export const selectors = {
+  menu: `.${menuClassName}`,
+  item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`,
+};
+
+const getStoryWrightSteps = ({ vertical = false, startItem = 2, endItem = 3 }) =>
+  new Steps()
+    .hover(selectors.item(startItem))
+    .snapshot('Hovers 2nd item (hover state styles)')
+    .click(selectors.item(startItem))
+    .snapshot('Clicks on 2nd item (active state styles)')
+    .keys(selectors.item(startItem), vertical ? Keys.downArrow : Keys.rightArrow)
+    .snapshot('Navigates to next item (focus state styles)')
+    .keys(selectors.item(endItem), vertical ? Keys.upArrow : Keys.leftArrow)
+    .snapshot('Navigates to previous item (active and focus state styles)')
+    .end();
+
+export default getStoryWrightSteps;
diff --git a/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx
new file mode 100644
index 0000000000000..7694fcbf26967
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx
@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { MenuButton } from '@fluentui/react-northstar';
+import MenuButtonOpenExample from '../../examples/components/MenuButton/State/MenuButtonExampleOpen.shorthand';
+
+export default { component: MenuButton, title: 'MenuButton' } as ComponentMeta<typeof MenuButton>;
+
+export { MenuButtonOpenExample };
diff --git a/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx
new file mode 100644
index 0000000000000..d796bf56c87cd
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { MenuButton, buttonClassName } from '@fluentui/react-northstar';
+import MenuButtonExampleRtl from '../../examples/components/MenuButton/Rtl/MenuButtonExample.rtl';
+
+export default {
+  component: MenuButton,
+  title: 'MenuButton',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(`.${buttonClassName}`).snapshot('RTL: Shows menuButton').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof MenuButton>;
+
+export { MenuButtonExampleRtl };
diff --git a/packages/fluentui/docs/src/vr-tests/Pill/Pill.stories.tsx b/packages/fluentui/docs/src/vr-tests/Pill/Pill.stories.tsx
new file mode 100644
index 0000000000000..28830e1c8e2ff
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Pill/Pill.stories.tsx
@@ -0,0 +1,28 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Pill } from '@fluentui/react-northstar';
+import PillExampleDisabled from '../../examples/components/Pill/State/PillExampleDisabled';
+import PillExample from '../../examples/components/Pill/Types/PillExample';
+import PillGroupExample from '../../examples/components/Pill/Types/PillsExample';
+import PillActionableExample from '../../examples/components/Pill/Variations/PillExampleActionable';
+import PillAppearanceExample from '../../examples/components/Pill/Variations/PillExampleAppearance';
+import PillIconExample from '../../examples/components/Pill/Variations/PillExampleIcon';
+import PillImageExample from '../../examples/components/Pill/Variations/PillExampleImage';
+import PillRectangularExample from '../../examples/components/Pill/Variations/PillExampleRectangular';
+import PillSelectableExample from '../../examples/components/Pill/Variations/PillExampleSelectable';
+import PillSizesExample from '../../examples/components/Pill/Variations/PillExampleSizes';
+
+export default { component: Pill, title: 'Pill' } as ComponentMeta<typeof Pill>;
+
+export {
+  PillExampleDisabled,
+  PillExample,
+  PillGroupExample,
+  PillActionableExample,
+  PillAppearanceExample,
+  PillIconExample,
+  PillImageExample,
+  PillRectangularExample,
+  PillSelectableExample,
+  PillSizesExample,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx
new file mode 100644
index 0000000000000..06e9b5520b86d
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Popup } from '@fluentui/react-northstar';
+import PopperExamplePositioning from '../../examples/components/Popup/Visual/PopperExamplePositioning';
+
+export default {
+  component: Popup,
+  title: 'Popup',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps() // A popper can't be opened in visual tests by default as it makes { StoryWright } results unstable
+          // because of 1px shift on different renders
+          .click('#open-popper')
+          .snapshot('Opened on Box A (default position)')
+          .click('#use-boxB')
+          .snapshot('Opened on Box B (default position)')
+          .click('#align-end-position-above')
+          .snapshot('Opened on Box B (align: end, position: above)')
+          .click('#use-boxA')
+          .snapshot('Opened on Box A (align: end, position: above)')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Popup>;
+
+export { PopperExamplePositioning };
diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx
new file mode 100644
index 0000000000000..70f85c86c0545
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Popup } from '@fluentui/react-northstar';
+import PopperExampleVisibilityModifiers from '../../examples/components/Popup/Visual/PopperExampleVisibilityModifiers';
+
+export default {
+  component: Popup,
+  title: 'Popup',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click('#message-1')
+          .snapshot('Opened a popup on second message')
+          .executeScript('document.querySelector("#scrollable-area").scrollTop = 50')
+          .snapshot('has "[data-popper-is-intersecting]" when the popover intersects boundaries')
+          .executeScript('document.querySelector("#scrollable-area").scrollTop = 80')
+          .snapshot(`has "[data-popper-escaped]" when the popper escapes the reference element's boundary`)
+          .executeScript('document.querySelector("#scrollable-area").scrollTop = 150')
+          .snapshot('has "[data-popper-reference-hidden]" when the reference is hidden')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Popup>;
+
+export { PopperExampleVisibilityModifiers };
diff --git a/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx
new file mode 100644
index 0000000000000..7506363c6aaf5
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx
@@ -0,0 +1,36 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Popup } from '@fluentui/react-northstar';
+import PopupControlledExample from '../../examples/components/Popup/Types/PopupControlledExample';
+import PopupCustomTargetExample from '../../examples/components/Popup/Types/PopupCustomTargetExample';
+import PopupExample from '../../examples/components/Popup/Types/PopupExample';
+import PopupExampleInline from '../../examples/components/Popup/Types/PopupExampleInline.shorthand';
+import PopupExamplePointing from '../../examples/components/Popup/Types/PopupExamplePointing.shorthand';
+import PopupFocusTrapExample from '../../examples/components/Popup/Types/PopupFocusTrapExample.shorthand';
+import PopupExampleAsync from '../../examples/components/Popup/Usage/PopupExampleAsync.shorthand';
+import PopupCloseButtonExample from '../../examples/components/Popup/Usage/PopupExampleCloseButton';
+import PopupExampleNested from '../../examples/components/Popup/Usage/PopupExampleNested.shorthand';
+import PopupExampleAutoSize from '../../examples/components/Popup/Variations/PopupExampleAutoSize.shorthand';
+import PopupExamplePosition from '../../examples/components/Popup/Variations/PopupExamplePosition.shorthand';
+import PopupExampleContainerTransformed from '../../examples/components/Popup/Visual/PopupExampleContainerTransformed';
+import PopupExamplePointerMargin from '../../examples/components/Popup/Visual/PopupExamplePointerMargin.shorthand';
+import PopupExamplePointerOffset from '../../examples/components/Popup/Visual/PopupExamplePointerOffset';
+
+export default { component: Popup, title: 'Popup' } as ComponentMeta<typeof Popup>;
+
+export {
+  PopupControlledExample,
+  PopupCustomTargetExample,
+  PopupExample,
+  PopupExampleInline,
+  PopupExamplePointing,
+  PopupFocusTrapExample,
+  PopupExampleAsync,
+  PopupCloseButtonExample,
+  PopupExampleNested,
+  PopupExampleAutoSize,
+  PopupExamplePosition,
+  PopupExampleContainerTransformed,
+  PopupExamplePointerMargin,
+  PopupExamplePointerOffset,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx
new file mode 100644
index 0000000000000..66e9ce8ec69d5
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Popup, buttonClassName, dropdownSlotClassNames } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import PopupControlledExample from '../../examples/components/Popup/Usage/PopupExampleCloseButton.shorthand';
+
+const selectors = {
+  toggleIndicator: `.${dropdownSlotClassNames.toggleIndicator}`,
+  item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`,
+  popupTrigger: `.${buttonClassName}`,
+};
+
+export default {
+  component: Popup,
+  title: 'Popup',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(selectors.popupTrigger)
+          .click(selectors.toggleIndicator)
+          .hover(selectors.item(2))
+
+          // A hack to load images properly in StoryWright
+          .wait(500)
+
+          .snapshot('Prepares to select item out of popup.')
+          .click(selectors.item(2))
+          .snapshot('Item should be selected.')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Popup>;
+
+const PopupControlledExampleTeams = getThemeStoryVariant(PopupControlledExample, 'teamsV2');
+
+const PopupControlledExampleTeamsDark = getThemeStoryVariant(PopupControlledExample, 'teamsDarkV2');
+
+const PopupControlledExampleTeamsHighContrast = getThemeStoryVariant(PopupControlledExample, 'teamsHighContrast');
+
+export {
+  PopupControlledExample,
+  PopupControlledExampleTeams,
+  PopupControlledExampleTeamsDark,
+  PopupControlledExampleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx
new file mode 100644
index 0000000000000..7369cbb087bae
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Popup, buttonClassName } from '@fluentui/react-northstar';
+import PopupCustomTargetExample from '../../examples/components/Popup/Types/PopupCustomTargetExample.shorthand';
+
+export default {
+  component: Popup,
+  title: 'Popup',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(`.${buttonClassName}`).snapshot('Shows popup').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Popup>;
+
+export { PopupCustomTargetExample };
diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx
new file mode 100644
index 0000000000000..3d0412136220e
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Popup, buttonClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import PopupExample from '../../examples/components/Popup/Types/PopupExample.shorthand';
+
+export default {
+  component: Popup,
+  title: 'Popup',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(`.${buttonClassName}`).snapshot('Shows popup').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Popup>;
+
+const PopupExampleTeams = getThemeStoryVariant(PopupExample, 'teamsV2');
+
+const PopupExampleTeamsDark = getThemeStoryVariant(PopupExample, 'teamsDarkV2');
+
+const PopupExampleTeamsHighContrast = getThemeStoryVariant(PopupExample, 'teamsHighContrast');
+
+export { PopupExample, PopupExampleTeams, PopupExampleTeamsDark, PopupExampleTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx
new file mode 100644
index 0000000000000..b5b0f053396fc
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Popup, buttonClassName } from '@fluentui/react-northstar';
+import PopupExampleOffset from '../../examples/components/Popup/Variations/PopupExampleOffset.shorthand';
+
+const selectors = {
+  trigger: `.${buttonClassName}`,
+};
+
+export default {
+  component: Popup,
+  title: 'Popup',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(selectors.trigger).snapshot('Opens a popup').end()}>{story()}</StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Popup>;
+
+export { PopupExampleOffset };
diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx
new file mode 100644
index 0000000000000..77dae9f8c125d
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Popup, buttonClassName } from '@fluentui/react-northstar';
+import PopupExampleRtl from '../../examples/components/Popup/Rtl/PopupExample.rtl';
+
+export default {
+  component: Popup,
+  title: 'Popup',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(`.${buttonClassName}`).snapshot('RTL: Shows popup').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Popup>;
+
+export { PopupExampleRtl };
diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx
new file mode 100644
index 0000000000000..8880c4a33da75
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Popup, buttonClassName } from '@fluentui/react-northstar';
+import PopupScrollExample from '../../examples/components/Popup/Visual/PopupScrollExample';
+
+const selectors = {
+  triggerButtonPopupWithTrapFocus: `.${buttonClassName}[title*="Show popup with focus"]`,
+  triggerButtonControlledPopupWithFocus: `.${buttonClassName}[title*="Show controlled popup"]`,
+  triggerButtonInlineControlledPopupWithFocus: `.${buttonClassName}[title*="Show controlled popup inline"]`,
+};
+
+export default {
+  component: Popup,
+  title: 'Popup',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .focus(selectors.triggerButtonPopupWithTrapFocus)
+          .snapshot('Scroll to trigger button for popup with trap focus')
+          .click(selectors.triggerButtonPopupWithTrapFocus)
+          .snapshot('Click on trigger button for popup with trap focus')
+          // hide first popup
+          .click('body')
+          .focus(selectors.triggerButtonControlledPopupWithFocus)
+          .snapshot('Scroll to trigger button for controlled popup with manual focus')
+          .click(selectors.triggerButtonControlledPopupWithFocus)
+          .snapshot('Click on trigger button for controlled popup with manual focus')
+          // hide second popup
+          .click('body')
+          .focus(selectors.triggerButtonInlineControlledPopupWithFocus)
+          .snapshot('Scroll to trigger button for inline controlled popup with manual focus')
+          .click(selectors.triggerButtonInlineControlledPopupWithFocus)
+          .snapshot('Click on trigger button for inline controlled popup with manual focus')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Popup>;
+
+export { PopupScrollExample };
diff --git a/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx b/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx
new file mode 100644
index 0000000000000..47dd13fe2a0a2
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx
@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Portal } from '@fluentui/react-northstar';
+import PortalExampleOpen from '../../examples/components/Portal/State/PortalExampleOpen';
+
+export default { component: Portal, title: 'Portal' } as ComponentMeta<typeof Portal>;
+
+export { PortalExampleOpen };
diff --git a/packages/fluentui/docs/src/vr-tests/Provider/Provider.stories.tsx b/packages/fluentui/docs/src/vr-tests/Provider/Provider.stories.tsx
new file mode 100644
index 0000000000000..0b58f7722dd77
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Provider/Provider.stories.tsx
@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Provider } from '@fluentui/react-northstar';
+import ProviderExampleAnimation from '../../examples/components/Provider/Types/ProviderDisableAnimationsExample.shorthand';
+import ProviderExampleShorthand from '../../examples/components/Provider/Types/ProviderExample.shorthand';
+import ProviderExampleScrollbar from '../../examples/components/Provider/Types/ProviderExampleScrollbar.shorthand';
+import ProviderRtlExample from '../../examples/components/Provider/Types/ProviderRtlExample.shorthand';
+import ProviderExampleTarget from '../../examples/components/Provider/Usage/ProviderExampleTarget';
+import ProviderExampleTargetFrame from '../../examples/components/Provider/Usage/ProviderExampleTargetFrame';
+
+export default { component: Provider, title: 'Provider' } as ComponentMeta<typeof Provider>;
+
+export {
+  ProviderExampleAnimation,
+  ProviderExampleShorthand,
+  ProviderExampleScrollbar,
+  ProviderRtlExample,
+  ProviderExampleTarget,
+  ProviderExampleTargetFrame,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx
new file mode 100644
index 0000000000000..209e9964ca64c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Provider, buttonClassName } from '@fluentui/react-northstar';
+import ProviderExampleFocusBorderShorthand from '../../examples/components/Provider/Types/ProviderExampleFocusBorder.shorthand';
+
+const button = `.${buttonClassName}`;
+
+export default {
+  component: Provider,
+  title: 'Provider',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(button)
+          .keys(button, Keys.downArrow)
+          .snapshot('Show overridden border focused styles')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Provider>;
+
+export { ProviderExampleFocusBorderShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx
new file mode 100644
index 0000000000000..0d1d1de311574
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider, RadioGroup } from '@fluentui/react-northstar';
+import RadioGroupItemExample from '../../examples/components/RadioGroup/Item/RadioGroupItemExample.shorthand';
+import RadioGroupItemExampleCheckedShorthand from '../../examples/components/RadioGroup/Item/RadioGroupItemExampleChecked.shorthand';
+import RadioGroupItemExampleDisabledShorthand from '../../examples/components/RadioGroup/Item/RadioGroupItemExampleDisabled.shorthand';
+import RadioGroupExampleRtl from '../../examples/components/RadioGroup/Rtl/RadioGroupExample.rtl';
+import RadioGroupCustomExample from '../../examples/components/RadioGroup/Usage/RadioGroupCustomExample.shorthand';
+
+const RadioGroupColorPickerExample = () => {
+  const [selectedValue, setSelectedValue] = React.useState<string | number>('');
+
+  return (
+    <div>
+      The selected value is: {selectedValue}
+      <Divider />
+      <RadioGroup
+        defaultCheckedValue="pink"
+        items={['pink', 'blue', 'green', 'red', 'orange'].map(color => ({
+          key: color,
+          value: color,
+          name: color,
+          'aria-label': color,
+          variables: {
+            indicatorColorDefault: color,
+            indicatorBackgroundColorChecked: color,
+            indicatorBorderColorDefaultHover: color,
+          },
+        }))}
+        onCheckedValueChange={(e, props) => setSelectedValue(props.value)}
+      />
+    </div>
+  );
+};
+
+export default { component: RadioGroup, title: 'RadioGroup' } as ComponentMeta<typeof RadioGroup>;
+
+export {
+  RadioGroupItemExample,
+  RadioGroupItemExampleCheckedShorthand,
+  RadioGroupItemExampleDisabledShorthand,
+  RadioGroupExampleRtl,
+  RadioGroupColorPickerExample,
+  RadioGroupCustomExample,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx
new file mode 100644
index 0000000000000..33783baa8d6d1
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Divider, RadioGroup } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+
+const RadioGroupVerticalExample = () => {
+  const [selectedValue, setSelectedValue] = React.useState('');
+
+  const getItems = () => {
+    return [
+      {
+        name: 'pizza',
+        key: 'Capricciosa',
+        label: 'Capricciosa',
+        value: 'capricciosa',
+      },
+      {
+        name: 'pizza',
+        key: 'Prosciutto',
+        label: 'Prosciutto',
+        value: 'prosciutto',
+        disabled: true,
+      },
+      {
+        name: 'pizza',
+        key: 'Pepperoni',
+        label: 'Pepperoni',
+        value: 'pepperoni',
+      },
+    ];
+  };
+
+  const handleChange = (e, props) => {
+    setSelectedValue(props.value);
+  };
+  return (
+    <div style={{ maxWidth: '400px' }}>
+      The selected value is: {selectedValue}
+      <Divider />
+      <RadioGroup vertical defaultCheckedValue="prosciutto" items={getItems()} onCheckedValueChange={handleChange} />
+    </div>
+  );
+};
+
+export default {
+  component: RadioGroup,
+  title: 'RadioGroup',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().keys('body', Keys.tab).snapshot('Focuses item').end()}>{story()}</StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof RadioGroup>;
+
+const RadioGroupVerticalExampleTeams = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsV2');
+
+const RadioGroupVerticalExampleTeamsDark = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsDarkV2');
+
+const RadioGroupVerticalExampleTeamsHighContrast = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsHighContrast');
+
+export {
+  RadioGroupVerticalExample,
+  RadioGroupVerticalExampleTeams,
+  RadioGroupVerticalExampleTeamsDark,
+  RadioGroupVerticalExampleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Reaction/Reaction.stories.tsx b/packages/fluentui/docs/src/vr-tests/Reaction/Reaction.stories.tsx
new file mode 100644
index 0000000000000..edd2fa683a5de
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Reaction/Reaction.stories.tsx
@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Reaction } from '@fluentui/react-northstar';
+import ReactionGroupExampleRtl from '../../examples/components/Reaction/Rtl/ReactionExample.rtl';
+import ReactionExample from '../../examples/components/Reaction/Types/ReactionExample.shorthand';
+import ReactionGroupExample from '../../examples/components/Reaction/Types/ReactionGroupExample.shorthand';
+
+export default { component: Reaction, title: 'Reaction' } as ComponentMeta<typeof Reaction>;
+
+export { ReactionGroupExampleRtl, ReactionExample, ReactionGroupExample };
diff --git a/packages/fluentui/docs/src/vr-tests/Segment/Segment.stories.tsx b/packages/fluentui/docs/src/vr-tests/Segment/Segment.stories.tsx
new file mode 100644
index 0000000000000..7c726565a4cd1
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Segment/Segment.stories.tsx
@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Segment } from '@fluentui/react-northstar';
+import SegmentExampleRtl from '../../examples/components/Segment/Rtl/SegmentExample.rtl';
+import SegmentExampleDisabledShorthand from '../../examples/components/Segment/States/SegmentExampleDisabled.shorthand';
+import SegmentExampleDisabled from '../../examples/components/Segment/States/SegmentExampleDisabled';
+import SegmentExampleShorthand from '../../examples/components/Segment/Types/SegmentExample.shorthand';
+import SegmentExample from '../../examples/components/Segment/Types/SegmentExample';
+import SegmentExampleColor from '../../examples/components/Segment/Variations/SegmentExampleColor.shorthand';
+import SegmentExampleInvertedShorthand from '../../examples/components/Segment/Variations/SegmentExampleInverted.shorthand';
+
+export default { component: Segment, title: 'Segment' } as ComponentMeta<typeof Segment>;
+
+export {
+  SegmentExampleRtl,
+  SegmentExampleDisabledShorthand,
+  SegmentExampleDisabled,
+  SegmentExampleShorthand,
+  SegmentExample,
+  SegmentExampleColor,
+  SegmentExampleInvertedShorthand,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Skeleton/Skeleton.stories.tsx b/packages/fluentui/docs/src/vr-tests/Skeleton/Skeleton.stories.tsx
new file mode 100644
index 0000000000000..7d742dd4beb91
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Skeleton/Skeleton.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Skeleton } from '@fluentui/react-northstar';
+import SkeletonExampleCard from '../../examples/components/Skeleton/Usage/SkeletonExampleCard';
+import SkeletonExampleDefault from '../../examples/components/Skeleton/Usage/SkeletonExampleDefault';
+import SkeletonExampleList from '../../examples/components/Skeleton/Usage/SkeletonExampleList';
+import SkeletonExampleAnimations from '../../examples/components/Skeleton/Variations/SkeletonExampleAnimations';
+import SkeletonExampleComponents from '../../examples/components/Skeleton/Variations/SkeletonExampleComponents';
+
+export default { component: Skeleton, title: 'Skeleton' } as ComponentMeta<typeof Skeleton>;
+
+export {
+  SkeletonExampleCard,
+  SkeletonExampleDefault,
+  SkeletonExampleList,
+  SkeletonExampleAnimations,
+  SkeletonExampleComponents,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Slider/Slider.stories.tsx b/packages/fluentui/docs/src/vr-tests/Slider/Slider.stories.tsx
new file mode 100644
index 0000000000000..a8e9f98bffae0
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Slider/Slider.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Slider } from '@fluentui/react-northstar';
+import SliderExampleDisabledShorthand from '../../examples/components/Slider/States/SliderExampleDisabled.shorthand';
+import SliderExampleActionShorthand from '../../examples/components/Slider/Usage/SliderExampleAction.shorthand';
+import SliderExampleFormShorthand from '../../examples/components/Slider/Usage/SliderExampleForm.shorthand';
+import SliderExampleFluidShorthand from '../../examples/components/Slider/Variations/SliderExampleFluid.shorthand';
+import SliderExampleVerticalShorthand from '../../examples/components/Slider/Variations/SliderExampleVertical.shorthand';
+
+export default { component: Slider, title: 'Slider' } as ComponentMeta<typeof Slider>;
+
+export {
+  SliderExampleDisabledShorthand,
+  SliderExampleActionShorthand,
+  SliderExampleFormShorthand,
+  SliderExampleFluidShorthand,
+  SliderExampleVerticalShorthand,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx
new file mode 100644
index 0000000000000..4c8784c7c923b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Slider } from '@fluentui/react-northstar';
+import { focusSliderSteps, rightArrowSteps, upArrowSteps } from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import SliderExampleRtl from '../../examples/components/Slider/Rtl/SliderExample.rtl';
+
+export default {
+  component: Slider,
+  title: 'Slider',
+  decorators: [
+    story => <StoryWright steps={focusSliderSteps}>{story()}</StoryWright>,
+    story => <StoryWright steps={rightArrowSteps}>{story()}</StoryWright>,
+    story => <StoryWright steps={upArrowSteps}>{story()}</StoryWright>,
+  ],
+} as ComponentMeta<typeof Slider>;
+
+const SliderExampleRtlTeams = getThemeStoryVariant(SliderExampleRtl, 'teamsV2');
+
+const SliderExampleRtlTeamsDark = getThemeStoryVariant(SliderExampleRtl, 'teamsDarkV2');
+
+const SliderExampleRtlTeamsHighContrast = getThemeStoryVariant(SliderExampleRtl, 'teamsHighContrast');
+
+export { SliderExampleRtl, SliderExampleRtlTeams, SliderExampleRtlTeamsDark, SliderExampleRtlTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..9f3d51aa5f427
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Slider } from '@fluentui/react-northstar';
+import { focusSliderSteps, rightArrowSteps, upArrowSteps } from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities';
+import SliderExampleShorthand from '../../examples/components/Slider/Types/SliderExample.shorthand';
+
+export default {
+  component: Slider,
+  title: 'Slider',
+  decorators: [
+    story => <StoryWright steps={focusSliderSteps}>{story()}</StoryWright>,
+    story => <StoryWright steps={rightArrowSteps}>{story()}</StoryWright>,
+    story => <StoryWright steps={upArrowSteps}>{story()}</StoryWright>,
+  ],
+} as ComponentMeta<typeof Slider>;
+
+const SliderExampleShorthandTeams = getThemeStoryVariant(SliderExampleShorthand, 'teamsV2');
+
+const SliderExampleShorthandTeamsDark = getThemeStoryVariant(SliderExampleShorthand, 'teamsDarkV2');
+
+const SliderExampleShorthandTeamsHighContrast = getThemeStoryVariant(SliderExampleShorthand, 'teamsHighContrast');
+
+export {
+  SliderExampleShorthand,
+  SliderExampleShorthandTeams,
+  SliderExampleShorthandTeamsDark,
+  SliderExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts
new file mode 100644
index 0000000000000..6862891755baf
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts
@@ -0,0 +1,29 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, Steps } from 'storywright';
+import { sliderSlotClassNames } from '@fluentui/react-northstar';
+
+const selectors = {
+  input: `.${sliderSlotClassNames.input}`,
+};
+
+export const focusSliderSteps = new Steps().keys('body', Keys.tab).end();
+
+export const rightArrowSteps = new Steps()
+  .keys('body', Keys.tab)
+  .keys(selectors.input, Keys.rightArrow)
+  .keys(selectors.input, Keys.rightArrow)
+  .keys(selectors.input, Keys.rightArrow)
+  .keys(selectors.input, Keys.rightArrow)
+  .keys(selectors.input, Keys.rightArrow)
+  .snapshot('Navigates to the right with the right arrow key')
+  .end();
+
+export const upArrowSteps = new Steps()
+  .keys('body', Keys.tab)
+  .keys(selectors.input, Keys.upArrow)
+  .keys(selectors.input, Keys.upArrow)
+  .keys(selectors.input, Keys.upArrow)
+  .keys(selectors.input, Keys.upArrow)
+  .keys(selectors.input, Keys.upArrow)
+  .snapshot('Navigates to the right with the up arrow key')
+  .end();
diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButton.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButton.stories.tsx
new file mode 100644
index 0000000000000..83bff1d6c3e16
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButton.stories.tsx
@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SplitButton } from '@fluentui/react-northstar';
+import SplitButtonIconAndContentExampleShorthand from '../../examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand';
+import SplitButtonExampleToggleButtonShorthand from '../../examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand';
+import SplitButtonExampleDisabledShorthand from '../../examples/components/SplitButton/States/SplitButtonExampleDisabled.shorthand';
+import SplitButtonExampleShorthand from '../../examples/components/SplitButton/Types/SplitButtonExample.shorthand';
+import SplitButtonExampleFlat from '../../examples/components/SplitButton/Types/SplitButtonExampleFlat.shorthand';
+import SplitButtonExampleSmallShorthand from '../../examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand';
+import SplitButtonMainOptionChangeExample from '../../examples/components/SplitButton/Usage/SplitButtonMainOptionChangeExample.shorthand';
+
+export default { component: SplitButton, title: 'SplitButton' } as ComponentMeta<typeof SplitButton>;
+
+export {
+  SplitButtonIconAndContentExampleShorthand,
+  SplitButtonExampleToggleButtonShorthand,
+  SplitButtonExampleDisabledShorthand,
+  SplitButtonExampleShorthand,
+  SplitButtonExampleFlat,
+  SplitButtonExampleSmallShorthand,
+  SplitButtonMainOptionChangeExample,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx
new file mode 100644
index 0000000000000..b99c7c907e65b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SplitButton, splitButtonToggleClassName } from '@fluentui/react-northstar';
+import SplitButtonExamplePrimaryShorthand from '../../examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand';
+
+const selectors = {
+  triggerButton: `.${splitButtonToggleClassName}`,
+};
+
+export default {
+  component: SplitButton,
+  title: 'SplitButton',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().hover(selectors.triggerButton).snapshot('Hover primary trigger')}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof SplitButton>;
+
+export { SplitButtonExamplePrimaryShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExampleSmallContainer.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExampleSmallContainer.stories.tsx
new file mode 100644
index 0000000000000..5c28b2b204f48
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExampleSmallContainer.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SplitButton } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import SplitButtonExampleSmallContainer from '../../examples/components/SplitButton/Visual/SplitButtonExampleSmallContainer';
+
+export default {
+  component: SplitButton,
+  title: 'SplitButton',
+} as ComponentMeta<typeof SplitButton>;
+
+const SplitButtonExampleSmallContainerTeams = getThemeStoryVariant(SplitButtonExampleSmallContainer, 'teamsV2');
+
+const SplitButtonExampleSmallContainerTeamsDark = getThemeStoryVariant(SplitButtonExampleSmallContainer, 'teamsDarkV2');
+
+const SplitButtonExampleSmallContainerTeamsHighContrast = getThemeStoryVariant(
+  SplitButtonExampleSmallContainer,
+  'teamsHighContrast',
+);
+
+export {
+  SplitButtonExampleSmallContainer,
+  SplitButtonExampleSmallContainerTeams,
+  SplitButtonExampleSmallContainerTeamsDark,
+  SplitButtonExampleSmallContainerTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..60e3d31288cd1
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SplitButton, splitButtonToggleClassName } from '@fluentui/react-northstar';
+import SplitButtonPositioningExampleShorthand from '../../examples/components/SplitButton/Usage/SplitButtonPositioningExampleShorthand.shorthand';
+
+const selectors = {
+  triggerButton: `.${splitButtonToggleClassName}`,
+};
+
+export default {
+  component: SplitButton,
+  title: 'SplitButton',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click(selectors.triggerButton).snapshot('Open menu').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof SplitButton>;
+
+export { SplitButtonPositioningExampleShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/Status/Status.stories.tsx b/packages/fluentui/docs/src/vr-tests/Status/Status.stories.tsx
new file mode 100644
index 0000000000000..f54dc4f2d1aeb
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Status/Status.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Status } from '@fluentui/react-northstar';
+import StatusExampleShorthand from '../../examples/components/Status/Types/StatusExample.shorthand';
+import StatusColorExampleShorthand from '../../examples/components/Status/Variations/StatusColorExample.shorthand';
+import StatusCustomExampleShorthand from '../../examples/components/Status/Variations/StatusCustomExample.shorthand';
+import StatusIconExampleShorthand from '../../examples/components/Status/Variations/StatusIconExample.shorthand';
+import StatusSizeExampleShorthand from '../../examples/components/Status/Variations/StatusSizeExample.shorthand';
+
+export default { component: Status, title: 'Status' } as ComponentMeta<typeof Status>;
+
+export {
+  StatusExampleShorthand,
+  StatusColorExampleShorthand,
+  StatusCustomExampleShorthand,
+  StatusIconExampleShorthand,
+  StatusSizeExampleShorthand,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Status/StatusTypeExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Status/StatusTypeExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..17d042e8d31a1
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Status/StatusTypeExampleShorthand.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Status } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import StatusTypeExampleShorthand from '../../examples/components/Status/Types/StatusTypeExample.shorthand';
+
+export default {
+  component: Status,
+  title: 'Status',
+} as ComponentMeta<typeof Status>;
+
+const StatusTypeExampleShorthandTeams = getThemeStoryVariant(StatusTypeExampleShorthand, 'teamsV2');
+
+const StatusTypeExampleShorthandTeamsDark = getThemeStoryVariant(StatusTypeExampleShorthand, 'teamsDarkV2');
+
+const StatusTypeExampleShorthandTeamsHighContrast = getThemeStoryVariant(
+  StatusTypeExampleShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  StatusTypeExampleShorthand,
+  StatusTypeExampleShorthandTeams,
+  StatusTypeExampleShorthandTeamsDark,
+  StatusTypeExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIcon.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIcon.stories.tsx
new file mode 100644
index 0000000000000..0ea1b827bf2cf
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIcon.stories.tsx
@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SvgIcon } from '@fluentui/react-northstar';
+import SvgPlayground from '../../examples/components/SvgIcon/Playground';
+import SvgIconExampleRtl from '../../examples/components/SvgIcon/Rtl/SvgIconExample.rtl';
+import SvgIconExampleRotateRtl from '../../examples/components/SvgIcon/Rtl/SvgIconExampleRotate.rtl';
+import SvgIconExampleRotate from '../../examples/components/SvgIcon/Variations/SvgIconExampleRotate.shorthand';
+
+export default { component: SvgIcon, title: 'SvgIcon' } as ComponentMeta<typeof SvgIcon>;
+
+export { SvgPlayground, SvgIconExampleRtl, SvgIconExampleRotateRtl, SvgIconExampleRotate };
diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExample.stories.tsx
new file mode 100644
index 0000000000000..813a298f8c59b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExample.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SvgIcon } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import SvgIconExample from '../../examples/components/SvgIcon/Types/SvgIconExample.shorthand';
+
+export default {
+  component: SvgIcon,
+  title: 'SvgIcon',
+} as ComponentMeta<typeof SvgIcon>;
+
+const SvgIconExampleTeams = getThemeStoryVariant(SvgIconExample, 'teamsV2');
+
+const SvgIconExampleTeamsDark = getThemeStoryVariant(SvgIconExample, 'teamsDarkV2');
+
+const SvgIconExampleTeamsHighContrast = getThemeStoryVariant(SvgIconExample, 'teamsHighContrast');
+
+export { SvgIconExample, SvgIconExampleTeams, SvgIconExampleTeamsDark, SvgIconExampleTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleCircular.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleCircular.stories.tsx
new file mode 100644
index 0000000000000..eec7e4842d4fe
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleCircular.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SvgIcon } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import SvgIconExampleCircular from '../../examples/components/SvgIcon/Variations/SvgIconExampleCircular.shorthand';
+
+export default {
+  component: SvgIcon,
+  title: 'SvgIcon',
+} as ComponentMeta<typeof SvgIcon>;
+
+const SvgIconExampleCircularTeams = getThemeStoryVariant(SvgIconExampleCircular, 'teamsV2');
+
+const SvgIconExampleCircularTeamsDark = getThemeStoryVariant(SvgIconExampleCircular, 'teamsDarkV2');
+
+const SvgIconExampleCircularTeamsHighContrast = getThemeStoryVariant(SvgIconExampleCircular, 'teamsHighContrast');
+
+export {
+  SvgIconExampleCircular,
+  SvgIconExampleCircularTeams,
+  SvgIconExampleCircularTeamsDark,
+  SvgIconExampleCircularTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleColor.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleColor.stories.tsx
new file mode 100644
index 0000000000000..735cb6e155aa4
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleColor.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SvgIcon } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import SvgIconExampleColor from '../../examples/components/SvgIcon/Variations/SvgIconExampleColor.shorthand';
+
+export default {
+  component: SvgIcon,
+  title: 'SvgIcon',
+} as ComponentMeta<typeof SvgIcon>;
+
+const SvgIconExampleColorTeams = getThemeStoryVariant(SvgIconExampleColor, 'teamsV2');
+
+const SvgIconExampleColorTeamsDark = getThemeStoryVariant(SvgIconExampleColor, 'teamsDarkV2');
+
+const SvgIconExampleColorTeamsHighContrast = getThemeStoryVariant(SvgIconExampleColor, 'teamsHighContrast');
+
+export {
+  SvgIconExampleColor,
+  SvgIconExampleColorTeams,
+  SvgIconExampleColorTeamsDark,
+  SvgIconExampleColorTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleDisabled.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleDisabled.stories.tsx
new file mode 100644
index 0000000000000..38a15eee3196c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleDisabled.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SvgIcon } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import SvgIconExampleDisabled from '../../examples/components/SvgIcon/States/SvgIconExampleDisabled.shorthand';
+
+export default {
+  component: SvgIcon,
+  title: 'SvgIcon',
+} as ComponentMeta<typeof SvgIcon>;
+
+const SvgIconExampleDisabledTeams = getThemeStoryVariant(SvgIconExampleDisabled, 'teamsV2');
+
+const SvgIconExampleDisabledTeamsDark = getThemeStoryVariant(SvgIconExampleDisabled, 'teamsDarkV2');
+
+const SvgIconExampleDisabledTeamsHighContrast = getThemeStoryVariant(SvgIconExampleDisabled, 'teamsHighContrast');
+
+export {
+  SvgIconExampleDisabled,
+  SvgIconExampleDisabledTeams,
+  SvgIconExampleDisabledTeamsDark,
+  SvgIconExampleDisabledTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSize.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSize.stories.tsx
new file mode 100644
index 0000000000000..f6be6a9318b52
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSize.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SvgIcon } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import SvgIconExampleSize from '../../examples/components/SvgIcon/Variations/SvgIconExampleSize.shorthand';
+
+export default {
+  component: SvgIcon,
+  title: 'SvgIcon',
+} as ComponentMeta<typeof SvgIcon>;
+
+const SvgIconExampleSizeTeams = getThemeStoryVariant(SvgIconExampleSize, 'teamsV2');
+
+const SvgIconExampleSizeTeamsDark = getThemeStoryVariant(SvgIconExampleSize, 'teamsDarkV2');
+
+const SvgIconExampleSizeTeamsHighContrast = getThemeStoryVariant(SvgIconExampleSize, 'teamsHighContrast');
+
+export {
+  SvgIconExampleSize,
+  SvgIconExampleSizeTeams,
+  SvgIconExampleSizeTeamsDark,
+  SvgIconExampleSizeTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSpace.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSpace.stories.tsx
new file mode 100644
index 0000000000000..9b3892cb322a9
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSpace.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SvgIcon } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import SvgIconExampleSpace from '../../examples/components/SvgIcon/Variations/SvgIconExampleSpace.shorthand';
+
+export default {
+  component: SvgIcon,
+  title: 'SvgIcon',
+} as ComponentMeta<typeof SvgIcon>;
+
+const SvgIconExampleSpaceTeams = getThemeStoryVariant(SvgIconExampleSpace, 'teamsV2');
+
+const SvgIconExampleSpaceTeamsDark = getThemeStoryVariant(SvgIconExampleSpace, 'teamsDarkV2');
+
+const SvgIconExampleSpaceTeamsHighContrast = getThemeStoryVariant(SvgIconExampleSpace, 'teamsHighContrast');
+
+export {
+  SvgIconExampleSpace,
+  SvgIconExampleSpaceTeams,
+  SvgIconExampleSpaceTeamsDark,
+  SvgIconExampleSpaceTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconSetExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconSetExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..bee76b07b9a76
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconSetExampleShorthand.stories.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SvgIcon } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import SvgIconSetExampleShorthand from '../../examples/components/SvgIcon/Usage/SvgIconSetExample.shorthand';
+
+export default {
+  component: SvgIcon,
+  title: 'SvgIcon',
+} as ComponentMeta<typeof SvgIcon>;
+
+const SvgIconSetExampleShorthandTeams = getThemeStoryVariant(SvgIconSetExampleShorthand, 'teamsV2');
+
+const SvgIconSetExampleShorthandTeamsDark = getThemeStoryVariant(SvgIconSetExampleShorthand, 'teamsDarkV2');
+
+const SvgIconSetExampleShorthandTeamsHighContrast = getThemeStoryVariant(
+  SvgIconSetExampleShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  SvgIconSetExampleShorthand,
+  SvgIconSetExampleShorthandTeams,
+  SvgIconSetExampleShorthandTeamsDark,
+  SvgIconSetExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgconExampleBordered.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgconExampleBordered.stories.tsx
new file mode 100644
index 0000000000000..c4c2c90b3987f
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgconExampleBordered.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { SvgIcon } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import SvgconExampleBordered from '../../examples/components/SvgIcon/Variations/SvgIconExampleBordered.shorthand';
+
+export default {
+  component: SvgIcon,
+  title: 'SvgIcon',
+} as ComponentMeta<typeof SvgIcon>;
+
+const SvgconExampleBorderedTeams = getThemeStoryVariant(SvgconExampleBordered, 'teamsV2');
+
+const SvgconExampleBorderedTeamsDark = getThemeStoryVariant(SvgconExampleBordered, 'teamsDarkV2');
+
+const SvgconExampleBorderedTeamsHighContrast = getThemeStoryVariant(SvgconExampleBordered, 'teamsHighContrast');
+
+export {
+  SvgconExampleBordered,
+  SvgconExampleBorderedTeams,
+  SvgconExampleBorderedTeamsDark,
+  SvgconExampleBorderedTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Table/StaticTable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Table/StaticTable.stories.tsx
new file mode 100644
index 0000000000000..0b3faa3c8a810
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Table/StaticTable.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Table } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import StaticTable from '../../examples/components/Table/Usage/TableExampleNavigable.shorthand';
+
+export default {
+  component: Table,
+  title: 'Table',
+} as ComponentMeta<typeof Table>;
+
+const StaticTableTeams = getThemeStoryVariant(StaticTable, 'teamsV2');
+
+const StaticTableTeamsDark = getThemeStoryVariant(StaticTable, 'teamsDarkV2');
+
+const StaticTableTeamsHighContrast = getThemeStoryVariant(StaticTable, 'teamsHighContrast');
+
+export { StaticTable, StaticTableTeams, StaticTableTeamsDark, StaticTableTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Table/Table.stories.tsx b/packages/fluentui/docs/src/vr-tests/Table/Table.stories.tsx
new file mode 100644
index 0000000000000..1ee2f3ffc1059
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Table/Table.stories.tsx
@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Table } from '@fluentui/react-northstar';
+import TableExampleStaticShorthand from '../../examples/components/Table/Usage/TableExampleStatic.shorthand';
+import TableExampleStatic from '../../examples/components/Table/Usage/TableExampleStatic';
+import StaticTableCompact from '../../examples/components/Table/Usage/TableExampleStaticCompact.shorthand';
+import StaticTable from '../../examples/components/Table/Usage/TableExampleStaticHeadless.shorthand';
+
+export default { component: Table, title: 'Table' } as ComponentMeta<typeof Table>;
+
+export { TableExampleStaticShorthand, TableExampleStatic, StaticTableCompact, StaticTable };
diff --git a/packages/fluentui/docs/src/vr-tests/Text/Text.stories.tsx b/packages/fluentui/docs/src/vr-tests/Text/Text.stories.tsx
new file mode 100644
index 0000000000000..53cef8f847f18
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Text/Text.stories.tsx
@@ -0,0 +1,54 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Text } from '@fluentui/react-northstar';
+import TextExampleRtl from '../../examples/components/Text/Rtl/TextExample.rtl';
+import TextExampleDisabledShorthand from '../../examples/components/Text/States/TextExampleDisabled.shorthand';
+import TextExampleDisabled from '../../examples/components/Text/States/TextExampleDisabled';
+import TextExampleErrorShorthand from '../../examples/components/Text/States/TextExampleError.shorthand';
+import TextExampleError from '../../examples/components/Text/States/TextExampleError';
+import TextExampleSuccessShorthand from '../../examples/components/Text/States/TextExampleSuccess.shorthand';
+import TextExampleSuccess from '../../examples/components/Text/States/TextExampleSuccess';
+import TextExampleTemporaryShorthand from '../../examples/components/Text/States/TextExampleTemporary.shorthand';
+import TextExampleTemporary from '../../examples/components/Text/States/TextExampleTemporary';
+import TextExampleTruncatedShorthand from '../../examples/components/Text/States/TextExampleTruncated.shorthand';
+import TextExampleTruncated from '../../examples/components/Text/States/TextExampleTruncated';
+import TextSizesExampleShorthand from '../../examples/components/Text/Types/TextSizesExample.shorthand';
+import TextSizesExample from '../../examples/components/Text/Types/TextSizesExample';
+import TextWeightsExampleShorthand from '../../examples/components/Text/Types/TextWeightsExample.shorthand';
+import TextWeightsExample from '../../examples/components/Text/Types/TextWeightsExample';
+import HeaderExampleAlign from '../../examples/components/Text/Variations/TextExampleAlign.shorthand';
+import TextExampleAtMentionShorthand from '../../examples/components/Text/Variations/TextExampleAtMention.shorthand';
+import TextExampleAtMention from '../../examples/components/Text/Variations/TextExampleAtMention';
+import TextExampleColor from '../../examples/components/Text/Variations/TextExampleColor.shorthand';
+import TextExampleImportantShorthand from '../../examples/components/Text/Variations/TextExampleImportant.shorthand';
+import TextExampleImportant from '../../examples/components/Text/Variations/TextExampleImportant';
+import TextExampleTimestampShorthand from '../../examples/components/Text/Variations/TextExampleTimestamp.shorthand';
+import TextExampleTimestamp from '../../examples/components/Text/Variations/TextExampleTimestamp';
+
+export default { component: Text, title: 'Text' } as ComponentMeta<typeof Text>;
+
+export {
+  TextExampleRtl,
+  TextExampleDisabledShorthand,
+  TextExampleDisabled,
+  TextExampleErrorShorthand,
+  TextExampleError,
+  TextExampleSuccessShorthand,
+  TextExampleSuccess,
+  TextExampleTemporaryShorthand,
+  TextExampleTemporary,
+  TextExampleTruncatedShorthand,
+  TextExampleTruncated,
+  TextSizesExampleShorthand,
+  TextSizesExample,
+  TextWeightsExampleShorthand,
+  TextWeightsExample,
+  HeaderExampleAlign,
+  TextExampleAtMentionShorthand,
+  TextExampleAtMention,
+  TextExampleColor,
+  TextExampleImportantShorthand,
+  TextExampleImportant,
+  TextExampleTimestampShorthand,
+  TextExampleTimestamp,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/TextArea/TextArea.stories.tsx b/packages/fluentui/docs/src/vr-tests/TextArea/TextArea.stories.tsx
new file mode 100644
index 0000000000000..866dd936a2544
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/TextArea/TextArea.stories.tsx
@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { TextArea } from '@fluentui/react-northstar';
+import TextAreaDisabledExample from '../../examples/components/TextArea/States/TextAreaDisabledExample.shorthand';
+import TextAreaValueExample from '../../examples/components/TextArea/States/TextAreaValueExample.shorthand';
+import TextAreaExampleHeight from '../../examples/components/TextArea/Usage/TextAreaExampleHeight.shorthand';
+import TextAreaExampleMaxLength from '../../examples/components/TextArea/Usage/TextAreaExampleMaxLength.shorthand';
+import TextAreaExampleResize from '../../examples/components/TextArea/Usage/TextAreaExampleResize.shorthand';
+import TextAreaExampleFluid from '../../examples/components/TextArea/Variations/TextAreaExampleFluid.shorthand';
+
+export default { component: TextArea, title: 'TextArea' } as ComponentMeta<typeof TextArea>;
+
+export {
+  TextAreaDisabledExample,
+  TextAreaValueExample,
+  TextAreaExampleHeight,
+  TextAreaExampleMaxLength,
+  TextAreaExampleResize,
+  TextAreaExampleFluid,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx
new file mode 100644
index 0000000000000..6796008aefe30
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { TextArea, textAreaClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import TextAreaExample from '../../examples/components/TextArea/Types/TextAreaExample.shorthand';
+
+export default {
+  component: TextArea,
+  title: 'TextArea',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().focus(`.${textAreaClassName}`).snapshot('Can be focused').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof TextArea>;
+
+const TextAreaExampleTeams = getThemeStoryVariant(TextAreaExample, 'teamsV2');
+
+const TextAreaExampleTeamsDark = getThemeStoryVariant(TextAreaExample, 'teamsDarkV2');
+
+const TextAreaExampleTeamsHighContrast = getThemeStoryVariant(TextAreaExample, 'teamsHighContrast');
+
+export { TextAreaExample, TextAreaExampleTeams, TextAreaExampleTeamsDark, TextAreaExampleTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExampleInverted.stories.tsx b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExampleInverted.stories.tsx
new file mode 100644
index 0000000000000..b79ad71f795dd
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExampleInverted.stories.tsx
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { TextArea } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import TextAreaExampleInverted from '../../examples/components/TextArea/Variations/TextAreaExampleInverted.shorthand';
+
+export default {
+  component: TextArea,
+  title: 'TextArea',
+} as ComponentMeta<typeof TextArea>;
+
+const TextAreaExampleInvertedTeams = getThemeStoryVariant(TextAreaExampleInverted, 'teamsV2');
+
+const TextAreaExampleInvertedTeamsDark = getThemeStoryVariant(TextAreaExampleInverted, 'teamsDarkV2');
+
+const TextAreaExampleInvertedTeamsHighContrast = getThemeStoryVariant(TextAreaExampleInverted, 'teamsHighContrast');
+
+export {
+  TextAreaExampleInverted,
+  TextAreaExampleInvertedTeams,
+  TextAreaExampleInvertedTeamsDark,
+  TextAreaExampleInvertedTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/Toolbar.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/Toolbar.stories.tsx
new file mode 100644
index 0000000000000..b3e7cfa952951
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/Toolbar.stories.tsx
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar } from '@fluentui/react-northstar';
+import ToolbarExampleCustomContentShorthand from '../../examples/components/Toolbar/Content/ToolbarExampleCustomContent.shorthand';
+import ToolbarExampleMenuItemToggle from '../../examples/components/Toolbar/Content/ToolbarExampleMenuItemToggle.shorthand';
+import ToolbarExampleMenuRadioGroup from '../../examples/components/Toolbar/Content/ToolbarExampleMenuRadioGroup.shorthand';
+import ToolbarExampleShorthand from '../../examples/components/Toolbar/Types/ToolbarExample.shorthand';
+import ToolbarExample from '../../examples/components/Toolbar/Types/ToolbarExample';
+
+export default { component: Toolbar, title: 'Toolbar' } as ComponentMeta<typeof Toolbar>;
+
+export {
+  ToolbarExampleCustomContentShorthand,
+  ToolbarExampleMenuItemToggle,
+  ToolbarExampleMenuRadioGroup,
+  ToolbarExampleShorthand,
+  ToolbarExample,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx
new file mode 100644
index 0000000000000..9e3c7efee52c4
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar, toolbarItemWrapperClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ToolbarExampleActionPopupInMenu from '../../examples/components/Toolbar/Usage/ToolbarExampleActionPopupInMenu.shorthand';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${toolbarItemWrapperClassName} button`)
+          .snapshot('Shows menu')
+          .click(`.${toolbarMenuItemClassName}:nth-child(1)`)
+          .snapshot('Shows popup')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+const ToolbarExampleActionPopupInMenuTeams = getThemeStoryVariant(ToolbarExampleActionPopupInMenu, 'teamsV2');
+
+const ToolbarExampleActionPopupInMenuTeamsDark = getThemeStoryVariant(ToolbarExampleActionPopupInMenu, 'teamsDarkV2');
+
+const ToolbarExampleActionPopupInMenuTeamsHighContrast = getThemeStoryVariant(
+  ToolbarExampleActionPopupInMenu,
+  'teamsHighContrast',
+);
+
+export {
+  ToolbarExampleActionPopupInMenu,
+  ToolbarExampleActionPopupInMenuTeams,
+  ToolbarExampleActionPopupInMenuTeamsDark,
+  ToolbarExampleActionPopupInMenuTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx
new file mode 100644
index 0000000000000..f91cc1f50bb43
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ToolbarExampleEditorShorthand from '../../examples/components/Toolbar/Types/ToolbarExampleEditor.shorthand';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().keys('body', Keys.tab).snapshot('Focuses item').end()}>{story()}</StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+const ToolbarExampleEditorShorthandTeams = getThemeStoryVariant(ToolbarExampleEditorShorthand, 'teamsV2');
+
+const ToolbarExampleEditorShorthandTeamsDark = getThemeStoryVariant(ToolbarExampleEditorShorthand, 'teamsDarkV2');
+
+const ToolbarExampleEditorShorthandTeamsHighContrast = getThemeStoryVariant(
+  ToolbarExampleEditorShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  ToolbarExampleEditorShorthand,
+  ToolbarExampleEditorShorthandTeams,
+  ToolbarExampleEditorShorthandTeamsDark,
+  ToolbarExampleEditorShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx
new file mode 100644
index 0000000000000..dc0d95aa18ed4
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar } from '@fluentui/react-northstar';
+import ToolbarExampleMenuShorthand from '../../examples/components/Toolbar/Visual/ToolbarExampleCompose.shorthand';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().click('#open-menu').snapshot('Shows a menu').end()}>{story()}</StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+export { ToolbarExampleMenuShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx
new file mode 100644
index 0000000000000..b31b7187eb24f
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar, toolbarItemWrapperClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ToolbarExampleMenuWithSubmenuShorthand from '../../examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${toolbarItemWrapperClassName} button`)
+          .snapshot('Shows menu')
+          .keys(`.${toolbarMenuItemClassName}#ToolbarExampleMenuWithSubmenu_Play`, Keys.rightArrow)
+          .snapshot('Opens first submenu')
+          .click(`.${toolbarMenuItemClassName}#ToolbarExampleMenuWithSubmenu_Appearance`)
+          .snapshot('Opens second submenu')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+const ToolbarExampleMenuWithSubmenuShorthandTeams = getThemeStoryVariant(
+  ToolbarExampleMenuWithSubmenuShorthand,
+  'teamsV2',
+);
+
+const ToolbarExampleMenuWithSubmenuShorthandTeamsDark = getThemeStoryVariant(
+  ToolbarExampleMenuWithSubmenuShorthand,
+  'teamsDarkV2',
+);
+
+const ToolbarExampleMenuWithSubmenuShorthandTeamsHighContrast = getThemeStoryVariant(
+  ToolbarExampleMenuWithSubmenuShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  ToolbarExampleMenuWithSubmenuShorthand,
+  ToolbarExampleMenuWithSubmenuShorthandTeams,
+  ToolbarExampleMenuWithSubmenuShorthandTeamsDark,
+  ToolbarExampleMenuWithSubmenuShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx
new file mode 100644
index 0000000000000..d6c0046566726
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar } from '@fluentui/react-northstar';
+import ToolbarExampleOverflow from '../../examples/components/Toolbar/Visual/ToolbarExampleChatMessage';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps().click('[title="More"').snapshot('Toolbar fits within bounds of the chat message').end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+export { ToolbarExampleOverflow };
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx
new file mode 100644
index 0000000000000..46d5022e3b61c
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar } from '@fluentui/react-northstar';
+import ToolbarExampleOverflowPositioningShorthand from '../../examples/components/Toolbar/Visual/ToolbarExampleOverflowPositioning.shorthand';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .executeScript("document.querySelector('iframe').contentDocument.querySelector('#overflow-item').click()")
+          .snapshot('Overflow item is properly positioned')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+export { ToolbarExampleOverflowPositioningShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx
new file mode 100644
index 0000000000000..dc555305fa4cc
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar } from '@fluentui/react-northstar';
+import ToolbarExampleOverflowPositioningShorthandRtl from '../../examples/components/Toolbar/Visual/ToolbarExampleOverflowPositioning.rtl';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .executeScript("document.querySelector('iframe').contentDocument.querySelector('#overflow-item').click()")
+          .snapshot('RTL: Overflow item is properly positioned')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+export { ToolbarExampleOverflowPositioningShorthandRtl };
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx
new file mode 100644
index 0000000000000..80723992cc618
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar, toolbarItemClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ToolbarExamplePopupInMenu from '../../examples/components/Toolbar/Usage/ToolbarExamplePopupInMenu.shorthand';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${toolbarItemClassName}:nth-child(1)`)
+          .snapshot('Shows menu')
+          .click(`.${toolbarMenuItemClassName}:nth-child(1)`)
+          .snapshot('Shows popup')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+const ToolbarExamplePopupInMenuTeams = getThemeStoryVariant(ToolbarExamplePopupInMenu, 'teamsV2');
+
+const ToolbarExamplePopupInMenuTeamsDark = getThemeStoryVariant(ToolbarExamplePopupInMenu, 'teamsDarkV2');
+
+const ToolbarExamplePopupInMenuTeamsHighContrast = getThemeStoryVariant(ToolbarExamplePopupInMenu, 'teamsHighContrast');
+
+export {
+  ToolbarExamplePopupInMenu,
+  ToolbarExamplePopupInMenuTeams,
+  ToolbarExamplePopupInMenuTeamsDark,
+  ToolbarExamplePopupInMenuTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx
new file mode 100644
index 0000000000000..51c4fe658b5a3
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar, toolbarItemClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ToolbarExamplePopupShorthand from '../../examples/components/Toolbar/Content/ToolbarExamplePopup.shorthand';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${toolbarItemClassName}:nth-child(1)`)
+          .snapshot('Shows first popup')
+          .click(`.${toolbarItemClassName}:nth-child(2)`)
+          .snapshot('Shows second popup')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+const ToolbarExamplePopupShorthandTeams = getThemeStoryVariant(ToolbarExamplePopupShorthand, 'teamsV2');
+
+const ToolbarExamplePopupShorthandTeamsDark = getThemeStoryVariant(ToolbarExamplePopupShorthand, 'teamsDarkV2');
+
+const ToolbarExamplePopupShorthandTeamsHighContrast = getThemeStoryVariant(
+  ToolbarExamplePopupShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  ToolbarExamplePopupShorthand,
+  ToolbarExamplePopupShorthandTeams,
+  ToolbarExamplePopupShorthandTeamsDark,
+  ToolbarExamplePopupShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleRadioGroupShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleRadioGroupShorthand.stories.tsx
new file mode 100644
index 0000000000000..324c662500cbb
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleRadioGroupShorthand.stories.tsx
@@ -0,0 +1,29 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ToolbarExampleRadioGroupShorthand from '../../examples/components/Toolbar/Content/ToolbarExampleRadioGroup.shorthand';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+} as ComponentMeta<typeof Toolbar>;
+
+const ToolbarExampleRadioGroupShorthandTeams = getThemeStoryVariant(ToolbarExampleRadioGroupShorthand, 'teamsV2');
+
+const ToolbarExampleRadioGroupShorthandTeamsDark = getThemeStoryVariant(
+  ToolbarExampleRadioGroupShorthand,
+  'teamsDarkV2',
+);
+
+const ToolbarExampleRadioGroupShorthandTeamsHighContrast = getThemeStoryVariant(
+  ToolbarExampleRadioGroupShorthand,
+  'teamsHighContrast',
+);
+
+export {
+  ToolbarExampleRadioGroupShorthand,
+  ToolbarExampleRadioGroupShorthandTeams,
+  ToolbarExampleRadioGroupShorthandTeamsDark,
+  ToolbarExampleRadioGroupShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..62e691f5bd263
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar, toolbarClassName, toolbarItemClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import ToolbarExampleShorthand from '../../examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand';
+
+const selectors = {
+  item: (itemIndex: number) => `.${toolbarClassName} .${toolbarItemClassName}:nth-child(${itemIndex})`,
+};
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .hover(selectors.item(1))
+          .snapshot('Hovers 1st item (show tooltip)')
+          .click(selectors.item(1))
+          .keys(selectors.item(1), Keys.rightArrow)
+          .snapshot('Navigates to next item (shows tooltip)')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+const ToolbarExampleShorthandTeams = getThemeStoryVariant(ToolbarExampleShorthand, 'teamsV2');
+
+const ToolbarExampleShorthandTeamsDark = getThemeStoryVariant(ToolbarExampleShorthand, 'teamsDarkV2');
+
+const ToolbarExampleShorthandTeamsHighContrast = getThemeStoryVariant(ToolbarExampleShorthand, 'teamsHighContrast');
+
+export {
+  ToolbarExampleShorthand,
+  ToolbarExampleShorthandTeams,
+  ToolbarExampleShorthandTeamsDark,
+  ToolbarExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx
new file mode 100644
index 0000000000000..b9a99e3387bf3
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Toolbar } from '@fluentui/react-northstar';
+import ToolbarExampleVariables from '../../examples/components/Toolbar/Visual/ToolbarExampleVariables.shorthand';
+
+export default {
+  component: Toolbar,
+  title: 'Toolbar',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click('#open-menu')
+          .snapshot('Shows a usual menu')
+          .click('#open-menu-variables')
+          .snapshot('Shows a styled menu')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Toolbar>;
+
+export { ToolbarExampleVariables };
diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/Tooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 0000000000000..ac3787e618511
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tooltip } from '@fluentui/react-northstar';
+import TooltipOpenExample from '../../examples/components/Tooltip/States/TooltipOpenControlledExample.shorthand';
+import TooltipExample from '../../examples/components/Tooltip/Types/TooltipExample';
+import TooltipExamplePointing from '../../examples/components/Tooltip/Types/TooltipExamplePointing';
+import TooltipExampleDisabledTrigger from '../../examples/components/Tooltip/Usage/TooltipExampleDisabledTrigger.shorthand';
+import TooltipExampleDismissOnContentMouseEnter from '../../examples/components/Tooltip/Usage/TooltipExampleDismissOnContentMouseEnter';
+import TooltipExampleTarget from '../../examples/components/Tooltip/Usage/TooltipExampleTarget';
+import TooltipExamplePosition from '../../examples/components/Tooltip/Variations/TooltipExamplePosition.shorthand';
+import TooltipExamplePointerMargin from '../../examples/components/Tooltip/Visual/TooltipExamplePointerMargin.shorthand';
+
+export default { component: Tooltip, title: 'Tooltip' } as ComponentMeta<typeof Tooltip>;
+
+export {
+  TooltipOpenExample,
+  TooltipExample,
+  TooltipExamplePointing,
+  TooltipExampleDisabledTrigger,
+  TooltipExampleDismissOnContentMouseEnter,
+  TooltipExampleTarget,
+  TooltipExamplePosition,
+  TooltipExamplePointerMargin,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx
new file mode 100644
index 0000000000000..b834c9ba11a53
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tooltip, buttonClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import TooltipExample from '../../examples/components/Tooltip/Types/TooltipExample.shorthand';
+
+export default {
+  component: Tooltip,
+  title: 'Tooltip',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().hover(`.${buttonClassName}`).snapshot('Shows tooltip').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Tooltip>;
+
+const TooltipExampleTeams = getThemeStoryVariant(TooltipExample, 'teamsV2');
+
+const TooltipExampleTeamsDark = getThemeStoryVariant(TooltipExample, 'teamsDarkV2');
+
+const TooltipExampleTeamsHighContrast = getThemeStoryVariant(TooltipExample, 'teamsHighContrast');
+
+export { TooltipExample, TooltipExampleTeams, TooltipExampleTeamsDark, TooltipExampleTeamsHighContrast };
diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx
new file mode 100644
index 0000000000000..30f9fa8001aab
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tooltip, buttonClassName, dialogSlotClassNames } from '@fluentui/react-northstar';
+import TooltipExampleDialogContentShorthand from '../../examples/components/Tooltip/Usage/TooltipExampleDialogContent.shorthand';
+
+export default {
+  component: Tooltip,
+  title: 'Tooltip',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(`.${buttonClassName}`)
+          .hover(`.${dialogSlotClassNames.content} .${buttonClassName}`)
+          .snapshot('Shows tooltip in a dialog')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Tooltip>;
+
+export { TooltipExampleDialogContentShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx
new file mode 100644
index 0000000000000..481ea27fcac22
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tooltip, buttonClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import TooltipExamplePointing from '../../examples/components/Tooltip/Types/TooltipExamplePointing.shorthand';
+
+export default {
+  component: Tooltip,
+  title: 'Tooltip',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().hover(`.${buttonClassName}`).snapshot('Shows tooltip').end()}>
+        {story()}
+      </StoryWright>
+    ),
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .keys('body', Keys.tab)
+          .snapshot('Has outline on keyboard')
+          .click(`.${buttonClassName}`)
+          .snapshot('No outline after click')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Tooltip>;
+
+const TooltipExamplePointingTeams = getThemeStoryVariant(TooltipExamplePointing, 'teamsV2');
+
+const TooltipExamplePointingTeamsDark = getThemeStoryVariant(TooltipExamplePointing, 'teamsDarkV2');
+
+const TooltipExamplePointingTeamsHighContrast = getThemeStoryVariant(TooltipExamplePointing, 'teamsHighContrast');
+
+export {
+  TooltipExamplePointing,
+  TooltipExamplePointingTeams,
+  TooltipExamplePointingTeamsDark,
+  TooltipExamplePointingTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx
new file mode 100644
index 0000000000000..107df9ad43b76
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tooltip, buttonClassName } from '@fluentui/react-northstar';
+import TooltipExampleRtl from '../../examples/components/Tooltip/Rtl/TooltipExample.rtl';
+
+export default {
+  component: Tooltip,
+  title: 'Tooltip',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().hover(`.${buttonClassName}`).snapshot('RTL: Shows tooltip').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Tooltip>;
+
+export { TooltipExampleRtl };
diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx
new file mode 100644
index 0000000000000..e9873d42da39b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tooltip, buttonClassName } from '@fluentui/react-northstar';
+import TooltipExampleTarget from '../../examples/components/Tooltip/Usage/TooltipExampleTarget.shorthand';
+
+export default {
+  component: Tooltip,
+  title: 'Tooltip',
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().hover(`.${buttonClassName}`).snapshot('Custom target: Shows tooltip').end()}>
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Tooltip>;
+
+export { TooltipExampleTarget };
diff --git a/packages/fluentui/docs/src/vr-tests/Tree/Tree.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/Tree.stories.tsx
new file mode 100644
index 0000000000000..ce434afebb46b
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tree/Tree.stories.tsx
@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tree } from '@fluentui/react-northstar';
+import TreeExclusiveExample from '../../examples/components/Tree/Types/TreeExclusiveExample.shorthand';
+import TreeInitiallyOpenExampleShorthand from '../../examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand';
+
+export default { component: Tree, title: 'Tree' } as ComponentMeta<typeof Tree>;
+
+export { TreeExclusiveExample, TreeInitiallyOpenExampleShorthand };
diff --git a/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx
new file mode 100644
index 0000000000000..140483be5ad02
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tree, treeTitleClassName, treeItemClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import TreeExampleShorthand from '../../examples/components/Tree/Types/TreeExample.shorthand';
+
+const selectors = {
+  treeItem: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex})`,
+  treeTitle: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex}) .${treeTitleClassName}`,
+};
+
+export default {
+  component: Tree,
+  title: 'Tree',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(selectors.treeTitle(1))
+          .snapshot('Focus on click subtree')
+          .keys(selectors.treeItem(2), Keys.downArrow)
+          .snapshot('Focus on keyboard subtree')
+          .click(selectors.treeTitle(2))
+          .keys(selectors.treeItem(2), Keys.downArrow)
+          .snapshot('Focus on keyboard leaf')
+          .click(selectors.treeTitle(4))
+          .snapshot('Focus on click leaf')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Tree>;
+
+const TreeExampleShorthandTeams = getThemeStoryVariant(TreeExampleShorthand, 'teamsV2');
+
+const TreeExampleShorthandTeamsDark = getThemeStoryVariant(TreeExampleShorthand, 'teamsDarkV2');
+
+const TreeExampleShorthandTeamsHighContrast = getThemeStoryVariant(TreeExampleShorthand, 'teamsHighContrast');
+
+export {
+  TreeExampleShorthand,
+  TreeExampleShorthandTeams,
+  TreeExampleShorthandTeamsDark,
+  TreeExampleShorthandTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx
new file mode 100644
index 0000000000000..4a7704428d197
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tree, treeItemClassName, treeTitleClassName, treeTitleSlotClassNames } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import TreeMultiselectExample from '../../examples/components/Tree/Usage/TreeMultiselectExample.shorthand';
+
+const selectors = {
+  treeTitle: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex}) .${treeTitleClassName}`,
+  treeItem: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex})`,
+  selectionIndicator: (itemIndex: number) =>
+    `.${treeItemClassName}:nth-of-type(${itemIndex}) .${treeTitleSlotClassNames.indicator}`,
+};
+
+export default {
+  component: Tree,
+  title: 'Tree',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .click(selectors.treeTitle(1))
+          .snapshot('first expanded, not custom checkbox visible')
+          .click(selectors.treeTitle(2))
+          .click(selectors.treeTitle(6))
+          .click(selectors.treeTitle(10))
+          .click(selectors.treeTitle(11))
+          .snapshot('default selected states')
+          .click(selectors.selectionIndicator(12))
+          .snapshot('selected, when clicked on selection indicator')
+          .click(selectors.treeTitle(13))
+          .snapshot('selected, when clicked on selection indicator')
+          .click(selectors.treeTitle(4))
+          .snapshot('selected, when group partially selected')
+          .click(selectors.selectionIndicator(2))
+          .snapshot('all children selected')
+          .keys(selectors.treeTitle(7), Keys.space)
+          .snapshot('selected, when space pressed')
+          .click(selectors.treeTitle(15))
+          .click(selectors.selectionIndicator(15))
+          .snapshot('group fully selected, when it has non selectable children')
+          .click(selectors.selectionIndicator(15))
+          .keys(selectors.treeTitle(16), Keys.space)
+          .keys(selectors.treeTitle(17), Keys.space)
+          .snapshot('selected, when group has non selectable item')
+          .keys(selectors.treeItem(15), Keys.space)
+          .snapshot('toggle group selected')
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Tree>;
+
+const TreeMultiselectExampleTeams = getThemeStoryVariant(TreeMultiselectExample, 'teamsV2');
+
+const TreeMultiselectExampleTeamsDark = getThemeStoryVariant(TreeMultiselectExample, 'teamsDarkV2');
+
+const TreeMultiselectExampleTeamsHighContrast = getThemeStoryVariant(TreeMultiselectExample, 'teamsHighContrast');
+
+export {
+  TreeMultiselectExample,
+  TreeMultiselectExampleTeams,
+  TreeMultiselectExampleTeamsDark,
+  TreeMultiselectExampleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx
new file mode 100644
index 0000000000000..310323ff2beab
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Tree, treeItemClassName, treeTitleClassName } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities';
+import TreeTitleCustomizationExample from '../../examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand';
+
+const selectors = {
+  treeTitle: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex}) .${treeTitleClassName}`,
+};
+
+export default {
+  component: Tree,
+  title: 'Tree',
+  decorators: [
+    story => (
+      <StoryWright
+        steps={new Steps().click(selectors.treeTitle(1)).click(selectors.treeTitle(2)).snapshot('Exapanded').end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} as ComponentMeta<typeof Tree>;
+
+const TreeTitleCustomizationExampleTeams = getThemeStoryVariant(TreeTitleCustomizationExample, 'teamsV2');
+
+const TreeTitleCustomizationExampleTeamsDark = getThemeStoryVariant(TreeTitleCustomizationExample, 'teamsDarkV2');
+
+const TreeTitleCustomizationExampleTeamsHighContrast = getThemeStoryVariant(
+  TreeTitleCustomizationExample,
+  'teamsHighContrast',
+);
+
+export {
+  TreeTitleCustomizationExample,
+  TreeTitleCustomizationExampleTeams,
+  TreeTitleCustomizationExampleTeamsDark,
+  TreeTitleCustomizationExampleTeamsHighContrast,
+};
diff --git a/packages/fluentui/docs/src/vr-tests/Video/Video.stories.tsx b/packages/fluentui/docs/src/vr-tests/Video/Video.stories.tsx
new file mode 100644
index 0000000000000..1a88c202db493
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/Video/Video.stories.tsx
@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Video } from '@fluentui/react-northstar';
+import VideoExample from '../../examples/components/Video/Types/VideoExample.shorthand';
+
+export default { component: Video, title: 'Video' } as ComponentMeta<typeof Video>;
+
+export { VideoExample };
diff --git a/packages/fluentui/docs/src/vr-tests/utilities/getThemeStoryVariant.tsx b/packages/fluentui/docs/src/vr-tests/utilities/getThemeStoryVariant.tsx
new file mode 100644
index 0000000000000..eaf7f3bc6cd3a
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/utilities/getThemeStoryVariant.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentStory } from '@storybook/react';
+import { Provider, teamsDarkV2Theme, teamsHighContrastTheme, teamsV2Theme } from '@fluentui/react-northstar';
+
+const themes = {
+  teamsV2: teamsV2Theme,
+  teamsDarkV2: teamsDarkV2Theme,
+  teamsHighContrast: teamsHighContrastTheme,
+} as const;
+
+export const getThemeStoryVariant = (story: ComponentStory<any>, themeName: keyof typeof themes) => {
+  const theme = themes[themeName];
+
+  return { ...story, render: story, decorators: [story => <Provider theme={theme}>{story()}</Provider>] };
+};
diff --git a/packages/fluentui/docs/src/vr-tests/utilities/index.ts b/packages/fluentui/docs/src/vr-tests/utilities/index.ts
new file mode 100644
index 0000000000000..7eadca0dd0a55
--- /dev/null
+++ b/packages/fluentui/docs/src/vr-tests/utilities/index.ts
@@ -0,0 +1,3 @@
+import { getThemeStoryVariant } from './getThemeStoryVariant';
+
+export { getThemeStoryVariant };