diff --git a/change/@fluentui-react-examples-3f727fcf-7626-44ee-bb71-eb52297f248b.json b/change/@fluentui-react-examples-3f727fcf-7626-44ee-bb71-eb52297f248b.json
new file mode 100644
index 00000000000000..ef9c0d371759a7
--- /dev/null
+++ b/change/@fluentui-react-examples-3f727fcf-7626-44ee-bb71-eb52297f248b.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Removal of react-text",
+  "packageName": "@fluentui/react-examples",
+  "email": "andredias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-image-d233671d-ccc9-4a09-a080-56f852b30590.json b/change/@fluentui-react-image-d233671d-ccc9-4a09-a080-56f852b30590.json
new file mode 100644
index 00000000000000..b2950cf4af7fb5
--- /dev/null
+++ b/change/@fluentui-react-image-d233671d-ccc9-4a09-a080-56f852b30590.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Migrate to new DX",
+  "packageName": "@fluentui/react-image",
+  "email": "andredias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/jest.config.js b/jest.config.js
index 2b7f2e68111c64..89064f523d7719 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -7,6 +7,7 @@ module.exports = {
     '<rootDir>/packages/react-text',
     '<rootDir>/packages/react-portal',
     '<rootDir>/packages/react-aria',
+    '<rootDir>/packages/react-image',
     '<rootDir>/packages/react-positioning',
   ],
 };
diff --git a/nx.json b/nx.json
index ea4b5cc1d98837..79105a24b0fae6 100644
--- a/nx.json
+++ b/nx.json
@@ -98,7 +98,7 @@
     "@fluentui/react-icon-provider": { "implicitDependencies": [] },
     "@fluentui/react-icons-mdl2": { "implicitDependencies": [] },
     "@fluentui/react-icons-mdl2-branded": { "implicitDependencies": [] },
-    "@fluentui/react-image": { "implicitDependencies": [] },
+    "@fluentui/react-image": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-input": { "implicitDependencies": [] },
     "@fluentui/react-link": { "implicitDependencies": [] },
     "@fluentui/react-make-styles": { "implicitDependencies": [] },
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index 51d28700735fdb..0192887708998b 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -53,7 +53,6 @@
     "@fluentui/react-focus": "^8.1.4",
     "@fluentui/react-hooks": "^8.2.2",
     "@fluentui/react-icons-mdl2": "^1.1.3",
-    "@fluentui/react-image": "^9.0.0-alpha.45",
     "@fluentui/react-label": "^9.0.0-alpha.9",
     "@fluentui/react-link": "^9.0.0-alpha.46",
     "@fluentui/react-make-styles": "^9.0.0-alpha.42",
diff --git a/packages/react-examples/src/react-image/Image/Image.stories.scss b/packages/react-examples/src/react-image/Image/Image.stories.scss
deleted file mode 100644
index 20ab20387f4239..00000000000000
--- a/packages/react-examples/src/react-image/Image/Image.stories.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.hStack {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: calc(-1 * var(--gap, 8px) / 2);
-
-  > * {
-    margin: calc(var(--gap, 8px) / 2);
-  }
-}
-
-.vStack {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  > *:not(:first-child) {
-    margin-top: var(--gap, 20px);
-  }
-}
diff --git a/packages/react-image/.storybook/main.js b/packages/react-image/.storybook/main.js
new file mode 100644
index 00000000000000..f47245f2d07f01
--- /dev/null
+++ b/packages/react-image/.storybook/main.js
@@ -0,0 +1,11 @@
+const rootMain = require('../../../.storybook/main');
+
+module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    return localConfig;
+  },
+});
diff --git a/packages/react-image/.storybook/preview.js b/packages/react-image/.storybook/preview.js
new file mode 100644
index 00000000000000..b52409294c3304
--- /dev/null
+++ b/packages/react-image/.storybook/preview.js
@@ -0,0 +1,3 @@
+import * as rootPreview from '../../../.storybook/preview';
+
+export const decorators = [...rootPreview.decorators];
diff --git a/packages/react-image/.storybook/tsconfig.json b/packages/react-image/.storybook/tsconfig.json
new file mode 100644
index 00000000000000..3bd9adcd2ee05e
--- /dev/null
+++ b/packages/react-image/.storybook/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true
+  },
+  "exclude": ["../**/*.test.ts", "../**/*.test.js", "../**/*.test.tsx", "../**/*.test.jsx"],
+  "include": ["../src/**/*", "*.js"]
+}
diff --git a/packages/react-image/config/api-extractor.local.json b/packages/react-image/config/api-extractor.local.json
new file mode 100644
index 00000000000000..c2ea401c1c3685
--- /dev/null
+++ b/packages/react-image/config/api-extractor.local.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "./api-extractor.json",
+  "mainEntryPointFilePath": "<projectFolder>/dist/<unscopedPackageName>/src/index.d.ts"
+}
diff --git a/packages/react-image/jest.config.js b/packages/react-image/jest.config.js
index c2a9e205df8e6d..dd03d5211113a4 100644
--- a/packages/react-image/jest.config.js
+++ b/packages/react-image/jest.config.js
@@ -1,9 +1,21 @@
-const { createConfig } = require('@fluentui/scripts/jest/jest-resources');
-const path = require('path');
+// @ts-check
 
