diff --git a/lerna.json b/lerna.json
index d59304546a455..008c48e367af7 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,6 +3,7 @@
     "apps/*",
     "packages/*",
     "packages/react-components/*",
+    "packages/react-components-migration/*",
     "scripts",
     "packages/fluentui/*",
     "tools",
diff --git a/package.json b/package.json
index 55ef46e88687b..2d715704e983c 100644
--- a/package.json
+++ b/package.json
@@ -310,6 +310,7 @@
       "packages/*",
       "packages/fluentui/*",
       "packages/react-components/*",
+      "packages/react-components-migration/*",
       "scripts",
       "tools",
       "typings"
@@ -344,6 +345,7 @@
       "apps/![react-18-tests-v8][react-18-tests-v9]/package.json",
       "packages/!(web-components)/package.json",
       "packages/react-components/*/package.json",
+      "packages/react-components-migration/*/package.json",
       "packages/fluentui/*/package.json",
       "scripts/package.json"
     ],
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.storybook/main.js b/packages/react-components-migration/react-button-shim-v8-v9/.storybook/main.js
new file mode 100644
index 0000000000000..f57cfd09509e7
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/.storybook/main.js
@@ -0,0 +1,14 @@
+const rootMain = require('../../../../.storybook/main');
+
+module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+  ...rootMain,
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    // add your own webpack tweaks if needed
+
+    return localConfig;
+  },
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.storybook/preview.js b/packages/react-components-migration/react-button-shim-v8-v9/.storybook/preview.js
new file mode 100644
index 0000000000000..1939500a3d18c
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/.storybook/preview.js
@@ -0,0 +1,7 @@
+import * as rootPreview from '../../../../.storybook/preview';
+
+/** @type {typeof rootPreview.decorators} */
+export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.storybook/tsconfig.json b/packages/react-components-migration/react-button-shim-v8-v9/.storybook/tsconfig.json
new file mode 100644
index 0000000000000..f9f60e1234ed4
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/.storybook/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "",
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["static-assets", "environment", "storybook__addons"]
+  },
+  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+}
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json
index 637d9797ae3e6..a8c3d3240d101 100644
--- a/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json
+++ b/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json
@@ -5,5 +5,6 @@
     "enabled": true,
     "untrimmedFilePath": "",
     "publicTrimmedFilePath": "<projectFolder>/dist/index.d.ts"
-  }
+  },
+  "mainEntryPointFilePath": "<projectFolder>/../../../dist/out-tsc/types/packages/react-components-migration/<unscopedPackageName>/src/index.d.ts"
 }
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md b/packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md
index e69de29bb2d1d..9b49db6d294a3 100644
--- a/packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md
+++ b/packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md
@@ -0,0 +1,40 @@
+## API Report File for "@fluentui/react-button-shim-v8-v9"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ButtonProps } from '@fluentui/react-components';
+import { IBaseButtonProps } from '@fluentui/react';
+import { IButtonProps } from '@fluentui/react';
+import * as React_2 from 'react';
+
+// @public
+const ActionButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+export { ActionButtonShim }
+export { ActionButtonShim as CommandButtonShim }
+
+// @public (undocumented)
+export const ButtonShim: React_2.ForwardRefExoticComponent<IBaseButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public
+export const CompoundButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public
+export const DefaultButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public (undocumented)
+export const MenuButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public
+export const PrimaryButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public (undocumented)
+export const shimButtonProps: (props: IBaseButtonProps & React_2.RefAttributes<HTMLButtonElement>) => ButtonProps;
+
+// @public
+export const ToggleButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/package.json b/packages/react-components-migration/react-button-shim-v8-v9/package.json
index 11b88109fd9ee..a62770792c4be 100644
--- a/packages/react-components-migration/react-button-shim-v8-v9/package.json
+++ b/packages/react-components-migration/react-button-shim-v8-v9/package.json
@@ -20,7 +20,9 @@
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
     "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "storybook": "start-storybook",
