diff --git a/code/frameworks/angular/src/types.ts b/code/frameworks/angular/src/types.ts
index 926213e222b6..a965368eaf94 100644
--- a/code/frameworks/angular/src/types.ts
+++ b/code/frameworks/angular/src/types.ts
@@ -7,9 +7,10 @@ import {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/angular';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/angular'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = AngularOptions & {
   builder?: BuilderOptions;
diff --git a/code/frameworks/ember/src/types.ts b/code/frameworks/ember/src/types.ts
index 2c2605f286af..6106e1391199 100644
--- a/code/frameworks/ember/src/types.ts
+++ b/code/frameworks/ember/src/types.ts
@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/ember-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/ember-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index 9e73018e56f4..6d5f50f5efc4 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -51,6 +51,7 @@
     "@storybook/core-server": "workspace:*",
     "@storybook/html": "workspace:*",
     "@storybook/node-logger": "workspace:*",
+    "@storybook/types": "workspace:*",
     "magic-string": "^0.30.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/html-vite/src/types.ts b/code/frameworks/html-vite/src/types.ts
index db508a143b53..d25f61997d14 100644
--- a/code/frameworks/html-vite/src/types.ts
+++ b/code/frameworks/html-vite/src/types.ts
@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfig as StorybookConfigBase, CompatibleString } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/html-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/html-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
index 87bf31e2d235..e2256056d09f 100644
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@@ -52,6 +52,7 @@
     "@storybook/global": "^5.0.0",
     "@storybook/html": "workspace:*",
     "@storybook/preset-html-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/html-webpack5/src/types.ts b/code/frameworks/html-webpack5/src/types.ts
index 2360ef4ac9e6..eb0fa25b9ebd 100644
--- a/code/frameworks/html-webpack5/src/types.ts
+++ b/code/frameworks/html-webpack5/src/types.ts
@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/html-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/html-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/nextjs/src/types.ts b/code/frameworks/nextjs/src/types.ts
index 9ff68f830b28..9c7fcd9efd7d 100644
--- a/code/frameworks/nextjs/src/types.ts
+++ b/code/frameworks/nextjs/src/types.ts
@@ -8,10 +8,11 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 import type * as NextImage from 'next/image';
 
-type FrameworkName = '@storybook/nextjs';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/nextjs'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = ReactOptions & {
   nextConfigPath?: string;
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index a3e73f638dc8..cc183ee6c7e1 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -48,7 +48,8 @@
   },
   "dependencies": {
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/preact": "workspace:*"
+    "@storybook/preact": "workspace:*",
+    "@storybook/types": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
diff --git a/code/frameworks/preact-vite/src/types.ts b/code/frameworks/preact-vite/src/types.ts
index d654f5e13bbc..36481753d4e5 100644
--- a/code/frameworks/preact-vite/src/types.ts
+++ b/code/frameworks/preact-vite/src/types.ts
@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/preact-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/preact-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index d17d4ad1b7fb..527aa31175c7 100644
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@@ -51,6 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preact": "workspace:*",
     "@storybook/preset-preact-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/preact-webpack5/src/types.ts b/code/frameworks/preact-webpack5/src/types.ts
index 2d66b8576166..cad7d38ac6c2 100644
--- a/code/frameworks/preact-webpack5/src/types.ts
+++ b/code/frameworks/preact-webpack5/src/types.ts
@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/preact-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/preact-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index af59651beb5a..3d21f2ef800d 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -52,6 +52,7 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
     "find-up": "^5.0.0",
     "magic-string": "^0.30.0",
     "react-docgen": "^7.0.0",
diff --git a/code/frameworks/react-vite/src/types.ts b/code/frameworks/react-vite/src/types.ts
index 2499ae4bf93a..79c704f1e914 100644
--- a/code/frameworks/react-vite/src/types.ts
+++ b/code/frameworks/react-vite/src/types.ts
@@ -1,12 +1,13 @@
 import type {
+  CompatibleString,
   StorybookConfig as StorybookConfigBase,
   TypescriptOptions as TypescriptOptionsBase,
 } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
 
-type FrameworkName = '@storybook/react-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/react-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index 9430f243625e..a76d2d007aa1 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -50,6 +50,7 @@
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "peerDependencies": {
diff --git a/code/frameworks/react-webpack5/src/types.ts b/code/frameworks/react-webpack5/src/types.ts
index 7e50ef23aba4..fa5a70f8f444 100644
--- a/code/frameworks/react-webpack5/src/types.ts
+++ b/code/frameworks/react-webpack5/src/types.ts
@@ -8,9 +8,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/react-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/react-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = ReactOptions & {
   builder?: BuilderOptions;
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 4d48bb64a8f4..8e0c63729a9e 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -51,6 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-server-webpack": "workspace:*",
     "@storybook/server": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/server-webpack5/src/types.ts b/code/frameworks/server-webpack5/src/types.ts
index 63ecb28ab897..1374b9788c61 100644
--- a/code/frameworks/server-webpack5/src/types.ts
+++ b/code/frameworks/server-webpack5/src/types.ts
@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/server-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/server-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 315c4d1d132a..cc7d0b1efd9f 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -50,6 +50,7 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/svelte": "workspace:*",
+    "@storybook/types": "workspace:*",
     "magic-string": "^0.30.0",
     "svelte-preprocess": "^5.1.1",
     "sveltedoc-parser": "^4.2.1",
diff --git a/code/frameworks/svelte-vite/src/types.ts b/code/frameworks/svelte-vite/src/types.ts
index 8d4ccb8cc9cb..6fe0c01de2c3 100644
--- a/code/frameworks/svelte-vite/src/types.ts
+++ b/code/frameworks/svelte-vite/src/types.ts
@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/svelte-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/svelte-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 14aed9c8297c..e8f91e470712 100644
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@@ -50,7 +50,8 @@
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-svelte-webpack": "workspace:*",
-    "@storybook/svelte": "workspace:*"
+    "@storybook/svelte": "workspace:*",
+    "@storybook/types": "workspace:*"
   },
   "devDependencies": {
     "svelte": "^4.0.0",
diff --git a/code/frameworks/svelte-webpack5/src/types.ts b/code/frameworks/svelte-webpack5/src/types.ts
index d5c0578faa32..6c285d94caa9 100644
--- a/code/frameworks/svelte-webpack5/src/types.ts
+++ b/code/frameworks/svelte-webpack5/src/types.ts
@@ -8,9 +8,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/svelte-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/svelte-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = SvelteOptions & {
   builder?: BuilderOptions;
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index e29336eee840..c8be3504bf78 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -56,7 +56,8 @@
     "@storybook/addon-actions": "workspace:*",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/svelte": "workspace:*",
-    "@storybook/svelte-vite": "workspace:*"
+    "@storybook/svelte-vite": "workspace:*",
+    "@storybook/types": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
diff --git a/code/frameworks/sveltekit/src/types.ts b/code/frameworks/sveltekit/src/types.ts
index c3f04a22bc82..a41c333ccc5f 100644
--- a/code/frameworks/sveltekit/src/types.ts
+++ b/code/frameworks/sveltekit/src/types.ts
@@ -1,10 +1,10 @@
 import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { enhance } from './mocks/app/forms';
 import type { goto, invalidate, invalidateAll } from './mocks/app/navigation';
 
-type FrameworkName = '@storybook/sveltekit';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/sveltekit'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 100c41e97ac9..b16576240272 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -49,6 +49,7 @@
   "dependencies": {
     "@storybook/builder-vite": "workspace:*",
     "@storybook/core-server": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@storybook/vue3": "workspace:*",
     "find-package-json": "^1.2.0",
     "magic-string": "^0.30.0",
diff --git a/code/frameworks/vue3-vite/src/types.ts b/code/frameworks/vue3-vite/src/types.ts
index c75fee101de8..09806828a421 100644
--- a/code/frameworks/vue3-vite/src/types.ts
+++ b/code/frameworks/vue3-vite/src/types.ts
@@ -1,10 +1,10 @@
 import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { ComponentMeta } from 'vue-component-meta';
 import type { ComponentDoc } from 'vue-docgen-api';
 
-type FrameworkName = '@storybook/vue3-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/vue3-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 /**
  * Available docgen plugins for vue.
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 79db6fa68c33..635760a472ee 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -50,6 +50,7 @@
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-vue3-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@storybook/vue3": "workspace:*",
     "@types/node": "^18.0.0"
   },
diff --git a/code/frameworks/vue3-webpack5/src/types.ts b/code/frameworks/vue3-webpack5/src/types.ts
index bdae08526600..9c9352eabfda 100644
--- a/code/frameworks/vue3-webpack5/src/types.ts
+++ b/code/frameworks/vue3-webpack5/src/types.ts
@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/vue3-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/vue3-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index 0e33bfa708be..2e50f81ccf89 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -50,6 +50,7 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/node-logger": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@storybook/web-components": "workspace:*",
     "magic-string": "^0.30.0"
   },
diff --git a/code/frameworks/web-components-vite/src/types.ts b/code/frameworks/web-components-vite/src/types.ts
index 25fd697cb4b3..a43eaabd3161 100644
--- a/code/frameworks/web-components-vite/src/types.ts
+++ b/code/frameworks/web-components-vite/src/types.ts
@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/web-components-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/web-components-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index a0787c7fc2f1..352c3614b40c 100644
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@@ -52,6 +52,7 @@
   "dependencies": {
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/core-common": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@storybook/web-components": "workspace:*",
     "@types/node": "^18.0.0"
   },
diff --git a/code/frameworks/web-components-webpack5/src/types.ts b/code/frameworks/web-components-webpack5/src/types.ts
index 01442d08f08a..265b605772c8 100644
--- a/code/frameworks/web-components-webpack5/src/types.ts
+++ b/code/frameworks/web-components-webpack5/src/types.ts
@@ -1,4 +1,5 @@
 import type {
+  CompatibleString,
   StorybookConfig as StorybookConfigBase,
   TypescriptOptions as TypescriptOptionsWebComponents,
 } from '@storybook/types';
@@ -8,8 +9,8 @@ import type {
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
 
-type FrameworkName = '@storybook/web-components-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/web-components-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index 9a3106931053..f16ef638cbf4 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -571,3 +571,15 @@ export interface CoreCommon_StorybookInfo {
   previewConfig?: string;
   managerConfig?: string;
 }
+
+/**
+ * Given a generic string type, returns that type but ensures that a string in general is compatible with it.
+ * We use this construct to ensure that IDEs can provide better autocompletion for string types.
+ * This is, for example, needed for main config fields, where we want to ensure that the user can provide
+ * a custom string, but also a string that is compatible with the type.
+ * @example
+ * type Framework = CompatibleString<'@storybook/nextjs'>
+ * const framework: Framework = '@storybook/nextjs'; // valid and will be autocompleted
+ * const framework: Framework = path.dirname(require.resolve(path.join("@storybook/nextjs", "package.json"))) // valid
+ */
+export type CompatibleString<T extends string> = T | (string & Record<string, never>);
diff --git a/code/yarn.lock b/code/yarn.lock
index 2168bf13fdaa..33f0944c6efd 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6152,6 +6152,7 @@ __metadata:
     "@storybook/core-server": "workspace:*"
     "@storybook/html": "workspace:*"
     "@storybook/node-logger": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     magic-string: "npm:^0.30.0"
     typescript: "npm:^5.3.2"
@@ -6167,6 +6168,7 @@ __metadata:
     "@storybook/global": "npm:^5.0.0"
     "@storybook/html": "workspace:*"
     "@storybook/preset-html-webpack": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     typescript: "npm:^5.3.2"
   languageName: unknown
@@ -6406,6 +6408,7 @@ __metadata:
   dependencies:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/preact": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
@@ -6423,6 +6426,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preact": "workspace:*"
     "@storybook/preset-preact-webpack": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     preact: "npm:^10.5.13"
     typescript: "npm:^5.3.2"
@@ -6651,6 +6655,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/react": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     find-up: "npm:^5.0.0"
     magic-string: "npm:^0.30.0"
@@ -6673,6 +6678,7 @@ __metadata:
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/preset-react-webpack": "workspace:*"
     "@storybook/react": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -6913,6 +6919,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-server-webpack": "workspace:*"
     "@storybook/server": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     typescript: "npm:^5.3.2"
   languageName: unknown
@@ -6955,6 +6962,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/svelte": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@sveltejs/vite-plugin-svelte": "npm:^3.0.1"
     "@types/node": "npm:^18.0.0"
     magic-string: "npm:^0.30.0"
@@ -6979,6 +6987,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-svelte-webpack": "workspace:*"
     "@storybook/svelte": "workspace:*"
+    "@storybook/types": "workspace:*"
     svelte: "npm:^4.0.0"
     svelte-loader: "npm:^3.1.9"
     typescript: "npm:^5.3.2"
@@ -7023,6 +7032,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/svelte": "workspace:*"
     "@storybook/svelte-vite": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
@@ -7133,6 +7143,7 @@ __metadata:
   dependencies:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/core-server": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@storybook/vue3": "workspace:*"
     "@types/find-package-json": "npm:^1.2.6"
     "@types/node": "npm:^18.0.0"
@@ -7154,6 +7165,7 @@ __metadata:
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-vue3-webpack": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@storybook/vue3": "workspace:*"
     "@types/node": "npm:^18.0.0"
     "@vue/compiler-sfc": "npm:3.0.0"
@@ -7197,6 +7209,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/core-server": "workspace:*"
     "@storybook/node-logger": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@storybook/web-components": "workspace:*"
     "@types/node": "npm:^18.0.0"
     magic-string: "npm:^0.30.0"
@@ -7210,6 +7223,7 @@ __metadata:
   dependencies:
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/core-common": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@storybook/web-components": "workspace:*"
     "@types/node": "npm:^18.0.0"
     lit: "npm:2.3.1"