diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index b33cb857a6afe..3eb6844f037ff 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -56,8 +56,9 @@
     "@fluentui/react-storybook-addon": "*",
     "@fluentui/react-storybook-addon-codesandbox": "*",
     "@fluentui/react-switch": "*",
-    "@fluentui/react-tabs": "*",
     "@fluentui/react-table": "*",
+    "@fluentui/react-tabs": "*",
+    "@fluentui/react-tags-preview": "*",
     "@fluentui/react-text": "*",
     "@fluentui/react-textarea": "*",
     "@fluentui/react-theme": "*",
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
new file mode 100644
index 0000000000000..56fec05e8223b
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Default = () => <InteractionTag>Primary Text</InteractionTag>;
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+// disabled
+export const Disabled = () => (
+  <InteractionTag disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const OutlineDisabled = () => (
+  <InteractionTag appearance="outline" disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH_CONTRAST);
+export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
+
+export const BrandDisabled = () => (
+  <InteractionTag appearance="brand" disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CONTRAST);
+export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);
+
+// size
+export const SizeSmall = () => <InteractionTag size="small">Primary Text</InteractionTag>;
+export const SizeSmallDismissible = () => (
+  <InteractionTag size="small" dismissible>
+    Primary Text
+  </InteractionTag>
+);
+export const SizeSmallWithIcon = () => (
+  <InteractionTag size="small" icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const SizeSmallWithMedia = () => (
+  <InteractionTag size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
+
+export const SizeExtraSmall = () => <InteractionTag size="extra-small">Primary Text</InteractionTag>;
+export const SizeExtraSmallDismissible = () => (
+  <InteractionTag size="extra-small" dismissible>
+    Primary Text
+  </InteractionTag>
+);
+export const SizeExtraSmallWithIcon = () => (
+  <InteractionTag size="extra-small" icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const SizeExtraSmallWithMedia = () => (
+  <InteractionTag size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
new file mode 100644
index 0000000000000..6e08f6a630475
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Default = () => <Tag>Primary Text</Tag>;
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+// disabled
+export const Disabled = () => (
+  <Tag disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const OutlineDisabled = () => (
+  <Tag appearance="outline" disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH_CONTRAST);
+export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
+
+export const BrandDisabled = () => (
+  <Tag appearance="brand" disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CONTRAST);
+export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);
+
+// size
+export const SizeSmall = () => <Tag size="small">Primary Text</Tag>;
+export const SizeSmallDismissible = () => (
+  <Tag size="small" dismissible>
+    Primary Text
+  </Tag>
+);
+export const SizeSmallWithIcon = () => (
+  <Tag size="small" icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const SizeSmallWithMedia = () => (
+  <Tag size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+
+export const SizeExtraSmall = () => <Tag size="extra-small">Primary Text</Tag>;
+export const SizeExtraSmallDismissible = () => (
+  <Tag size="extra-small" dismissible>
+    Primary Text
+  </Tag>
+);
+export const SizeExtraSmallWithIcon = () => (
+  <Tag size="extra-small" icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const SizeExtraSmallWithMedia = () => (
+  <Tag size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
new file mode 100644
index 0000000000000..8b7d5b562fc06
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { TagGroup, Tag, InteractionTag } from '@fluentui/react-tags-preview';
+import { ComponentMeta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { withStoryWrightSteps } from '../../utilities';
+
+const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+
+export default {
+  title: 'TagGroup Converged',
+  Component: TagGroup,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof TagGroup>;
+
+export const Default = () => (
+  <TagGroup>
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+  </TagGroup>
+);
+
+const onDismiss = () => ({});
+export const Dismissible = () => (
+  <TagGroup onDismiss={onDismiss}>
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+  </TagGroup>
+);
+
+export const DismissibleWithInteractionTag = () => (
+  <TagGroup onDismiss={onDismiss}>
+    <InteractionTag>Tag 1</InteractionTag>
+    <InteractionTag>Tag 2</InteractionTag>
+    <InteractionTag>Tag 3</InteractionTag>
+  </TagGroup>
+);
+
+// size
+export const SizeSmall = () => (
+  <TagGroup size="small">
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+  </TagGroup>
+);
+
+export const SizeExtraSmall = () => (
+  <TagGroup size="extra-small">
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+  </TagGroup>
+);