diff --git a/packages/web-components/.storybook/main.cjs b/packages/web-components/.storybook/main.cjs
deleted file mode 100644
index 9cc493772e60e..0000000000000
--- a/packages/web-components/.storybook/main.cjs
+++ /dev/null
@@ -1,88 +0,0 @@
-const path = require('path');
-const CircularDependencyPlugin = require('circular-dependency-plugin');
-const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
-
-const tsBin = require.resolve('typescript');
-const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json');
-
-const tsPaths = new TsconfigPathsPlugin({
-  configFile: tsConfigPath,
-});
-
-module.exports =
-  /** @type {import('@storybook/html-webpack5').StorybookConfig} */
-  ({
-    features: {
-      // On-demand code splitting is disabled for now, as it causes issues e2e tests.
-      storyStoreV7: false,
-    },
-    // helpers.stories.ts is a file that contains helper functions for stories,
-    // and should not be treated as a story itself.
-    stories: ['../src/**/!(helpers)*.stories.@(ts|mdx)'],
-    staticDirs: ['../public'],
-    core: {
-      disableTelemetry: true,
-    },
-    framework: '@storybook/html-webpack5',
-    addons: [
-      {
-        name: '@storybook/addon-essentials',
-        options: {
-          backgrounds: false,
-          viewport: false,
-          toolbars: false,
-          actions: true,
-        },
-      },
-    ],
-    webpackFinal: async config => {
-      config.resolve = config.resolve ?? {};
-      config.resolve.extensions = config.resolve.extensions ?? [];
-      config.resolve.plugins = config.resolve.plugins ?? [];
-      config.module = config.module ?? {};
-      config.plugins = config.plugins ?? [];
-
-      config.resolve.extensionAlias = {
-        '.js': ['.js', '.ts'],
-        '.mjs': ['.mjs', '.mts'],
-      };
-      config.resolve.extensions.push(...['.ts', '.js']);
-      config.resolve.plugins.push(tsPaths);
-      config.module.rules = config.module.rules ?? [];
-      config.module.rules.push(
-        {
-          test: /\.([cm]?ts|tsx)$/,
-          loader: 'ts-loader',
-          sideEffects: true,
-          options: {
-            transpileOnly: true,
-            compiler: tsBin,
-          },
-        },
-        // Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM
-        // It also enables importing other packages without proper ESM extensions, but that should be avoided !
-        // @see https://webpack.js.org/configuration/module/#resolvefullyspecified
-        {
-          test: /\.m?js/,
-          resolve: { fullySpecified: false },
-        },
-      );
-
-      config.plugins.push(
-        new CircularDependencyPlugin({
-          exclude: /node_modules/,
-          failOnError: process.env.NODE_ENV === 'production',
-        }),
-      );
-
-      // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
-      if (process.env.TF_BUILD) {
-        config.plugins = config.plugins.filter(value => value && value.constructor.name !== 'ProgressPlugin');
-      }
-
-      return config;
-    },
-    docs: {
-      autodocs: true,
-    },
-  });
diff --git a/packages/web-components/.storybook/main.ts b/packages/web-components/.storybook/main.ts
new file mode 100644
index 0000000000000..9ab6968d07036
--- /dev/null
+++ b/packages/web-components/.storybook/main.ts
@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/html-vite';
+
+export default {
+  // helpers.stories.ts is a file that contains helper functions for stories,
+  // and should not be treated as a story itself.
+  stories: ['../src/**/!(helpers)*.stories.@(ts|mdx)'],
+  staticDirs: ['../public'],
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  framework: '@storybook/html-vite',
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        viewport: false,
+        toolbars: false,
+        actions: true,
+      },
+    },
+  ],
+  docs: {
+    autodocs: true,
+  },
+} satisfies StorybookConfig;
diff --git a/packages/web-components/.storybook/manager.mjs b/packages/web-components/.storybook/manager.ts
similarity index 86%
rename from packages/web-components/.storybook/manager.mjs
rename to packages/web-components/.storybook/manager.ts
index 73873977355b4..43d5f8c331bed 100644
--- a/packages/web-components/.storybook/manager.mjs
+++ b/packages/web-components/.storybook/manager.ts
@@ -1,5 +1,5 @@
 import { addons } from '@storybook/manager-api';
-import webcomponentsTheme from './theme.mjs';
+import webcomponentsTheme from './theme.js';
 
 addons.setConfig({
   previewTabs: {
diff --git a/packages/web-components/.storybook/preview.mjs b/packages/web-components/.storybook/preview.ts
similarity index 87%
rename from packages/web-components/.storybook/preview.mjs
rename to packages/web-components/.storybook/preview.ts
index 5b8d1fe1ad2ef..313c02b1a53f0 100644
--- a/packages/web-components/.storybook/preview.mjs
+++ b/packages/web-components/.storybook/preview.ts
@@ -1,8 +1,9 @@
 import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
+import type { StoryContext } from '@storybook/html';
 import * as prettier from 'prettier';
 import prettierPluginHTML from 'prettier/parser-html.js';
 import { setTheme } from '../src/theme/set-theme.js';
-import webcomponentsTheme from './theme.mjs';
+import webcomponentsTheme from './theme.js';
 
 import '../src/index-rollup.js';
 import './docs-root.css';
@@ -16,8 +17,8 @@ const themes = {
   'teams-dark': teamsDarkTheme,
 };
 
-function changeTheme(/** @type {Event} */ e) {
-  setTheme(themes[/** @type {keyof themes} */ (/** @type {HTMLInputElement}*/ (e.target).value)]);
+function changeTheme(e: Event) {
+  setTheme(themes[(e.target as HTMLSelectElement).value as keyof typeof themes]);
 }
 
 // This is needed in Playwright.
@@ -43,7 +44,7 @@ export const parameters = {
     source: {
       // To get around the inability to change Prettier options in the source addon, this transform function
       // imports the standalone Prettier and uses it to format the source with the desired options.
-      transform(/** @type {string} */ src, /** @type {import('@storybook/html').StoryContext} */ storyContext) {
+      transform(src: string, storyContext: StoryContext) {
         if (!src) {
           const fragment = storyContext.originalStoryFn(storyContext.allArgs, storyContext);
           if (!(fragment instanceof DocumentFragment) && !(fragment instanceof HTMLElement)) {
diff --git a/packages/web-components/.storybook/theme.mjs b/packages/web-components/.storybook/theme.ts
similarity index 100%
rename from packages/web-components/.storybook/theme.mjs
rename to packages/web-components/.storybook/theme.ts
diff --git a/packages/web-components/.storybook/tsconfig.json b/packages/web-components/.storybook/tsconfig.json
index 78905f4f65971..14a9d4ffb0ef6 100644
--- a/packages/web-components/.storybook/tsconfig.json
+++ b/packages/web-components/.storybook/tsconfig.json
@@ -3,8 +3,7 @@
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
-    "noEmit": true,
-    "types": ["node"]
+    "noEmit": true
   },
   "include": ["*", "../public", "../src/**/*.stories.*"]
 }