+    "start": "yarn storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -29,6 +31,9 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@fluentui/react": "^8.97.1",
+    "@fluentui/react-components": "^9.4.0",
+    "@fluentui/react-menu-shim-v8-v9": "9.0.0-alpha.0",
     "@fluentui/react-theme": "^9.1.0",
     "@fluentui/react-utilities": "^9.1.0",
     "@griffel/react": "^1.3.0",
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/ActionButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/ActionButtonShim.ts
new file mode 100644
index 0000000000000..6bcc53049c208
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/ActionButtonShim.ts
@@ -0,0 +1 @@
+export * from './components/ActionButtonShim/index';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/ButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/ButtonShim.ts
new file mode 100644
index 0000000000000..f499a468cf2a1
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/ButtonShim.ts
@@ -0,0 +1 @@
+export * from './components/ButtonShim/index';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/CommandButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/CommandButtonShim.ts
new file mode 100644
index 0000000000000..619b1006ed5aa
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/CommandButtonShim.ts
@@ -0,0 +1 @@
+export * from './components/CommandButtonShim/index';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/CompoundButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/CompoundButtonShim.ts
new file mode 100644
index 0000000000000..490cf65d2148c
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/CompoundButtonShim.ts
@@ -0,0 +1 @@
+export * from './components/CompoundButtonShim/index';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/DefaultButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/DefaultButtonShim.ts
new file mode 100644
index 0000000000000..0b6f2b43fe53a
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/DefaultButtonShim.ts
@@ -0,0 +1 @@
+export * from './components/DefaultButtonShim/index';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/MenuButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/MenuButtonShim.ts
new file mode 100644
index 0000000000000..3a280031f92cc
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/MenuButtonShim.ts
@@ -0,0 +1 @@
+export * from './components/MenuButtonShim/index';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/PrimaryButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/PrimaryButtonShim.ts
new file mode 100644
index 0000000000000..990fee3c0e36c
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/PrimaryButtonShim.ts
@@ -0,0 +1 @@
+export * from './components/PrimaryButtonShim/index';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/ToggleButtonShim.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/ToggleButtonShim.ts
new file mode 100644
index 0000000000000..e1d5fa45ed5cd
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/ToggleButtonShim.ts
@@ -0,0 +1 @@
+export * from './components/ToggleButtonShim/index';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.test.tsx
new file mode 100644
index 0000000000000..20378cc4a5ac1
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ActionButtonShim } from './ActionButtonShim';
+
+describe('ActionButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<ActionButtonShim>Default ActionButtonShim</ActionButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.tsx
new file mode 100644
index 0000000000000..52dc8c978d993
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { IButtonProps } from '@fluentui/react';
+
+import { Button } from '@fluentui/react-components';
+
+import { shimButtonProps } from '../../shimButtonProps';
+
+/**
+ * Shims a v8 ActionButton to render a v9 Button
+ */
+export const ActionButtonShim: React.ForwardRefExoticComponent<
+  IButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  const variantProps = {
+    ...props,
+    variantClassName: 'ms-Button--action ms-Button--command',
+  };
+
+  const shimProps = shimButtonProps(variantProps);
+
+  return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} appearance="transparent" />;
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/__snapshots__/ActionButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/__snapshots__/ActionButtonShim.test.tsx.snap
new file mode 100644
index 0000000000000..26aa6ab0fe3d5
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/__snapshots__/ActionButtonShim.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button ms-Button--primary"
+    type="button"
+  >
+    Default ActionButtonShim
+  </button>
+</div>
+`;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/index.ts
new file mode 100644
index 0000000000000..9115c8927a96b
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/index.ts
@@ -0,0 +1 @@
+export * from './ActionButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.test.tsx
new file mode 100644
index 0000000000000..7df19b24d82e6
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ButtonShim } from './ButtonShim';
+
+describe('ButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<ButtonShim>Default ButtonShim</ButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.tsx
new file mode 100644
index 0000000000000..eff0b2b957c51
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { IBaseButtonProps } from '@fluentui/react';
+
+import { Button } from '@fluentui/react-components';
+
+import { shimButtonProps } from '../../shimButtonProps';
+import { ToggleButtonShim } from '../ToggleButtonShim';
+import { CompoundButtonShim } from '../CompoundButtonShim';
+
+export const ButtonShim: React.ForwardRefExoticComponent<
+  IBaseButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  const shimProps = shimButtonProps(props);
+
+  if (props.toggle) {
+    return <ToggleButtonShim {...props}>{props.children}</ToggleButtonShim>;
+  }
+  if (props.secondaryText || props.onRenderDescription?.(props)) {
+    return <CompoundButtonShim {...props} />;
+  }
+
+  return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/__snapshots__/ButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/__snapshots__/ButtonShim.test.tsx.snap
new file mode 100644
index 0000000000000..b4b54a0663fec
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/__snapshots__/ButtonShim.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button ms-Button--default"
+    type="button"
+  >
+    Default ButtonShim
+  </button>
+</div>
+`;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/index.ts
new file mode 100644
index 0000000000000..fb6ee7d2957ab
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/index.ts
@@ -0,0 +1 @@
+export * from './ButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.test.tsx
new file mode 100644
index 0000000000000..083c2f756e579
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { CommandButtonShim } from './CommandButtonShim';
+
+describe('CommandButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<CommandButtonShim>Default CommandButtonShim</CommandButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.tsx
new file mode 100644
index 0000000000000..f402200e5eb81
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.tsx
@@ -0,0 +1,4 @@
+/**
+ * Shims v8 CommandButtonShim to render a v9 Button
+ */
+export { ActionButtonShim as CommandButtonShim } from '../ActionButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/__snapshots__/CommandButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/__snapshots__/CommandButtonShim.test.tsx.snap
new file mode 100644
index 0000000000000..601bfe5ed4449
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/__snapshots__/CommandButtonShim.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CommandButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button ms-Button--primary"
+    type="button"
+  >
+    Default CommandButtonShim
+  </button>
+</div>
+`;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/index.ts
new file mode 100644
index 0000000000000..e6274fbcee40b
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/index.ts
@@ -0,0 +1 @@
+export * from './CommandButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.test.tsx
new file mode 100644
index 0000000000000..770fa3f37dbf1
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { CompoundButtonShim } from './CompoundButtonShim';
+
+describe('CompoundButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<CompoundButtonShim>Default CompoundButtonShim</CompoundButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.tsx
new file mode 100644
index 0000000000000..f016a8eca15d3
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { IButtonProps } from '@fluentui/react';
+
+import { CompoundButton, CompoundButtonProps } from '@fluentui/react-components';
+
+import { shimButtonProps } from '../../shimButtonProps';
+
+/**
+ * Shims v8 CompoundButton to render a v9 CompoundButton
+ */
+export const CompoundButtonShim: React.ForwardRefExoticComponent<
+  IButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  const variantProps = {
+    ...props,
+    variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',
+  };
+
+  const shimProps: CompoundButtonProps = {
+    ...shimButtonProps(variantProps),
+    secondaryContent: props.secondaryText || props.onRenderDescription?.(props),
+  };
+
+  return <CompoundButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/__snapshots__/CompoundButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/__snapshots__/CompoundButtonShim.test.tsx.snap
new file mode 100644
index 0000000000000..076710fb2d006
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/__snapshots__/CompoundButtonShim.test.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CompoundButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button fui-CompoundButton ms-Button--primary"
+    type="button"
+  >
+    <span
+      class="fui-CompoundButton__contentContainer"
+    >
+      Default CompoundButtonShim
+    </span>
+  </button>
+</div>
+`;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/index.ts
new file mode 100644
index 0000000000000..9107a36bd8351
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/index.ts
@@ -0,0 +1 @@
+export * from './CompoundButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.test.tsx
new file mode 100644
index 0000000000000..c06edd9cc4432
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DefaultButtonShim } from './DefaultButtonShim';
+
+describe('DefaultButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<DefaultButtonShim>Default DefaultButtonShim</DefaultButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.tsx
new file mode 100644
index 0000000000000..e2d463e2d07da
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { IButtonProps } from '@fluentui/react';
+
+import { ButtonShim } from '../ButtonShim';
+
+/**
+ * Shims a v8 DefaultButton to render a v9 Button
+ */
+export const DefaultButtonShim: React.ForwardRefExoticComponent<
+  IButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  return <ButtonShim {...props} variantClassName={props.primary ? 'ms-Button--primary' : 'ms-Button--default'} />;
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/__snapshots__/DefaultButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/__snapshots__/DefaultButtonShim.test.tsx.snap
new file mode 100644
index 0000000000000..e3d9e9ecdc11b
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/__snapshots__/DefaultButtonShim.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button ms-Button--primary"
+    type="button"
+  >
+    Default DefaultButtonShim
+  </button>
+</div>
+`;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/index.ts
new file mode 100644
index 0000000000000..795f15f4ce154
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/index.ts
@@ -0,0 +1 @@
+export * from './DefaultButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.test.tsx
new file mode 100644
index 0000000000000..f0e5198d43dd9
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { MenuButtonShim } from './MenuButtonShim';
+
+describe('MenuButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<MenuButtonShim id="test">Default MenuButtonShim</MenuButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.tsx
new file mode 100644
index 0000000000000..79e847f4e3c5b
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { IButtonProps } from '@fluentui/react';
+import { MenuButton, MenuButtonProps, Menu, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
+import { MenuItemShim, shimMenuProps } from '@fluentui/react-menu-shim-v8-v9';
+
+import { shimButtonProps } from '../../shimButtonProps';
+
+export const MenuButtonShim: React.ForwardRefExoticComponent<
+  IButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  const variantProps = {
+    ...props,
+    variantClassName: props.primary ? 'ms-Button--primary' : 'ms-Button--default',
+  };
+
+  const shimProps: MenuButtonProps = {
+    ...shimButtonProps(variantProps),
+  };
+
+  const shimmedMenuProps = props.menuProps ? shimMenuProps(props.menuProps) : {};
+
+  return (
+    <Menu {...shimmedMenuProps}>
+      <MenuTrigger>
+        <MenuButton {...shimProps} />
+      </MenuTrigger>
+      <MenuPopover>
+        <MenuList>
+          {props.menuProps?.items.map(item => (
+            // key is added through item spread
+            // eslint-disable-next-line react/jsx-key
+            <MenuItemShim {...item} />
+          ))}
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/__snapshots__/MenuButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/__snapshots__/MenuButtonShim.test.tsx.snap
new file mode 100644
index 0000000000000..789318bfa1743
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/__snapshots__/MenuButtonShim.test.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuButtonShim renders a default state 1`] = `
+<div>
+  <button
+    aria-expanded="false"
+    aria-haspopup="menu"
+    class="fui-Button fui-MenuButton ms-Button--primary"
+    id="test"
+    role="button"
+    tabindex="0"
+    type="button"
+  >
+    Default MenuButtonShim
+    <span
+      class="fui-MenuButton__menuIcon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 01-.78 0L4.15 8.35a.5.5 0 11.7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/index.ts
new file mode 100644
index 0000000000000..7c6fb301b3a0f
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/index.ts
@@ -0,0 +1 @@
+export * from './MenuButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.test.tsx
new file mode 100644
index 0000000000000..41dbd3994e444
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { PrimaryButtonShim } from './PrimaryButtonShim';
+
+describe('PrimaryButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<PrimaryButtonShim>Default PrimaryButtonShim</PrimaryButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.tsx
new file mode 100644
index 0000000000000..0bde729d568a9
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/PrimaryButtonShim.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { IButtonProps } from '@fluentui/react';
+import { ButtonShim } from '../ButtonShim';
+
+/**
+ * Shims v8 PrimaryButton to render a v9 Button
+ */
+export const PrimaryButtonShim: React.ForwardRefExoticComponent<
+  IButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  return <ButtonShim {...props} primary variantClassName="ms-Button--primary" />;
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/__snapshots__/PrimaryButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/__snapshots__/PrimaryButtonShim.test.tsx.snap
new file mode 100644
index 0000000000000..22a3f71cb0005
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/__snapshots__/PrimaryButtonShim.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PrimaryButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button ms-Button--primary"
+    type="button"
+  >
+    Default PrimaryButtonShim
+  </button>
+</div>
+`;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/index.ts
new file mode 100644
index 0000000000000..af54b04c64f11
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/PrimaryButtonShim/index.ts
@@ -0,0 +1 @@
+export * from './PrimaryButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.test.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.test.tsx
new file mode 100644
index 0000000000000..25a3212eb2986
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ToggleButtonShim } from './ToggleButtonShim';
+
+describe('ToggleButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<ToggleButtonShim>Default ToggleButtonShim</ToggleButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.tsx
new file mode 100644
index 0000000000000..6ac5aae94f388
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/ToggleButtonShim.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { IButtonProps } from '@fluentui/react';
+
+import { ToggleButton, ToggleButtonProps } from '@fluentui/react-components';
+
+import { shimButtonProps } from '../../shimButtonProps';
+
+/**
+ * Shims v8 ToggleButton to render a v9 ToggleButton
+ */
+export const ToggleButtonShim: React.ForwardRefExoticComponent<
+  IButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  const variantProps = {
+    ...props,
+    variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',
+  };
+
+  const shimProps: ToggleButtonProps = {
+    ...shimButtonProps(variantProps),
+    checked: props.checked,
+    defaultChecked: props.defaultChecked,
+  };
+
+  return <ToggleButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+});
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/__snapshots__/ToggleButtonShim.test.tsx.snap b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/__snapshots__/ToggleButtonShim.test.tsx.snap
new file mode 100644
index 0000000000000..76036052584aa
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/__snapshots__/ToggleButtonShim.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleButtonShim renders a default state 1`] = `
+<div>
+  <button
+    aria-pressed="false"
+    class="fui-Button fui-ToggleButton ms-Button--primary"
+    type="button"
+  >
+    Default ToggleButtonShim
+  </button>
+</div>
+`;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/index.ts
new file mode 100644
index 0000000000000..e5fbe7af5b721
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/components/ToggleButtonShim/index.ts
@@ -0,0 +1 @@
+export * from './ToggleButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts
index aacbad0068e24..25c94aff40254 100644
--- a/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts
@@ -1,2 +1,9 @@
-// TODO: replace with real exports
-export {};
+export { shimButtonProps } from './shimButtonProps';
+export { ActionButtonShim } from './ActionButtonShim';
+export { ButtonShim } from './ButtonShim';
+export { ToggleButtonShim } from './ToggleButtonShim';
+export { CommandButtonShim } from './CommandButtonShim';
+export { CompoundButtonShim } from './CompoundButtonShim';
+export { DefaultButtonShim } from './DefaultButtonShim';
+export { PrimaryButtonShim } from './PrimaryButtonShim';
+export { MenuButtonShim } from './MenuButtonShim';
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/shimButtonProps.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/shimButtonProps.tsx
new file mode 100644
index 0000000000000..eea1acdf42210
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/shimButtonProps.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { IBaseButtonProps, Icon } from '@fluentui/react';
+
+import { ButtonProps } from '@fluentui/react-components';
+
+export const shimButtonProps = (props: IBaseButtonProps & React.RefAttributes<HTMLButtonElement>): ButtonProps => {
+  //TODO: Icon shim. This still renders the v8 icon.
+  const icon = props.onRenderIcon ? (
+    props.onRenderIcon(props)
+  ) : props.iconProps ? (
+    <Icon {...props.iconProps} />
+  ) : undefined;
+
+  const variantClassName = props.variantClassName ?? props.primary ? 'ms-Button--primary' : 'ms-Button--default';
+  const className = [props.baseClassName, variantClassName, props.className].filter(Boolean).join(' ');
+
+  return {
+    // spread incoming props to propagate HTML properties not part of IBaseButtonProps
+    ...props,
+    appearance: props.primary ? 'primary' : undefined,
+    className: className,
+    disabled: props.disabled,
+    disabledFocusable: props.allowDisabledFocus,
+    'aria-hidden': props.ariaHidden,
+    'aria-label': props.ariaLabel,
+    icon,
+    key: props.key || props.uniqueId,
+    children: props.onRenderChildren
+      ? props.onRenderChildren(props)
+      : props.onRenderText
+      ? props.onRenderText(props)
+      : props.text || props.children,
+  } as ButtonProps;
+};
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDefault.stories.tsx
new file mode 100644
index 0000000000000..300c8d66f8c92
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ActionButtonShim, ActionButtonShimProps } from '@fluentui/react-button-shim-v8-v9';
+
+export const Default = (props: Partial<ActionButtonShimProps>) => <ActionButtonShim {...props} />;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/ActionButtonShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/index.stories.tsx
new file mode 100644
index 0000000000000..e91fa4dbc0012
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ActionButtonShim/index.stories.tsx
@@ -0,0 +1,18 @@
+import { ActionButtonShim } from '@fluentui/react-button-shim-v8-v9';
+
+import descriptionMd from './ActionButtonShimDescription.md';
+import bestPracticesMd from './ActionButtonShimBestPractices.md';
+
+export { Default } from './ActionButtonShimDefault.stories';
+
+export default {
+  title: 'Preview Components/ActionButtonShim',
+  component: ActionButtonShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDefault.stories.tsx
new file mode 100644
index 0000000000000..c283c1df9df88
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ButtonShim, ButtonShimProps } from '@fluentui/react-button-shim-v8-v9';
+
+export const Default = (props: Partial<ButtonShimProps>) => <ButtonShim {...props} />;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/ButtonShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/index.stories.tsx
new file mode 100644
index 0000000000000..271f30819cebf
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ButtonShim/index.stories.tsx
@@ -0,0 +1,18 @@
+import { ButtonShim } from '@fluentui/react-button-shim-v8-v9';
+
+import descriptionMd from './ButtonShimDescription.md';
+import bestPracticesMd from './ButtonShimBestPractices.md';
+
+export { Default } from './ButtonShimDefault.stories';
+
+export default {
+  title: 'Preview Components/ButtonShim',
+  component: ButtonShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDefault.stories.tsx
new file mode 100644
index 0000000000000..e43a503e071ab
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { CommandButtonShim, CommandButtonShimProps } from '@fluentui/react-button-shim-v8-v9';
+
+export const Default = (props: Partial<CommandButtonShimProps>) => <CommandButtonShim {...props} />;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/CommandButtonShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/index.stories.tsx
new file mode 100644
index 0000000000000..90bc13a7e83c8
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CommandButtonShim/index.stories.tsx
@@ -0,0 +1,18 @@
+import { CommandButtonShim } from '@fluentui/react-button-shim-v8-v9';
+
+import descriptionMd from './CommandButtonShimDescription.md';
+import bestPracticesMd from './CommandButtonShimBestPractices.md';
+
+export { Default } from './CommandButtonShimDefault.stories';
+
+export default {
+  title: 'Preview Components/CommandButtonShim',
+  component: CommandButtonShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDefault.stories.tsx
new file mode 100644
index 0000000000000..2fb83f86ac3f3
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { CompoundButtonShim, CompoundButtonShimProps } from '@fluentui/react-button-shim-v8-v9';
+
+export const Default = (props: Partial<CompoundButtonShimProps>) => <CompoundButtonShim {...props} />;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/CompoundButtonShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx
new file mode 100644
index 0000000000000..062c244bac5da
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/CompoundButtonShim/index.stories.tsx
@@ -0,0 +1,18 @@
+import { CompoundButtonShim } from '@fluentui/react-button-shim-v8-v9';
+
+import descriptionMd from './CompoundButtonShimDescription.md';
+import bestPracticesMd from './CompoundButtonShimBestPractices.md';
+
+export { Default } from './CompoundButtonShimDefault.stories';
+
+export default {
+  title: 'Preview Components/CompoundButtonShim',
+  component: CompoundButtonShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDefault.stories.tsx
new file mode 100644
index 0000000000000..222a5deb5906e
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DefaultButtonShim, DefaultButtonShimProps } from '@fluentui/react-button-shim-v8-v9';
+
+export const Default = (props: Partial<DefaultButtonShimProps>) => <DefaultButtonShim {...props} />;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/DefaultButtonShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/index.stories.tsx
new file mode 100644
index 0000000000000..d3377a5148699
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/DefaultButtonShim/index.stories.tsx
@@ -0,0 +1,18 @@
+import { DefaultButtonShim } from '@fluentui/react-button-shim-v8-v9';
+
+import descriptionMd from './DefaultButtonShimDescription.md';
+import bestPracticesMd from './DefaultButtonShimBestPractices.md';
+
+export { Default } from './DefaultButtonShimDefault.stories';
+
+export default {
+  title: 'Preview Components/DefaultButtonShim',
+  component: DefaultButtonShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDefault.stories.tsx
new file mode 100644
index 0000000000000..225ba7ac3c1df
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { MenuButtonShim, MenuButtonShimProps } from '@fluentui/react-button-shim-v8-v9';
+
+export const Default = (props: Partial<MenuButtonShimProps>) => <MenuButtonShim {...props} />;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/MenuButtonShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/index.stories.tsx
new file mode 100644
index 0000000000000..8739abe174069
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/MenuButtonShim/index.stories.tsx
@@ -0,0 +1,18 @@
+import { MenuButtonShim } from '@fluentui/react-button-shim-v8-v9';
+
+import descriptionMd from './MenuButtonShimDescription.md';
+import bestPracticesMd from './MenuButtonShimBestPractices.md';
+
+export { Default } from './MenuButtonShimDefault.stories';
+
+export default {
+  title: 'Preview Components/MenuButtonShim',
+  component: MenuButtonShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDefault.stories.tsx
new file mode 100644
index 0000000000000..97b23f86ae6e9
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { PrimaryButtonShim, PrimaryButtonShimProps } from '@fluentui/react-button-shim-v8-v9';
+
+export const Default = (props: Partial<PrimaryButtonShimProps>) => <PrimaryButtonShim {...props} />;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/PrimaryButtonShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx
new file mode 100644
index 0000000000000..5306f71f00ef0
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/PrimaryButtonShim/index.stories.tsx
@@ -0,0 +1,18 @@
+import { PrimaryButtonShim } from '@fluentui/react-button-shim-v8-v9';
+
+import descriptionMd from './PrimaryButtonShimDescription.md';
+import bestPracticesMd from './PrimaryButtonShimBestPractices.md';
+
+export { Default } from './PrimaryButtonShimDefault.stories';
+
+export default {
+  title: 'Preview Components/PrimaryButtonShim',
+  component: PrimaryButtonShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimBestPractices.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDefault.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDefault.stories.tsx
new file mode 100644
index 0000000000000..34371d8776b0d
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ToggleButtonShim, ToggleButtonShimProps } from '@fluentui/react-button-shim-v8-v9';
+
+export const Default = (props: Partial<ToggleButtonShimProps>) => <ToggleButtonShim {...props} />;
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDescription.md b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/ToggleButtonShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx
new file mode 100644
index 0000000000000..5a1d10e17173c
--- /dev/null
+++ b/packages/react-components-migration/react-button-shim-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx
@@ -0,0 +1,18 @@
+import { ToggleButtonShim } from '@fluentui/react-button-shim-v8-v9';
+
+import descriptionMd from './ToggleButtonShimDescription.md';
+import bestPracticesMd from './ToggleButtonShimBestPractices.md';
+
+export { Default } from './ToggleButtonShimDefault.stories';
+
+export default {
+  title: 'Preview Components/ToggleButtonShim',
+  component: ToggleButtonShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json
index 12ca516af1c5b..1941a041d46c1 100644
--- a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json
+++ b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json
@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ]
 }
diff --git a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json
index b2da24eff1b32..7f94e04299ed8 100644
--- a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json
+++ b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json
@@ -9,6 +9,14 @@
     "inlineSources": true,
     "types": ["static-assets", "environment"]
   },
-  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"],
+  "exclude": [
+    "./src/common/**",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/main.js b/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/main.js
new file mode 100644
index 0000000000000..f57cfd09509e7
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/main.js
@@ -0,0 +1,14 @@
+const rootMain = require('../../../../.storybook/main');
+
+module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+  ...rootMain,
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    // add your own webpack tweaks if needed
+
+    return localConfig;
+  },
+});
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/preview.js b/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/preview.js
new file mode 100644
index 0000000000000..1939500a3d18c
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/preview.js
@@ -0,0 +1,7 @@
+import * as rootPreview from '../../../../.storybook/preview';
+
+/** @type {typeof rootPreview.decorators} */
+export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/tsconfig.json b/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/tsconfig.json
new file mode 100644
index 0000000000000..f9f60e1234ed4
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/.storybook/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "",
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["static-assets", "environment", "storybook__addons"]
+  },
+  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+}
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json
index 637d9797ae3e6..a8c3d3240d101 100644
--- a/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json
@@ -5,5 +5,6 @@
     "enabled": true,
     "untrimmedFilePath": "",
     "publicTrimmedFilePath": "<projectFolder>/dist/index.d.ts"
-  }
+  },
+  "mainEntryPointFilePath": "<projectFolder>/../../../dist/out-tsc/types/packages/react-components-migration/<unscopedPackageName>/src/index.d.ts"
 }
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md b/packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md
index e69de29bb2d1d..f1303f8562568 100644
--- a/packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md
@@ -0,0 +1,33 @@
+## API Report File for "@fluentui/react-menu-shim-v8-v9"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { IContextualMenuItem } from '@fluentui/react';
+import { IContextualMenuProps } from '@fluentui/react';
+import { MenuGroupHeaderProps } from '@fluentui/react-menu';
+import { MenuItemCheckboxProps } from '@fluentui/react-menu';
+import { MenuItemProps } from '@fluentui/react-menu';
+import { MenuProps } from '@fluentui/react-menu';
+
+// @public (undocumented)
+export const MenuItemShim: (props: IContextualMenuItem) => JSX.Element;
+
+// @public (undocumented)
+export const shimMenuHeaderProps: (props: IContextualMenuItem) => MenuGroupHeaderProps;
+
+// @public (undocumented)
+export const shimMenuItemCheckboxProps: (props: IContextualMenuItem) => MenuItemCheckboxProps;
+
+// @public (undocumented)
+export const shimMenuItemProps: (props: IContextualMenuItem) => MenuItemProps;
+
+// @public (undocumented)
+export const shimMenuProps: (props: IContextualMenuProps) => Partial<MenuProps>;
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/package.json b/packages/react-components-migration/react-menu-shim-v8-v9/package.json
index 0aa2f950df492..b2efd064e964b 100644
--- a/packages/react-components-migration/react-menu-shim-v8-v9/package.json
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/package.json
@@ -20,7 +20,9 @@
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
     "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "storybook": "start-storybook",
+    "start": "yarn storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -29,6 +31,8 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@fluentui/react": "^8.97.1",
+    "@fluentui/react-menu": "^9.2.2",
     "@fluentui/react-theme": "^9.1.0",
     "@fluentui/react-utilities": "^9.1.0",
     "@griffel/react": "^1.3.0",
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/MenuShim.ts b/packages/react-components-migration/react-menu-shim-v8-v9/src/MenuShim.ts
new file mode 100644
index 0000000000000..18626226a9c14
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/src/MenuShim.ts
@@ -0,0 +1 @@
+export * from './components/MenuShim/index';
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/MenuShim.tsx b/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/MenuShim.tsx
new file mode 100644
index 0000000000000..8b1a10d4a55f4
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/MenuShim.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import { ContextualMenuItemType, IContextualMenuItem } from '@fluentui/react';
+import {
+  MenuItem,
+  MenuDivider,
+  MenuGroup,
+  MenuGroupHeader,
+  MenuTrigger,
+  Menu,
+  MenuList,
+  MenuPopover,
+  MenuItemCheckbox,
+  MenuDividerProps,
+} from '@fluentui/react-menu';
+
+import { shimMenuHeaderProps, shimMenuItemCheckboxProps, shimMenuItemProps, shimMenuProps } from '../../shimMenuProps';
+
+export const MenuItemShim = (props: IContextualMenuItem) => {
+  if (props.itemType === ContextualMenuItemType.Divider) {
+    const shimProps = shimMenuItemProps(props);
+    return <MenuDivider {...(shimProps as MenuDividerProps)} />;
+  }
+
+  if (props.itemType === ContextualMenuItemType.Section) {
+    const shimProps = shimMenuHeaderProps(props);
+    return (
+      <MenuGroup>
+        <MenuGroupHeader>{shimProps.children}</MenuGroupHeader>
+        {/* //TODO: sectionProps handling */}
+        {props.subMenuProps?.items.map(item => (
+          // key is added through item spread
+          // eslint-disable-next-line react/jsx-key
+          <MenuItemShim {...item} />
+        ))}
+      </MenuGroup>
+    );
+  }
+
+  if (props.canCheck) {
+    const shimProps = shimMenuItemCheckboxProps(props);
+    return <MenuItemCheckbox {...shimProps} />;
+  }
+
+  // Nested Menu to handle submenus
+  if (props.subMenuProps?.items && props.subMenuProps.items.length > 0) {
+    const shimmedMenuProps = shimMenuProps(props.subMenuProps);
+    const shimmedItemProps = shimMenuItemProps(props);
+
+    return (
+      <Menu {...shimmedMenuProps}>
+        <MenuTrigger>
+          <MenuItem {...shimmedItemProps} hasSubmenu />
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            {props.subMenuProps.items.map(item => (
+              // key is added through item spread
+              // eslint-disable-next-line react/jsx-key
+              <MenuItemShim {...item} />
+            ))}
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
+
+  const shimProps = shimMenuItemProps(props);
+  return <MenuItem {...shimProps} />;
+};
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/index.ts b/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/index.ts
new file mode 100644
index 0000000000000..d53169442c287
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/src/components/MenuShim/index.ts
@@ -0,0 +1 @@
+export * from './MenuShim';
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts
index aacbad0068e24..7ac8bd6db8237 100644
--- a/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts
@@ -1,2 +1,2 @@
-// TODO: replace with real exports
-export {};
+export { shimMenuProps, shimMenuHeaderProps, shimMenuItemProps, shimMenuItemCheckboxProps } from './shimMenuProps';
+export { MenuItemShim } from './MenuShim';
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/shimMenuProps.tsx b/packages/react-components-migration/react-menu-shim-v8-v9/src/shimMenuProps.tsx
new file mode 100644
index 0000000000000..65e858cf86679
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/src/shimMenuProps.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { IContextualMenuItem, IContextualMenuProps, Icon } from '@fluentui/react';
+import { MenuItemProps, MenuGroupHeaderProps, MenuItemCheckboxProps, MenuProps } from '@fluentui/react-menu';
+
+export const shimMenuProps = (props: IContextualMenuProps): Partial<MenuProps> => {
+  return {
+    hasIcons: props?.items.some(i => i.iconProps),
+    hasCheckmarks: props?.items.some(i => i.canCheck || i.checked),
+  };
+};
+
+export const shimMenuItemProps = (props: IContextualMenuItem): MenuItemProps => {
+  //TODO: Handle menuItem.onRenderIcon
+  const icon = props.iconProps ? <Icon {...props.iconProps} /> : undefined;
+
+  return {
+    ...props,
+    'aria-label': props.ariaLabel,
+    children: props.text,
+    icon,
+    secondaryContent: props.secondaryText,
+  } as MenuItemProps;
+};
+
+export const shimMenuItemCheckboxProps = (props: IContextualMenuItem): MenuItemCheckboxProps => {
+  return {
+    ...shimMenuItemProps(props),
+    name: props.text || 'name',
+    value: props.value || 'value',
+  };
+};
+
+export const shimMenuHeaderProps = (props: IContextualMenuItem): MenuGroupHeaderProps => {
+  return {
+    children: props.sectionProps?.title,
+  };
+};
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimBestPractices.md b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDefault.stories.tsx b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDefault.stories.tsx
new file mode 100644
index 0000000000000..0fe12092b3525
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { MenuShim, MenuShimProps } from '@fluentui/react-menu-shim-v8-v9';
+
+export const Default = (props: Partial<MenuShimProps>) => <MenuShim {...props} />;
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDescription.md b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/MenuShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/index.stories.tsx b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/index.stories.tsx
new file mode 100644
index 0000000000000..915316e1ed981
--- /dev/null
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/src/stories/MenuShimV8V9/index.stories.tsx
@@ -0,0 +1,18 @@
+import { MenuItemShim } from '@fluentui/react-menu-shim-v8-v9';
+
+import descriptionMd from './MenuShimDescription.md';
+import bestPracticesMd from './MenuShimBestPractices.md';
+
+export { Default } from './MenuShimDefault.stories';
+
+export default {
+  title: 'Preview Components/MenuShim',
+  component: MenuItemShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json
index 12ca516af1c5b..1941a041d46c1 100644
--- a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json
@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ]
 }
diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json
index b2da24eff1b32..7f94e04299ed8 100644
--- a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json
+++ b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json
@@ -9,6 +9,14 @@
     "inlineSources": true,
     "types": ["static-assets", "environment"]
   },
-  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"],
+  "exclude": [
+    "./src/common/**",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/main.js b/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/main.js
new file mode 100644
index 0000000000000..f57cfd09509e7
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/main.js
@@ -0,0 +1,14 @@
+const rootMain = require('../../../../.storybook/main');
+
+module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+  ...rootMain,
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    // add your own webpack tweaks if needed
+
+    return localConfig;
+  },
+});
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/preview.js b/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/preview.js
new file mode 100644
index 0000000000000..1939500a3d18c
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/preview.js
@@ -0,0 +1,7 @@
+import * as rootPreview from '../../../../.storybook/preview';
+
+/** @type {typeof rootPreview.decorators} */
+export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/tsconfig.json b/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/tsconfig.json
new file mode 100644
index 0000000000000..f9f60e1234ed4
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/.storybook/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "",
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["static-assets", "environment", "storybook__addons"]
+  },
+  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+}
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json
index 637d9797ae3e6..a8c3d3240d101 100644
--- a/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json
@@ -5,5 +5,6 @@
     "enabled": true,
     "untrimmedFilePath": "",
     "publicTrimmedFilePath": "<projectFolder>/dist/index.d.ts"
-  }
+  },
+  "mainEntryPointFilePath": "<projectFolder>/../../../dist/out-tsc/types/packages/react-components-migration/<unscopedPackageName>/src/index.d.ts"
 }
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md b/packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md
index e69de29bb2d1d..2df44368be848 100644
--- a/packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md
@@ -0,0 +1,18 @@
+## API Report File for "@fluentui/react-stack-shim-v8-v9"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { IStackItemProps } from '@fluentui/react';
+import { IStackProps } from '@fluentui/react';
+
+// @public (undocumented)
+export const StackItemShim: (props: IStackItemProps) => JSX.Element;
+
+// @public (undocumented)
+export const StackShim: (props: IStackProps) => JSX.Element;
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/package.json b/packages/react-components-migration/react-stack-shim-v8-v9/package.json
index 576a75e919247..0515021be98ab 100644
--- a/packages/react-components-migration/react-stack-shim-v8-v9/package.json
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/package.json
@@ -20,7 +20,9 @@
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
     "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "storybook": "start-storybook",
+    "start": "yarn storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -29,6 +31,7 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@fluentui/react": "^8.97.1",
     "@fluentui/react-theme": "^9.1.0",
     "@fluentui/react-utilities": "^9.1.0",
     "@griffel/react": "^1.3.0",
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/StackItemShim.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/StackItemShim.ts
new file mode 100644
index 0000000000000..5ebc5a448623f
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/StackItemShim.ts
@@ -0,0 +1 @@
+export * from './components/StackItemShim/index';
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/StackShim.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/StackShim.ts
new file mode 100644
index 0000000000000..163fe82b7113b
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/StackShim.ts
@@ -0,0 +1 @@
+export * from './components/StackShim/index';
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.test.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.test.tsx
new file mode 100644
index 0000000000000..e7810a62589f8
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { StackItemShim } from './StackItemShim';
+
+describe('StackItemShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<StackItemShim>Default StackItemShim</StackItemShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.tsx
new file mode 100644
index 0000000000000..b2d683d26dbcb
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/StackItemShim.tsx
@@ -0,0 +1,161 @@
+import * as React from 'react';
+
+import { IStackItemProps } from '@fluentui/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
+
+const stackItemClassNames = {
+  root: 'ms-StackItem',
+};
+
+const useStackItemShimStyles = makeStyles({
+  root: {
+    height: 'auto',
+    width: 'auto',
+  },
+  disableShrink: {
+    flexShrink: 0,
+  },
+  verticalFill: {
+    height: '100%',
+  },
+});
+
+const useFlexAlignSelfStyles = makeStyles({
+  auto: {
+    alignSelf: 'auto',
+  },
+  baseline: {
+    alignSelf: 'baseline',
+  },
+  center: {
+    alignSelf: 'center',
+  },
+  start: {
+    alignSelf: 'flex-start',
+  },
+  end: {
+    alignSelf: 'flex-end',
+  },
+  stretch: {
+    alignSelf: 'stretch',
+  },
+});
+
+const useFlexGrowStyles = makeStyles({
+  inherit: {
+    flexGrow: 'inherit',
+  },
+  initial: {
+    flexGrow: 'initial',
+  },
+  revert: {
+    flexGrow: 'revert',
+  },
+  unset: {
+    flexGrow: 'unset',
+  },
+  '1': {
+    flexGrow: 1,
+  },
+  '2': {
+    flexGrow: 2,
+  },
+  '3': {
+    flexGrow: 3,
+  },
+});
+
+const useFlexShrinkStyles = makeStyles({
+  inherit: {
+    flexShrink: 'inherit',
+  },
+  initial: {
+    flexShrink: 'initial',
+  },
+  revert: {
+    flexShrink: 'revert',
+  },
+  unset: {
+    flexShrink: 'unset',
+  },
+  0: {
+    flexShrink: 0,
+  },
+  1: {
+    flexShrink: 1,
+  },
+  2: {
+    flexShrink: 2,
+  },
+});
+
+const useFlexOrderStyles = makeStyles({
+  inherit: {
+    order: 'inherit',
+  },
+  initial: {
+    order: 'initial',
+  },
+  unset: {
+    order: 'unset',
+  },
+  revert: {
+    order: 'revert',
+  },
+  '-3': {
+    order: -3,
+  },
+  '-2': {
+    order: -2,
+  },
+  '-1': {
+    order: -1,
+  },
+  '0': {
+    order: 0,
+  },
+  '1': {
+    order: 1,
+  },
+  '2': {
+    order: 2,
+  },
+  '3': {
+    order: 3,
+  },
+});
+
+export const StackItemShim = (props: IStackItemProps) => {
+  const { grow, shrink, disableShrink, align, verticalFill, order, className, children } = props;
+
+  const styles = useStackItemShimStyles();
+  const alignSelfStyles = useFlexAlignSelfStyles();
+  const shrinkFlexStyles = useFlexShrinkStyles();
+  const growFlexStyles: Record<string, string> = useFlexGrowStyles();
+  const orderFlexStyles: Record<string, string> = useFlexOrderStyles();
+
+  const stackItemStyles = [styles.root, align && alignSelfStyles[align], verticalFill && styles.verticalFill];
+
+  if (order) {
+    stackItemStyles.push(orderFlexStyles[order]);
+  }
+
+  if (grow) {
+    const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];
+    stackItemStyles.push(flexGrow);
+  }
+
+  if (shrink && !disableShrink) {
+    stackItemStyles.push(shrinkFlexStyles[1]);
+  } else if (disableShrink || (!grow && !shrink)) {
+    stackItemStyles.push(shrinkFlexStyles[0]);
+  }
+
+  if (disableShrink) {
+    stackItemStyles.push(styles.disableShrink);
+  }
+
+  const rootStyles = mergeClasses(stackItemClassNames.root, ...stackItemStyles, className);
+
+  return <div className={rootStyles}>{children}</div>;
+};
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/__snapshots__/StackItemShim.test.tsx.snap b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/__snapshots__/StackItemShim.test.tsx.snap
new file mode 100644
index 0000000000000..f0495e263a67c
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/__snapshots__/StackItemShim.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StackItemShim renders a default state 1`] = `
+<div>
+  <div
+    class="ms-StackItem"
+  >
+    Default StackItemShim
+  </div>
+</div>
+`;
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/index.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/index.ts
new file mode 100644
index 0000000000000..96dee3d2cedf0
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackItemShim/index.ts
@@ -0,0 +1 @@
+export * from './StackItemShim';
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.test.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.test.tsx
new file mode 100644
index 0000000000000..79710387d455a
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.test.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { StackShim } from './StackShim';
+describe('StackShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<StackShim>Default StackShim</StackShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.tsx
new file mode 100644
index 0000000000000..47cb86bdb7a75
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/StackShim.tsx
@@ -0,0 +1,303 @@
+import * as React from 'react';
+
+import { IStackProps, IStackTokens, classNamesFunction, IStackItemProps } from '@fluentui/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { getChildrenGapStyles, StackShimStyles } from '../../stackUtils';
+
+const stackClassNames = {
+  root: 'ms-Stack',
+  inner: 'ms-Stack-inner',
+};
+
+const getClassNames = classNamesFunction<IStackProps, StackShimStyles>();
+
+const useStackStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'nowrap',
+    width: 'auto',
+    height: 'auto',
+    boxSizing: 'border-box',
+    '> *': {
+      textOverflow: 'ellipsis',
+    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    '> *:not(.ms-StackItem)': {
+      flexShrink: 1,
+    },
+  },
+  horizontal: {
+    flexDirection: 'row',
+  },
+  verticalFill: {
+    height: '100%',
+  },
+  reversedVertical: {
+    flexDirection: 'column-reverse',
+  },
+  reversedHorizontal: {
+    flexDirection: 'row-reverse',
+  },
+  disableShrink: {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    '> *:not(.ms-StackItem)': {
+      flexShrink: 0,
+    },
+  },
+  wrap: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    height: '100%',
+  },
+  inner: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    boxSizing: 'border-box',
+    maxWidth: '100vw',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    '> *:not(.ms-StackItem)': {
+      flexShrink: 1,
+    },
+  },
+  innerWidth: {
+    width: '100%',
+  },
+});
+
+const useFlexGrowStyles = makeStyles({
+  inherit: {
+    flexGrow: 'inherit',
+  },
+  initial: {
+    flexGrow: 'initial',
+  },
+  revert: {
+    flexGrow: 'revert',
+  },
+  unset: {
+    flexGrow: 'unset',
+  },
+  '1': {
+    flexGrow: 1,
+  },
+  '2': {
+    flexGrow: 2,
+  },
+  '3': {
+    flexGrow: 3,
+  },
+});
+
+const useFlexAlignItemsStyles = makeStyles({
+  baseline: {
+    alignItems: 'baseline',
+  },
+  center: {
+    alignItems: 'center',
+  },
+  start: {
+    alignItems: 'flex-start',
+  },
+  end: {
+    alignItems: 'flex-end',
+  },
+  stretch: {
+    alignItems: 'stretch',
+  },
+  'space-between': {
+    alignItems: 'space-between',
+  },
+
+  'space-around': {
+    alignItems: 'space-around',
+  },
+  'space-evenly': {
+    alignItems: 'space-evenly',
+  },
+});
+
+const useFlexJustifyContentStyles = makeStyles({
+  baseline: {
+    justifyContent: 'baseline',
+  },
+  center: {
+    justifyContent: 'center',
+  },
+  start: {
+    justifyContent: 'flex-start',
+  },
+  end: {
+    justifyContent: 'flex-end',
+  },
+  stretch: {
+    justifyContent: 'stretch',
+  },
+  'space-between': {
+    justifyContent: 'space-between',
+  },
+
+  'space-around': {
+    justifyContent: 'space-around',
+  },
+  'space-evenly': {
+    justifyContent: 'space-evenly',
+  },
+});
+
+export const StackShim = (props: IStackProps) => {
+  const styles = useStackStyles();
+  const alignItemsFlexStyles = useFlexAlignItemsStyles();
+  const justifyContentFlexStyles = useFlexJustifyContentStyles();
+  const growFlexStyles: Record<string, string> = useFlexGrowStyles();
+
+  const {
+    as: RootType = 'div',
+    verticalFill,
+    horizontal,
+    reversed,
+    grow,
+    wrap,
+    horizontalAlign,
+    verticalAlign,
+    disableShrink,
+    className,
+  } = props;
+
+  const tokens: IStackTokens = { ...props.tokens };
+
+  let tokensRootStyles = {};
+  let tokensInnerStyles = {};
+  let childrenGapClassName;
+
+  if (tokens) {
+    tokensRootStyles = {
+      padding: !wrap ? tokens.padding : undefined,
+      maxHeight: tokens.maxHeight,
+      maxWidth: tokens.maxWidth,
+    };
+
+    tokensInnerStyles = {
+      padding: wrap ? tokens.padding : undefined,
+    };
+
+    if (tokens.childrenGap) {
+      childrenGapClassName = getClassNames(getChildrenGapStyles, {
+        horizontal,
+        reversed,
+        tokens,
+      });
+    }
+  }
+
+  const stackStyles = [
+    wrap ? styles.wrap : styles.root,
+    horizontal && styles.horizontal,
+    verticalFill && styles.verticalFill,
+  ];
+
+  const stackInnerStyles = [
+    styles.inner,
+    horizontal && styles.horizontal,
+    (!tokens || !tokens.childrenGap) && styles.innerWidth,
+  ];
+
+  let stackChildren = React.Children.toArray(props.children);
+  if (
+    stackChildren.length === 1 &&
+    React.isValidElement(stackChildren[0]) &&
+    stackChildren[0].type === React.Fragment
+  ) {
+    stackChildren = stackChildren[0].props.children;
+  }
+
+  stackChildren = React.Children.map(
+    stackChildren as React.ReactElement[],
+    (child: React.ReactElement<IStackItemProps>) => {
+      if (!child) {
+        return null;
+      }
+
+      if (child.type && ((child as React.ReactElement).type as React.ComponentType).name === 'StackItemShim') {
+        const defaultItemProps: IStackItemProps = {
+          shrink: !disableShrink,
+        };
+
+        return React.cloneElement(child, {
+          ...defaultItemProps,
+          ...child.props,
+        });
+      }
+
+      return child;
+    },
+  );
+
+  if (reversed) {
+    if (horizontal) {
+      stackStyles.push(styles.reversedHorizontal);
+      stackInnerStyles.push(styles.reversedHorizontal);
+    } else {
+      stackStyles.push(styles.reversedVertical);
+      stackInnerStyles.push(styles.reversedVertical);
+    }
+  }
+
+  if (grow) {
+    const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];
+    stackStyles.push(flexGrow);
+  }
+
+  if (disableShrink) {
+    stackStyles.push(styles.disableShrink);
+  }
+
+  if (horizontalAlign) {
+    if (horizontal) {
+      stackStyles.push(justifyContentFlexStyles[horizontalAlign]);
+      stackInnerStyles.push(justifyContentFlexStyles[horizontalAlign]);
+    } else {
+      stackStyles.push(alignItemsFlexStyles[horizontalAlign]);
+      stackInnerStyles.push(alignItemsFlexStyles[horizontalAlign]);
+    }
+  }
+
+  if (verticalAlign) {
+    if (horizontal) {
+      stackStyles.push(alignItemsFlexStyles[verticalAlign]);
+      stackInnerStyles.push(alignItemsFlexStyles[verticalAlign]);
+    } else {
+      stackStyles.push(justifyContentFlexStyles[verticalAlign]);
+      stackInnerStyles.push(justifyContentFlexStyles[verticalAlign]);
+    }
+  }
+
+  const rootClass = mergeClasses(
+    stackClassNames.root,
+    ...stackStyles,
+    childrenGapClassName && !wrap && childrenGapClassName.root,
+    className,
+  );
+
+  const innerClass = mergeClasses(
+    stackClassNames.inner,
+    ...stackInnerStyles,
+    childrenGapClassName && wrap && childrenGapClassName.inner,
+  );
+
+  return wrap ? (
+    <RootType className={rootClass} style={tokensRootStyles}>
+      <div className={innerClass} style={tokensInnerStyles}>
+        {stackChildren}
+      </div>
+    </RootType>
+  ) : (
+    <RootType className={rootClass} style={tokensRootStyles}>
+      {stackChildren}
+    </RootType>
+  );
+};
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/__snapshots__/StackShim.test.tsx.snap b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/__snapshots__/StackShim.test.tsx.snap
new file mode 100644
index 0000000000000..bf07bdd819b17
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/__snapshots__/StackShim.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StackShim renders a default state 1`] = `
+<div>
+  <div
+    class="ms-Stack"
+  >
+    Default StackShim
+  </div>
+</div>
+`;
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/index.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/index.ts
new file mode 100644
index 0000000000000..5a5c5463f6142
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/components/StackShim/index.ts
@@ -0,0 +1 @@
+export * from './StackShim';
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts
index aacbad0068e24..2794abed91b7a 100644
--- a/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts
@@ -1,2 +1,2 @@
-// TODO: replace with real exports
-export {};
+export { StackShim } from './StackShim';
+export { StackItemShim } from './StackItemShim';
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stackUtils.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/stackUtils.ts
new file mode 100644
index 0000000000000..ccdcdad5ac6ef
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/stackUtils.ts
@@ -0,0 +1,185 @@
+import { getTheme, IStackProps, IStackTokens, IStyle, ITheme } from '@fluentui/react';
+
+// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
+const getThemedSpacing = (space: string, theme: ITheme): string => {
+  if (theme.spacing.hasOwnProperty(space)) {
+    return theme.spacing[space as keyof typeof theme.spacing];
+  }
+  return space;
+};
+
+// Helper function that takes a gap as a string and converts it into a { value, unit } representation.
+const getValueUnitGap = (gap: string): { value: number; unit: string } => {
+  const numericalPart = parseFloat(gap);
+  const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
+  const numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();
+
+  const unitPart = gap.substring(numericalString.toString().length);
+
+  return {
+    value: numericalValue,
+    unit: unitPart || 'px',
+  };
+};
+
+/**
+ * Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
+ *  or a key of a themed spacing value (e.g. "s1").
+ * Returns the separate numerical value of the padding (e.g. 10)
+ *  and the CSS unit (e.g. "px").
+ */
+export const parseGap = (
+  gap: IStackProps['gap'],
+  theme: ITheme,
+): { rowGap: { value: number; unit: string }; columnGap: { value: number; unit: string } } => {
+  if (gap === undefined || gap === '') {
+    return {
+      rowGap: {
+        value: 0,
+        unit: 'px',
+      },
+      columnGap: {
+        value: 0,
+        unit: 'px',
+      },
+    };
+  }
+
+  if (typeof gap === 'number') {
+    return {
+      rowGap: {
+        value: gap,
+        unit: 'px',
+      },
+      columnGap: {
+        value: gap,
+        unit: 'px',
+      },
+    };
+  }
+
+  const splitGap = gap.split(' ');
+
+  // If the array has more than two values, then return 0px.
+  if (splitGap.length > 2) {
+    return {
+      rowGap: {
+        value: 0,
+        unit: 'px',
+      },
+      columnGap: {
+        value: 0,
+        unit: 'px',
+      },
+    };
+  }
+
+  // If the array has two values, then parse each one.
+  if (splitGap.length === 2) {
+    return {
+      rowGap: getValueUnitGap(getThemedSpacing(splitGap[0], theme)),
+      columnGap: getValueUnitGap(getThemedSpacing(splitGap[1], theme)),
+    };
+  }
+
+  // Else, parse the numerical value and pass it as both the vertical and horizontal gap.
+  const calculatedGap = getValueUnitGap(getThemedSpacing(gap, theme));
+
+  return {
+    rowGap: calculatedGap,
+    columnGap: calculatedGap,
+  };
+};
+
+/**
+ * Takes in a padding in a CSS-style format (e.g. 10, "10px", "10px 10px", etc.)
+ *  where the separate padding values can also be the key of a themed spacing value
+ *  (e.g. "s1 m", "10px l1 20px l2", etc.).
+ * Returns a CSS-style padding.
+ */
+export const parsePadding = (padding: number | string | undefined, theme: ITheme): number | string | undefined => {
+  if (padding === undefined || typeof padding === 'number' || padding === '') {
+    return padding;
+  }
+
+  const paddingValues = padding.split(' ');
+  if (paddingValues.length < 2) {
+    return getThemedSpacing(padding, theme);
+  }
+
+  return paddingValues.reduce((padding1: string, padding2: string) => {
+    return getThemedSpacing(padding1, theme) + ' ' + getThemedSpacing(padding2, theme);
+  });
+};
+
+export interface StackShimStyles {
+  root?: IStyle;
+  inner?: IStyle;
+}
+/**
+ *
+ * getStyles function for Stack.tokens.childrenGap prop styling
+ */
+export const getChildrenGapStyles = (props: IStackProps): StackShimStyles => {
+  const theme = getTheme();
+
+  const { horizontal, reversed } = props;
+  const tokens: IStackTokens = { ...props.tokens };
+
+  const { rowGap, columnGap } = parseGap(tokens.childrenGap, theme);
+  const horizontalMargin = `${-0.5 * columnGap.value}${columnGap.unit}`;
+  const verticalMargin = `${-0.5 * rowGap.value}${rowGap.unit}`;
+
+  return {
+    root: [
+      reversed &&
+        horizontal && {
+          '> *:not(:last-child)': {
+            marginLeft: `${columnGap.value}${columnGap.unit}`,
+          },
+        },
+      reversed &&
+        !horizontal && {
+          '> *:not(:last-child)': {
+            marginTop: `${rowGap.value}${rowGap.unit}`,
+          },
+        },
+      !reversed &&
+        horizontal && {
+          '> *:not(:first-child)': {
+            marginLeft: `${columnGap.value}${columnGap.unit}`,
+          },
+        },
+      !reversed &&
+        !horizontal && {
+          '> *:not(:first-child)': {
+            marginTop: `${rowGap.value}${rowGap.unit}`,
+          },
+        },
+    ],
+    inner: [
+      {
+        marginLeft: horizontalMargin,
+        marginRight: horizontalMargin,
+        marginTop: verticalMargin,
+        marginBottom: verticalMargin,
+        width: columnGap.value === 0 ? '100%' : `calc(100% + ${columnGap.value}${columnGap.unit})`,
+        '> *': {
+          margin: `${0.5 * rowGap.value}${rowGap.unit} ${0.5 * columnGap.value}${columnGap.unit}`,
+        },
+      },
+      horizontal && {
+        height: rowGap.value === 0 ? '100%' : `calc(100% + ${rowGap.value}${rowGap.unit})`,
+        '> *': {
+          maxWidth: columnGap.value === 0 ? '100%' : `calc(100% - ${columnGap.value}${columnGap.unit})`,
+        },
+      },
+      !horizontal && {
+        height: `calc(100% + ${rowGap.value}${rowGap.unit})`,
+        '> *': {
+          maxHeight: rowGap.value === 0 ? '100%' : `calc(100% - ${rowGap.value}${rowGap.unit})`,
+        },
+      },
+    ],
+  };
+};
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimBestPractices.md b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDefault.stories.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDefault.stories.tsx
new file mode 100644
index 0000000000000..a40bf8bc0f919
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { StackItemShim, StackItemShimProps } from '@fluentui/react-stack-shim-v8-v9';
+
+export const Default = (props: Partial<StackItemShimProps>) => <StackItemShim {...props} />;
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDescription.md b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/StackItemShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/index.stories.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/index.stories.tsx
new file mode 100644
index 0000000000000..fb22e9f5e3ecb
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackItemShim/index.stories.tsx
@@ -0,0 +1,18 @@
+import { StackItemShim } from '@fluentui/react-stack-shim-v8-v9';
+
+import descriptionMd from './StackItemShimDescription.md';
+import bestPracticesMd from './StackItemShimBestPractices.md';
+
+export { Default } from './StackItemShimDefault.stories';
+
+export default {
+  title: 'Preview Components/StackItemShim',
+  component: StackItemShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimBestPractices.md b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDefault.stories.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDefault.stories.tsx
new file mode 100644
index 0000000000000..8f5bb71a3cb98
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { StackShim, StackShimProps } from '@fluentui/react-stack-shim-v8-v9';
+
+export const Default = (props: Partial<StackShimProps>) => <StackShim {...props} />;
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDescription.md b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/StackShimDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/index.stories.tsx b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/index.stories.tsx
new file mode 100644
index 0000000000000..52ef2bd558586
--- /dev/null
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/stories/StackShimV8V9/index.stories.tsx
@@ -0,0 +1,18 @@
+import { StackShim } from '@fluentui/react-stack-shim-v8-v9';
+
+import descriptionMd from './StackShimDescription.md';
+import bestPracticesMd from './StackShimBestPractices.md';
+
+export { Default } from './StackShimDefault.stories';
+
+export default {
+  title: 'Preview Components/StackShim',
+  component: StackShim,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json
index 12ca516af1c5b..1941a041d46c1 100644
--- a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json
@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ]
 }
diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json
index b2da24eff1b32..7f94e04299ed8 100644
--- a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json
+++ b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json
@@ -9,6 +9,14 @@
     "inlineSources": true,
     "types": ["static-assets", "environment"]
   },
-  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"],
+  "exclude": [
+    "./src/common/**",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/main.js b/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/main.js
new file mode 100644
index 0000000000000..f57cfd09509e7
--- /dev/null
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/main.js
@@ -0,0 +1,14 @@
+const rootMain = require('../../../../.storybook/main');
+
+module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+  ...rootMain,
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    // add your own webpack tweaks if needed
+
+    return localConfig;
+  },
+});
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/preview.js b/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/preview.js
new file mode 100644
index 0000000000000..1939500a3d18c
--- /dev/null
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/preview.js
@@ -0,0 +1,7 @@
+import * as rootPreview from '../../../../.storybook/preview';
+
+/** @type {typeof rootPreview.decorators} */
+export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/tsconfig.json b/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/tsconfig.json
new file mode 100644
index 0000000000000..f9f60e1234ed4
--- /dev/null
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/.storybook/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "",
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["static-assets", "environment", "storybook__addons"]
+  },
+  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+}
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json
index 637d9797ae3e6..a8c3d3240d101 100644
--- a/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json
@@ -5,5 +5,6 @@
     "enabled": true,
     "untrimmedFilePath": "",
     "publicTrimmedFilePath": "<projectFolder>/dist/index.d.ts"
-  }
+  },
+  "mainEntryPointFilePath": "<projectFolder>/../../../dist/out-tsc/types/packages/react-components-migration/<unscopedPackageName>/src/index.d.ts"
 }
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md b/packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md
index e69de29bb2d1d..a5fab9af46400 100644
--- a/packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md
@@ -0,0 +1,158 @@
+## API Report File for "@fluentui/react-theme-shim-v8-v9"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { BrandVariants } from '@fluentui/react-theme';
+import { IPalette } from '@fluentui/react';
+import { Theme } from '@fluentui/react-theme';
+import { Theme as Theme_2 } from '@fluentui/react';
+import { Theme as Theme_3 } from '@fluentui/react-components';
+
+// @public (undocumented)
+export type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
+
+// @public (undocumented)
+export const black = "#000000";
+
+// @public (undocumented)
+export const blackAlpha: Record<AlphaColors, string>;
+
+// @public (undocumented)
+export const brandWeb: BrandVariants;
+
+// @public
+export type ColorVariants = {
+    shade50: string;
+    shade40: string;
+    shade30: string;
+    shade20: string;
+    shade10: string;
+    primary: string;
+    tint10: string;
+    tint20: string;
+    tint30: string;
+    tint40: string;
+    tint50: string;
+    tint60: string;
+};
+
+// @public
+export const createBrandVariants: (palette: IPalette, interpolation?: Interpolation) => BrandVariants;
+
+// @public
+export const createv8Theme: (brandColors: BrandVariants, themeV9: Theme, isDarkTheme?: boolean, themeV8?: Theme_2 | undefined) => Theme_2;
+
+// @public
+export const createv9Theme: (themeV8: Theme_2, baseThemeV9?: Theme_3 | undefined) => Theme_3;
+
+// @public
+export type GlobalSharedColors = {
+    darkRed: ColorVariants;
+    burgundy: ColorVariants;
+    cranberry: ColorVariants;
+    red: ColorVariants;
+    darkOrange: ColorVariants;
+    bronze: ColorVariants;
+    pumpkin: ColorVariants;
+    orange: ColorVariants;
+    peach: ColorVariants;
+    marigold: ColorVariants;
+    yellow: ColorVariants;
+    gold: ColorVariants;
+    brass: ColorVariants;
+    brown: ColorVariants;
+    darkBrown: ColorVariants;
+    lime: ColorVariants;
+    forest: ColorVariants;
+    seafoam: ColorVariants;
+    lightGreen: ColorVariants;
+    green: ColorVariants;
+    darkGreen: ColorVariants;
+    lightTeal: ColorVariants;
+    teal: ColorVariants;
+    darkTeal: ColorVariants;
+    cyan: ColorVariants;
+    steel: ColorVariants;
+    lightBlue: ColorVariants;
+    blue: ColorVariants;
+    royalBlue: ColorVariants;
+    darkBlue: ColorVariants;
+    cornflower: ColorVariants;
+    navy: ColorVariants;
+    lavender: ColorVariants;
+    purple: ColorVariants;
+    darkPurple: ColorVariants;
+    orchid: ColorVariants;
+    grape: ColorVariants;
+    berry: ColorVariants;
+    lilac: ColorVariants;
+    pink: ColorVariants;
+    hotPink: ColorVariants;
+    magenta: ColorVariants;
+    plum: ColorVariants;
+    beige: ColorVariants;
+    mink: ColorVariants;
+    silver: ColorVariants;
+    platinum: ColorVariants;
+    anchor: ColorVariants;
+    charcoal: ColorVariants;
+};
+
+// @public (undocumented)
+export const grey: Record<Greys, string>;
+
+// @public (undocumented)
+export const grey14Alpha: Record<AlphaColors, string>;
+
+// @public (undocumented)
+export type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100;
+
+// @public (undocumented)
+export const hcButtonFace = "#ffffff";
+
+// @public (undocumented)
+export const hcButtonText = "#000000";
+
+// @public (undocumented)
+export const hcCanvas = "#000000";
+
+// @public (undocumented)
+export const hcCanvasText = "#ffffff";
+
+// @public (undocumented)
+export const hcDisabled = "#3ff23f";
+
+// @public (undocumented)
+export const hcHighlight = "#1aebff";
+
+// @public (undocumented)
+export const hcHighlightText = "#000000";
+
+// @public (undocumented)
+export const hcHyperlink = "#ffff00";
+
+// @public (undocumented)
+export const sharedColors: GlobalSharedColors;
+
+// @public (undocumented)
+export type TextAlignment = 'inherit' | 'initial' | 'revert' | 'unset' | 'center' | 'end' | 'start' | 'justify' | 'left' | 'match-parent' | 'right';
+
+// @public (undocumented)
+export type TextAlignments = {
+    start: TextAlignment;
+    center: TextAlignment;
+    end: TextAlignment;
+    justify: TextAlignment;
+};
+
+// @public (undocumented)
+export const white = "#ffffff";
+
+// @public (undocumented)
+export const whiteAlpha: Record<AlphaColors, string>;
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/package.json b/packages/react-components-migration/react-theme-shim-v8-v9/package.json
index 9e5d0f3cf87cf..0ff21f00b9c83 100644
--- a/packages/react-components-migration/react-theme-shim-v8-v9/package.json
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/package.json
@@ -20,7 +20,9 @@
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
     "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "storybook": "start-storybook",
+    "start": "yarn storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -29,6 +31,9 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@ctrl/tinycolor": "3.3.4",
+    "@fluentui/react": "^8.97.1",
+    "@fluentui/react-components": "^9.4.0",
     "@fluentui/react-theme": "^9.1.0",
     "@fluentui/react-utilities": "^9.1.0",
     "@griffel/react": "^1.3.0",
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts
index aacbad0068e24..e8b9a4c0f30bb 100644
--- a/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts
@@ -1,2 +1,30 @@
-// TODO: replace with real exports
-export {};
+export { createv8Theme } from './v8ThemeShim';
+export { createv9Theme } from './v9ThemeShim';
+export { createBrandVariants } from './v9BrandVariantsShim';
+export {
+  black,
+  blackAlpha,
+  brandWeb,
+  grey,
+  grey14Alpha,
+  hcButtonFace,
+  hcButtonText,
+  hcCanvas,
+  hcCanvasText,
+  hcDisabled,
+  hcHighlight,
+  hcHighlightText,
+  hcHyperlink,
+  sharedColors,
+  white,
+  whiteAlpha,
+} from './themeDuplicates';
+
+export type {
+  AlphaColors,
+  ColorVariants,
+  GlobalSharedColors,
+  Greys,
+  TextAlignment,
+  TextAlignments,
+} from './themeDuplicates';
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/themeDuplicates.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/themeDuplicates.ts
new file mode 100644
index 0000000000000..c42e73c24d0b0
--- /dev/null
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/src/themeDuplicates.ts
@@ -0,0 +1,1073 @@
+/**
+ * These colors have been copied here from react-theme because they are not exported from that package.
+ * They are necessary to build the theme shims.
+ */
+
+import { BrandVariants } from '@fluentui/react-theme';
+
+/**
+ * Possible color variant values
+ */
+export type ColorVariants = {
+  shade50: string;
+  shade40: string;
+  shade30: string;
+  shade20: string;
+  shade10: string;
+  primary: string;
+  tint10: string;
+  tint20: string;
+  tint30: string;
+  tint40: string;
+  tint50: string;
+  tint60: string;
+};
+
+/**
+ * All the global shared colors and their shade/tint variants
+ */
+export type GlobalSharedColors = {
+  darkRed: ColorVariants;
+  burgundy: ColorVariants;
+  cranberry: ColorVariants;
+  red: ColorVariants;
+  darkOrange: ColorVariants;
+  bronze: ColorVariants;
+  pumpkin: ColorVariants;
+  orange: ColorVariants;
+  peach: ColorVariants;
+  marigold: ColorVariants;
+  yellow: ColorVariants;
+  gold: ColorVariants;
+  brass: ColorVariants;
+  brown: ColorVariants;
+  darkBrown: ColorVariants;
+  lime: ColorVariants;
+  forest: ColorVariants;
+  seafoam: ColorVariants;
+  lightGreen: ColorVariants;
+  green: ColorVariants;
+  darkGreen: ColorVariants;
+  lightTeal: ColorVariants;
+  teal: ColorVariants;
+  darkTeal: ColorVariants;
+  cyan: ColorVariants;
+  steel: ColorVariants;
+  lightBlue: ColorVariants;
+  blue: ColorVariants;
+  royalBlue: ColorVariants;
+  darkBlue: ColorVariants;
+  cornflower: ColorVariants;
+  navy: ColorVariants;
+  lavender: ColorVariants;
+  purple: ColorVariants;
+  darkPurple: ColorVariants;
+  orchid: ColorVariants;
+  grape: ColorVariants;
+  berry: ColorVariants;
+  lilac: ColorVariants;
+  pink: ColorVariants;
+  hotPink: ColorVariants;
+  magenta: ColorVariants;
+  plum: ColorVariants;
+  beige: ColorVariants;
+  mink: ColorVariants;
+  silver: ColorVariants;
+  platinum: ColorVariants;
+  anchor: ColorVariants;
+  charcoal: ColorVariants;
+};
+
+export type TextAlignment =
+  | 'inherit'
+  | 'initial'
+  | 'revert'
+  | 'unset'
+  | 'center'
+  | 'end'
+  | 'start'
+  | 'justify'
+  | 'left'
+  | 'match-parent'
+  | 'right';
+
+export type TextAlignments = {
+  start: TextAlignment;
+  center: TextAlignment;
+  end: TextAlignment;
+  justify: TextAlignment;
+};
+
+export type Greys =
+  | 0
+  | 2
+  | 4
+  | 6
+  | 8
+  | 10
+  | 12
+  | 14
+  | 16
+  | 18
+  | 20
+  | 22
+  | 24
+  | 26
+  | 28
+  | 30
+  | 32
+  | 34
+  | 36
+  | 38
+  | 40
+  | 42
+  | 44
+  | 46
+  | 48
+  | 50
+  | 52
+  | 54
+  | 56
+  | 58
+  | 60
+  | 62
+  | 64
+  | 66
+  | 68
+  | 70
+  | 72
+  | 74
+  | 76
+  | 78
+  | 80
+  | 82
+  | 84
+  | 86
+  | 88
+  | 90
+  | 92
+  | 94
+  | 96
+  | 98
+  | 100;
+
+export type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
+
+export const grey: Record<Greys, string> = {
+  '0': '#000000',
+  '2': '#050505',
+  '4': '#0a0a0a',
+  '6': '#0f0f0f',
+  '8': '#141414',
+  '10': '#1a1a1a',
+  '12': '#1f1f1f',
+  '14': '#242424',
+  '16': '#292929',
+  '18': '#2e2e2e',
+  '20': '#333333',
+  '22': '#383838',
+  '24': '#3d3d3d',
+  '26': '#424242',
+  '28': '#474747',
+  '30': '#4d4d4d',
+  '32': '#525252',
+  '34': '#575757',
+  '36': '#5c5c5c',
+  '38': '#616161',
+  '40': '#666666',
+  '42': '#6b6b6b',
+  '44': '#707070',
+  '46': '#757575',
+  '48': '#7a7a7a',
+  '50': '#808080',
+  '52': '#858585',
+  '54': '#8a8a8a',
+  '56': '#8f8f8f',
+  '58': '#949494',
+  '60': '#999999',
+  '62': '#9e9e9e',
+  '64': '#a3a3a3',
+  '66': '#a8a8a8',
+  '68': '#adadad',
+  '70': '#b3b3b3',
+  '72': '#b8b8b8',
+  '74': '#bdbdbd',
+  '76': '#c2c2c2',
+  '78': '#c7c7c7',
+  '80': '#cccccc',
+  '82': '#d1d1d1',
+  '84': '#d6d6d6',
+  '86': '#dbdbdb',
+  '88': '#e0e0e0',
+  '90': '#e6e6e6',
+  '92': '#ebebeb',
+  '94': '#f0f0f0',
+  '96': '#f5f5f5',
+  '98': '#fafafa',
+  '100': '#ffffff',
+};
+
+export const whiteAlpha: Record<AlphaColors, string> = {
+  '5': 'rgba(255, 255, 255, 0.05)',
+  '10': 'rgba(255, 255, 255, 0.1)',
+  '20': 'rgba(255, 255, 255, 0.2)',
+  '30': 'rgba(255, 255, 255, 0.3)',
+  '40': 'rgba(255, 255, 255, 0.4)',
+  '50': 'rgba(255, 255, 255, 0.5)',
+  '60': 'rgba(255, 255, 255, 0.6)',
+  '70': 'rgba(255, 255, 255, 0.7)',
+  '80': 'rgba(255, 255, 255, 0.8)',
+  '90': 'rgba(255, 255, 255, 0.9)',
+};
+
+export const blackAlpha: Record<AlphaColors, string> = {
+  '5': 'rgba(0, 0, 0, 0.05)',
+  '10': 'rgba(0, 0, 0, 0.1)',
+  '20': 'rgba(0, 0, 0, 0.2)',
+  '30': 'rgba(0, 0, 0, 0.3)',
+  '40': 'rgba(0, 0, 0, 0.4)',
+  '50': 'rgba(0, 0, 0, 0.5)',
+  '60': 'rgba(0, 0, 0, 0.6)',
+  '70': 'rgba(0, 0, 0, 0.7)',
+  '80': 'rgba(0, 0, 0, 0.8)',
+  '90': 'rgba(0, 0, 0, 0.9)',
+};
+
+export const grey14Alpha: Record<AlphaColors, string> = {
+  '5': 'rgba(36, 36, 36, 0.05)',
+  '10': 'rgba(36, 36, 36, 0.1)',
+  '20': 'rgba(36, 36, 36, 0.2)',
+  '30': 'rgba(36, 36, 36, 0.3)',
+  '40': 'rgba(36, 36, 36, 0.4)',
+  '50': 'rgba(36, 36, 36, 0.5)',
+  '60': 'rgba(36, 36, 36, 0.6)',
+  '70': 'rgba(36, 36, 36, 0.7)',
+  '80': 'rgba(36, 36, 36, 0.8)',
+  '90': 'rgba(36, 36, 36, 0.9)',
+};
+
+export const white = '#ffffff';
+
+export const black = '#000000';
+
+export const hcHyperlink = '#ffff00';
+
+export const hcHighlight = '#1aebff';
+
+export const hcDisabled = '#3ff23f';
+
+export const hcCanvas = '#000000';
+
+export const hcCanvasText = '#ffffff';
+
+export const hcHighlightText = '#000000';
+
+export const hcButtonText = '#000000';
+
+export const hcButtonFace = '#ffffff';
+
+const darkRed: ColorVariants = {
+  shade50: '#130204',
+  shade40: '#230308',
+  shade30: '#420610',
+  shade20: '#590815',
+  shade10: '#690a19',
+  primary: '#750b1c',
+  tint10: '#861b2c',
+  tint20: '#962f3f',
+  tint30: '#ac4f5e',
+  tint40: '#d69ca5',
+  tint50: '#e9c7cd',
+  tint60: '#f9f0f2',
+};
+
+const burgundy: ColorVariants = {
+  shade50: '#1a0607',
+  shade40: '#310b0d',
+  shade30: '#5c1519',
+  shade20: '#7d1d21',
+  shade10: '#942228',
+  primary: '#a4262c',
+  tint10: '#af393e',
+  tint20: '#ba4d52',
+  tint30: '#c86c70',
+  tint40: '#e4afb2',
+  tint50: '#f0d3d4',
+  tint60: '#fbf4f4',
+};
+
+const cranberry: ColorVariants = {
+  shade50: '#200205',
+  shade40: '#3b0509',
+  shade30: '#6e0811',
+  shade20: '#960b18',
+  shade10: '#b10e1c',
+  primary: '#c50f1f',
+  tint10: '#cc2635',
+  tint20: '#d33f4c',
+  tint30: '#dc626d',
+  tint40: '#eeacb2',
+  tint50: '#f6d1d5',
+  tint60: '#fdf3f4',
+};
+
+const red: ColorVariants = {
+  shade50: '#210809',
+  shade40: '#3f1011',
+  shade30: '#751d1f',
+  shade20: '#9f282b',
+  shade10: '#bc2f32',
+  primary: '#d13438',
+  tint10: '#d7494c',
+  tint20: '#dc5e62',
+  tint30: '#e37d80',
+  tint40: '#f1bbbc',
+  tint50: '#f8dadb',
+  tint60: '#fdf6f6',
+};
+
+const darkOrange: ColorVariants = {
+  shade50: '#230900',
+  shade40: '#411200',
+  shade30: '#7a2101',
+  shade20: '#a62d01',
+  shade10: '#c43501',
+  primary: '#da3b01',
+  tint10: '#de501c',
+  tint20: '#e36537',
+  tint30: '#e9835e',
+  tint40: '#f4bfab',
+  tint50: '#f9dcd1',
+  tint60: '#fdf6f3',
+};
+
+const bronze: ColorVariants = {
+  shade50: '#1b0a01',
+  shade40: '#321303',
+  shade30: '#5e2405',
+  shade20: '#7f3107',
+  shade10: '#963a08',
+  primary: '#a74109',
+  tint10: '#b2521e',
+  tint20: '#bc6535',
+  tint30: '#ca8057',
+  tint40: '#e5bba4',
+  tint50: '#f1d9cc',
+  tint60: '#fbf5f2',
+};
+
+const pumpkin: ColorVariants = {
+  shade50: '#200d03',
+  shade40: '#3d1805',
+  shade30: '#712d09',
+  shade20: '#9a3d0c',
+  shade10: '#b6480e',
+  primary: '#ca5010',
+  tint10: '#d06228',
+  tint20: '#d77440',
+  tint30: '#df8e64',
+  tint40: '#efc4ad',
+  tint50: '#f7dfd2',
+  tint60: '#fdf7f4',
+};
+
+const orange: ColorVariants = {
+  shade50: '#271002',
+  shade40: '#4a1e04',
+  shade30: '#8a3707',
+  shade20: '#bc4b09',
+  shade10: '#de590b',
+  primary: '#f7630c',
+  tint10: '#f87528',
+  tint20: '#f98845',
+  tint30: '#faa06b',
+  tint40: '#fdcfb4',
+  tint50: '#fee5d7',
+  tint60: '#fff9f5',
+};
+
+const peach: ColorVariants = {
+  shade50: '#291600',
+  shade40: '#4d2a00',
+  shade30: '#8f4e00',
+  shade20: '#c26a00',
+  shade10: '#e67e00',
+  primary: '#ff8c00',
+  tint10: '#ff9a1f',
+  tint20: '#ffa83d',
+  tint30: '#ffba66',
+  tint40: '#ffddb3',
+  tint50: '#ffedd6',
+  tint60: '#fffaf5',
+};
+
+const marigold: ColorVariants = {
+  shade50: '#251a00',
+  shade40: '#463100',
+  shade30: '#835b00',
+  shade20: '#b27c00',
+  shade10: '#d39300',
+  primary: '#eaa300',
+  tint10: '#edad1c',
+  tint20: '#efb839',
+  tint30: '#f2c661',
+  tint40: '#f9e2ae',
+  tint50: '#fcefd3',
+  tint60: '#fefbf4',
+};
+
+const yellow: ColorVariants = {
+  primary: '#fde300',
+  shade10: '#e4cc00',
+  shade20: '#c0ad00',
+  shade30: '#817400',
+  shade40: '#4c4400',
+  shade50: '#282400',
+  tint10: '#fde61e',
+  tint20: '#fdea3d',
+  tint30: '#feee66',
+  tint40: '#fef7b2',
+  tint50: '#fffad6',
+  tint60: '#fffef5',
+};
+
+const gold: ColorVariants = {
+  shade50: '#1f1900',
+  shade40: '#3a2f00',
+  shade30: '#6c5700',
+  shade20: '#937700',
+  shade10: '#ae8c00',
+  primary: '#c19c00',
+  tint10: '#c8a718',
+  tint20: '#d0b232',
+  tint30: '#dac157',
+  tint40: '#ecdfa5',
+  tint50: '#f5eece',
+  tint60: '#fdfbf2',
+};
+
+const brass: ColorVariants = {
+  shade50: '#181202',
+  shade40: '#2e2103',
+  shade30: '#553e06',
+  shade20: '#745408',
+  shade10: '#89640a',
+  primary: '#986f0b',
+  tint10: '#a47d1e',
+  tint20: '#b18c34',
+  tint30: '#c1a256',
+  tint40: '#e0cea2',
+  tint50: '#efe4cb',
+  tint60: '#fbf8f2',
+};
+
+const brown: ColorVariants = {
+  shade50: '#170e07',
+  shade40: '#2b1a0e',
+  shade30: '#50301a',
+  shade20: '#6c4123',
+  shade10: '#804d29',
+  primary: '#8e562e',
+  tint10: '#9c663f',
+  tint20: '#a97652',
+  tint30: '#bb8f6f',
+  tint40: '#ddc3b0',
+  tint50: '#edded3',
+  tint60: '#faf7f4',
+};
+
+const darkBrown: ColorVariants = {
+  shade50: '#0c0704',
+  shade40: '#170c08',
+  shade30: '#2b1710',
+  shade20: '#3a1f15',
+  shade10: '#452519',
+  primary: '#4d291c',
+  tint10: '#623a2b',
+  tint20: '#784d3e',
+  tint30: '#946b5c',
+  tint40: '#caada3',
+  tint50: '#e3d2cb',
+  tint60: '#f8f3f2',
+};
+
+const lime: ColorVariants = {
+  shade50: '#121b06',
+  shade40: '#23330b',
+  shade30: '#405f14',
+  shade20: '#57811b',
+  shade10: '#689920',
+  primary: '#73aa24',
+  tint10: '#81b437',
+  tint20: '#90be4c',
+  tint30: '#a4cc6c',
+  tint40: '#cfe5af',
+  tint50: '#e5f1d3',
+  tint60: '#f8fcf4',
+};
+
+const forest: ColorVariants = {
+  shade50: '#0c1501',
+  shade40: '#162702',
+  shade30: '#294903',
+  shade20: '#376304',
+  shade10: '#427505',
+  primary: '#498205',
+  tint10: '#599116',
+  tint20: '#6ba02b',
+  tint30: '#85b44c',
+  tint40: '#bdd99b',
+  tint50: '#dbebc7',
+  tint60: '#f6faf0',
+};
+
+const seafoam: ColorVariants = {
+  shade50: '#002111',
+  shade40: '#003d20',
+  shade30: '#00723b',
+  shade20: '#009b51',
+  shade10: '#00b85f',
+  primary: '#00cc6a',
+  tint10: '#19d279',
+  tint20: '#34d889',
+  tint30: '#5ae0a0',
+  tint40: '#a8f0cd',
+  tint50: '#cff7e4',
+  tint60: '#f3fdf8',
+};
+
+const lightGreen: ColorVariants = {
+  shade50: '#031a02',
+  shade40: '#063004',
+  shade30: '#0b5a08',
+  shade20: '#0e7a0b',
+  shade10: '#11910d',
+  primary: '#13a10e',
+  tint10: '#27ac22',
+  tint20: '#3db838',
+  tint30: '#5ec75a',
+  tint40: '#a7e3a5',
+  tint50: '#cef0cd',
+  tint60: '#f2fbf2',
+};
+
+const green: ColorVariants = {
+  shade50: '#031403',
+  shade40: '#052505',
+  shade30: '#094509',
+  shade20: '#0c5e0c',
+  shade10: '#0e700e',
+  primary: '#107c10',
+  tint10: '#218c21',
+  tint20: '#359b35',
+  tint30: '#54b054',
+  tint40: '#9fd89f',
+  tint50: '#c9eac9',
+  tint60: '#f1faf1',
+};
+
+const darkGreen: ColorVariants = {
+  shade50: '#021102',
+  shade40: '#032003',
+  shade30: '#063b06',
+  shade20: '#085108',
+  shade10: '#0a5f0a',
+  primary: '#0b6a0b',
+  tint10: '#1a7c1a',
+  tint20: '#2d8e2d',
+  tint30: '#4da64d',
+  tint40: '#9ad29a',
+  tint50: '#c6e7c6',
+  tint60: '#f0f9f0',
+};
+
+const lightTeal: ColorVariants = {
+  shade50: '#001d1f',
+  shade40: '#00373a',
+  shade30: '#00666d',
+  shade20: '#008b94',
+  shade10: '#00a5af',
+  primary: '#00b7c3',
+  tint10: '#18bfca',
+  tint20: '#32c8d1',
+  tint30: '#58d3db',
+  tint40: '#a6e9ed',
+  tint50: '#cef3f5',
+  tint60: '#f2fcfd',
+};
+
+const teal: ColorVariants = {
+  shade50: '#001516',
+  shade40: '#012728',
+  shade30: '#02494c',
+  shade20: '#026467',
+  shade10: '#037679',
+  primary: '#038387',
+  tint10: '#159195',
+  tint20: '#2aa0a4',
+  tint30: '#4cb4b7',
+  tint40: '#9bd9db',
+  tint50: '#c7ebec',
+  tint60: '#f0fafa',
+};
+
+const darkTeal: ColorVariants = {
+  shade50: '#001010',
+  shade40: '#001f1f',
+  shade30: '#003939',
+  shade20: '#004e4e',
+  shade10: '#005c5c',
+  primary: '#006666',
+  tint10: '#0e7878',
+  tint20: '#218b8b',
+  tint30: '#41a3a3',
+  tint40: '#92d1d1',
+  tint50: '#c2e7e7',
+  tint60: '#eff9f9',
+};
+
+const cyan: ColorVariants = {
+  shade50: '#00181e',
+  shade40: '#002e38',
+  shade30: '#005669',
+  shade20: '#00748f',
+  shade10: '#008aa9',
+  primary: '#0099bc',
+  tint10: '#18a4c4',
+  tint20: '#31afcc',
+  tint30: '#56bfd7',
+  tint40: '#a4deeb',
+  tint50: '#cdedf4',
+  tint60: '#f2fafc',
+};
+
+const steel: ColorVariants = {
+  shade50: '#000f12',
+  shade40: '#001b22',
+  shade30: '#00333f',
+  shade20: '#004555',
+  shade10: '#005265',
+  primary: '#005b70',
+  tint10: '#0f6c81',
+  tint20: '#237d92',
+  tint30: '#4496a9',
+  tint40: '#94c8d4',
+  tint50: '#c3e1e8',
+  tint60: '#eff7f9',
+};
+
+const lightBlue: ColorVariants = {
+  shade50: '#091823',
+  shade40: '#112d42',
+  shade30: '#20547c',
+  shade20: '#2c72a8',
+  shade10: '#3487c7',
+  primary: '#3a96dd',
+  tint10: '#4fa1e1',
+  tint20: '#65ade5',
+  tint30: '#83bdeb',
+  tint40: '#bfddf5',
+  tint50: '#dcedfa',
+  tint60: '#f6fafe',
+};
+
+const blue: ColorVariants = {
+  shade50: '#001322',
+  shade40: '#002440',
+  shade30: '#004377',
+  shade20: '#005ba1',
+  shade10: '#006cbf',
+  primary: '#0078d4',
+  tint10: '#1a86d9',
+  tint20: '#3595de',
+  tint30: '#5caae5',
+  tint40: '#a9d3f2',
+  tint50: '#d0e7f8',
+  tint60: '#f3f9fd',
+};
+
+const royalBlue: ColorVariants = {
+  shade50: '#000c16',
+  shade40: '#00172a',
+  shade30: '#002c4e',
+  shade20: '#003b6a',
+  shade10: '#00467e',
+  primary: '#004e8c',
+  tint10: '#125e9a',
+  tint20: '#286fa8',
+  tint30: '#4a89ba',
+  tint40: '#9abfdc',
+  tint50: '#c7dced',
+  tint60: '#f0f6fa',
+};
+
+const darkBlue: ColorVariants = {
+  shade50: '#000910',
+  shade40: '#00111f',
+  shade30: '#002039',
+  shade20: '#002b4e',
+  shade10: '#00335c',
+  primary: '#003966',
+  tint10: '#0e4a78',
+  tint20: '#215c8b',
+  tint30: '#4178a3',
+  tint40: '#92b5d1',
+  tint50: '#c2d6e7',
+  tint60: '#eff4f9',
+};
+
+const cornflower: ColorVariants = {
+  shade50: '#0d1126',
+  shade40: '#182047',
+  shade30: '#2c3c85',
+  shade20: '#3c51b4',
+  shade10: '#4760d5',
+  primary: '#4f6bed',
+  tint10: '#637cef',
+  tint20: '#778df1',
+  tint30: '#93a4f4',
+  tint40: '#c8d1fa',
+  tint50: '#e1e6fc',
+  tint60: '#f7f9fe',
+};
+
+const navy: ColorVariants = {
+  shade50: '#00061d',
+  shade40: '#000c36',
+  shade30: '#001665',
+  shade20: '#001e89',
+  shade10: '#0023a2',
+  primary: '#0027b4',
+  tint10: '#173bbd',
+  tint20: '#3050c6',
+  tint30: '#546fd2',
+  tint40: '#a3b2e8',
+  tint50: '#ccd5f3',
+  tint60: '#f2f4fc',
+};
+
+const lavender: ColorVariants = {
+  shade50: '#120f25',
+  shade40: '#221d46',
+  shade30: '#3f3682',
+  shade20: '#5649b0',
+  shade10: '#6656d1',
+  primary: '#7160e8',
+  tint10: '#8172eb',
+  tint20: '#9184ee',
+  tint30: '#a79cf1',
+  tint40: '#d2ccf8',
+  tint50: '#e7e4fb',
+  tint60: '#f9f8fe',
+};
+
+const purple: ColorVariants = {
+  shade50: '#0f0717',
+  shade40: '#1c0e2b',
+  shade30: '#341a51',
+  shade20: '#46236e',
+  shade10: '#532982',
+  primary: '#5c2e91',
+  tint10: '#6b3f9e',
+  tint20: '#7c52ab',
+  tint30: '#9470bd',
+  tint40: '#c6b1de',
+  tint50: '#e0d3ed',
+  tint60: '#f7f4fb',
+};
+
+const darkPurple: ColorVariants = {
+  shade50: '#0a0411',
+  shade40: '#130820',
+  shade30: '#240f3c',
+  shade20: '#311552',
+  shade10: '#3a1861',
+  primary: '#401b6c',
+  tint10: '#512b7e',
+  tint20: '#633e8f',
+  tint30: '#7e5ca7',
+  tint40: '#b9a3d3',
+  tint50: '#d8cce7',
+  tint60: '#f5f2f9',
+};
+
+const orchid: ColorVariants = {
+  shade50: '#16101d',
+  shade40: '#281e37',
+  shade30: '#4c3867',
+  shade20: '#674c8c',
+  shade10: '#795aa6',
+  primary: '#8764b8',
+  tint10: '#9373c0',
+  tint20: '#a083c9',
+  tint30: '#b29ad4',
+  tint40: '#d7caea',
+  tint50: '#e9e2f4',
+  tint60: '#f9f8fc',
+};
+
+const grape: ColorVariants = {
+  shade50: '#160418',
+  shade40: '#29072e',
+  shade30: '#4c0d55',
+  shade20: '#671174',
+  shade10: '#7a1589',
+  primary: '#881798',
+  tint10: '#952aa4',
+  tint20: '#a33fb1',
+  tint30: '#b55fc1',
+  tint40: '#d9a7e0',
+  tint50: '#eaceef',
+  tint60: '#faf2fb',
+};
+
+const berry: ColorVariants = {
+  shade50: '#1f091d',
+  shade40: '#3a1136',
+  shade30: '#6d2064',
+  shade20: '#932b88',
+  shade10: '#af33a1',
+  primary: '#c239b3',
+  tint10: '#c94cbc',
+  tint20: '#d161c4',
+  tint30: '#da7ed0',
+  tint40: '#edbbe7',
+  tint50: '#f5daf2',
+  tint60: '#fdf5fc',
+};
+
+const lilac: ColorVariants = {
+  shade50: '#1c0b1f',
+  shade40: '#35153a',
+  shade30: '#63276d',
+  shade20: '#863593',
+  shade10: '#9f3faf',
+  primary: '#b146c2',
+  tint10: '#ba58c9',
+  tint20: '#c36bd1',
+  tint30: '#cf87da',
+  tint40: '#e6bfed',
+  tint50: '#f2dcf5',
+  tint60: '#fcf6fd',
+};
+
+const pink: ColorVariants = {
+  shade50: '#24091b',
+  shade40: '#441232',
+  shade30: '#80215d',
+  shade20: '#ad2d7e',
+  shade10: '#cd3595',
+  primary: '#e43ba6',
+  tint10: '#e750b0',
+  tint20: '#ea66ba',
+  tint30: '#ef85c8',
+  tint40: '#f7c0e3',
+  tint50: '#fbddf0',
+  tint60: '#fef6fb',
+};
+
+const hotPink: ColorVariants = {
+  shade50: '#240016',
+  shade40: '#44002a',
+  shade30: '#7f004e',
+  shade20: '#ad006a',
+  shade10: '#cc007e',
+  primary: '#e3008c',
+  tint10: '#e61c99',
+  tint20: '#ea38a6',
+  tint30: '#ee5fb7',
+  tint40: '#f7adda',
+  tint50: '#fbd2eb',
+  tint60: '#fef4fa',
+};
+
+const magenta: ColorVariants = {
+  shade50: '#1f0013',
+  shade40: '#390024',
+  shade30: '#6b0043',
+  shade20: '#91005a',
+  shade10: '#ac006b',
+  primary: '#bf0077',
+  tint10: '#c71885',
+  tint20: '#ce3293',
+  tint30: '#d957a8',
+  tint40: '#eca5d1',
+  tint50: '#f5cee6',
+  tint60: '#fcf2f9',
+};
+
+const plum: ColorVariants = {
+  shade50: '#13000c',
+  shade40: '#240017',
+  shade30: '#43002b',
+  shade20: '#5a003b',
+  shade10: '#6b0045',
+  primary: '#77004d',
+  tint10: '#87105d',
+  tint20: '#98246f',
+  tint30: '#ad4589',
+  tint40: '#d696c0',
+  tint50: '#e9c4dc',
+  tint60: '#faf0f6',
+};
+
+const beige: ColorVariants = {
+  shade50: '#141313',
+  shade40: '#252323',
+  shade30: '#444241',
+  shade20: '#5d5958',
+  shade10: '#6e6968',
+  primary: '#7a7574',
+  tint10: '#8a8584',
+  tint20: '#9a9594',
+  tint30: '#afabaa',
+  tint40: '#d7d4d4',
+  tint50: '#eae8e8',
+  tint60: '#faf9f9',
+};
+
+const mink: ColorVariants = {
+  shade50: '#0f0e0e',
+  shade40: '#1c1b1a',
+  shade30: '#343231',
+  shade20: '#474443',
+  shade10: '#54514f',
+  primary: '#5d5a58',
+  tint10: '#706d6b',
+  tint20: '#84817e',
+  tint30: '#9e9b99',
+  tint40: '#cecccb',
+  tint50: '#e5e4e3',
+  tint60: '#f8f8f8',
+};
+
+const silver: ColorVariants = {
+  shade50: '#151818',
+  shade40: '#282d2e',
+  shade30: '#4a5356',
+  shade20: '#657174',
+  shade10: '#78868a',
+  primary: '#859599',
+  tint10: '#92a1a5',
+  tint20: '#a0aeb1',
+  tint30: '#b3bfc2',
+  tint40: '#d8dfe0',
+  tint50: '#eaeeef',
+  tint60: '#fafbfb',
+};
+
+const platinum: ColorVariants = {
+  shade50: '#111314',
+  shade40: '#1f2426',
+  shade30: '#3b4447',
+  shade20: '#505c60',
+  shade10: '#5f6d71',
+  primary: '#69797e',
+  tint10: '#79898d',
+  tint20: '#89989d',
+  tint30: '#a0adb2',
+  tint40: '#cdd6d8',
+  tint50: '#e4e9ea',
+  tint60: '#f8f9fa',
+};
+
+const anchor: ColorVariants = {
+  shade50: '#090a0b',
+  shade40: '#111315',
+  shade30: '#202427',
+  shade20: '#2b3135',
+  shade10: '#333a3f',
+  primary: '#394146',
+  tint10: '#4d565c',
+  tint20: '#626c72',
+  tint30: '#808a90',
+  tint40: '#bcc3c7',
+  tint50: '#dbdfe1',
+  tint60: '#f6f7f8',
+};
+
+const charcoal: ColorVariants = {
+  shade50: '#090909',
+  shade40: '#111111',
+  shade30: '#202020',
+  shade20: '#2b2b2b',
+  shade10: '#333333',
+  primary: '#393939',
+  tint10: '#515151',
+  tint20: '#686868',
+  tint30: '#888888',
+  tint40: '#c4c4c4',
+  tint50: '#dfdfdf',
+  tint60: '#f7f7f7',
+};
+
+export const sharedColors: GlobalSharedColors = {
+  darkRed,
+  burgundy,
+  cranberry,
+  red,
+  darkOrange,
+  bronze,
+  pumpkin,
+  orange,
+  peach,
+  marigold,
+  yellow,
+  gold,
+  brass,
+  brown,
+  darkBrown,
+  lime,
+  forest,
+  seafoam,
+  lightGreen,
+  green,
+  darkGreen,
+  lightTeal,
+  teal,
+  darkTeal,
+  cyan,
+  steel,
+  lightBlue,
+  blue,
+  royalBlue,
+  darkBlue,
+  cornflower,
+  navy,
+  lavender,
+  purple,
+  darkPurple,
+  orchid,
+  grape,
+  berry,
+  lilac,
+  pink,
+  hotPink,
+  magenta,
+  plum,
+  beige,
+  mink,
+  silver,
+  platinum,
+  anchor,
+  charcoal,
+};
+
+export const brandWeb: BrandVariants = {
+  10: `#061724`,
+  20: `#082338`,
+  30: `#0a2e4a`,
+  40: `#0c3b5e`,
+  50: `#0e4775`,
+  60: `#0f548c`,
+  70: `#115ea3`,
+  80: `#0f6cbd`,
+  90: `#2886de`,
+  100: `#479ef5`,
+  110: `#62abf5`,
+  120: `#77b7f7`,
+  130: `#96c6fa`,
+  140: `#b4d6fa`,
+  150: `#cfe4fa`,
+  160: `#ebf3fc`,
+};
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/v8ThemeShim.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/v8ThemeShim.ts
new file mode 100644
index 0000000000000..a03f9d8780b33
--- /dev/null
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/src/v8ThemeShim.ts
@@ -0,0 +1,346 @@
+import {
+  createTheme,
+  DefaultPalette,
+  IPalette,
+  Theme as ThemeV8,
+  ISemanticColors,
+  IFontStyles,
+  IFontWeight,
+  IEffects,
+} from '@fluentui/react';
+
+import { BrandVariants, Theme as ThemeV9 } from '@fluentui/react-theme';
+
+import { black, blackAlpha, grey, sharedColors, white, whiteAlpha } from './themeDuplicates';
+
+const mappedNeutrals = {
+  black: black,
+  blackTranslucent40: blackAlpha[40],
+  neutralDark: grey[8],
+  neutralPrimary: grey[14],
+  neutralPrimaryAlt: grey[22],
+  neutralSecondary: grey[36],
+  neutralSecondaryAlt: grey[52],
+  neutralTertiary: grey[62],
+  neutralTertiaryAlt: grey[78],
+  neutralQuaternary: grey[82],
+  neutralQuaternaryAlt: grey[88],
+  neutralLight: grey[92],
+  neutralLighter: grey[96],
+  neutralLighterAlt: grey[98],
+  white: white,
+  whiteTranslucent40: whiteAlpha[40],
+};
+
+const invertedMappedNeutrals = {
+  black: white,
+  blackTranslucent40: whiteAlpha[40],
+  neutralDark: grey[98],
+  neutralPrimary: grey[96],
+  neutralPrimaryAlt: grey[84],
+  neutralSecondary: grey[82],
+  neutralSecondaryAlt: grey[74],
+  neutralTertiary: grey[44],
+  neutralTertiaryAlt: grey[26],
+  neutralQuaternary: grey[24],
+  neutralQuaternaryAlt: grey[18],
+  neutralLight: grey[16],
+  neutralLighter: grey[14],
+  neutralLighterAlt: grey[10],
+  white: black,
+  whiteTranslucent40: blackAlpha[40],
+};
+
+const mappedSharedColors = {
+  yellowDark: sharedColors.marigold.shade10,
+  yellow: sharedColors.yellow.primary,
+  yellowLight: sharedColors.yellow.tint40,
+  orange: sharedColors.orange.primary,
+  orangeLight: sharedColors.orange.tint20,
+  orangeLighter: sharedColors.orange.tint40,
+  redDark: sharedColors.darkRed.primary,
+  red: sharedColors.red.primary,
+  magentaDark: sharedColors.magenta.shade30,
+  magenta: sharedColors.magenta.primary,
+  magentaLight: sharedColors.magenta.tint30,
+  purpleDark: sharedColors.darkPurple.primary,
+  purple: sharedColors.purple.primary,
+  purpleLight: sharedColors.purple.tint40,
+  blueDark: sharedColors.darkBlue.primary,
+  blueMid: sharedColors.royalBlue.primary,
+  blue: sharedColors.blue.primary,
+  blueLight: sharedColors.lightBlue.primary,
+  tealDark: sharedColors.darkTeal.primary,
+  teal: sharedColors.teal.primary,
+  tealLight: sharedColors.lightTeal.primary,
+  greenDark: sharedColors.darkGreen.primary,
+  green: sharedColors.green.primary,
+  greenLight: sharedColors.lightGreen.primary,
+};
+
+/**
+ * Creates a v8 palette given a brand ramp
+ */
+const mapPalette = (brandColors: BrandVariants, inverted: boolean): IPalette => {
+  const neutrals = inverted ? invertedMappedNeutrals : mappedNeutrals;
+  const brands = inverted
+    ? {
+        themeDarker: brandColors[110],
+        themeDark: brandColors[100],
+        themeDarkAlt: brandColors[100],
+        themePrimary: brandColors[90],
+        themeSecondary: brandColors[90],
+        themeTertiary: brandColors[60],
+        themeLight: brandColors[50],
+        themeLighter: brandColors[40],
+        themeLighterAlt: brandColors[30],
+      }
+    : {
+        themeDarker: brandColors[40],
+        themeDark: brandColors[60],
+        themeDarkAlt: brandColors[70],
+        themePrimary: brandColors[80],
+        themeSecondary: brandColors[90],
+        themeTertiary: brandColors[120],
+        themeLight: brandColors[140],
+        themeLighter: brandColors[150],
+        themeLighterAlt: brandColors[160],
+      };
+
+  return {
+    ...DefaultPalette,
+    ...neutrals,
+    accent: brands.themePrimary,
+    ...mappedSharedColors,
+    ...brands,
+  };
+};
+
+/**
+ * Returns v9 theme colors overlaid on a base set of v8 semantic colors
+ */
+const mapSemanticColors = (baseColors: ISemanticColors, theme: ThemeV9): ISemanticColors => {
+  return {
+    ...baseColors,
+    accentButtonBackground: theme.colorBrandBackground,
+    accentButtonText: theme.colorNeutralForegroundOnBrand,
+    actionLink: theme.colorNeutralForeground1,
+    actionLinkHovered: theme.colorNeutralForeground1Hover,
+    // blockingBackground,
+    // blockingIcon,
+    bodyBackground: theme.colorNeutralBackground1,
+    bodyBackgroundChecked: theme.colorNeutralBackground1Selected,
+    bodyBackgroundHovered: theme.colorNeutralBackground1Hover,
+    bodyDivider: theme.colorNeutralStroke2,
+    bodyFrameBackground: theme.colorNeutralBackground1,
+    bodyFrameDivider: theme.colorNeutralStroke2,
+    bodyStandoutBackground: theme.colorNeutralBackground2,
+    bodySubtext: theme.colorNeutralForeground2,
+    bodyText: theme.colorNeutralForeground1,
+    bodyTextChecked: theme.colorNeutralForeground1Selected,
+    buttonBackground: theme.colorNeutralBackground1,
+    buttonBackgroundChecked: theme.colorNeutralBackground1Selected,
+    buttonBackgroundCheckedHovered: theme.colorNeutralBackground1Hover,
+    buttonBackgroundDisabled: theme.colorNeutralBackgroundDisabled,
+    buttonBackgroundHovered: theme.colorNeutralBackground1Hover,
+    buttonBackgroundPressed: theme.colorNeutralBackground1Pressed,
+    buttonBorder: theme.colorNeutralStroke1,
+    buttonBorderDisabled: theme.colorNeutralStrokeDisabled,
+    buttonText: theme.colorNeutralForeground1,
+    buttonTextChecked: theme.colorNeutralForeground1,
+    buttonTextCheckedHovered: theme.colorNeutralForeground1,
+    buttonTextDisabled: theme.colorNeutralForegroundDisabled,
+    buttonTextHovered: theme.colorNeutralForeground1,
+    buttonTextPressed: theme.colorNeutralForeground1,
+    cardShadow: theme.shadow4,
+    cardShadowHovered: theme.shadow8,
+    cardStandoutBackground: theme.colorNeutralBackground1,
+    defaultStateBackground: theme.colorNeutralBackground2,
+    disabledBackground: theme.colorNeutralBackgroundDisabled,
+    disabledBodySubtext: theme.colorNeutralForegroundDisabled,
+    disabledBodyText: theme.colorNeutralForegroundDisabled,
+    disabledBorder: theme.colorNeutralStrokeDisabled,
+    disabledSubtext: theme.colorNeutralForegroundDisabled,
+    disabledText: theme.colorNeutralForegroundDisabled,
+    // errorBackground,
+    // errorIcon,
+    // errorText: ,
+    focusBorder: theme.colorStrokeFocus2,
+    // infoBackground,
+    // infoIcon,
+    inputBackground: theme.colorNeutralBackground1,
+    inputBackgroundChecked: theme.colorBrandBackground,
+    inputBackgroundCheckedHovered: theme.colorBrandBackgroundHover,
+    inputBorder: theme.colorNeutralStrokeAccessible,
+    inputBorderHovered: theme.colorNeutralStrokeAccessibleHover,
+    inputFocusBorderAlt: theme.colorBrandStroke1,
+    inputForegroundChecked: theme.colorNeutralForegroundOnBrand,
+    inputIcon: theme.colorNeutralForeground3,
+    inputIconDisabled: theme.colorNeutralForegroundDisabled,
+    inputIconHovered: theme.colorNeutralForeground3,
+    inputPlaceholderBackgroundChecked: theme.colorBrandBackgroundInvertedSelected,
+    inputPlaceholderText: theme.colorNeutralForeground4,
+    inputText: theme.colorNeutralForeground1,
+    inputTextHovered: theme.colorNeutralForeground1Hover,
+    link: theme.colorBrandForegroundLink,
+    linkHovered: theme.colorBrandForegroundLinkHover,
+    listBackground: theme.colorNeutralBackground1,
+    listHeaderBackgroundHovered: theme.colorNeutralBackground1Hover,
+    listHeaderBackgroundPressed: theme.colorNeutralBackground1Pressed,
+    listItemBackgroundChecked: theme.colorNeutralBackground1Selected,
+    listItemBackgroundCheckedHovered: theme.colorNeutralBackground1Selected,
+    listItemBackgroundHovered: theme.colorNeutralBackground1Hover,
+    listText: theme.colorNeutralForeground1,
+    listTextColor: theme.colorNeutralForeground1,
+    menuBackground: theme.colorNeutralBackground1,
+    menuDivider: theme.colorNeutralStroke2,
+    menuHeader: theme.colorNeutralForeground3,
+    menuIcon: theme.colorNeutralForeground1,
+    menuItemBackgroundChecked: theme.colorNeutralBackground1,
+    menuItemBackgroundHovered: theme.colorNeutralBackground1Hover,
+    menuItemBackgroundPressed: theme.colorNeutralBackground1Hover,
+    menuItemText: theme.colorNeutralForeground1,
+    menuItemTextHovered: theme.colorNeutralForeground1Hover,
+    messageLink: theme.colorBrandForegroundLink,
+    messageLinkHovered: theme.colorBrandForegroundLinkHover,
+    messageText: theme.colorNeutralForeground1,
+    primaryButtonBackground: theme.colorBrandBackground,
+    primaryButtonBackgroundDisabled: theme.colorNeutralBackgroundDisabled,
+    primaryButtonBackgroundHovered: theme.colorBrandBackgroundHover,
+    primaryButtonBackgroundPressed: theme.colorBrandBackgroundPressed,
+    primaryButtonBorder: theme.colorTransparentStroke,
+    primaryButtonText: theme.colorNeutralForegroundOnBrand,
+    primaryButtonTextDisabled: theme.colorNeutralForegroundDisabled,
+    primaryButtonTextHovered: theme.colorNeutralForegroundOnBrand,
+    primaryButtonTextPressed: theme.colorNeutralForegroundOnBrand,
+    // severeWarningBackground,
+    // severeWarningIcon,
+    // smallInputBorder,
+    // successBackground,
+    // successIcon,
+    // successText: ,
+    // variantBorder,
+    // variantBorderHovered,
+    // warningBackground,
+    // warningHighlight,
+    // warningIcon,
+    // warningText: ,
+  };
+};
+
+/**
+ * Overlays v9 fonts on a set of base v8 fonts.
+ */
+const mapFonts = (baseFonts: IFontStyles, theme: ThemeV9): IFontStyles => {
+  return {
+    ...baseFonts,
+    tiny: {
+      ...baseFonts.tiny,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeBase100,
+      fontWeight: theme.fontWeightRegular as IFontWeight,
+    },
+    xSmall: {
+      ...baseFonts.xSmall,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeBase100,
+      fontWeight: theme.fontWeightRegular as IFontWeight,
+    },
+    small: {
+      ...baseFonts.small,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeBase200,
+      fontWeight: theme.fontWeightRegular as IFontWeight,
+    },
+    smallPlus: {
+      ...baseFonts.smallPlus,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeBase200,
+      fontWeight: theme.fontWeightRegular as IFontWeight,
+    },
+    medium: {
+      ...baseFonts.medium,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeBase300,
+      fontWeight: theme.fontWeightRegular as IFontWeight,
+    },
+    mediumPlus: {
+      ...baseFonts.mediumPlus,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeBase400,
+      fontWeight: theme.fontWeightRegular as IFontWeight,
+    },
+    large: {
+      ...baseFonts.large,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeBase400,
+      fontWeight: theme.fontWeightRegular as IFontWeight,
+    },
+    xLarge: {
+      ...baseFonts.xxLarge,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeBase500,
+      fontWeight: theme.fontWeightSemibold as IFontWeight,
+    },
+    xxLarge: {
+      ...baseFonts.xxLarge,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeHero700,
+      fontWeight: theme.fontWeightSemibold as IFontWeight,
+    },
+    superLarge: {
+      ...baseFonts.superLarge,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeHero900,
+      fontWeight: theme.fontWeightSemibold as IFontWeight,
+    },
+    mega: {
+      ...baseFonts.mega,
+      fontFamily: theme.fontFamilyBase,
+      fontSize: theme.fontSizeHero1000,
+      fontWeight: theme.fontWeightSemibold as IFontWeight,
+    },
+  };
+};
+
+/**
+ * Overlays v9 shadows and border radii on a base set of v8 effects.
+ */
+const mapEffects = (baseEffects: IEffects, theme: ThemeV9): IEffects => {
+  return {
+    ...baseEffects,
+    elevation4: theme.shadow4,
+    elevation8: theme.shadow8,
+    elevation16: theme.shadow16,
+    elevation64: theme.shadow64,
+    roundedCorner2: theme.borderRadiusSmall,
+    roundedCorner4: theme.borderRadiusMedium,
+    roundedCorner6: theme.borderRadiusLarge,
+  };
+};
+
+/**
+ * Creates a v8 theme from v9 brand colora and theme.
+ * You can optionally pass a v8 base theme.
+ * Otherwise the default v8 theme is used.
+ *
+ * The v9 colors, fonts, and effects are applied on top of the v8 theme
+ * to allow v8 components to look as much like v9 components as possible.
+ */
+export const createv8Theme = (
+  brandColors: BrandVariants,
+  themeV9: ThemeV9,
+  isDarkTheme: boolean = false,
+  themeV8?: ThemeV8,
+): ThemeV8 => {
+  const baseTheme = themeV8 || createTheme({ isInverted: isDarkTheme });
+
+  return {
+    ...baseTheme,
+    palette: mapPalette(brandColors, isDarkTheme),
+    semanticColors: mapSemanticColors(baseTheme.semanticColors, themeV9),
+    fonts: mapFonts(baseTheme.fonts, themeV9),
+    effects: mapEffects(baseTheme.effects, themeV9),
+    isInverted: isDarkTheme || themeV8?.isInverted === true,
+  };
+};
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/v9BrandVariantsShim.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/v9BrandVariantsShim.ts
new file mode 100644
index 0000000000000..44e6fe9c39f86
--- /dev/null
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/src/v9BrandVariantsShim.ts
@@ -0,0 +1,76 @@
+import { IPalette } from '@fluentui/react';
+import { BrandVariants } from '@fluentui/react-theme';
+import { ColorInput, TinyColor } from '@ctrl/tinycolor';
+
+/**
+ * A helper to mix colors using tiny color by an amount and get back a hex string.
+ */
+const mixColors = (colorA: ColorInput, colorB: ColorInput, amount?: number) => {
+  return new TinyColor(colorA).mix(new TinyColor(colorB), amount).toHexString();
+};
+
+/**
+ * Creates a v9 brand ramp by pairwise mixing v8 palette colors.
+ */
+const mixByPairs = (palette: IPalette): BrandVariants => {
+  return {
+    10: palette.themeDarker,
+    20: mixColors(palette.themeDarker, palette.themeDark),
+    30: palette.themeDark,
+    40: mixColors(palette.themeDark, palette.themeDarkAlt),
+    50: palette.themeDarkAlt,
+    60: mixColors(palette.themeDarkAlt, palette.themePrimary),
+    70: palette.themePrimary,
+    80: mixColors(palette.themePrimary, palette.themeSecondary),
+    90: palette.themeSecondary,
+    100: mixColors(palette.themeSecondary, palette.themeTertiary),
+    110: palette.themeTertiary,
+    120: mixColors(palette.themeTertiary, palette.themeLight),
+    130: palette.themeLight,
+    140: mixColors(palette.themeLight, palette.themeLighter),
+    150: palette.themeLighter,
+    160: mixColors(palette.themeLighter, palette.themeLighterAlt),
+  };
+};
+
+/**
+ * Creates a v9 brand ramp by mixing v8 palette colors
+ * using steps between themeDarker and themePrimary and
+ * between themePrimary and themeLighterAlt.
+ */
+const mixPrimaryAndEnds = (palette: IPalette): BrandVariants => {
+  return {
+    10: palette.themeDarker,
+    20: mixColors(palette.themeDarker, palette.themePrimary, 20),
+    30: mixColors(palette.themeDarker, palette.themePrimary, 30),
+    40: mixColors(palette.themeDarker, palette.themePrimary, 40),
+    50: mixColors(palette.themeDarker, palette.themePrimary, 50),
+    60: mixColors(palette.themeDarker, palette.themePrimary, 60),
+    70: mixColors(palette.themeDarker, palette.themePrimary, 70),
+    80: palette.themePrimary,
+    90: mixColors(palette.themePrimary, palette.themeLighterAlt, 10),
+    100: mixColors(palette.themePrimary, palette.themeLighterAlt, 20),
+    110: mixColors(palette.themePrimary, palette.themeLighterAlt, 30),
+    120: mixColors(palette.themePrimary, palette.themeLighterAlt, 40),
+    130: mixColors(palette.themePrimary, palette.themeLighterAlt, 50),
+    140: mixColors(palette.themePrimary, palette.themeLighterAlt, 60),
+    150: mixColors(palette.themePrimary, palette.themeLighterAlt, 70),
+    160: palette.themeLighterAlt,
+  };
+};
+
+type Interpolation = 'pairs' | 'primaryAndEnds';
+
+/**
+ * Creates v9 brand colors from a v8 palette using interpolation
+ * A v8 palette has nine colors and v9 has sixteen colors.
+ */
+export const createBrandVariants = (palette: IPalette, interpolation: Interpolation = 'pairs'): BrandVariants => {
+  switch (interpolation) {
+    case 'primaryAndEnds':
+      return mixPrimaryAndEnds(palette);
+    case 'pairs':
+    default:
+      return mixByPairs(palette);
+  }
+};
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/v9ThemeShim.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/v9ThemeShim.ts
new file mode 100644
index 0000000000000..027d4879b2d1d
--- /dev/null
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/src/v9ThemeShim.ts
@@ -0,0 +1,200 @@
+import { IEffects, IPalette, Theme as ThemeV8 } from '@fluentui/react';
+import {
+  BorderRadiusTokens,
+  ColorTokens,
+  ShadowTokens,
+  Theme as ThemeV9,
+  webLightTheme,
+} from '@fluentui/react-components';
+import { blackAlpha, whiteAlpha, grey } from './themeDuplicates';
+
+/**
+ * Creates v9 color tokens from a v8 palette.
+ */
+const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
+  return {
+    colorNeutralForeground1: palette.neutralPrimary,
+    colorNeutralForeground1Hover: palette.neutralPrimary,
+    colorNeutralForeground1Pressed: palette.neutralPrimary,
+    colorNeutralForeground1Selected: palette.neutralPrimary,
+    colorNeutralForeground2: palette.neutralSecondary,
+    colorNeutralForeground2Hover: palette.neutralPrimary,
+    colorNeutralForeground2Pressed: palette.neutralPrimary,
+    colorNeutralForeground2Selected: palette.neutralPrimary,
+    colorNeutralForeground2BrandHover: palette.themePrimary,
+    colorNeutralForeground2BrandPressed: palette.themeDarkAlt,
+    colorNeutralForeground2BrandSelected: palette.themePrimary,
+    colorNeutralForeground3: palette.neutralTertiary,
+    colorNeutralForeground3Hover: palette.neutralSecondary,
+    colorNeutralForeground3Pressed: palette.neutralSecondary,
+    colorNeutralForeground3Selected: palette.neutralSecondary,
+    colorNeutralForeground3BrandHover: palette.themePrimary,
+    colorNeutralForeground3BrandPressed: palette.themeDarkAlt,
+    colorNeutralForeground3BrandSelected: palette.themePrimary,
+    colorNeutralForeground4: palette.neutralQuaternary,
+    colorNeutralForegroundDisabled: palette.neutralTertiaryAlt,
+    colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
+    colorBrandForegroundLink: palette.themeDarkAlt,
+    colorBrandForegroundLinkHover: palette.themeDark,
+    colorBrandForegroundLinkPressed: palette.themeDarker,
+    colorBrandForegroundLinkSelected: palette.themeDarkAlt,
+    colorNeutralForeground2Link: palette.neutralSecondary,
+    colorNeutralForeground2LinkHover: palette.neutralPrimary,
+    colorNeutralForeground2LinkPressed: palette.neutralPrimary,
+    colorNeutralForeground2LinkSelected: palette.neutralPrimary,
+    colorCompoundBrandForeground1: palette.themePrimary,
+    colorCompoundBrandForeground1Hover: palette.themeDarkAlt,
+    colorCompoundBrandForeground1Pressed: palette.themeDark,
+    colorBrandForeground1: palette.themePrimary,
+    colorBrandForeground2: palette.themeDarkAlt,
+    colorNeutralForeground1Static: palette.neutralPrimary,
+    colorNeutralForegroundInverted: palette.white,
+    colorNeutralForegroundInvertedHover: palette.white,
+    colorNeutralForegroundInvertedPressed: palette.white,
+    colorNeutralForegroundInvertedSelected: palette.white,
+    colorNeutralForegroundOnBrand: palette.white,
+    colorNeutralForegroundStaticInverted: palette.white,
+    colorNeutralForegroundInvertedLink: palette.white,
+    colorNeutralForegroundInvertedLinkHover: palette.white,
+    colorNeutralForegroundInvertedLinkPressed: palette.white,
+    colorNeutralForegroundInvertedLinkSelected: palette.white,
+    colorNeutralForegroundInverted2: palette.white,
+    colorBrandForegroundInverted: palette.themeSecondary,
+    colorBrandForegroundInvertedHover: palette.themeTertiary,
+    colorBrandForegroundInvertedPressed: palette.themeSecondary,
+    colorBrandForegroundOnLight: palette.themePrimary,
+    colorBrandForegroundOnLightHover: palette.themeDarkAlt,
+    colorBrandForegroundOnLightPressed: palette.themeDark,
+    colorBrandForegroundOnLightSelected: palette.themeDark,
+    colorNeutralBackground1: palette.white,
+    colorNeutralBackground1Hover: palette.neutralLighter,
+    colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt,
+    colorNeutralBackground1Selected: palette.neutralLight,
+    colorNeutralBackground2: palette.neutralLighterAlt,
+    colorNeutralBackground2Hover: palette.neutralLighter,
+    colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt,
+    colorNeutralBackground2Selected: palette.neutralLight,
+    colorNeutralBackground3: palette.neutralLighter,
+    colorNeutralBackground3Hover: palette.neutralLight,
+    colorNeutralBackground3Pressed: palette.neutralQuaternary,
+    colorNeutralBackground3Selected: palette.neutralQuaternaryAlt,
+    colorNeutralBackground4: palette.neutralLighter,
+    colorNeutralBackground4Hover: palette.neutralLighterAlt,
+    colorNeutralBackground4Pressed: palette.neutralLighter,
+    colorNeutralBackground4Selected: palette.white,
+    colorNeutralBackground5: palette.neutralLight,
+    colorNeutralBackground5Hover: palette.neutralLighter,
+    colorNeutralBackground5Pressed: palette.neutralLighter,
+    colorNeutralBackground5Selected: palette.neutralLighterAlt,
+    colorNeutralBackground6: palette.neutralLight,
+    colorNeutralBackgroundStatic: grey[20],
+    colorNeutralBackgroundInverted: palette.neutralSecondary,
+    colorSubtleBackground: 'transparent',
+    colorSubtleBackgroundHover: palette.neutralLighter,
+    colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt,
+    colorSubtleBackgroundSelected: palette.neutralLight,
+    colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80],
+    colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50],
+    colorSubtleBackgroundLightAlphaSelected: 'transparent',
+    colorSubtleBackgroundInverted: 'transparent',
+    colorSubtleBackgroundInvertedHover: blackAlpha[10],
+    colorSubtleBackgroundInvertedPressed: blackAlpha[30],
+    colorSubtleBackgroundInvertedSelected: blackAlpha[20],
+    colorTransparentBackground: 'transparent',
+    colorTransparentBackgroundHover: 'transparent',
+    colorTransparentBackgroundPressed: 'transparent',
+    colorTransparentBackgroundSelected: 'transparent',
+    colorNeutralBackgroundDisabled: palette.neutralLighter,
+    colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
+    colorNeutralStencil1: palette.neutralLight,
+    colorNeutralStencil2: palette.neutralLighterAlt,
+    colorBackgroundOverlay: blackAlpha[10],
+    colorScrollbarOverlay: blackAlpha[50],
+    colorBrandBackground: palette.themePrimary,
+    colorBrandBackgroundHover: palette.themeDarkAlt,
+    colorBrandBackgroundPressed: palette.themeDarker,
+    colorBrandBackgroundSelected: palette.themeDark,
+    colorCompoundBrandBackground: palette.themePrimary,
+    colorCompoundBrandBackgroundHover: palette.themeDarkAlt,
+    colorCompoundBrandBackgroundPressed: palette.themeDark,
+    colorBrandBackgroundStatic: palette.themePrimary,
+    colorBrandBackground2: palette.themeLighterAlt,
+    colorBrandBackgroundInverted: palette.white,
+    colorBrandBackgroundInvertedHover: palette.themeLighterAlt,
+    colorBrandBackgroundInvertedPressed: palette.themeLight,
+    colorBrandBackgroundInvertedSelected: palette.themeLighter,
+    colorNeutralStrokeAccessible: palette.neutralSecondary,
+    colorNeutralStrokeAccessibleHover: palette.neutralSecondary,
+    colorNeutralStrokeAccessiblePressed: palette.neutralSecondary,
+    colorNeutralStrokeAccessibleSelected: palette.themePrimary,
+    colorNeutralStroke1: palette.neutralQuaternary,
+    colorNeutralStroke1Hover: palette.neutralTertiaryAlt,
+    colorNeutralStroke1Pressed: palette.neutralTertiaryAlt,
+    colorNeutralStroke1Selected: palette.neutralTertiaryAlt,
+    colorNeutralStroke2: palette.neutralQuaternaryAlt,
+    colorNeutralStroke3: palette.neutralLighter,
+    colorNeutralStrokeOnBrand: palette.white,
+    colorNeutralStrokeOnBrand2: palette.white,
+    colorNeutralStrokeOnBrand2Hover: palette.white,
+    colorNeutralStrokeOnBrand2Pressed: palette.white,
+    colorNeutralStrokeOnBrand2Selected: palette.white,
+    colorBrandStroke1: palette.themePrimary,
+    colorBrandStroke2: palette.themeLight,
+    colorCompoundBrandStroke: palette.themePrimary,
+    colorCompoundBrandStrokeHover: palette.themeDarkAlt,
+    colorCompoundBrandStrokePressed: palette.themeDark,
+    colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt,
+    colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
+    colorTransparentStroke: 'transparent',
+    colorTransparentStrokeInteractive: 'transparent',
+    colorTransparentStrokeDisabled: 'transparent',
+    colorStrokeFocus1: palette.white,
+    colorStrokeFocus2: palette.black,
+    colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',
+    colorNeutralShadowKey: 'rgba(0,0,0,0.14)',
+    colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
+    colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
+    colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
+    colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
+    colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
+    colorBrandShadowKey: 'rgba(0,0,0,0.25)',
+  };
+};
+
+/**
+ * Creates v9 shadow tokens from v8 effects.
+ */
+const mapShadowTokens = (effects: IEffects): Partial<ShadowTokens> => {
+  return {
+    shadow4: effects.elevation4,
+    shadow8: effects.elevation8,
+    shadow16: effects.elevation16,
+    shadow64: effects.elevation64,
+  };
+};
+
+/**
+ * Creates v9 border radius tokens from v8 effects
+ */
+const mapBorderRadiusTokens = (effects: IEffects): Partial<BorderRadiusTokens> => {
+  return {
+    borderRadiusSmall: effects.roundedCorner2,
+    borderRadiusMedium: effects.roundedCorner4,
+    borderRadiusLarge: effects.roundedCorner6,
+  };
+};
+
+/**
+ * Creates a v9 theme from a v8 theme.
+ * You can optional pass a base v9 theme; otherwise webLightTheme is used.
+ */
+export const createv9Theme = (themeV8: ThemeV8, baseThemeV9?: ThemeV9): ThemeV9 => {
+  const baseTheme = baseThemeV9 ?? webLightTheme;
+
+  return {
+    ...baseTheme,
+    ...mapAliasColors(themeV8.palette, themeV8.isInverted),
+    ...mapShadowTokens(themeV8.effects),
+    ...mapBorderRadiusTokens(themeV8.effects),
+  };
+};
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json
index 12ca516af1c5b..1941a041d46c1 100644
--- a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json
@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ]
 }
diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json
index b2da24eff1b32..7f94e04299ed8 100644
--- a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json
+++ b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json
@@ -9,6 +9,14 @@
     "inlineSources": true,
     "types": ["static-assets", "environment"]
   },
-  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"],
+  "exclude": [
+    "./src/common/**",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }