diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 4b96272ef03545..553d1d678df922 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -34,6 +34,7 @@
     "@fluentui/react-make-styles": "^9.0.0-alpha.54",
     "@fluentui/react-provider": "^9.0.0-alpha.61",
     "@fluentui/react-tabs": "^1.0.0-beta.138",
+    "@fluentui/react-text": "^9.0.0-alpha.0",
     "@fluentui/react-theme": "^9.0.0-alpha.20",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
diff --git a/apps/vr-tests/src/stories/TextConverged.stories.tsx b/apps/vr-tests/src/stories/TextConverged.stories.tsx
new file mode 100644
index 00000000000000..aa63f0cd62161c
--- /dev/null
+++ b/apps/vr-tests/src/stories/TextConverged.stories.tsx
@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import Screener from 'screener-storybook/src/screener';
+import {
+  Body,
+  Caption,
+  Display,
+  Headline,
+  LargeTitle,
+  Subheadline,
+  Text,
+  Title1,
+  Title2,
+  Title3,
+} from '@fluentui/react-text';
+import { FluentProviderDecorator } from '../utilities/index';
+
+const ScreenerWrapper = (story: () => React.ReactNode) => (
+  <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+    <div className="testWrapper" style={{ width: '250px' }}>
+      {story()}
+    </div>
+  </Screener>
+);
+
+storiesOf('react-text Text', module)
+  .addDecorator(ScreenerWrapper)
+  .addDecorator(FluentProviderDecorator)
+  .addStory('Default', () => (
+    <>
+      <p>
+        <Title3 block>Default</Title3>
+        <Text>Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.</Text>
+      </p>
+      <p>
+        <Title3 block>No wrapping</Title3>
+        <Text block wrap={false}>
+          Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
+        </Text>
+      </p>
+      <p>
+        <Title3 block>Truncate</Title3>
+        <Text block wrap={false} truncate>
+          Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
+        </Text>
+      </p>
+      <p>
+        <Title3 block>Italic</Title3>
+        <Text block italic>
+          Hello, world
+        </Text>
+      </p>
+      <p>
+        <Title3 block>Underline</Title3>
+        <Text block underline>
+          Hello, world
+        </Text>
+      </p>
+      <p>
+        <Title3 block>Strikethrough</Title3>
+        <Text block strikethrough>
+          Hello, world
+        </Text>
+      </p>
+      <p>
+        <Title3 block>Sizes</Title3>
+        <Text block size={100}>
+          100
+        </Text>
+        <Text block size={200}>
+          200
+        </Text>
+        <Text block size={300}>
+          300
+        </Text>
+        <Text block size={400}>
+          400
+        </Text>
+        <Text block size={500}>
+          500
+        </Text>
+        <Text block size={600}>
+          600
+        </Text>
+        <Text block size={700}>
+          700
+        </Text>
+        <Text block size={800}>
+          800
+        </Text>
+        <Text block size={900}>
+          900
+        </Text>
+        <Text block size={1000}>
+          1000
+        </Text>
+      </p>
+      <p>
+        <Title3 block>Fonts</Title3>
+        <Text block font="base">
+          Base
+        </Text>
+        <Text block font="monospace">
+          Monospace
+        </Text>
+        <Text block font="numeric">
+          Numeric
+        </Text>
+      </p>
+      <p>
+        <Title3 block>Weights</Title3>
+        <Text block weight="regular">
+          Regular
+        </Text>
+        <Text block weight="medium">
+          Medium
+        </Text>
+        <Text block weight="semibold">
+          Semibold
+        </Text>
+      </p>
+      <p>
+        <Title3 block>Alignments</Title3>
+        <Text block align="start">
+          Start
+        </Text>
+        <Text block align="center">
+          Center
+        </Text>
+        <Text block align="end">
+          End
+        </Text>
+        <Text block align="justify">
+          Justified lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
+        </Text>
+      </p>
+    </>
+  ));
+
+storiesOf('react-text Typography wrappers', module)
+  .addDecorator(ScreenerWrapper)
+  .addDecorator(FluentProviderDecorator)
+  .addStory('Display', () => (
+    <>
+      <Display block>Display</Display>
+      <LargeTitle block>LargeTitle</LargeTitle>
+      <Title1 block>Title1</Title1>
+      <Title2 block>Title2</Title2>
+      <Title3 block>Title3</Title3>
+      <Headline block>Headline</Headline>
+      <Subheadline block>Subheadline</Subheadline>
+      <Body block>Body</Body>
+      <Caption block>Caption</Caption>
+    </>
+  ));