diff --git a/.storybook/preview.js b/.storybook/preview.js
index cefe0bed0de8c..9dbedb5216d05 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,9 +1,9 @@
-import { withStrictMode } from '@fluentui/react-storybook';
+import { withFluentProvider, withStrictMode } from '@fluentui/react-storybook';
 import 'cypress-storybook/react';
 import * as dedent from 'dedent';
 
 /** @type {NonNullable<import('@storybook/react').Story['decorators']>} */
-export const decorators = [withStrictMode];
+export const decorators = [withFluentProvider, withStrictMode];
 
 /** @type {import('@storybook/react').Parameters} */
 export const parameters = {
diff --git a/change/@fluentui-react-components-d47a7a2f-27ca-4961-944d-5b0e8c775c9a.json b/change/@fluentui-react-components-d47a7a2f-27ca-4961-944d-5b0e8c775c9a.json
new file mode 100644
index 0000000000000..89a702e221487
--- /dev/null
+++ b/change/@fluentui-react-components-d47a7a2f-27ca-4961-944d-5b0e8c775c9a.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "revert(react-storybook-addon): Remove addon and reintroduce `withFluentProvider`",
+  "packageName": "@fluentui/react-components",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/react-components/.storybook/main.js b/packages/react-components/.storybook/main.js
index 77e48491c3a06..719751bc7e1a2 100644
--- a/packages/react-components/.storybook/main.js
+++ b/packages/react-components/.storybook/main.js
@@ -9,7 +9,7 @@ module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookCon
     '../src/**/*.stories.@(ts|tsx)',
     ...utils.getVnextStories(),
   ],
-  addons: [...rootMain.addons, '@fluentui/react-storybook-addon'],
+  addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
 
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index b0c4a7db1da55..baa5c0bd24990 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -29,7 +29,6 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-storybook-addon": "9.0.0-beta.0",
     "@fluentui/scripts": "^1.0.0",
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
diff --git a/packages/react-storybook/etc/react-storybook.api.md b/packages/react-storybook/etc/react-storybook.api.md
index e9d37726e6504..784b83c8a6c46 100644
--- a/packages/react-storybook/etc/react-storybook.api.md
+++ b/packages/react-storybook/etc/react-storybook.api.md
@@ -6,6 +6,9 @@
 
 import * as React_2 from 'react';
 
+// @public (undocumented)
+export const withFluentProvider: (...args: any) => any;
+
 // @public (undocumented)
 export const withStrictMode: (storyFn: () => React_2.ReactNode) => JSX.Element;
 
diff --git a/packages/react-storybook/src/decorators/index.ts b/packages/react-storybook/src/decorators/index.ts
index b5502b4153487..ff044dce8afc1 100644
--- a/packages/react-storybook/src/decorators/index.ts
+++ b/packages/react-storybook/src/decorators/index.ts
@@ -1 +1,2 @@
+export * from './withFluentProvider';
 export * from './withStrictMode';
diff --git a/packages/react-storybook/src/decorators/withFluentProvider.tsx b/packages/react-storybook/src/decorators/withFluentProvider.tsx
new file mode 100644
index 0000000000000..2d55636bad8f8
--- /dev/null
+++ b/packages/react-storybook/src/decorators/withFluentProvider.tsx
@@ -0,0 +1,20 @@
+import { makeDecorator } from '@storybook/addons';
+import { FluentProvider } from '@fluentui/react-provider';
+import * as React from 'react';
+
+import { useFluentTheme } from '../knobs/useFluentTheme';
+
+const ProviderWrapper: React.FunctionComponent = props => {
+  const { theme } = useFluentTheme();
+
+  return <FluentProvider theme={theme}>{props.children}</FluentProvider>;
+};
+
+export const withFluentProvider = makeDecorator({
+  name: 'withFluentProvider',
+  parameterName: 'theme',
+  skipIfNoParametersOrOptions: false,
+  wrapper: (storyFn, context) => {
+    return <ProviderWrapper>{storyFn(context)}</ProviderWrapper>;
+  },
+});
diff --git a/packages/react-storybook/src/index.test.ts b/packages/react-storybook/src/index.test.ts
index 446d13e865c7f..3f2fe8451a862 100644
--- a/packages/react-storybook/src/index.test.ts
+++ b/packages/react-storybook/src/index.test.ts
@@ -1,9 +1,9 @@
-import { withStrictMode } from './index';
+import { withFluentProvider, withStrictMode } from './index';
 
 describe(`public api`, () => {
   describe(`decorators`, () => {
     it(`should work`, () => {
-      const decorators = [withStrictMode];
+      const decorators = [withFluentProvider, withStrictMode];
 
       // @TODO - added proper tests
       expect(decorators).toBeDefined();