diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx
new file mode 100644
index 000000000000..0139b6003ef5
--- /dev/null
+++ b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-webpack5)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+const config: StorybookConfig = {
+  webpackFinal: async (config) => {
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin({
+        extensions: config.resolve.extensions,
+      }),
+    ];
+    return config;
+  },
+};
+
+export default config;
+```