-const config = createConfig({
-  setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
+/**
+ * @type {jest.InitialOptions}
+ */
+module.exports = {
+  displayName: 'react-image',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  coverageDirectory: './coverage',
+  setupFilesAfterEnv: ['./config/tests.js'],
   snapshotSerializers: ['@fluentui/jest-serializer-make-styles'],
-});
-
-module.exports = config;
+};
diff --git a/packages/react-image/package.json b/packages/react-image/package.json
index 54f94d6d78ed3a..41e8ab4c217b6c 100644
--- a/packages/react-image/package.json
+++ b/packages/react-image/package.json
@@ -18,10 +18,11 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "start-test": "just-scripts jest-watch",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "start": "storybook",
+    "test": "jest",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/packages/react-image/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
     "@fluentui/babel-make-styles": "^9.0.0-alpha.16",
diff --git a/packages/react-examples/src/react-image/Image/Image.stories.tsx b/packages/react-image/src/Image.stories.tsx
similarity index 87%
rename from packages/react-examples/src/react-image/Image/Image.stories.tsx
rename to packages/react-image/src/Image.stories.tsx
index 12cbf2d056ff4a..c89484aa57c2ad 100644
--- a/packages/react-examples/src/react-image/Image/Image.stories.tsx
+++ b/packages/react-image/src/Image.stories.tsx
@@ -1,14 +1,34 @@
 import * as React from 'react';
-import { Image } from '@fluentui/react-image';
-import * as classes from './Image.stories.scss';
+import { Image } from './index';
+import { makeStyles } from '@fluentui/react-make-styles';
 
 /**
  * Temporary Stack until there's one in its own package.
  */
+const useStackStyles = makeStyles({
+  hStack: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    margin: 'calc(-1 * var(--gap, 8px) / 2)',
+    '> *': {
+      margin: 'calc(var(--gap, 8px) / 2)',
+    },
+  },
+  vStack: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    '> *:not(:first-child)': {
+      marginTop: 'var(--gap, 20px)',
+    },
+  },
+});
 const Stack = (props: React.PropsWithChildren<{ horizontal?: boolean }>) => {
   const { horizontal, ...rest } = props;
+  const { hStack, vStack } = useStackStyles();
 
-  return <div {...rest} className={horizontal ? classes.hStack : classes.vStack} />;
+  return <div {...rest} className={horizontal ? hStack : vStack} />;
 };
 
 export const ImageAppearanceShape = () => (
@@ -161,3 +181,8 @@ export const ImageFluid = () => (
     <Image fluid src="https://via.placeholder.com/100x100" />
   </Stack>
 );
+
+export default {
+  title: 'Components/Image',
+  component: Image,
+};
diff --git a/packages/react-image/tsconfig.json b/packages/react-image/tsconfig.json
index beb1660276af80..1259d048631bd2 100644
--- a/packages/react-image/tsconfig.json
+++ b/packages/react-image/tsconfig.json
@@ -1,22 +1,17 @@
 {
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"],
   "compilerOptions": {
-    "baseUrl": ".",
+    "target": "ES5",
+    "module": "CommonJS",
+    "lib": ["es5", "dom"],
     "outDir": "dist",
-    "target": "es5",
-    "module": "commonjs",
     "jsx": "react",
     "declaration": true,
-    "sourceMap": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "moduleResolution": "node",
     "preserveConstEnums": true,
-    "lib": ["es5", "dom"],
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
-    "types": ["jest", "custom-global"]
-  },
-  "include": ["src"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+  }
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 18494ddc0c2d7a..95e33ae3536462 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -31,7 +31,8 @@
       "@fluentui/react-storybook": ["packages/react-storybook/src/index.ts"],
       "@fluentui/react-accordion": ["packages/react-accordion/src/index.ts"],
       "@fluentui/react-text": ["packages/react-text/src/index.ts"],
-      "@fluentui/react-aria": ["packages/react-aria/src/index.ts"]
+      "@fluentui/react-aria": ["packages/react-aria/src/index.ts"],
+      "@fluentui/react-image": ["packages/react-image/src/index.ts"]
     }
   },
   "exclude": ["node_modules"]
diff --git a/workspace.json b/workspace.json
index 38b74edd8ee397..d6f8e33d5431d3 100644
--- a/workspace.json
+++ b/workspace.json
@@ -117,7 +117,11 @@
     "@fluentui/react-icon-provider": { "root": "packages/react-icon-provider", "projectType": "library" },
     "@fluentui/react-icons-mdl2": { "root": "packages/react-icons-mdl2", "projectType": "library" },
     "@fluentui/react-icons-mdl2-branded": { "root": "packages/react-icons-mdl2-branded", "projectType": "library" },
-    "@fluentui/react-image": { "root": "packages/react-image", "projectType": "library" },
+    "@fluentui/react-image": {
+      "root": "packages/react-image",
+      "projectType": "library",
+      "sourceRoot": "packages/react-image/src"
+    },
     "@fluentui/react-input": { "root": "packages/react-input", "projectType": "library" },
     "@fluentui/react-link": { "root": "packages/react-link", "projectType": "library" },
     "@fluentui/react-make-styles": { "root": "packages/react-make-styles", "projectType": "library" },