diff --git a/docs/_snippets/actions-filtering-example.md b/docs/_snippets/actions-filtering-example.md
index 6cca5a26b27e..45bc0092f855 100644
--- a/docs/_snippets/actions-filtering-example.md
+++ b/docs/_snippets/actions-filtering-example.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, svelte)
 import type { Preview } from '@storybook/your-framework';
 
@@ -9,25 +9,25 @@ const originalConsoleLog = console.log;
 const preview: Preview = {
   async beforeEach() {
     spyOn(console, 'log')
-    // Disable automatic logging in the actions panel
-    .mockName('')
-    .mockImplementation((args) => {
-      // Check if the log message matches a certain pattern
-      if (someCondition(args)) {
-        // Manually log an action
-        action('console.log')(args);
-      }
-
-      // Call the original console.log function
-      originalConsoleLog(...args);
-    });
+      // Disable automatic logging in the actions panel
+      .mockName('')
+      .mockImplementation((args) => {
+        // Check if the log message matches a certain pattern
+        if (someCondition(args)) {
+          // Manually log an action
+          action('console.log')(args);
+        }
+
+        // Call the original console.log function
+        originalConsoleLog(...args);
+      });
   },
 };
 
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 import { spyOn } from 'storybook/test';
 
@@ -35,18 +35,75 @@ const originalConsoleLog = console.log;
 export default {
   async beforeEach() {
     spyOn(console, 'log')
-    // Disable automatic logging in the actions panel
-    .mockName('')
-    .mockImplementation((args) => {
-      // Check if the log message matches a certain pattern
-      if (someCondition(args)) {
-        // Manually log an action
-        action('console.log')(args);
-      }
-
-      // Call the original console.log function
-      originalConsoleLog(...args);
-    });
+      // Disable automatic logging in the actions panel
+      .mockName('')
+      .mockImplementation((args) => {
+        // Check if the log message matches a certain pattern
+        if (someCondition(args)) {
+          // Manually log an action
+          action('console.log')(args);
+        }
+
+        // Call the original console.log function
+        originalConsoleLog(...args);
+      });
   },
 };
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { action } from 'storybook/actions';
+import { spyOn } from 'storybook/test';
+
+const originalConsoleLog = console.log;
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log')
+      // Disable automatic logging in the actions panel
+      .mockName('')
+      .mockImplementation((args) => {
+        // Check if the log message matches a certain pattern
+        if (someCondition(args)) {
+          // Manually log an action
+          action('console.log')(args);
+        }
+
+        // Call the original console.log function
+        originalConsoleLog(...args);
+      });
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { action } from 'storybook/actions';
+import { spyOn } from 'storybook/test';
+
+const originalConsoleLog = console.log;
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log')
+      // Disable automatic logging in the actions panel
+      .mockName('')
+      .mockImplementation((args) => {
+        // Check if the log message matches a certain pattern
+        if (someCondition(args)) {
+          // Manually log an action
+          action('console.log')(args);
+        }
+
+        // Call the original console.log function
+        originalConsoleLog(...args);
+      });
+  },
+});
+```
diff --git a/docs/_snippets/actions-spyon-basic-example.md b/docs/_snippets/actions-spyon-basic-example.md
index c51c665b684f..89471b84c56c 100644
--- a/docs/_snippets/actions-spyon-basic-example.md
+++ b/docs/_snippets/actions-spyon-basic-example.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, svelte)
 import type { Preview } from '@storybook/your-framework';
 
@@ -13,7 +13,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { spyOn } from 'storybook/test';
 
 export default {
@@ -22,3 +22,31 @@ export default {
   },
 };
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-config-context-in-story.md b/docs/_snippets/addon-a11y-config-context-in-story.md
index 8d52ad486e2d..6137488cea2b 100644
--- a/docs/_snippets/addon-a11y-config-context-in-story.md
+++ b/docs/_snippets/addon-a11y-config-context-in-story.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // ...rest of story file
 
 export const ExampleStory: Story = {
@@ -135,3 +135,57 @@ export const ExampleStory = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const ExampleStory = meta.story({
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more.
+       */
+      context: {
+        include: ['body'],
+        exclude: ['.no-a11y-check'],
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const ExampleStory = meta.story({
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more.
+       */
+      context: {
+        include: ['body'],
+        exclude: ['.no-a11y-check'],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-config-in-meta-and-story.md b/docs/_snippets/addon-a11y-config-in-meta-and-story.md
index b38c96394c30..643f79253e71 100644
--- a/docs/_snippets/addon-a11y-config-in-meta-and-story.md
+++ b/docs/_snippets/addon-a11y-config-in-meta-and-story.md
@@ -57,7 +57,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -117,7 +117,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -511,3 +511,117 @@ export const ExampleStory = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more.
+       */
+      context: {},
+      /*
+       * Axe's configuration
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
+       * to learn more about the available properties.
+       */
+      config: {},
+      /*
+       * Axe's options parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+       * to learn more about the available options.
+       */
+      options: {},
+      /*
+       * Configure test behavior
+       * See: https://storybook.js.org/docs/next/writing-tests/accessibility-testing#test-behavior
+       */
+      test: 'error',
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
+});
+
+export const ExampleStory = meta.story({
+  parameters: {
+    a11y: {
+      // ...same config available as above
+    },
+  },
+  globals: {
+    a11y: {
+      // ...same config available as above
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more.
+       */
+      context: {},
+      /*
+       * Axe's configuration
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
+       * to learn more about the available properties.
+       */
+      config: {},
+      /*
+       * Axe's options parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+       * to learn more about the available options.
+       */
+      options: {},
+      /*
+       * Configure test behavior
+       * See: https://storybook.js.org/docs/next/writing-tests/accessibility-testing#test-behavior
+       */
+      test: 'error',
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
+});
+
+export const ExampleStory = meta.story({
+  parameters: {
+    a11y: {
+      // ...same config available as above
+    },
+  },
+  globals: {
+    a11y: {
+      // ...same config available as above
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-config-in-preview.md b/docs/_snippets/addon-a11y-config-in-preview.md
index 4dfbf5e8bd55..9569c9fe451a 100644
--- a/docs/_snippets/addon-a11y-config-in-preview.md
+++ b/docs/_snippets/addon-a11y-config-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     a11y: {
@@ -31,7 +31,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -68,3 +68,77 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more. Typically, this is the CSS selector for the part of the DOM you want to analyze.
+       */
+      context: 'body',
+      /*
+       * Axe's configuration
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
+       * to learn more about the available properties.
+       */
+      config: {},
+      /*
+       * Axe's options parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+       * to learn more about the available options.
+       */
+      options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more. Typically, this is the CSS selector for the part of the DOM you want to analyze.
+       */
+      context: 'body',
+      /*
+       * Axe's configuration
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
+       * to learn more about the available properties.
+       */
+      config: {},
+      /*
+       * Axe's options parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+       * to learn more about the available options.
+       */
+      options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-config-rules-in-story.md b/docs/_snippets/addon-a11y-config-rules-in-story.md
index 5d02ed6ee1a6..3ea1497e0184 100644
--- a/docs/_snippets/addon-a11y-config-rules-in-story.md
+++ b/docs/_snippets/addon-a11y-config-rules-in-story.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // ...rest of story file
 
 export const IndividualA11yRulesExample: Story = {
@@ -23,7 +23,7 @@ export const IndividualA11yRulesExample: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 // ...rest of story file
 
 export const IndividualA11yRulesExample = {
@@ -165,3 +165,67 @@ export const IndividualA11yRulesExample = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const IndividualA11yRulesExample = meta.story({
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const IndividualA11yRulesExample = meta.story({
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-config-rulesets-in-preview.md b/docs/_snippets/addon-a11y-config-rulesets-in-preview.md
index e06ccd559029..cc242d556a5f 100644
--- a/docs/_snippets/addon-a11y-config-rulesets-in-preview.md
+++ b/docs/_snippets/addon-a11y-config-rulesets-in-preview.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -20,7 +20,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     a11y: {
@@ -36,3 +36,45 @@ export default {
   },
 };
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    a11y: {
+      options: {
+        /*
+         * Opt in to running WCAG 2.x AAA rules
+         * Note that you must explicitly re-specify the defaults (all but the last array entry)
+         * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter-examples for more details
+         */
+        runOnly: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice', 'wcag2aaa'],
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    a11y: {
+      options: {
+        /*
+         * Opt in to running WCAG 2.x AAA rules
+         * Note that you must explicitly re-specify the defaults (all but the last array entry)
+         * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter-examples for more details
+         */
+        runOnly: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice', 'wcag2aaa'],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-disable.md b/docs/_snippets/addon-a11y-disable.md
index 588c16b2637e..1e4e9c5d5706 100644
--- a/docs/_snippets/addon-a11y-disable.md
+++ b/docs/_snippets/addon-a11y-disable.md
@@ -20,7 +20,7 @@ export const NonA11yStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -37,7 +37,7 @@ export const NonA11yStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -217,3 +217,43 @@ export const ExampleStory: Story = {
   },
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const NonA11yStory = meta.story({
+  globals: {
+    a11y: {
+      // This option disables all automatic a11y checks on this story
+      manual: true,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const NonA11yStory = meta.story({
+  globals: {
+    a11y: {
+      // This option disables all automatic a11y checks on this story
+      manual: true,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-parameter-error-in-preview.md b/docs/_snippets/addon-a11y-parameter-error-in-preview.md
index 4cdced1913a4..8938dff41f35 100644
--- a/docs/_snippets/addon-a11y-parameter-error-in-preview.md
+++ b/docs/_snippets/addon-a11y-parameter-error-in-preview.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -12,7 +12,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // ...
   parameters: {
@@ -21,3 +21,31 @@ export default {
   },
 };
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...
+  parameters: {
+    // 👇 Fail all accessibility tests when violations are found
+    a11y: { test: 'error' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...
+  parameters: {
+    // 👇 Fail all accessibility tests when violations are found
+    a11y: { test: 'error' },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-parameter-example.md b/docs/_snippets/addon-a11y-parameter-example.md
index 42df11421336..e57bdca01097 100644
--- a/docs/_snippets/addon-a11y-parameter-example.md
+++ b/docs/_snippets/addon-a11y-parameter-example.md
@@ -28,7 +28,7 @@ export const NoA11yFail: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -59,7 +59,7 @@ export const NoA11yFail: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -252,3 +252,59 @@ export const NoA11yFail = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    // 👇 Applies to all stories in this file
+    a11y: { test: 'error' },
+  },
+});
+
+// 👇 This story will use the 'error' value and fail on accessibility violations
+export const Primary = meta.story({
+  args: { primary: true },
+});
+
+// 👇 This story will not fail on accessibility violations
+//    (but will still run the tests and show warnings)
+export const NoA11yFail = meta.story({
+  parameters: {
+    a11y: { test: 'todo' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    // 👇 Applies to all stories in this file
+    a11y: { test: 'error' },
+  },
+});
+
+// 👇 This story will use the 'error' value and fail on accessibility violations
+export const Primary = meta.story({
+  args: { primary: true },
+});
+
+// 👇 This story will not fail on accessibility violations
+//    (but will still run the tests and show warnings)
+export const NoA11yFail = meta.story({
+  parameters: {
+    a11y: { test: 'todo' },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-parameter-remove.md b/docs/_snippets/addon-a11y-parameter-remove.md
index 2b376f75a269..2108405d0b64 100644
--- a/docs/_snippets/addon-a11y-parameter-remove.md
+++ b/docs/_snippets/addon-a11y-parameter-remove.md
@@ -13,7 +13,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -25,7 +25,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import { Meta } from '@storybook/your-framework';
 
@@ -41,18 +41,6 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
-import { Button } from './Button';
-
-export default {
-  component: Button,
-  parameters: {
-    // 👇 Remove this once all stories pass accessibility tests
-    // a11y: { test: 'todo' },
-  },
-};
-```
-
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -135,3 +123,33 @@ export default {
   },
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    // 👇 Remove this once all stories pass accessibility tests
+    // a11y: { test: 'todo' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    // 👇 Remove this once all stories pass accessibility tests
+    // a11y: { test: 'todo' },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-parameter-todo-in-meta.md b/docs/_snippets/addon-a11y-parameter-todo-in-meta.md
index 55d88e8295aa..81e2f6b28bae 100644
--- a/docs/_snippets/addon-a11y-parameter-todo-in-meta.md
+++ b/docs/_snippets/addon-a11y-parameter-todo-in-meta.md
@@ -14,7 +14,7 @@ const meta: Meta<DataTable> = {
 export default meta;
 ```
 
-```ts filename="DataTable.stories.ts" renderer="common" language="ts"
+```ts filename="DataTable.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import { Meta } from '@storybook/your-framework';
 
@@ -31,7 +31,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="DataTable.stories.js" renderer="common" language="js"
+```js filename="DataTable.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { DataTable } from './DataTable';
 
 export default {
@@ -132,3 +132,34 @@ export default {
   },
 };
 ```
+
+```ts filename="DataTable.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { DataTable } from './DataTable';
+
+const meta = preview.meta({
+  component: DataTable,
+  parameters: {
+    // 👇 This component's accessibility tests will not fail
+    //    Instead, they display warnings in the Storybook UI
+    a11y: { test: 'todo' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="DataTable.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { DataTable } from './DataTable';
+
+const meta = preview.meta({
+  component: DataTable,
+  parameters: {
+    // 👇 This component's accessibility tests will not fail
+    //    Instead, they display warnings in the Storybook UI
+    a11y: { test: 'todo' },
+  },
+});
+```
diff --git a/docs/_snippets/addon-a11y-register.md b/docs/_snippets/addon-a11y-register.md
index 68dd675663a0..703e6725f7ca 100644
--- a/docs/_snippets/addon-a11y-register.md
+++ b/docs/_snippets/addon-a11y-register.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
   framework: '@storybook/your-framework',
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -25,3 +25,34 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y', //👈 The a11y addon goes here
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y', //👈 The a11y addon goes here
+  ],
+});
+```
diff --git a/docs/_snippets/addon-actions-action-function.md b/docs/_snippets/addon-actions-action-function.md
index acbf88cfe775..7ca0bf1c6ab0 100644
--- a/docs/_snippets/addon-actions-action-function.md
+++ b/docs/_snippets/addon-actions-action-function.md
@@ -48,7 +48,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
 import Button from './Button';
@@ -99,7 +99,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -145,3 +145,36 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { action } from 'storybook/actions';
+
+import Button from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { action } from 'storybook/actions';
+
+import Button from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+});
+```
diff --git a/docs/_snippets/addon-backgrounds-define-globals.md b/docs/_snippets/addon-backgrounds-define-globals.md
index 8871bac77f8b..2e6541b1c31b 100644
--- a/docs/_snippets/addon-backgrounds-define-globals.md
+++ b/docs/_snippets/addon-backgrounds-define-globals.md
@@ -114,7 +114,7 @@ export const OnDark: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -133,7 +133,7 @@ export const OnDark = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework (e.g., react-vite, vue3-vite, etc.)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -196,3 +196,46 @@ export const OnDark: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set background value for all component stories
+    backgrounds: { value: 'gray', grid: false },
+  },
+});
+
+export const OnDark = meta.story({
+  globals: {
+    // 👇 Override background value for this story
+    backgrounds: { value: 'dark' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set background value for all component stories
+    backgrounds: { value: 'gray', grid: false },
+  },
+});
+
+export const OnDark = meta.story({
+  globals: {
+    // 👇 Override background value for this story
+    backgrounds: { value: 'dark' },
+  },
+});
+```
diff --git a/docs/_snippets/addon-backgrounds-disabled.md b/docs/_snippets/addon-backgrounds-disabled.md
index 0bb251340198..2c460abf60d7 100644
--- a/docs/_snippets/addon-backgrounds-disabled.md
+++ b/docs/_snippets/addon-backgrounds-disabled.md
@@ -1,3 +1,57 @@
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+};
+
+export const Large = {
+  parameters: {
+    backgrounds: { disable: true },
+  },
+};
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Large: Story = {
+  parameters: {
+    backgrounds: { disable: true },
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+// Replace your-framework with svelte-vite or sveltekit
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Large: Story = {
+  parameters: {
+    backgrounds: { disable: true },
+  },
+};
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -50,56 +104,35 @@ export const Large = {
 />
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF"
-// Replace your-framework with svelte-vite or sveltekit
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import Button from './Button.svelte';
-
-const meta = {
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
 
-export const Large: Story = {
-  parameters: {
-    backgrounds: { disable: true },
-  },
-};
-```
-
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
-export default {
+const meta = preview.meta({
   component: Button,
-};
+});
 
-export const Large = {
+export const Large = meta.story({
   parameters: {
     backgrounds: { disable: true },
   },
-};
+});
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
-import type { Meta, StoryObj } from '@storybook/your-framework';
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
 import { Button } from './Button';
 
-const meta = {
+const meta = preview.meta({
   component: Button,
-} satisfies Meta<typeof Button>;
+});
 
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Large: Story = {
+export const Large = meta.story({
   parameters: {
     backgrounds: { disable: true },
   },
-};
+});
 ```
diff --git a/docs/_snippets/addon-backgrounds-grid.md b/docs/_snippets/addon-backgrounds-grid.md
index 93cc6b730ad2..0b79575dc124 100644
--- a/docs/_snippets/addon-backgrounds-grid.md
+++ b/docs/_snippets/addon-backgrounds-grid.md
@@ -115,7 +115,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 // To apply a grid to all stories of Button:
@@ -135,7 +135,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -199,3 +199,47 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+// To apply a set of backgrounds to all stories of Button:
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      grid: {
+        cellSize: 20,
+        opacity: 0.5,
+        cellAmount: 5,
+        offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      grid: {
+        cellSize: 20,
+        opacity: 0.5,
+        cellAmount: 5,
+        offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-backgrounds-options-in-meta.md b/docs/_snippets/addon-backgrounds-options-in-meta.md
index 32566fdf0688..8c69506c6cab 100644
--- a/docs/_snippets/addon-backgrounds-options-in-meta.md
+++ b/docs/_snippets/addon-backgrounds-options-in-meta.md
@@ -56,7 +56,7 @@ const meta: Meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -74,7 +74,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -221,3 +221,44 @@ const meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Override the default `dark` option
+        dark: { name: 'Dark', value: '#000' },
+        // 👇 Add a new option
+        gray: { name: 'Gray', value: '#CCC' },
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Override the default `dark` option
+        dark: { name: 'Dark', value: '#000' },
+        // 👇 Add a new option
+        gray: { name: 'Gray', value: '#CCC' },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-backgrounds-options-in-preview.md b/docs/_snippets/addon-backgrounds-options-in-preview.md
index 6cb57383aeed..7b8e9f0b2fd0 100644
--- a/docs/_snippets/addon-backgrounds-options-in-preview.md
+++ b/docs/_snippets/addon-backgrounds-options-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     backgrounds: {
@@ -18,7 +18,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -42,3 +42,51 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Default options
+        dark: { name: 'Dark', value: '#333' },
+        light: { name: 'Light', value: '#F7F9F2' },
+        // 👇 Add your own
+        maroon: { name: 'Maroon', value: '#400' },
+      },
+    },
+  },
+  initialGlobals: {
+    // 👇 Set the initial background color
+    backgrounds: { value: 'light' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Default options
+        dark: { name: 'Dark', value: '#333' },
+        light: { name: 'Light', value: '#F7F9F2' },
+        // 👇 Add your own
+        maroon: { name: 'Maroon', value: '#400' },
+      },
+    },
+  },
+  initialGlobals: {
+    // 👇 Set the initial background color
+    backgrounds: { value: 'light' },
+  },
+});
+```
diff --git a/docs/_snippets/addon-docs-options.md b/docs/_snippets/addon-docs-options.md
index ae47ce868ccb..2365c5b5a097 100644
--- a/docs/_snippets/addon-docs-options.md
+++ b/docs/_snippets/addon-docs-options.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="common"
+```ts filename=".storybook/main.ts" renderer="common" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,10 +23,9 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```js filename=".storybook/main.js" renderer="common"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
-
+```js filename=".storybook/main.js" renderer="common" tabTitle="CSF 3"
 export default {
+  // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -44,3 +43,51 @@ export default {
   ],
 };
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        csfPluginOptions: null,
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [],
+          },
+        },
+      },
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        csfPluginOptions: null,
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [],
+          },
+        },
+      },
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/addon-viewport-add-viewport-in-preview.md b/docs/_snippets/addon-viewport-add-viewport-in-preview.md
index 8b4e1c1a13db..df5fc9500856 100644
--- a/docs/_snippets/addon-viewport-add-viewport-in-preview.md
+++ b/docs/_snippets/addon-viewport-add-viewport-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
 
 const kindleViewports = {
@@ -30,7 +30,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -66,3 +66,75 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
+
+const kindleViewports = {
+  kindleFire2: {
+    name: 'Kindle Fire 2',
+    styles: {
+      width: '600px',
+      height: '963px',
+    },
+  },
+  kindleFireHD: {
+    name: 'Kindle Fire HD',
+    styles: {
+      width: '533px',
+      height: '801px',
+    },
+  },
+};
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      options: {
+        ...MINIMAL_VIEWPORTS,
+        ...kindleViewports,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
+
+const kindleViewports = {
+  kindleFire2: {
+    name: 'Kindle Fire 2',
+    styles: {
+      width: '600px',
+      height: '963px',
+    },
+  },
+  kindleFireHD: {
+    name: 'Kindle Fire HD',
+    styles: {
+      width: '533px',
+      height: '801px',
+    },
+  },
+};
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      options: {
+        ...MINIMAL_VIEWPORTS,
+        ...kindleViewports,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-viewport-configuration-in-meta.md b/docs/_snippets/addon-viewport-configuration-in-meta.md
index 227c83573ec5..ad5cd226e38b 100644
--- a/docs/_snippets/addon-viewport-configuration-in-meta.md
+++ b/docs/_snippets/addon-viewport-configuration-in-meta.md
@@ -53,7 +53,7 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import { MyComponent } from './MyComponent';
@@ -69,7 +69,7 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -234,3 +234,40 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-viewport-define-globals.md b/docs/_snippets/addon-viewport-define-globals.md
index dd4e00774fc9..f1a04d074c78 100644
--- a/docs/_snippets/addon-viewport-define-globals.md
+++ b/docs/_snippets/addon-viewport-define-globals.md
@@ -112,7 +112,7 @@ export const OnPhone: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -131,7 +131,7 @@ export const OnPhone = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -194,3 +194,46 @@ export const OnPhone: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set viewport for all component stories
+    viewport: { value: 'tablet', isRotated: false },
+  },
+});
+
+export const OnPhone = meta.story({
+  globals: {
+    // 👇 Override viewport for this story
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set viewport for all component stories
+    viewport: { value: 'tablet', isRotated: false },
+  },
+});
+
+export const OnPhone = meta.story({
+  globals: {
+    // 👇 Override viewport for this story
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+});
+```
diff --git a/docs/_snippets/addon-viewport-options-in-preview.md b/docs/_snippets/addon-viewport-options-in-preview.md
index 6a39ca522f2c..7f355a96d6c5 100644
--- a/docs/_snippets/addon-viewport-options-in-preview.md
+++ b/docs/_snippets/addon-viewport-options-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 export default {
@@ -13,7 +13,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -32,3 +32,41 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+  initialGlobals: {
+    viewport: { value: 'ipad', isRotated: false },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+  initialGlobals: {
+    viewport: { value: 'ipad', isRotated: false },
+  },
+});
+```
diff --git a/docs/_snippets/after-each-in-meta.md b/docs/_snippets/after-each-in-meta.md
index e0868d17a206..484075a2b09c 100644
--- a/docs/_snippets/after-each-in-meta.md
+++ b/docs/_snippets/after-each-in-meta.md
@@ -60,7 +60,7 @@ export const Default = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="common" language="js"
+```js filename="Page.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Page } from './Page';
 
 export default {
@@ -123,7 +123,7 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts"
+```ts filename="Page.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -183,3 +183,44 @@ export const Default: Story = {
   },
 };
 ```
+
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+});
+
+export const Default = meta.story({
+  async play({ canvas }) {
+    // ...
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+});
+
+export const Default = meta.story({
+  async play({ canvas }) {
+    // ...
+  },
+});
+```
diff --git a/docs/_snippets/api-doc-block-argtypes-parameter.md b/docs/_snippets/api-doc-block-argtypes-parameter.md
index 6d16a8471867..4d3fb95950a7 100644
--- a/docs/_snippets/api-doc-block-argtypes-parameter.md
+++ b/docs/_snippets/api-doc-block-argtypes-parameter.md
@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -93,7 +93,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -136,3 +136,34 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/api-doc-block-canvas-parameter.md b/docs/_snippets/api-doc-block-canvas-parameter.md
index b1be5ba537ce..2b822406ba19 100644
--- a/docs/_snippets/api-doc-block-canvas-parameter.md
+++ b/docs/_snippets/api-doc-block-canvas-parameter.md
@@ -55,7 +55,7 @@ export const Basic = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -113,7 +113,7 @@ export const Basic: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -169,3 +169,40 @@ export const Basic: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/api-doc-block-controls-parameter.md b/docs/_snippets/api-doc-block-controls-parameter.md
index dcbb0247d721..5ba2a13a6eb5 100644
--- a/docs/_snippets/api-doc-block-controls-parameter.md
+++ b/docs/_snippets/api-doc-block-controls-parameter.md
@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -93,7 +93,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -141,3 +141,34 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/api-doc-block-description-example.md b/docs/_snippets/api-doc-block-description-example.md
index c434aecbe042..73052ffe4c9a 100644
--- a/docs/_snippets/api-doc-block-description-example.md
+++ b/docs/_snippets/api-doc-block-description-example.md
@@ -107,7 +107,7 @@ export const Primary = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 /**
@@ -217,7 +217,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -324,3 +324,70 @@ export const Primary: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+/**
+ * Button stories
+ * These stories showcase the button
+ */
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Another description, overriding the comments',
+      },
+    },
+  },
+});
+
+/**
+ * Primary Button
+ * This is the primary button
+ */
+export const Primary = meta.story({
+  parameters: {
+    docs: {
+      description: {
+        story: 'Another description on the story, overriding the comments',
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Another description, overriding the comments',
+      },
+    },
+  },
+});
+
+/**
+ * Primary Button
+ * This is the primary button
+ */
+export const Primary = meta.story({
+  parameters: {
+    docs: {
+      description: {
+        story: 'Another description on the story, overriding the comments',
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/api-doc-block-source-parameter.md b/docs/_snippets/api-doc-block-source-parameter.md
index 439617895c8c..6c9897cc3d49 100644
--- a/docs/_snippets/api-doc-block-source-parameter.md
+++ b/docs/_snippets/api-doc-block-source-parameter.md
@@ -55,7 +55,7 @@ export const Basic = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -113,7 +113,7 @@ export const Basic: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -169,3 +169,40 @@ export const Basic: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'tsx' },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'jsx' },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/api-doc-block-story-parameter.md b/docs/_snippets/api-doc-block-story-parameter.md
index 4ef032bc03bd..8504171cac50 100644
--- a/docs/_snippets/api-doc-block-story-parameter.md
+++ b/docs/_snippets/api-doc-block-story-parameter.md
@@ -55,7 +55,7 @@ export const Basic = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -113,7 +113,7 @@ export const Basic: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -169,3 +169,40 @@ export const Basic: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      story: { autoplay: true },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      story: { autoplay: true },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-control.md b/docs/_snippets/arg-types-control.md
index 52e24d3a80ff..069c150c40df 100644
--- a/docs/_snippets/arg-types-control.md
+++ b/docs/_snippets/arg-types-control.md
@@ -60,7 +60,7 @@ export default {
 };
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -123,7 +123,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -181,3 +181,44 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-default-value.md b/docs/_snippets/arg-types-default-value.md
index 374026fd20e5..eee71b8c5160 100644
--- a/docs/_snippets/arg-types-default-value.md
+++ b/docs/_snippets/arg-types-default-value.md
@@ -60,7 +60,7 @@ export default {
 };
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -123,7 +123,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -181,3 +181,44 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      // ❌ Deprecated
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      // ⛔️ Deprecated, do not use
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-description.md b/docs/_snippets/arg-types-description.md
index bda4e8091992..50e25f2867bc 100644
--- a/docs/_snippets/arg-types-description.md
+++ b/docs/_snippets/arg-types-description.md
@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -93,7 +93,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -136,3 +136,34 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-if.md b/docs/_snippets/arg-types-if.md
index 5355cd73dba4..7a38680e4a15 100644
--- a/docs/_snippets/arg-types-if.md
+++ b/docs/_snippets/arg-types-if.md
@@ -111,7 +111,7 @@ export default {
 };
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -225,7 +225,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -334,3 +334,78 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-in-meta.md b/docs/_snippets/arg-types-in-meta.md
index 9de893b0b68b..c4316abedefa 100644
--- a/docs/_snippets/arg-types-in-meta.md
+++ b/docs/_snippets/arg-types-in-meta.md
@@ -51,7 +51,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -105,7 +105,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -154,3 +154,38 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-in-preview.md b/docs/_snippets/arg-types-in-preview.md
index cd422e2c99e7..9a536e659576 100644
--- a/docs/_snippets/arg-types-in-preview.md
+++ b/docs/_snippets/arg-types-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   argTypes: {
     // 👇 All stories expect a label arg
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -26,3 +26,35 @@ const preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-in-story.md b/docs/_snippets/arg-types-in-story.md
index 2f0312196f14..4da2c5716cd8 100644
--- a/docs/_snippets/arg-types-in-story.md
+++ b/docs/_snippets/arg-types-in-story.md
@@ -59,7 +59,7 @@ export const Basic = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -120,7 +120,7 @@ export const Basic = {
 } satisfies Story;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -180,3 +180,44 @@ export const Basic: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-mapping.md b/docs/_snippets/arg-types-mapping.md
index 119839453ecd..2877d15799b3 100644
--- a/docs/_snippets/arg-types-mapping.md
+++ b/docs/_snippets/arg-types-mapping.md
@@ -88,7 +88,7 @@ export default meta;
 {/snippet}
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -106,7 +106,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -168,3 +168,44 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    label: {
+      control: { type: 'select' },
+      options: ['Normal', 'Bold', 'Italic'],
+      mapping: {
+        Bold: <b>Bold</b>,
+        Italic: <i>Italic</i>,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    label: {
+      control: { type: 'select' },
+      options: ['Normal', 'Bold', 'Italic'],
+      mapping: {
+        Bold: <b>Bold</b>,
+        Italic: <i>Italic</i>,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-name.md b/docs/_snippets/arg-types-name.md
index 9ae358997393..248ddcb7bc13 100644
--- a/docs/_snippets/arg-types-name.md
+++ b/docs/_snippets/arg-types-name.md
@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -93,7 +93,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -136,3 +136,34 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-options.md b/docs/_snippets/arg-types-options.md
index cf678b5fd223..fcec0bc5b7d6 100644
--- a/docs/_snippets/arg-types-options.md
+++ b/docs/_snippets/arg-types-options.md
@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -104,7 +104,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -147,3 +147,34 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-table.md b/docs/_snippets/arg-types-table.md
index 0dcd4b37737b..75b8af72fa15 100644
--- a/docs/_snippets/arg-types-table.md
+++ b/docs/_snippets/arg-types-table.md
@@ -54,7 +54,7 @@ export default {
 };
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -111,7 +111,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -163,3 +163,40 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-type.md b/docs/_snippets/arg-types-type.md
index 1b0be68bc4a4..0008b3e54678 100644
--- a/docs/_snippets/arg-types-type.md
+++ b/docs/_snippets/arg-types-type.md
@@ -39,7 +39,7 @@ export default {
 };
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -81,7 +81,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -118,3 +118,30 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+});
+```
diff --git a/docs/_snippets/args-in-preview.md b/docs/_snippets/args-in-preview.md
index 8ea4705f8baa..5b79f4ff2313 100644
--- a/docs/_snippets/args-in-preview.md
+++ b/docs/_snippets/args-in-preview.md
@@ -1,11 +1,11 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // The default value of the theme arg for all stories
   args: { theme: 'light' },
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -16,3 +16,25 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+});
+```
diff --git a/docs/_snippets/automock-register-full.md b/docs/_snippets/automock-register-full.md
index 5bcaaad2b28d..0c9153273598 100644
--- a/docs/_snippets/automock-register-full.md
+++ b/docs/_snippets/automock-register-full.md
@@ -1,4 +1,6 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, vue3-vite, sveltekit)
+import type { Preview } from '@storybook/your-framework';
 import { sb } from 'storybook/test';
 
 // 👇 Automatically replaces all exports from the `lib/session` local module with mock functions
@@ -6,10 +8,48 @@ sb.mock(import('../lib/session.ts'));
 // 👇 Automatically replaces all exports from the `uuid` package in `node_modules` with mock functions
 sb.mock(import('uuid'));
 
-// ...rest of the file
+const preview: Preview = {
+  // ...
+};
+
+export default preview;
+```
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
+import { sb } from 'storybook/test';
+
+// 👇 Automatically replaces all exports from the `lib/session` local module with mock functions
+sb.mock('../lib/session.js');
+// 👇 Automatically replaces all exports from the `uuid` package in `node_modules` with mock functions
+sb.mock('uuid');
+
+export default {
+  // ...
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { sb } from 'storybook/test';
+
+// 👇 Automatically replaces all exports from the `lib/session` local module with mock functions
+sb.mock(import('../lib/session.ts'));
+// 👇 Automatically replaces all exports from the `uuid` package in `node_modules` with mock functions
+sb.mock(import('uuid'));
+
+export default definePreview({
+  // ...
+});
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
 import { sb } from 'storybook/test';
 
 // 👇 Automatically replaces all exports from the `lib/session` local module with mock functions
@@ -17,5 +57,7 @@ sb.mock('../lib/session.js');
 // 👇 Automatically replaces all exports from the `uuid` package in `node_modules` with mock functions
 sb.mock('uuid');
 
-// ...rest of the file
+export default definePreview({
+  // ...
+});
 ```
diff --git a/docs/_snippets/automock-register-mock-file.md b/docs/_snippets/automock-register-mock-file.md
index a4febca91487..24e957e939c8 100644
--- a/docs/_snippets/automock-register-mock-file.md
+++ b/docs/_snippets/automock-register-mock-file.md
@@ -1,4 +1,6 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, vue3-vite, sveltekit)
+import type { Preview } from '@storybook/your-framework';
 import { sb } from 'storybook/test';
 
 // 👇 Replaces imports of this module with imports to `../lib/__mocks__/session.ts`
@@ -6,10 +8,48 @@ sb.mock(import('../lib/session.ts'));
 // 👇 Replaces imports of this module with imports to `../__mocks__/uuid.ts`
 sb.mock(import('uuid'));
 
-// ...rest of the file
+const preview: Preview = {
+  // ...
+};
+
+export default preview;
+```
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
+import { sb } from 'storybook/test';
+
+// 👇 Replaces imports of this module with imports to `../lib/__mocks__/session.ts`
+sb.mock('../lib/session.js');
+// 👇 Replaces imports of this module with imports to `../__mocks__/uuid.ts`
+sb.mock('uuid');
+
+export default {
+  // ...
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { sb } from 'storybook/test';
+
+// 👇 Replaces imports of this module with imports to `../lib/__mocks__/session.ts`
+sb.mock(import('../lib/session.ts'));
+// 👇 Replaces imports of this module with imports to `../__mocks__/uuid.ts`
+sb.mock(import('uuid'));
+
+export default definePreview({
+  // ...
+});
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
 import { sb } from 'storybook/test';
 
 // 👇 Replaces imports of this module with imports to `../lib/__mocks__/session.ts`
@@ -17,5 +57,7 @@ sb.mock('../lib/session.js');
 // 👇 Replaces imports of this module with imports to `../__mocks__/uuid.ts`
 sb.mock('uuid');
 
-// ...rest of the file
+export default definePreview({
+  // ...
+});
 ```
diff --git a/docs/_snippets/automock-register-spy.md b/docs/_snippets/automock-register-spy.md
index 15486afa63b0..87c4337728f7 100644
--- a/docs/_snippets/automock-register-spy.md
+++ b/docs/_snippets/automock-register-spy.md
@@ -1,4 +1,6 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, vue3-vite, sveltekit)
+import type { Preview } from '@storybook/your-framework';
 import { sb } from 'storybook/test';
 
 // 👇 Automatically spies on all exports from the `lib/session` local module
@@ -6,10 +8,48 @@ sb.mock(import('../lib/session.ts'), { spy: true });
 // 👇 Automatically spies on all exports from the `uuid` package in `node_modules`
 sb.mock(import('uuid'), { spy: true });
 
-// ...rest of the file
+const preview: Preview = {
+  // ...
+};
+
+export default preview;
+```
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
+import { sb } from 'storybook/test';
+
+// 👇 Automatically spies on all exports from the `lib/session` local module
+sb.mock('../lib/session.js', { spy: true });
+// 👇 Automatically spies on all exports from the `uuid` package in `node_modules`
+sb.mock('uuid', { spy: true });
+
+export default {
+  // ...
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { sb } from 'storybook/test';
+
+// 👇 Automatically spies on all exports from the `lib/session` local module
+sb.mock(import('../lib/session.ts'), { spy: true });
+// 👇 Automatically spies on all exports from the `uuid` package in `node_modules`
+sb.mock(import('uuid'), { spy: true });
+
+export default definePreview({
+  // ...
+});
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
 import { sb } from 'storybook/test';
 
 // 👇 Automatically spies on all exports from the `lib/session` local module
@@ -17,5 +57,7 @@ sb.mock('../lib/session.js', { spy: true });
 // 👇 Automatically spies on all exports from the `uuid` package in `node_modules`
 sb.mock('uuid', { spy: true });
 
-// ...rest of the file
+export default definePreview({
+  // ...
+});
 ```
diff --git a/docs/_snippets/automocked-modules-in-story.md b/docs/_snippets/automocked-modules-in-story.md
index 9aa23a41f93f..072641661fda 100644
--- a/docs/_snippets/automocked-modules-in-story.md
+++ b/docs/_snippets/automocked-modules-in-story.md
@@ -31,7 +31,7 @@ export const LogIn: Story = {
 };
 ```
 
-```ts filename="AuthButton.stories.ts" renderer="common" language="ts"
+```ts filename="AuthButton.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework (e.g. react-vite, vue3-vite, etc.)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { expect, mocked } from 'storybook/test';
@@ -65,7 +65,7 @@ export const LogIn: Story = {
 };
 ```
 
-```js filename="AuthButton.stories.js" renderer="common" language="js"
+```js filename="AuthButton.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 import { AuthButton } from './AuthButton';
@@ -280,3 +280,65 @@ export const LogIn = {
   },
 };
 ```
+
+```ts filename="AuthButton.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect, mocked } from 'storybook/test';
+
+import { AuthButton } from './AuthButton';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+const meta = preview.meta({
+  component: AuthButton,
+  // 👇 This will run before each story is rendered
+  beforeEach: async () => {
+    // 👇 Force known, consistent behavior for mocked modules
+    mocked(uuidv4).mockReturnValue('1234-5678-90ab-cdef');
+    mocked(getUserFromSession).mockReturnValue({ name: 'John Doe' });
+  },
+});
+
+export const LogIn = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="AuthButton.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect } from 'storybook/test';
+
+import { AuthButton } from './AuthButton';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+const meta = preview.meta({
+  component: AuthButton,
+  // 👇 This will run before each story is rendered
+  beforeEach: async () => {
+    // 👇 Force known, consistent behavior for mocked modules
+    uuidv4.mockReturnValue('1234-5678-90ab-cdef');
+    getUserFromSession.mockReturnValue({ name: 'John Doe' });
+  },
+});
+
+export const LogIn = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  },
+});
+```
diff --git a/docs/_snippets/before-all-in-preview.md b/docs/_snippets/before-all-in-preview.md
index 7773888531c5..64367a724e5c 100644
--- a/docs/_snippets/before-all-in-preview.md
+++ b/docs/_snippets/before-all-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { init } from '../project-bootstrap';
 
 export default {
@@ -8,7 +8,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -22,3 +22,31 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { init } from '../project-bootstrap';
+
+export default definePreview({
+  async beforeAll() {
+    await init();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { init } from '../project-bootstrap';
+
+export default definePreview({
+  async beforeAll() {
+    await init();
+  },
+});
+```
diff --git a/docs/_snippets/before-each-in-meta-mock-date.md b/docs/_snippets/before-each-in-meta-mock-date.md
index e8fbb65e91ef..6824c0b9053d 100644
--- a/docs/_snippets/before-each-in-meta-mock-date.md
+++ b/docs/_snippets/before-each-in-meta-mock-date.md
@@ -81,7 +81,7 @@ export const Default = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="common" language="js"
+```js filename="Page.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 import { Page } from './Page';
@@ -165,7 +165,7 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts"
+```ts filename="Page.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -246,3 +246,58 @@ export const Default: Story = {
   },
 };
 ```
+
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MockDate from 'mockdate';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Set the value of Date for every story in the file
+  async beforeEach() {
+    MockDate.set('2024-02-14');
+
+    // 👇 Reset the Date after each story
+    return () => {
+      MockDate.reset();
+    };
+  },
+});
+
+export const Default = meta.story({
+  async play({ canvas }) {
+    // ... This will run with the mocked Date
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import MockDate from 'mockdate';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Set the value of Date for every story in the file
+  async beforeEach() {
+    MockDate.set('2024-02-14');
+
+    // 👇 Reset the Date after each story
+    return () => {
+      MockDate.reset();
+    };
+  },
+});
+
+export const Default = meta.story({
+  async play({ canvas }) {
+    // ... This will run with the mocked Date
+  },
+});
+```
diff --git a/docs/_snippets/before-each-in-preview.md b/docs/_snippets/before-each-in-preview.md
index 7e783a78bcbf..4a1a369ec8b0 100644
--- a/docs/_snippets/before-each-in-preview.md
+++ b/docs/_snippets/before-each-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 export default {
@@ -8,7 +8,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -22,3 +22,31 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import MockDate from 'mockdate';
+
+export default definePreview({
+  async beforeEach() {
+    MockDate.reset();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import MockDate from 'mockdate';
+
+export default definePreview({
+  async beforeEach() {
+    MockDate.reset();
+  },
+});
+```
diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index b1471d6daffd..803807e2638f 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -32,7 +32,7 @@ export const Pair: Story = {
 };
 ```
 
-```js filename="ButtonGroup.stories.js|jsx" renderer="react" language="js"
+```js filename="ButtonGroup.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { ButtonGroup } from '../ButtonGroup';
 
 //👇 Imports the Button stories
@@ -50,7 +50,7 @@ export const Pair = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -299,3 +299,44 @@ export const Pair: Story = {
   },
 };
 ```
+
+```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: ButtonGroup,
+});
+
+export const Pair = meta.story({
+  args: {
+    buttons: [{ ...ButtonStories.Primary.input.args }, { ...ButtonStories.Secondary.input.args }],
+    orientation: 'horizontal',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="ButtonGroup.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { ButtonGroup } from '../ButtonGroup';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: ButtonGroup,
+});
+
+export const Pair = meta.story({
+  args: {
+    buttons: [{ ...ButtonStories.Primary.input.args }, { ...ButtonStories.Secondary.input.args }],
+    orientation: 'horizontal',
+  },
+});
+```
diff --git a/docs/_snippets/button-story-argtypes-with-categories.md b/docs/_snippets/button-story-argtypes-with-categories.md
index 1108739844fe..fde3403910b2 100644
--- a/docs/_snippets/button-story-argtypes-with-categories.md
+++ b/docs/_snippets/button-story-argtypes-with-categories.md
@@ -42,7 +42,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -82,7 +82,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -206,3 +206,88 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // Assigns the argTypes to the Colors category
+    backgroundColor: {
+      control: 'color',
+      table: {
+        category: 'Colors',
+      },
+    },
+    primary: {
+      table: {
+        category: 'Colors',
+      },
+    },
+    // Assigns the argType to the Text category
+    label: {
+      table: {
+        category: 'Text',
+      },
+    },
+    // Assigns the argType to the Events category
+    onClick: {
+      table: {
+        category: 'Events',
+      },
+    },
+    // Assigns the argType to the Sizes category
+    size: {
+      table: {
+        category: 'Sizes',
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // Assigns the argTypes to the Colors category
+    backgroundColor: {
+      control: 'color',
+      table: {
+        category: 'Colors',
+      },
+    },
+    primary: {
+      table: {
+        category: 'Colors',
+      },
+    },
+    // Assigns the argType to the Text category
+    label: {
+      table: {
+        category: 'Text',
+      },
+    },
+    // Assigns the argType to the Events category
+    onClick: {
+      table: {
+        category: 'Events',
+      },
+    },
+    // Assigns the argType to the Sizes category
+    size: {
+      table: {
+        category: 'Sizes',
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/button-story-argtypes-with-subcategories.md b/docs/_snippets/button-story-argtypes-with-subcategories.md
index aa735d2be63a..631b8430d65c 100644
--- a/docs/_snippets/button-story-argtypes-with-subcategories.md
+++ b/docs/_snippets/button-story-argtypes-with-subcategories.md
@@ -46,7 +46,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -90,7 +90,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -226,3 +226,96 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // Assigns the argTypes to the Colors category
+    backgroundColor: {
+      control: 'color',
+      table: {
+        category: 'Colors',
+        // Assigns the argTypes to a specific subcategory
+        subcategory: 'Button colors',
+      },
+    },
+    primary: {
+      table: {
+        category: 'Colors',
+        subcategory: 'Button style',
+      },
+    },
+    label: {
+      table: {
+        category: 'Text',
+        subcategory: 'Button contents',
+      },
+    },
+    // Assigns the argType to the Events category
+    onClick: {
+      table: {
+        category: 'Events',
+        subcategory: 'Button Events',
+      },
+    },
+    // Assigns the argType to the Sizes category
+    size: {
+      table: {
+        category: 'Sizes',
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // Assigns the argTypes to the Colors category
+    backgroundColor: {
+      control: 'color',
+      table: {
+        category: 'Colors',
+        // Assigns the argTypes to a specific subcategory
+        subcategory: 'Button colors',
+      },
+    },
+    primary: {
+      table: {
+        category: 'Colors',
+        subcategory: 'Button style',
+      },
+    },
+    label: {
+      table: {
+        category: 'Text',
+        subcategory: 'Button contents',
+      },
+    },
+    // Assigns the argType to the Events category
+    onClick: {
+      table: {
+        category: 'Events',
+        subcategory: 'Button Events',
+      },
+    },
+    // Assigns the argType to the Sizes category
+    size: {
+      table: {
+        category: 'Sizes',
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/button-story-baseline.md b/docs/_snippets/button-story-baseline.md
index 127c98f1342c..03c705e5564e 100644
--- a/docs/_snippets/button-story-baseline.md
+++ b/docs/_snippets/button-story-baseline.md
@@ -18,7 +18,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -56,3 +56,20 @@ export const Primary: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+//👇 Throws a type error if the args don't match the component props
+export const Primary = meta.story({
+  args: {
+    primary: true,
+  },
+});
+```
diff --git a/docs/_snippets/button-story-click-handler-args.md b/docs/_snippets/button-story-click-handler-args.md
index 927d9251bb79..dbfdc8c368c7 100644
--- a/docs/_snippets/button-story-click-handler-args.md
+++ b/docs/_snippets/button-story-click-handler-args.md
@@ -31,7 +31,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
 import { Button } from './Button';
@@ -49,7 +49,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -73,7 +73,7 @@ export const Text = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { action } from 'storybook/actions';
 
 import { Button } from './Button';
@@ -271,3 +271,44 @@ export const Text: Story = {
   },
 };
 ```
+
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { action } from 'storybook/actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { action } from 'storybook/actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
+});
+```
diff --git a/docs/_snippets/button-story-click-handler-simplificated.md b/docs/_snippets/button-story-click-handler-simplificated.md
index 53773e175930..3f8ece8cb4f5 100644
--- a/docs/_snippets/button-story-click-handler-simplificated.md
+++ b/docs/_snippets/button-story-click-handler-simplificated.md
@@ -15,7 +15,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -27,7 +27,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -170,3 +170,32 @@ export const Text: Story = {
   args: {},
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {},
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {},
+});
+```
diff --git a/docs/_snippets/button-story-click-handler.md b/docs/_snippets/button-story-click-handler.md
index 8f4e70190185..37295c786e8a 100644
--- a/docs/_snippets/button-story-click-handler.md
+++ b/docs/_snippets/button-story-click-handler.md
@@ -23,7 +23,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
 import { Button } from './Button';
@@ -37,7 +37,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -57,7 +57,7 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { action } from 'storybook/actions';
 
 import { Button } from './Button';
@@ -220,3 +220,36 @@ export const Text: Story = {
   render: () => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
 };
 ```
+
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { action } from 'storybook/actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { action } from 'storybook/actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+});
+```
diff --git a/docs/_snippets/button-story-component-args-primary.md b/docs/_snippets/button-story-component-args-primary.md
index d50be32d8dad..23442d03c23c 100644
--- a/docs/_snippets/button-story-component-args-primary.md
+++ b/docs/_snippets/button-story-component-args-primary.md
@@ -18,7 +18,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -34,7 +34,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -235,3 +235,40 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+});
+```
diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md
index b204637d23fe..15745fdd40a2 100644
--- a/docs/_snippets/button-story-component-decorator.md
+++ b/docs/_snippets/button-story-component-decorator.md
@@ -81,7 +81,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -97,7 +97,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -118,7 +118,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
 export default {
@@ -253,3 +253,40 @@ type Story = StoryObj;
 
 export const Example: Story = {};
 ```
+
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
diff --git a/docs/_snippets/button-story-controls-primary-variant.md b/docs/_snippets/button-story-controls-primary-variant.md
index 21c1d1932b45..511c1e134472 100644
--- a/docs/_snippets/button-story-controls-primary-variant.md
+++ b/docs/_snippets/button-story-controls-primary-variant.md
@@ -45,7 +45,7 @@ export const Primary = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -93,7 +93,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -141,3 +141,36 @@ export const Primary: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    variant: 'primary',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    variant: 'primary',
+  },
+});
+```
diff --git a/docs/_snippets/button-story-controls-radio-group.md b/docs/_snippets/button-story-controls-radio-group.md
index 38bb7900c852..52c9bffc6c73 100644
--- a/docs/_snippets/button-story-controls-radio-group.md
+++ b/docs/_snippets/button-story-controls-radio-group.md
@@ -48,7 +48,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -99,7 +99,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -145,3 +145,36 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/button-story-decorator.md b/docs/_snippets/button-story-decorator.md
index 309658bdf34b..8a838017283b 100644
--- a/docs/_snippets/button-story-decorator.md
+++ b/docs/_snippets/button-story-decorator.md
@@ -28,7 +28,7 @@ export const InsideParent: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -47,7 +47,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -72,7 +72,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
 export default {
@@ -90,7 +90,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="solid" language="ts"
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 
 import { Button } from './Button';
@@ -258,3 +258,46 @@ export const Primary: Story = {
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
 ```
+
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
diff --git a/docs/_snippets/button-story-default-export-with-component.md b/docs/_snippets/button-story-default-export-with-component.md
index 0184082ce8a1..bbb92c917a3f 100644
--- a/docs/_snippets/button-story-default-export-with-component.md
+++ b/docs/_snippets/button-story-default-export-with-component.md
@@ -24,7 +24,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -32,7 +32,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -146,3 +146,24 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+```
diff --git a/docs/_snippets/button-story-default-export.md b/docs/_snippets/button-story-default-export.md
index 4eeef3cab77f..f78209caa45f 100644
--- a/docs/_snippets/button-story-default-export.md
+++ b/docs/_snippets/button-story-default-export.md
@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -93,7 +93,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -156,3 +156,34 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+});
+```
diff --git a/docs/_snippets/button-story-disable-addon.md b/docs/_snippets/button-story-disable-addon.md
index eaf9edc02698..744c672e2e83 100644
--- a/docs/_snippets/button-story-disable-addon.md
+++ b/docs/_snippets/button-story-disable-addon.md
@@ -13,7 +13,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -29,7 +29,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -71,3 +71,40 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  parameters: {
+    myAddon: { disable: true }, // Disables the addon
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  parameters: {
+    myAddon: { disable: true }, // Disables the addon
+  },
+});
+```
diff --git a/docs/_snippets/button-story-grouped.md b/docs/_snippets/button-story-grouped.md
index 7c2109b8453e..e38a5932f04b 100644
--- a/docs/_snippets/button-story-grouped.md
+++ b/docs/_snippets/button-story-grouped.md
@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -93,7 +93,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -128,3 +128,34 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: Button,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: Button,
+});
+```
diff --git a/docs/_snippets/button-story-hoisted.md b/docs/_snippets/button-story-hoisted.md
index e0dc08fc1fec..de806b452b30 100644
--- a/docs/_snippets/button-story-hoisted.md
+++ b/docs/_snippets/button-story-hoisted.md
@@ -19,7 +19,7 @@ type Story = StoryObj<ButtonComponent>;
 export const Button: Story = {};
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button as ButtonComponent } from './Button';
 
 export default {
@@ -35,7 +35,7 @@ export default {
 export const Button = {};
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -81,3 +81,40 @@ type Story = StoryObj;
 // This is the only named export in the file, and it matches the component name
 export const Button: Story = {};
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button as ButtonComponent } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: ButtonComponent,
+});
+
+// This is the only named export in the file, and it matches the component name
+export const Button = meta.story();
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button as ButtonComponent } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: ButtonComponent,
+});
+
+// This is the only named export in the file, and it matches the component name
+export const Button = meta.story();
+```
diff --git a/docs/_snippets/button-story-hypothetical-example.md b/docs/_snippets/button-story-hypothetical-example.md
index cd59632188d0..608576223e18 100644
--- a/docs/_snippets/button-story-hypothetical-example.md
+++ b/docs/_snippets/button-story-hypothetical-example.md
@@ -1,4 +1,4 @@
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -15,7 +15,7 @@ export const Sample = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -37,3 +37,42 @@ export const Sample: Story = {
   }),
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Sample = meta.story({
+  render: () => ({
+    template: '<button :label=label />',
+    data: {
+      label: 'hello button',
+    },
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Sample = meta.story({
+  render: () => ({
+    template: '<button :label=label />',
+    data: {
+      label: 'hello button',
+    },
+  }),
+});
+```
diff --git a/docs/_snippets/button-story-matching-argtypes.md b/docs/_snippets/button-story-matching-argtypes.md
index 96aa49642cf7..d615f7cbcfe5 100644
--- a/docs/_snippets/button-story-matching-argtypes.md
+++ b/docs/_snippets/button-story-matching-argtypes.md
@@ -33,7 +33,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -69,7 +69,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -100,3 +100,26 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+});
+```
diff --git a/docs/_snippets/button-story-onclick-action-spy.md b/docs/_snippets/button-story-onclick-action-spy.md
index 8de986ad45b1..0461a4861721 100644
--- a/docs/_snippets/button-story-onclick-action-spy.md
+++ b/docs/_snippets/button-story-onclick-action-spy.md
@@ -42,7 +42,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { fn } from 'storybook/test';
 
 import { Button } from './Button';
@@ -87,7 +87,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -103,3 +103,32 @@ const meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+});
+```
diff --git a/docs/_snippets/button-story-primary-composition.md b/docs/_snippets/button-story-primary-composition.md
index 08327d019e7b..5d0a83b74624 100644
--- a/docs/_snippets/button-story-primary-composition.md
+++ b/docs/_snippets/button-story-primary-composition.md
@@ -68,7 +68,7 @@ export const Secondary = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -139,7 +139,7 @@ export const Secondary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -211,3 +211,52 @@ export const Secondary: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    primary: false,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    primary: false,
+  },
+});
+```
diff --git a/docs/_snippets/button-story-primary-long-name.md b/docs/_snippets/button-story-primary-long-name.md
index 502762a7c968..30f106263fdd 100644
--- a/docs/_snippets/button-story-primary-long-name.md
+++ b/docs/_snippets/button-story-primary-long-name.md
@@ -72,7 +72,7 @@ export const PrimaryLongName = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -147,7 +147,7 @@ export const PrimaryLongName: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -219,3 +219,52 @@ export const PrimaryLongName: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const PrimaryLongName = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: 'Primary with a really long name',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const PrimaryLongName = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: 'Primary with a really long name',
+  },
+});
+```
diff --git a/docs/_snippets/button-story-rename-story.md b/docs/_snippets/button-story-rename-story.md
index 7769a26bcb5d..d39746896791 100644
--- a/docs/_snippets/button-story-rename-story.md
+++ b/docs/_snippets/button-story-rename-story.md
@@ -59,7 +59,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -76,7 +76,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -289,3 +289,42 @@ export const Primary: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  // 👇 Rename this story
+  name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  // 👇 Rename this story
+  name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+});
+```
diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index 4d474abbf15e..16817189e13a 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -118,7 +118,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -147,7 +147,7 @@ export const Tertiary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -554,3 +554,66 @@ export const Tertiary: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '😄👍😍💯',
+  },
+});
+
+export const Tertiary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '📚📕📈🤓',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '😄👍😍💯',
+  },
+});
+
+export const Tertiary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '📚📕📈🤓',
+  },
+});
+```
diff --git a/docs/_snippets/button-story-with-addon-example.md b/docs/_snippets/button-story-with-addon-example.md
index d2d6823ee58e..7a5b84ba3008 100644
--- a/docs/_snippets/button-story-with-addon-example.md
+++ b/docs/_snippets/button-story-with-addon-example.md
@@ -33,8 +33,8 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
-import React from 'react';
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
+import * as React from 'react';
 
 import { Button } from './Button';
 
@@ -58,7 +58,9 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
+import * as React from 'react';
+
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -92,7 +94,7 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
 export default {
@@ -358,3 +360,64 @@ export const Basic: Story = {
   render: () => html`<custom-button label="Hello"></custom-button>`,
 };
 ```
+
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'This data is passed to the addon',
+    },
+  },
+});
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Basic = meta.story({
+  render: () => <Button>Hello</Button>,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'This data is passed to the addon',
+    },
+  },
+});
+
+export const Basic = meta.story({
+  render: () => <Button>Hello</Button>,
+});
+```
diff --git a/docs/_snippets/button-story-with-args.md b/docs/_snippets/button-story-with-args.md
index d9939ce1466d..dea019fab309 100644
--- a/docs/_snippets/button-story-with-args.md
+++ b/docs/_snippets/button-story-with-args.md
@@ -114,7 +114,7 @@ export const Primary = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -129,7 +129,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -350,3 +350,38 @@ export const Primary: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+});
+```
diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md
index 6f321d990442..08a4ac063c7f 100644
--- a/docs/_snippets/button-story-with-emojis.md
+++ b/docs/_snippets/button-story-with-emojis.md
@@ -105,7 +105,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```ts filename="Button.stories.js|jsx" renderer="react" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -130,7 +130,7 @@ export const Tertiary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -458,3 +458,58 @@ export const Tertiary: Story = {
   render: () => html`<demo-button .backgroundColor="#ff0" .label="📚📕📈🤓"></demo-button>`,
 };
 ```
+
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = meta.story({
+  render: () => <Button backgroundColor="#ff0" label="Button" />,
+});
+
+export const Secondary = meta.story({
+  render: () => <Button backgroundColor="#ff0" label="😄👍😍💯" />,
+});
+
+export const Tertiary = meta.story({
+  render: () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = meta.story({
+  render: () => <Button backgroundColor="#ff0" label="Button" />,
+});
+
+export const Secondary = meta.story({
+  render: () => <Button backgroundColor="#ff0" label="😄👍😍💯" />,
+});
+
+export const Tertiary = meta.story({
+  render: () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />,
+});
+```
diff --git a/docs/_snippets/button-story.md b/docs/_snippets/button-story.md
index 49c836938b34..c469d461d037 100644
--- a/docs/_snippets/button-story.md
+++ b/docs/_snippets/button-story.md
@@ -1,97 +1,5 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { Button } from './button.component';
-
-const meta: Meta<Button> = {
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<Button>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: () => ({
-    props: {
-      label: 'Button',
-      primary: true,
-    },
-  }),
-};
-```
-
-```js filename="Button.stories.js" renderer="html" language="js"
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary = {
-  render: () => {
-    const btn = document.createElement('button');
-    btn.innerText = 'Button';
-
-    btn.className = [
-      'storybook-button',
-      'storybook-button--medium',
-      'storybook-button--primary',
-    ].join(' ');
-
-    return btn;
-  },
-};
-```
-
-```ts filename="Button.stories.ts" renderer="html" language="ts"
-import type { Meta, StoryObj } from '@storybook/html';
-
-const meta: Meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-};
-
-export default meta;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: StoryObj = {
-  render: () => {
-    const btn = document.createElement('button');
-    btn.innerText = 'Button';
-
-    btn.className = [
-      'storybook-button',
-      'storybook-button--medium',
-      'storybook-button--primary',
-    ].join(' ');
-
-    return btn;
-  },
-};
-```
-
-```js filename="Button.stories.js|jsx" renderer="preact" language="js"
-/** @jsx h */
-import { h } from 'preact';
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
+import React, { useState } from 'react';
 
 import { Button } from './Button';
 
@@ -99,34 +7,29 @@ export default {
   component: Button,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary = {
-  render: () => <Button primary label="Button" />,
-};
-```
-
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
-import { Button } from './Button';
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
 
-export default {
-  component: Button,
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Primary = {
-  render: () => <Button primary label="Button" />,
+  render: () => <ButtonWithHooks />,
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
+import React, { useState } from 'react';
+
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -139,29 +42,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: () => <Button primary label="Button" />,
-};
-```
-
-```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="with-hooks"
-import React, { useState } from 'react';
-
-import { Button } from './Button';
-
-export default {
-  component: Button,
-};
-
-/*
- * Example Button story with React Hooks.
- * See note below related to this example.
- */
 const ButtonWithHooks = () => {
   // Sets the hooks for both the label and primary props
   const [value, setValue] = useState('Secondary');
@@ -179,28 +59,20 @@ const ButtonWithHooks = () => {
 
 export const Primary = {
   render: () => <ButtonWithHooks />,
-};
+} satisfies Story;
 ```
 
-```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="with-hooks"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import React, { useState } from 'react';
 
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import preview from '../.storybook/preview';
 
 import { Button } from './Button';
 
-const meta = {
+const meta = preview.meta({
   component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
-/*
- * Example Button story with React Hooks.
- * See note below related to this example.
- */
 const ButtonWithHooks = () => {
   // Sets the hooks for both the label and primary props
   const [value, setValue] = useState('Secondary');
@@ -216,51 +88,45 @@ const ButtonWithHooks = () => {
   return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
 };
 
-export const Primary = {
+export const Primary = meta.story({
   render: () => <ButtonWithHooks />,
-} satisfies Story;
+});
 ```
 
-```js filename="Button.stories.js|jsx" renderer="solid" language="js"
-import { Button } from './Button';
-
-export default {
-  component: Button,
-};
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary = {
-  render: () => <Button primary label="Button" />,
-};
-```
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React, { useState } from 'react';
 
-```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import preview from '../.storybook/preview';
 
 import { Button } from './Button';
 
-const meta = {
+const meta = preview.meta({
   component: Button,
-} satisfies Meta<typeof Button>;
+});
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: () => <Button primary label="Button" />,
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
 };
+
+export const Primary = meta.story({
+  render: () => <ButtonWithHooks />,
+});
 ```
 
-```js filename="Button.stories.js|jsx" renderer="solid" language="js" tabTitle="with-hooks"
+```jsx filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { createSignal } from 'solid-js';
 
 import { Button } from './Button';
@@ -269,12 +135,8 @@ export default {
   component: Button,
 };
 
-/*
- * Example Button story with Solid Hooks.
- * See note below related to this example.
- */
 const ButtonWithHooks = () => {
-  // Sets the hooks for both the label and primary props
+  // Sets the signals for both the label and primary props
   const [value, setValue] = createSignal('Secondary');
   const [isPrimary, setIsPrimary] = createSignal(false);
 
@@ -293,7 +155,7 @@ export const Primary = {
 };
 ```
 
-```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" tabTitle="with-hooks"
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 
 import { createSignal } from 'solid-js';
@@ -307,12 +169,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- * Example Button story with Solid Hooks.
- * See note below related to this example.
- */
 const ButtonWithHooks = () => {
-  // Sets the hooks for both the label and primary props
+  // Sets the signals for both the label and primary props
   const [value, setValue] = createSignal('Secondary');
   const [isPrimary, setIsPrimary] = createSignal(false);
 
@@ -330,134 +188,3 @@ export const Primary = {
   render: () => <ButtonWithHooks />,
 } satisfies Story;
 ```
-
-```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-
-  import Button from './Button.svelte';
-
-	const { Story } = defineMeta({
-		component: Button,
-	});
-</script>
-
-<Story name="Primary" args={{ primary: true, label: 'Button' }} />
-```
-
-```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-
-  import Button from './Button.svelte';
-
-	const { Story } = defineMeta({
-		component: Button,
-	});
-</script>
-
-<Story name="Primary" args={{ primary: true, label: 'Button' }} />
-```
-
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
-// Replace your-framework with svelte-vite or sveltekit
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import Button from './Button.svelte';
-
-const meta = {
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: () => ({
-    Component: Button,
-    props: {
-      primary: true,
-      label: 'Button',
-    },
-  }),
-};
-```
-
-```js filename="Button.stories.js" renderer="vue" language="js"
-import Button from './Button.vue';
-
-export default {
-  component: Button,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary = {
-  render: () => ({
-    components: { Button },
-    template: '<Button primary label="Button" />',
-  }),
-};
-```
-
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-
-import Button from './Button.vue';
-
-const meta = {
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: () => ({
-    components: { Button },
-    template: '<Button primary label="Button" />',
-  }),
-};
-```
-
-```js filename="Button.stories.js" renderer="web-components" language="js"
-import { html } from 'lit';
-
-export default {
-  component: 'demo-button',
-};
-
-export const Primary = {
-  render: () => html`<demo-button primary></demo-button>`,
-};
-```
-
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-
-import { html } from 'lit';
-
-const meta: Meta = {
-  component: 'demo-button',
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Primary: Story = {
-  render: () => html`<demo-button primary></demo-button>`,
-};
-```
diff --git a/docs/_snippets/checkbox-story-csf.md b/docs/_snippets/checkbox-story-csf.md
index 2223dbefd341..4f68fcae77a9 100644
--- a/docs/_snippets/checkbox-story-csf.md
+++ b/docs/_snippets/checkbox-story-csf.md
@@ -50,7 +50,7 @@ export const Unchecked = {
 };
 ```
 
-```js filename="Checkbox.stories.js|jsx" renderer="common" language="js"
+```js filename="Checkbox.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Checkbox } from './Checkbox';
 
 export default {
@@ -103,7 +103,7 @@ export const Unchecked: Story = {
 };
 ```
 
-```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -152,3 +152,36 @@ export const Unchecked: Story = {
   },
 };
 ```
+
+```ts filename="Checkbox.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Checkbox } from './Checkbox';
+
+const meta = preview.meta({
+  component: Checkbox,
+});
+
+export const Unchecked = meta.story({
+  args: {
+    label: 'Unchecked',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Checkbox.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Checkbox } from './Checkbox';
+
+const meta = preview.meta({
+  component: Checkbox,
+});
+
+export const Unchecked = meta.story({
+  args: {
+    label: 'Unchecked',
+  },
+});
+```
diff --git a/docs/_snippets/checkbox-story-grouped.md b/docs/_snippets/checkbox-story-grouped.md
index 33223741f364..d56382188272 100644
--- a/docs/_snippets/checkbox-story-grouped.md
+++ b/docs/_snippets/checkbox-story-grouped.md
@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-```js filename="Checkbox.stories.js|jsx" renderer="common" language="js"
+```js filename="Checkbox.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { CheckBox } from './Checkbox';
 
 export default {
@@ -93,7 +93,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="CheckBox.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="CheckBox.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -128,3 +128,34 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="CheckBox.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { CheckBox } from './Checkbox';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Checkbox',
+  component: CheckBox,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Checkbox.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { CheckBox } from './Checkbox';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Checkbox',
+  component: CheckBox,
+});
+```
diff --git a/docs/_snippets/code-panel-enable-in-preview.md b/docs/_snippets/code-panel-enable-in-preview.md
index 6fb33740a62f..430727de301b 100644
--- a/docs/_snippets/code-panel-enable-in-preview.md
+++ b/docs/_snippets/code-panel-enable-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     docs: {
@@ -8,7 +8,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
 import type { Preview } from '@storybook/your-framework';
 
@@ -22,3 +22,31 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/code-panel-in-meta-and-story.md b/docs/_snippets/code-panel-in-meta-and-story.md
index 1fe04492795f..a86dfe85f8e2 100644
--- a/docs/_snippets/code-panel-in-meta-and-story.md
+++ b/docs/_snippets/code-panel-in-meta-and-story.md
@@ -17,13 +17,13 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 // 👇 This story will display the Code panel
-const Primary: Story = {
+export const Primary: Story = {
   args: {
     children: 'Button',
   },
 };
 
-const Secondary: Story = {
+export const Secondary: Story = {
   args: {
     children: 'Button',
     variant: 'secondary',
@@ -37,7 +37,7 @@ const Secondary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from './Button';
@@ -56,13 +56,13 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // 👇 This story will display the Code panel
-const Primary: Story = {
+export const Primary: Story = {
   args: {
     children: 'Button',
   },
 };
 
-const Secondary: Story = {
+export const Secondary: Story = {
   args: {
     children: 'Button',
     variant: 'secondary',
@@ -76,7 +76,7 @@ const Secondary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -90,13 +90,13 @@ export default {
 };
 
 // 👇 This story will display the Code panel
-const Primary = {
+export const Primary = {
   args: {
     children: 'Button',
   },
 };
 
-const Secondary = {
+export const Secondary = {
   args: {
     children: 'Button',
     variant: 'secondary',
@@ -169,13 +169,13 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // 👇 This story will display the Code panel
-const Primary: Story = {
+export const Primary: Story = {
   args: {
     children: 'Button',
   },
 };
 
-const Secondary: Story = {
+export const Secondary: Story = {
   args: {
     children: 'Button',
     variant: 'secondary',
@@ -242,13 +242,13 @@ export default {
 };
 
 // 👇 This story will display the Code panel
-const Primary = {
+export const Primary = {
   args: {
     children: 'Button',
   },
 };
 
-const Secondary = {
+export const Secondary = {
   args: {
     children: 'Button',
     variant: 'secondary',
@@ -281,13 +281,13 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // 👇 This story will display the Code panel
-const Primary: Story = {
+export const Primary: Story = {
   args: {
     children: 'Button',
   },
 };
 
-const Secondary: Story = {
+export const Secondary: Story = {
   args: {
     children: 'Button',
     variant: 'secondary',
@@ -315,13 +315,13 @@ export default {
 };
 
 // 👇 This story will display the Code panel
-const Primary = {
+export const Primary = {
   args: {
     children: 'Button',
   },
 };
 
-const Secondary = {
+export const Secondary = {
   args: {
     children: 'Button',
     variant: 'secondary',
@@ -352,13 +352,13 @@ export default meta;
 type Story = StoryObj;
 
 // 👇 This story will display the Code panel
-const Primary: Story = {
+export const Primary: Story = {
   args: {
     children: 'Button',
   },
 };
 
-const Secondary: Story = {
+export const Secondary: Story = {
   args: {
     children: 'Button',
     variant: 'secondary',
@@ -384,13 +384,13 @@ export default {
 };
 
 // 👇 This story will display the Code panel
-const Primary = {
+export const Primary = {
   args: {
     children: 'Button',
   },
 };
 
-const Secondary = {
+export const Secondary = {
   args: {
     children: 'Button',
     variant: 'secondary',
@@ -403,3 +403,76 @@ const Secondary = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      // 👇 Enable Code panel for all stories in this file
+      codePanel: true,
+    },
+  },
+});
+
+// 👇 This story will display the Code panel
+export const Primary = meta.story({
+  args: {
+    children: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    children: 'Button',
+    variant: 'secondary',
+  },
+  parameters: {
+    docs: {
+      // 👇 Disable Code panel for this specific story
+      codePanel: false,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      // 👇 Enable Code panel for all stories in this file
+      codePanel: true,
+    },
+  },
+});
+
+// 👇 This story will display the Code panel
+export const Primary = meta.story({
+  args: {
+    children: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    children: 'Button',
+    variant: 'secondary',
+  },
+  parameters: {
+    docs: {
+      // 👇 Disable Code panel for this specific story
+      codePanel: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
index 706de1c4ffa8..b7ce47517de2 100644
--- a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
+++ b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
@@ -63,7 +63,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -129,7 +129,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -190,3 +190,46 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/component-story-conditional-controls-toggle.md b/docs/_snippets/component-story-conditional-controls-toggle.md
index e1a8292fddca..9b9ce8f5ee46 100644
--- a/docs/_snippets/component-story-conditional-controls-toggle.md
+++ b/docs/_snippets/component-story-conditional-controls-toggle.md
@@ -54,7 +54,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -111,7 +111,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -163,3 +163,40 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+});
+```
diff --git a/docs/_snippets/component-story-custom-args-complex.md b/docs/_snippets/component-story-custom-args-complex.md
index 75fe6f35cecc..56d6e815cb08 100644
--- a/docs/_snippets/component-story-custom-args-complex.md
+++ b/docs/_snippets/component-story-custom-args-complex.md
@@ -40,7 +40,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="react" language="js"
+```jsx filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { YourComponent } from './your-component';
 
 export default {
@@ -76,7 +76,7 @@ export const ExampleStory = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -118,7 +118,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="YourComponent.stories.js|jsx" renderer="solid" language="js"
 import { createSignal, createEffect } from 'solid-js';
 
 import { YourComponent } from './your-component';
@@ -552,3 +552,80 @@ export const ExampleStory: Story = {
   },
 };
 ```
+
+```tsx filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './your-component';
+
+const meta = preview.meta({
+  component: YourComponent,
+  //👇 Creates specific argTypes with options
+  argTypes: {
+    propertyA: {
+      options: ['Item One', 'Item Two', 'Item Three'],
+      control: { type: 'select' }, // Automatically inferred when 'options' is defined
+    },
+    propertyB: {
+      options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+    },
+  },
+});
+
+const someFunction = (valuePropertyA, valuePropertyB) => {
+  // Do some logic here
+};
+
+export const ExampleStory = meta.story({
+  render: (args) => {
+    const { propertyA, propertyB } = args;
+    //👇 Assigns the function result to a variable
+    const someFunctionResult = someFunction(propertyA, propertyB);
+
+    return <YourComponent {...args} someProperty={someFunctionResult} />;
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { YourComponent } from './your-component';
+
+const meta = preview.meta({
+  component: YourComponent,
+  //👇 Creates specific argTypes with options
+  argTypes: {
+    propertyA: {
+      options: ['Item One', 'Item Two', 'Item Three'],
+      control: { type: 'select' }, // Automatically inferred when 'options' is defined
+    },
+    propertyB: {
+      options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+    },
+  },
+});
+
+const someFunction = (valuePropertyA, valuePropertyB) => {
+  // Do some logic here
+};
+
+export const ExampleStory = meta.story({
+  render: (args) => {
+    const { propertyA, propertyB } = args;
+    //👇 Assigns the function result to a variable
+    const someFunctionResult = someFunction(propertyA, propertyB);
+
+    return <YourComponent {...args} someProperty={someFunctionResult} />;
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+});
+```
diff --git a/docs/_snippets/component-story-custom-args-mapping.md b/docs/_snippets/component-story-custom-args-mapping.md
index 969251a6c20a..8b7522fb0b11 100644
--- a/docs/_snippets/component-story-custom-args-mapping.md
+++ b/docs/_snippets/component-story-custom-args-mapping.md
@@ -90,7 +90,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
@@ -183,7 +183,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -271,3 +271,64 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/component-story-disable-controls-alt.md b/docs/_snippets/component-story-disable-controls-alt.md
index a8a61df01675..6f1f5555b859 100644
--- a/docs/_snippets/component-story-disable-controls-alt.md
+++ b/docs/_snippets/component-story-disable-controls-alt.md
@@ -48,7 +48,7 @@ export default {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -99,7 +99,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -145,3 +145,36 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/component-story-disable-controls-regex.md b/docs/_snippets/component-story-disable-controls-regex.md
index 67f758a72770..fbd5a3289f38 100644
--- a/docs/_snippets/component-story-disable-controls-regex.md
+++ b/docs/_snippets/component-story-disable-controls-regex.md
@@ -107,7 +107,7 @@ export const RegexExclude = {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -217,7 +217,7 @@ export const RegexExclude: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -319,3 +319,72 @@ export const RegexExclude: Story = {
   },
 };
 ```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const ArrayInclude = meta.story({
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+});
+
+export const RegexInclude = meta.story({
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+});
+
+export const ArrayExclude = meta.story({
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+});
+
+export const RegexExclude = meta.story({
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const ArrayInclude = meta.story({
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+});
+
+export const RegexInclude = meta.story({
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+});
+
+export const ArrayExclude = meta.story({
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+});
+
+export const RegexExclude = meta.story({
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+});
+```
diff --git a/docs/_snippets/component-story-disable-controls.md b/docs/_snippets/component-story-disable-controls.md
index 9ee3511ed149..8b7ac63093af 100644
--- a/docs/_snippets/component-story-disable-controls.md
+++ b/docs/_snippets/component-story-disable-controls.md
@@ -54,7 +54,7 @@ export default {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -111,7 +111,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -163,3 +163,40 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/component-story-figma-integration.md b/docs/_snippets/component-story-figma-integration.md
index bff33c487c9a..905e3e690bec 100644
--- a/docs/_snippets/component-story-figma-integration.md
+++ b/docs/_snippets/component-story-figma-integration.md
@@ -21,7 +21,7 @@ export const Example: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 // More on default export: https://storybook.js.org/docs/writing-stories/#default-export
@@ -39,7 +39,7 @@ export const Example = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -263,3 +263,43 @@ export const Example: Story = {
   },
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Example = meta.story({
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Example = meta.story({
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/component-story-highlight.md b/docs/_snippets/component-story-highlight.md
index f49600299dee..301b45c2285a 100644
--- a/docs/_snippets/component-story-highlight.md
+++ b/docs/_snippets/component-story-highlight.md
@@ -27,7 +27,7 @@ export const Highlighted: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -50,7 +50,7 @@ export const Highlighted = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -288,3 +288,54 @@ export const Highlighted: Story = {
   ],
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/component-story-sort-controls.md b/docs/_snippets/component-story-sort-controls.md
index 163b3bf25528..433952248d7d 100644
--- a/docs/_snippets/component-story-sort-controls.md
+++ b/docs/_snippets/component-story-sort-controls.md
@@ -33,7 +33,7 @@ export default {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -69,7 +69,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -100,3 +100,26 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+});
+```
diff --git a/docs/_snippets/component-story-static-asset-cdn.md b/docs/_snippets/component-story-static-asset-cdn.md
index 32249fe32b68..22b3d6af76ea 100644
--- a/docs/_snippets/component-story-static-asset-cdn.md
+++ b/docs/_snippets/component-story-static-asset-cdn.md
@@ -20,7 +20,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -34,7 +34,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -54,7 +54,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -238,3 +238,36 @@ export const WithAnImage: Story = {
     />`,
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const WithAnImage = meta.story({
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const WithAnImage = meta.story({
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
+});
+```
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index d2c1abd5fe0c..839d54e1d6e2 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -28,7 +28,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 import imageFile from './static/image.png';
@@ -47,7 +47,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -308,3 +308,46 @@ export const WithAnImage: Story = {
   render: () => html`<img src="${image.src}" alt="${image.alt}" />`,
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import imageFile from './static/image.png';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const WithAnImage = meta.story({
+  render: () => <img src={image.src} alt={image.alt} />,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+import imageFile from './static/image.png';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const WithAnImage = meta.story({
+  render: () => <img src={image.src} alt={image.alt} />,
+});
+```
diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
index 3dcd3c3dddcb..6fb9370187fd 100644
--- a/docs/_snippets/component-story-static-asset-without-import.md
+++ b/docs/_snippets/component-story-static-asset-without-import.md
@@ -21,7 +21,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -34,7 +34,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -53,7 +53,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -224,3 +224,34 @@ export const WithAnImage: Story = {
   render: () => html`<img src="/image.png" alt="image" />`,
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.story({
+  render: () => <img src="/image.png" alt="my image" />,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.story({
+  render: () => <img src="/image.png" alt="my image" />,
+});
+```
diff --git a/docs/_snippets/component-story-with-custom-render-function.md b/docs/_snippets/component-story-with-custom-render-function.md
index 4db70d88ec1c..6dcfb9b69e08 100644
--- a/docs/_snippets/component-story-with-custom-render-function.md
+++ b/docs/_snippets/component-story-with-custom-render-function.md
@@ -1,12 +1,10 @@
 ```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
-
 import { moduleMetadata, argsToTemplate } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
 import { Layout } from './Layout.component';
-
 import { MyComponent } from './MyComponent.component';
 
 const meta: Meta<MyComponent> = {
@@ -40,12 +38,11 @@ export const Example: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="preact" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="preact" language="js"
 /** @jsx h */
 import { h } from 'preact';
 
 import { Layout } from './Layout';
-
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -67,9 +64,8 @@ export const Example = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Layout } from './Layout';
-
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -91,12 +87,11 @@ export const Example = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Layout } from './Layout';
-
 import { MyComponent } from './MyComponent';
 
 const meta = {
@@ -121,9 +116,8 @@ export const Example: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { Layout } from './Layout';
-
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -150,7 +144,6 @@ export const Example = {
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 
 import { Layout } from './Layout';
-
 import { MyComponent } from './MyComponent';
 
 const meta = {
@@ -177,7 +170,6 @@ export const Example: Story = {
 
 ```js filename="MyComponent.stories.js" renderer="vue" language="js"
 import Layout from './Layout.vue';
-
 import MyComponent from './MyComponent.vue';
 
 export default {
@@ -206,7 +198,6 @@ export const Example = {
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Layout from './Layout.vue';
-
 import MyComponent from './MyComponent.vue';
 
 const meta = {
@@ -282,3 +273,55 @@ export const Example: Story = {
   `,
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Layout } from './Layout';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// This story uses a render function to fully control how the component renders.
+export const Example = meta.story({
+  render: () => (
+    <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  ),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Layout } from './Layout';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// This story uses a render function to fully control how the component renders.
+export const Example = meta.story({
+  render: () => (
+    <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  ),
+});
+```
diff --git a/docs/_snippets/configure-mock-provider-with-story-parameter.md b/docs/_snippets/configure-mock-provider-with-story-parameter.md
index 29f0a873e562..aeab82d42604 100644
--- a/docs/_snippets/configure-mock-provider-with-story-parameter.md
+++ b/docs/_snippets/configure-mock-provider-with-story-parameter.md
@@ -1,4 +1,4 @@
-```js filename="Button.stories.js" renderer="react" language="js"
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -16,7 +16,7 @@ export const Dark = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="react" language="ts"
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -39,3 +39,44 @@ export const Dark: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+// Wrapped in light theme
+export const Default = meta.story();
+
+// Wrapped in dark theme
+export const Dark = meta.story({
+  parameters: {
+    theme: 'dark',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+// Wrapped in light theme
+export const Default = meta.story();
+
+// Wrapped in dark theme
+export const Dark = meta.story({
+  parameters: {
+    theme: 'dark',
+  },
+});
+```
diff --git a/docs/_snippets/csf-next-builder-aliases.md b/docs/_snippets/csf-next-builder-aliases.md
deleted file mode 100644
index 8646e5f647e2..000000000000
--- a/docs/_snippets/csf-next-builder-aliases.md
+++ /dev/null
@@ -1,39 +0,0 @@
-```ts filename=".storybook/main.js|ts" renderer="common" language="ts" tabTitle="Vite"
-import path from 'path';
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs-vite, vue3-vite, etc.
-import { defineMain } from '@storybook/your-framework/node';
-
-export default defineMain({
-  // ...rest of config
-  async viteFinal(config) {
-    if (config.resolve) {
-      config.resolve.alias = {
-        ...config.resolve?.alias,
-        '@': path.resolve(__dirname, './'),
-      };
-    }
-
-    return config;
-  },
-});
-```
-
-```ts filename=".storybook/main.js|ts" renderer="common" language="ts" tabTitle="Webpack"
-import path from 'path';
-// Replace your-framework with the framework you are using, e.g. react-webpack, nextjs, angular, etc.
-import { defineMain } from '@storybook/your-framework/node';
-
-export default defineMain({
-  // ...rest of config
-  async webpackFinal(config) {
-    if (config.resolve) {
-      config.resolve.alias = {
-        ...config.resolve?.alias,
-        '@$': path.resolve(__dirname, './'),
-      };
-    }
-
-    return config;
-  },
-});
-```
diff --git a/docs/_snippets/decorator-parameterized-in-preview.md b/docs/_snippets/decorator-parameterized-in-preview.md
index dfa8e5844148..599da719836b 100644
--- a/docs/_snippets/decorator-parameterized-in-preview.md
+++ b/docs/_snippets/decorator-parameterized-in-preview.md
@@ -25,7 +25,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.jsx" renderer="react" language="js"
+```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 export default {
@@ -57,7 +57,7 @@ export default {
 };
 ```
 
-```tsx filename=".storybook/preview.tsx" renderer="react" language="ts"
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
@@ -205,3 +205,75 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case 'page':
+          return (
+            // Your page layout is probably a little more complex than this ;)
+            <div className="page-layout">
+              <Story />
+            </div>
+          );
+        case 'page-mobile':
+          return (
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
+          );
+        default:
+          // In the default case, don't apply a layout
+          return <Story />;
+      }
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case 'page':
+          return (
+            // Your page layout is probably a little more complex than this ;)
+            <div className="page-layout">
+              <Story />
+            </div>
+          );
+        case 'page-mobile':
+          return (
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
+          );
+        default:
+          // In the default case, don't apply a layout
+          return <Story />;
+      }
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/essential-feature-disable.md b/docs/_snippets/essential-feature-disable.md
index 4ee4cc182480..a6037fb78337 100644
--- a/docs/_snippets/essential-feature-disable.md
+++ b/docs/_snippets/essential-feature-disable.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,32 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    backgrounds: false, // 👈 disable the backgrounds feature
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    backgrounds: false, // 👈 disable the backgrounds feature
+  },
+});
+```
diff --git a/docs/_snippets/foo-bar-baz-story.md b/docs/_snippets/foo-bar-baz-story.md
index 191e0fcf1f91..c1bcee563ff4 100644
--- a/docs/_snippets/foo-bar-baz-story.md
+++ b/docs/_snippets/foo-bar-baz-story.md
@@ -52,7 +52,7 @@ export default {
 export const Baz = {};
 ```
 
-```js filename="FooBar.stories.js|jsx" renderer="common" language="js"
+```js filename="FooBar.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Foo } from './Foo';
 
 export default {
@@ -107,7 +107,7 @@ type Story = StoryObj<typeof meta>;
 export const Baz: Story = {};
 ```
 
-```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -127,3 +127,38 @@ type Story = StoryObj<typeof meta>;
 
 export const Baz: Story = {};
 ```
+
+```ts filename="FooBar.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Foo/Bar',
+  component: Foo,
+});
+
+export const Baz = meta.story();
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="FooBar.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Foo/Bar',
+  component: Foo,
+});
+
+export const Baz = meta.story();
+```
diff --git a/docs/_snippets/gizmo-story-controls-customization.md b/docs/_snippets/gizmo-story-controls-customization.md
index ac96981d892b..e87f4f2ad6f6 100644
--- a/docs/_snippets/gizmo-story-controls-customization.md
+++ b/docs/_snippets/gizmo-story-controls-customization.md
@@ -171,7 +171,7 @@ export default {
 };
 ```
 
-```js filename="Gizmo.stories.js|jsx" renderer="common" language="js"
+```js filename="Gizmo.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Gizmo } from './Gizmo';
 
 export default {
@@ -345,7 +345,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -514,3 +514,118 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Gizmo.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Gizmo } from './Gizmo';
+
+const meta = preview.meta({
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Gizmo.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Gizmo } from './Gizmo';
+
+const meta = preview.meta({
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/highlight-custom-style.md b/docs/_snippets/highlight-custom-style.md
index af616448f4c0..85a8f516e19d 100644
--- a/docs/_snippets/highlight-custom-style.md
+++ b/docs/_snippets/highlight-custom-style.md
@@ -44,7 +44,7 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -84,7 +84,7 @@ export const StyledHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -475,3 +475,88 @@ export const StyledHighlight: Story = {
   ],
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+        styles: {
+          backgroundColor: `color-mix(in srgb, hotpink, transparent 90%)`,
+          outline: '3px solid hotpink',
+          animation: 'pulse 3s linear infinite',
+          transition: 'outline-offset 0.2s ease-in-out',
+        },
+        hoverStyles: {
+          outlineOffset: '3px',
+        },
+        focusStyles: {
+          backgroundColor: 'transparent',
+        },
+        keyframes: `@keyframes pulse {
+          0% { outline-color: rgba(255, 105, 180, 1); }
+          50% { outline-color: rgba(255, 105, 180, 0.2); }
+          100% { outline-color: rgba(255, 105, 180, 1); }
+        }`,
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+        styles: {
+          backgroundColor: `color-mix(in srgb, hotpink, transparent 90%)`,
+          outline: '3px solid hotpink',
+          animation: 'pulse 3s linear infinite',
+          transition: 'outline-offset 0.2s ease-in-out',
+        },
+        hoverStyles: {
+          outlineOffset: '3px',
+        },
+        focusStyles: {
+          backgroundColor: 'transparent',
+        },
+        keyframes: `@keyframes pulse {
+          0% { outline-color: rgba(255, 105, 180, 1); }
+          50% { outline-color: rgba(255, 105, 180, 0.2); }
+          100% { outline-color: rgba(255, 105, 180, 1); }
+        }`,
+      });
+      return storyFn();
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/highlight-menu.md b/docs/_snippets/highlight-menu.md
index 5fcc71684f1d..b39c38d78ae2 100644
--- a/docs/_snippets/highlight-menu.md
+++ b/docs/_snippets/highlight-menu.md
@@ -42,7 +42,7 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -80,7 +80,7 @@ export const StyledHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -453,3 +453,84 @@ export const StyledHighlight: Story = {
   ],
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+        menu: [
+          [
+            {
+              id: 'button-name',
+              title: 'Login',
+              description: 'Navigate to the login page',
+              clickEvent: 'my-menu-click-event',
+            },
+            {
+              id: 'h2-home',
+              title: 'Acme',
+              description: 'Navigate to the home page',
+            },
+          ],
+        ],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+        menu: [
+          [
+            {
+              id: 'button-name',
+              title: 'Login',
+              description: 'Navigate to the login page',
+              clickEvent: 'my-menu-click-event',
+            },
+            {
+              id: 'h2-home',
+              title: 'Acme',
+              description: 'Navigate to the home page',
+            },
+          ],
+        ],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/highlight-remove.md b/docs/_snippets/highlight-remove.md
index f2656057b9f4..5c24ef2187cc 100644
--- a/docs/_snippets/highlight-remove.md
+++ b/docs/_snippets/highlight-remove.md
@@ -29,7 +29,7 @@ export const RemoveHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
@@ -54,7 +54,7 @@ export const RemoveHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -310,3 +310,58 @@ export const RemoveHighlight: Story = {
   ],
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const RemoveHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        id: 'my-unique-id',
+        selectors: ['header', 'section', 'footer'],
+      });
+      emit(REMOVE_HIGHLIGHT, 'my-unique-id');
+      return storyFn();
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const RemoveHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        id: 'my-unique-id',
+        selectors: ['header', 'section', 'footer'],
+      });
+      emit(REMOVE_HIGHLIGHT, 'my-unique-id');
+      return storyFn();
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/highlight-reset.md b/docs/_snippets/highlight-reset.md
index 1144003ad89f..e445e0388120 100644
--- a/docs/_snippets/highlight-reset.md
+++ b/docs/_snippets/highlight-reset.md
@@ -28,7 +28,7 @@ export const ResetHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
 
@@ -52,7 +52,7 @@ export const ResetHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -299,3 +299,56 @@ export const ResetHighlight: Story = {
   ],
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        selectors: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        selectors: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/highlight-scroll-into-view.md b/docs/_snippets/highlight-scroll-into-view.md
index 7cc2f173ab08..44fb44c9577e 100644
--- a/docs/_snippets/highlight-scroll-into-view.md
+++ b/docs/_snippets/highlight-scroll-into-view.md
@@ -25,7 +25,7 @@ export const ScrollIntoView: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { SCROLL_INTO_VIEW } from 'storybook/highlight';
 
@@ -46,7 +46,7 @@ export const ScrollIntoView = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -266,3 +266,50 @@ export const ScrollIntoView: Story = {
   ],
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { useChannel } from 'storybook/preview-api';
+import { SCROLL_INTO_VIEW } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ScrollIntoView = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(SCROLL_INTO_VIEW, '#footer');
+      return storyFn();
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { useChannel } from 'storybook/preview-api';
+import { SCROLL_INTO_VIEW } from 'storybook/highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ScrollIntoView = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(SCROLL_INTO_VIEW, '#footer');
+      return storyFn();
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/histogram-story.md b/docs/_snippets/histogram-story.md
index d3f9da147bd1..27ee5e03bae5 100644
--- a/docs/_snippets/histogram-story.md
+++ b/docs/_snippets/histogram-story.md
@@ -105,7 +105,7 @@ export const Default = {
 };
 ```
 
-```js filename="Histogram.stories.js|jsx" renderer="react" language="js"
+```js filename="Histogram.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Histogram } from './Histogram';
 
 export default {
@@ -122,7 +122,7 @@ export const Default = {
 };
 ```
 
-```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -365,3 +365,42 @@ export const Default: Story = {
   },
 };
 ```
+
+```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Histogram } from './Histogram';
+
+const meta = preview.meta({
+  component: Histogram,
+});
+
+export const Default = meta.story({
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Histogram.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Histogram } from './Histogram';
+
+const meta = preview.meta({
+  component: Histogram,
+});
+
+export const Default = meta.story({
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+});
+```
diff --git a/docs/_snippets/individual-snapshot-tests-portable-stories.md b/docs/_snippets/individual-snapshot-tests-portable-stories.md
index 3c22472fe5b1..943645390c96 100644
--- a/docs/_snippets/individual-snapshot-tests-portable-stories.md
+++ b/docs/_snippets/individual-snapshot-tests-portable-stories.md
@@ -15,7 +15,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -23,7 +23,7 @@ const compose = (entry) => {
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -45,7 +45,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -157,7 +157,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (error) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`,
     );
   }
 };
@@ -166,7 +166,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -185,7 +185,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -226,7 +226,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -236,7 +236,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob<StoryFile>('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -256,7 +256,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
diff --git a/docs/_snippets/interaction-test-complex.md b/docs/_snippets/interaction-test-complex.md
index 6f51280805f6..499783d8128c 100644
--- a/docs/_snippets/interaction-test-complex.md
+++ b/docs/_snippets/interaction-test-complex.md
@@ -43,7 +43,7 @@ export const Submits: Story = {
 };
 ```
 
-```ts filename="EventForm.stories.ts" renderer="common" language="ts"
+```ts filename="EventForm.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework (e.g. react-vite, vue3-vite, etc.)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { fn, expect } from 'storybook/test';
@@ -89,7 +89,7 @@ export const Submits: Story = {
 };
 ```
 
-```js filename="EventForm.stories.js" renderer="common" language="js"
+```js filename="EventForm.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { fn, expect } from 'storybook/test';
 
 import { users } from '../mocks/users';
@@ -390,3 +390,89 @@ export const Submits = {
   },
 };
 ```
+
+```ts filename="EventForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { fn, expect } from 'storybook/test';
+
+import { users } from '../mocks/users';
+import { EventForm } from './EventForm';
+
+const meta = preview.meta({
+  component: EventForm,
+});
+
+export const Submits = meta.story({
+  // Mock functions so we can manipulate and spy on them
+  args: {
+    getUsers: fn(),
+    onSubmit: fn(),
+  },
+  beforeEach: async ({ args }) => {
+    // Manipulate `getUsers` mock to return mocked value
+    args.getUsers.mockResolvedValue(users);
+  },
+  play: async ({ args, canvas, userEvent }) => {
+    const usersList = canvas.getAllByRole('listitem');
+    await expect(usersList).toHaveLength(4);
+    await expect(canvas.getAllByText('VIP')).toHaveLength(2);
+
+    const titleInput = await canvas.findByLabelText('Enter a title for your event');
+    await userEvent.type(titleInput, 'Holiday party');
+
+    const submitButton = canvas.getByRole('button', { text: 'Plan event' });
+    await userEvent.click(submitButton);
+
+    // Spy on `onSubmit` to verify that it is called correctly
+    await expect(args.onSubmit).toHaveBeenCalledWith({
+      name: 'Holiday party',
+      userCount: 4,
+      data: expect.anything(),
+    });
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="EventForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { fn, expect } from 'storybook/test';
+
+import { users } from '../mocks/users';
+import { EventForm } from './EventForm';
+
+const meta = preview.meta({
+  component: EventForm,
+});
+
+export const Submits = meta.story({
+  // Mock functions so we can manipulate and spy on them
+  args: {
+    getUsers: fn(),
+    onSubmit: fn(),
+  },
+  beforeEach: async ({ args }) => {
+    // Manipulate `getUsers` mock to return mocked value
+    args.getUsers.mockResolvedValue(users);
+  },
+  play: async ({ args, canvas, userEvent }) => {
+    const usersList = canvas.getAllByRole('listitem');
+    await expect(usersList).toHaveLength(4);
+    await expect(canvas.getAllByText('VIP')).toHaveLength(2);
+
+    const titleInput = await canvas.findByLabelText('Enter a title for your event');
+    await userEvent.type(titleInput, 'Holiday party');
+
+    const submitButton = canvas.getByRole('button', { text: 'Plan event' });
+    await userEvent.click(submitButton);
+
+    // Spy on `onSubmit` to verify that it is called correctly
+    await expect(args.onSubmit).toHaveBeenCalledWith({
+      name: 'Holiday party',
+      userCount: 4,
+      data: expect.anything(),
+    });
+  },
+});
+```
diff --git a/docs/_snippets/interaction-test-fn-mock-spy.md b/docs/_snippets/interaction-test-fn-mock-spy.md
index 20aacec8311c..3ce45a48dae7 100644
--- a/docs/_snippets/interaction-test-fn-mock-spy.md
+++ b/docs/_snippets/interaction-test-fn-mock-spy.md
@@ -27,7 +27,7 @@ export const FilledForm: Story = {
 };
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="common" language="ts"
+```ts filename="LoginForm.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework (e.g. react-vite, vue3-vite, etc.)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { fn, expect } from 'storybook/test';
@@ -57,7 +57,7 @@ export const FilledForm: Story = {
 };
 ```
 
-```js filename="LoginForm.stories.js" renderer="common" language="js"
+```js filename="LoginForm.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { fn, expect } from 'storybook/test';
 
 import { LoginForm } from './LoginForm';
@@ -242,3 +242,57 @@ export const FilledForm = {
   },
 };
 ```
+
+```ts filename="LoginForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { fn, expect } from 'storybook/test';
+
+import { LoginForm } from './LoginForm';
+
+const meta = preview.meta({
+  component: LoginForm,
+  args: {
+    // 👇 Use `fn` to spy on the onSubmit arg
+    onSubmit: fn(),
+  },
+});
+
+export const FilledForm = meta.story({
+  play: async ({ args, canvas, userEvent }) => {
+    await userEvent.type(canvas.getByLabelText('Email'), 'email@provider.com');
+    await userEvent.type(canvas.getByLabelText('Password'), 'a-random-password');
+    await userEvent.click(canvas.getByRole('button', { name: 'Log in' }));
+
+    // 👇 Now we can assert that the onSubmit arg was called
+    await expect(args.onSubmit).toHaveBeenCalled();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="LoginForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { fn, expect } from 'storybook/test';
+
+import { LoginForm } from './LoginForm';
+
+const meta = preview.meta({
+  component: LoginForm,
+  args: {
+    // 👇 Use `fn` to spy on the onSubmit arg
+    onSubmit: fn(),
+  },
+});
+
+export const FilledForm = meta.story({
+  play: async ({ args, canvas, userEvent }) => {
+    await userEvent.type(canvas.getByLabelText('Email'), 'email@provider.com');
+    await userEvent.type(canvas.getByLabelText('Password'), 'a-random-password');
+    await userEvent.click(canvas.getByRole('button', { name: 'Log in' }));
+
+    // 👇 Now we can assert that the onSubmit arg was called
+    await expect(args.onSubmit).toHaveBeenCalled();
+  },
+});
+```
diff --git a/docs/_snippets/interaction-test-simple.md b/docs/_snippets/interaction-test-simple.md
index 9d6cb946a426..40360b77ac88 100644
--- a/docs/_snippets/interaction-test-simple.md
+++ b/docs/_snippets/interaction-test-simple.md
@@ -21,7 +21,7 @@ export const Opens: Story = {
 };
 ```
 
-```ts filename="Dialog.stories.ts" renderer="common" language="ts"
+```ts filename="Dialog.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework (e.g. react-vite, vue3-vite, etc.)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { expect } from 'storybook/test';
@@ -45,7 +45,7 @@ export const Opens: Story = {
 };
 ```
 
-```js filename="Dialog.stories.js" renderer="common" language="js"
+```js filename="Dialog.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 import { Dialog } from './Dialog';
@@ -188,3 +188,45 @@ export const Opens = {
   },
 };
 ```
+
+```ts filename="Dialog.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect } from 'storybook/test';
+
+import { Dialog } from './Dialog';
+
+const meta = preview.meta({
+  component: Dialog,
+});
+
+export const Opens = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    // Click on a button and assert that a dialog appears
+    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    await userEvent.click(button);
+    await expect(canvas.getByRole('dialog')).toBeInTheDocument();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Dialog.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect } from 'storybook/test';
+
+import { Dialog } from './Dialog';
+
+const meta = preview.meta({
+  component: Dialog,
+});
+
+export const Opens = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    // Click on a button and assert that a dialog appears
+    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    await userEvent.click(button);
+    await expect(canvas.getByRole('dialog')).toBeInTheDocument();
+  },
+});
+```
diff --git a/docs/_snippets/list-story-expanded.md b/docs/_snippets/list-story-expanded.md
index 24c1111fdf69..a4f2cec47fa6 100644
--- a/docs/_snippets/list-story-expanded.md
+++ b/docs/_snippets/list-story-expanded.md
@@ -134,7 +134,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 import { ListItem } from './ListItem';
 
@@ -168,7 +168,7 @@ export const ManyItems = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -502,3 +502,76 @@ export const ManyItems: Story = {
   `,
 };
 ```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const Empty = meta.story();
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const Empty = meta.story();
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+});
+```
diff --git a/docs/_snippets/list-story-reuse-data.md b/docs/_snippets/list-story-reuse-data.md
index 82f84f7831ca..bff304b6828a 100644
--- a/docs/_snippets/list-story-reuse-data.md
+++ b/docs/_snippets/list-story-reuse-data.md
@@ -91,8 +91,8 @@ export const ManyItems: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="react" language="js"
-import React from 'react';
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
+import * as React from 'react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -115,7 +115,9 @@ export const ManyItems = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
+import * as React from 'react';
+
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -143,7 +145,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 import { ListItem } from './ListItem';
 
@@ -355,3 +357,57 @@ export const ManyItems: Story = {
   `,
 };
 ```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.input.args} />
+      <ListItem {...Unselected.input.args} />
+      <ListItem {...Unselected.input.args} />
+    </List>
+  ),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.input.args} />
+      <ListItem {...Unselected.input.args} />
+      <ListItem {...Unselected.input.args} />
+    </List>
+  ),
+});
+```
diff --git a/docs/_snippets/list-story-starter.md b/docs/_snippets/list-story-starter.md
index cf07b3f1366e..fba678545f06 100644
--- a/docs/_snippets/list-story-starter.md
+++ b/docs/_snippets/list-story-starter.md
@@ -68,7 +68,7 @@ export const Empty: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 
 export default {
@@ -79,7 +79,7 @@ export default {
 export const Empty = {};
 ```
 
-```ts filename="List.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -246,3 +246,30 @@ export const Empty: Story = {
   render: () => html`<demo-list></demo-list>`,
 };
 ```
+
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+
+const meta = preview.meta({
+  component: List,
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story();
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { List } from './List';
+
+const meta = preview.meta({
+  component: List,
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story();
+```
diff --git a/docs/_snippets/list-story-template.md b/docs/_snippets/list-story-template.md
index 36e60ce96331..b6d0fd8d5fdb 100644
--- a/docs/_snippets/list-story-template.md
+++ b/docs/_snippets/list-story-template.md
@@ -12,11 +12,6 @@ import { ListItem } from './list-item.component';
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
   decorators: [
     moduleMetadata({
@@ -60,7 +55,7 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 import { ListItem } from './ListItem';
 
@@ -68,11 +63,6 @@ import { ListItem } from './ListItem';
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -108,7 +98,7 @@ export const OneItem = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -119,11 +109,6 @@ import { ListItem } from './ListItem';
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
@@ -158,7 +143,7 @@ export const OneItem = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 import { ListItem } from './ListItem';
 
@@ -166,11 +151,6 @@ import { ListItem } from './ListItem';
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -216,11 +196,6 @@ import { ListItem } from './ListItem';
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
@@ -266,11 +241,6 @@ export const OneItem = {
   import { Unchecked } from './ListItem.stories.svelte';
 
   const { Story } = defineMeta({
-    /* 👇 The title prop is optional.
-     * See https://storybook.js.org/docs/configure/#configure-story-loading
-     * to learn how to generate automatic titles
-    */
-    title: 'List',
     component: List,
   });
 </script>
@@ -309,11 +279,6 @@ export const OneItem = {
   import { Unchecked } from './ListItem.stories.svelte';
 
   const { Story } = defineMeta({
-    /* 👇 The title prop is optional.
-     * See https://storybook.js.org/docs/configure/#configure-story-loading
-     * to learn how to generate automatic titles
-    */
-    title: 'List',
     component: List,
   });
 </script>
@@ -349,11 +314,6 @@ import ListItem from './ListItem.vue';
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -402,11 +362,6 @@ import ListItem from './ListItem.vue';
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
@@ -455,7 +410,6 @@ import { repeat } from 'lit/directives/repeat.js';
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  title: 'List',
   component: 'demo-list',
 };
 
@@ -495,7 +449,6 @@ import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
 const meta: Meta = {
-  title: 'List',
   component: 'demo-list',
 };
 
@@ -531,3 +484,82 @@ export const OneItem: Story = {
   },
 };
 ```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const Empty = meta.story({
+  render: ({ items, ...args }) => {
+    return (
+      <List>
+        {items.map((item) => (
+          <ListItem {...item} />
+        ))}
+      </List>
+    );
+  },
+  args: {
+    items: [],
+  },
+});
+
+export const OneItem = Empty.extend({
+  args: {
+    items: [
+      {
+        ...Unchecked.input.args,
+      },
+    ],
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const Empty = meta.story({
+  render: ({ items, ...args }) => {
+    return (
+      <List>
+        {items.map((item) => (
+          <ListItem {...item} />
+        ))}
+      </List>
+    );
+  },
+  args: {
+    items: [],
+  },
+});
+
+export const OneItem = Empty.extend({
+  args: {
+    items: [
+      {
+        ...Unchecked.input.args,
+      },
+    ],
+  },
+});
+```
diff --git a/docs/_snippets/list-story-unchecked.md b/docs/_snippets/list-story-unchecked.md
index 662e324b4405..2d3ca366287e 100644
--- a/docs/_snippets/list-story-unchecked.md
+++ b/docs/_snippets/list-story-unchecked.md
@@ -12,11 +12,6 @@ import { ListItem } from './list-item.component';
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
   decorators: [
     moduleMetadata({
@@ -49,18 +44,13 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -73,7 +63,7 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -83,11 +73,6 @@ import { List } from './List';
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
@@ -103,18 +88,13 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -136,11 +116,6 @@ import { List } from './List';
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
@@ -164,11 +139,6 @@ import ListItem from './ListItem.vue';
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -202,11 +172,6 @@ import ListItem from './ListItem.vue';
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
@@ -269,3 +234,47 @@ export const OneItem: Story = {
   render: () => html` <List> ${Unchecked({ ...Unchecked.args })} </List> `,
 };
 ```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <Unchecked {...Unchecked.input.args} />
+    </List>
+  ),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <Unchecked {...Unchecked.input.args} />
+    </List>
+  ),
+});
+```
diff --git a/docs/_snippets/list-story-with-subcomponents.md b/docs/_snippets/list-story-with-subcomponents.md
index ecd8c5966e43..863355f94def 100644
--- a/docs/_snippets/list-story-with-subcomponents.md
+++ b/docs/_snippets/list-story-with-subcomponents.md
@@ -37,8 +37,8 @@ export const OneItem: Story = {
 };
 ```
 
-```jsx filename="List.stories.js|jsx" renderer="react" language="js"
-import React from 'react';
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
+import * as React from 'react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -59,8 +59,8 @@ export const OneItem = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts"
-import React from 'react';
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
+import * as React from 'react';
 
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -87,7 +87,7 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 import { ListItem } from './ListItem';
 
@@ -294,3 +294,53 @@ export const OneItem: Story = {
   }),
 };
 ```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+});
+
+export const Empty = meta.story();
+
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+  subcomponents: { ListItem }, // 👈 Adds the ListItem component as a subcomponent
+});
+
+export const Empty = meta.story();
+
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+```
diff --git a/docs/_snippets/list-story-with-unchecked-children.md b/docs/_snippets/list-story-with-unchecked-children.md
index 0ddf4b6a927d..c74d64ba40f7 100644
--- a/docs/_snippets/list-story-with-unchecked-children.md
+++ b/docs/_snippets/list-story-with-unchecked-children.md
@@ -1,15 +1,10 @@
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -20,7 +15,7 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -30,11 +25,6 @@ import { List } from './List';
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
@@ -48,18 +38,13 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -79,11 +64,6 @@ import { List } from './List';
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
@@ -96,3 +76,42 @@ export const OneItem: Story = {
   },
 };
 ```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { List } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const OneItem = meta.story({
+  args: {
+    children: <Unchecked {...Unchecked.input.args} />,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { List } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const OneItem = meta.story({
+  args: {
+    children: <Unchecked {...Unchecked.input.args} />,
+  },
+});
+```
diff --git a/docs/_snippets/loader-story.md b/docs/_snippets/loader-story.md
index 0a5dc8a56cb2..d635522712e9 100644
--- a/docs/_snippets/loader-story.md
+++ b/docs/_snippets/loader-story.md
@@ -40,7 +40,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="TodoItem.stories.js|jsx" renderer="react" language="js"
+```jsx filename="TodoItem.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { TodoItem } from './TodoItem';
 
 /*
@@ -62,7 +62,7 @@ export const Primary = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -90,7 +90,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="TodoItem.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="TodoItem.stories.js|jsx" renderer="solid" language="js"
 import { TodoItem } from './TodoItem';
 
 /*
@@ -362,3 +362,47 @@ export const Primary: Story = {
   ],
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { TodoItem } from './TodoItem';
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+const meta = preview.meta({
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
+});
+
+export const Primary = meta.story({
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="TodoItem.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { TodoItem } from './TodoItem';
+
+const meta = preview.meta({
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
+});
+
+export const Primary = meta.story({
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+});
+```
diff --git a/docs/_snippets/login-form-with-play-function.md b/docs/_snippets/login-form-with-play-function.md
index 01f853dbead4..1614a140698f 100644
--- a/docs/_snippets/login-form-with-play-function.md
+++ b/docs/_snippets/login-form-with-play-function.md
@@ -27,14 +27,14 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
 ```
 
-```js filename="LoginForm.stories.js|jsx" renderer="react" language="js"
+```js filename="LoginForm.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 import { LoginForm } from './LoginForm';
@@ -58,14 +58,14 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
 ```
 
-```ts filename="LoginForm.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="LoginForm.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -95,8 +95,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
@@ -126,8 +126,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
@@ -162,8 +162,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
@@ -233,8 +233,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
@@ -310,8 +310,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
@@ -350,8 +350,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
@@ -395,8 +395,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
@@ -424,8 +424,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
@@ -458,9 +458,76 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!'
-      )
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
     ).toBeInTheDocument();
   },
 };
 ```
+
+```ts filename="LoginForm.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { expect } from 'storybook/test';
+
+import { LoginForm } from './LoginForm';
+
+const meta = preview.meta({
+  component: LoginForm,
+});
+
+export const EmptyForm = meta.story();
+
+export const FilledForm = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
+    ).toBeInTheDocument();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="LoginForm.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect } from 'storybook/test';
+
+import { LoginForm } from './LoginForm';
+
+const meta = preview.meta({
+  component: LoginForm,
+});
+
+export const EmptyForm = meta.story();
+
+export const FilledForm = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!',
+      ),
+    ).toBeInTheDocument();
+  },
+});
+```
diff --git a/docs/_snippets/main-config-addons.md b/docs/_snippets/main-config-addons.md
index c557d77fbf2b..58a5dd7fbd9e 100644
--- a/docs/_snippets/main-config-addons.md
+++ b/docs/_snippets/main-config-addons.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import { fileURLToPath } from 'node:url';
 
 export default {
@@ -31,7 +31,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 import { fileURLToPath } from 'node:url';
 
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
@@ -67,3 +67,75 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { fileURLToPath } from 'node:url';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-docs',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  implementation: fileURLToPath(import.meta.resolve('postcss')),
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { fileURLToPath } from 'node:url';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-docs',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  implementation: fileURLToPath(import.meta.resolve('postcss')),
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/main-config-babel.md b/docs/_snippets/main-config-babel.md
index 418742549e60..dedcca4f05ff 100644
--- a/docs/_snippets/main-config-babel.md
+++ b/docs/_snippets/main-config-babel.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -15,7 +15,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -35,3 +35,43 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async babel(config, { configType }) {
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async babel(config, { configType }) {
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/main-config-builder-custom-config.md b/docs/_snippets/main-config-builder-custom-config.md
index 42ee9456cb46..da1b7996a571 100644
--- a/docs/_snippets/main-config-builder-custom-config.md
+++ b/docs/_snippets/main-config-builder-custom-config.md
@@ -1,4 +1,23 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../customVite.config.js',
+      },
+    },
+  },
+};
+
+export default config;
+```
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -11,3 +30,42 @@ export default {
   },
 };
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../customVite.config.js',
+      },
+    },
+  },
+});
+
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../customVite.config.js',
+      },
+    },
+  },
+});
+
+```
diff --git a/docs/_snippets/main-config-core-builder.md b/docs/_snippets/main-config-core-builder.md
index 4a7756587866..2485cfc343af 100644
--- a/docs/_snippets/main-config-core-builder.md
+++ b/docs/_snippets/main-config-core-builder.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -33,3 +33,41 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  framework: '@storybook/your-framework',
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../../../vite.config.js',
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../../../vite.config.js',
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-cross-origin-isolated.md b/docs/_snippets/main-config-core-cross-origin-isolated.md
index d616701a87d1..d805de493506 100644
--- a/docs/_snippets/main-config-core-cross-origin-isolated.md
+++ b/docs/_snippets/main-config-core-cross-origin-isolated.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    crossOriginIsolated: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    crossOriginIsolated: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-disable-project-json.md b/docs/_snippets/main-config-core-disable-project-json.md
index cbb872e40481..ee890b0b1cf3 100644
--- a/docs/_snippets/main-config-core-disable-project-json.md
+++ b/docs/_snippets/main-config-core-disable-project-json.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableProjectJson: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableProjectJson: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-disable-telemetry.md b/docs/_snippets/main-config-core-disable-telemetry.md
index e477883b24f4..6dade0254893 100644
--- a/docs/_snippets/main-config-core-disable-telemetry.md
+++ b/docs/_snippets/main-config-core-disable-telemetry.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-disable-update-notifications.md b/docs/_snippets/main-config-core-disable-update-notifications.md
index a897940e8ae8..729543b43fef 100644
--- a/docs/_snippets/main-config-core-disable-update-notifications.md
+++ b/docs/_snippets/main-config-core-disable-update-notifications.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWhatsNewNotifications: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWhatsNewNotifications: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-disable-webpack-defaults.md b/docs/_snippets/main-config-core-disable-webpack-defaults.md
index 2b44a85da342..3293a224d36a 100644
--- a/docs/_snippets/main-config-core-disable-webpack-defaults.md
+++ b/docs/_snippets/main-config-core-disable-webpack-defaults.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWebpackDefaults: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWebpackDefaults: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-enable-crash-reports.md b/docs/_snippets/main-config-core-enable-crash-reports.md
index 840d4239b72f..3f0bd87705c7 100644
--- a/docs/_snippets/main-config-core-enable-crash-reports.md
+++ b/docs/_snippets/main-config-core-enable-crash-reports.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
diff --git a/docs/_snippets/main-config-docs-default-name.md b/docs/_snippets/main-config-docs-default-name.md
index a44d84d16129..80bf9457fea7 100644
--- a/docs/_snippets/main-config-docs-default-name.md
+++ b/docs/_snippets/main-config-docs-default-name.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    defaultName: 'Documentation',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    defaultName: 'Documentation',
+  },
+});
+```
diff --git a/docs/_snippets/main-config-docs-docs-mode.md b/docs/_snippets/main-config-docs-docs-mode.md
index 5add16d9ac47..02b60f345914 100644
--- a/docs/_snippets/main-config-docs-docs-mode.md
+++ b/docs/_snippets/main-config-docs-docs-mode.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    docsMode: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    docsMode: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-env.md b/docs/_snippets/main-config-env.md
index 08f2717ad20f..9be592a44779 100644
--- a/docs/_snippets/main-config-env.md
+++ b/docs/_snippets/main-config-env.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -33,3 +33,41 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  /*
+   * 👇 The `config` argument contains all the other existing environment variables.
+   * Either configured in an `.env` file or configured on the command line.
+   */
+  env: (config) => ({
+    ...config,
+    EXAMPLE_VAR: 'An environment variable configured in Storybook',
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  /*
+   * 👇 The `config` argument contains all the other existing environment variables.
+   * Either configured in an `.env` file or configured on the command line.
+   */
+  env: (config) => ({
+    ...config,
+    EXAMPLE_VAR: 'An environment variable configured in Storybook',
+  }),
+});
+```
diff --git a/docs/_snippets/main-config-features-arg-type-targets-v7.md b/docs/_snippets/main-config-features-arg-type-targets-v7.md
index 76e5d4e259f5..7a7fc932b0c9 100644
--- a/docs/_snippets/main-config-features-arg-type-targets-v7.md
+++ b/docs/_snippets/main-config-features-arg-type-targets-v7.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    argTypeTargetsV7: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    argTypeTargetsV7: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-features-development-mode-for-build.md b/docs/_snippets/main-config-features-development-mode-for-build.md
index cc4907a25281..9a0f83c5c877 100644
--- a/docs/_snippets/main-config-features-development-mode-for-build.md
+++ b/docs/_snippets/main-config-features-development-mode-for-build.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    developmentModeForBuild: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    developmentModeForBuild: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-features-legacy-decorator-file-order.md b/docs/_snippets/main-config-features-legacy-decorator-file-order.md
index a24c96b4b9d8..af3793f558e6 100644
--- a/docs/_snippets/main-config-features-legacy-decorator-file-order.md
+++ b/docs/_snippets/main-config-features-legacy-decorator-file-order.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    legacyDecoratorFileOrder: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    legacyDecoratorFileOrder: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-framework.md b/docs/_snippets/main-config-framework.md
index 0776b13025ab..d1824a90d3fa 100644
--- a/docs/_snippets/main-config-framework.md
+++ b/docs/_snippets/main-config-framework.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     // Replace react-vite with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -27,3 +27,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      legacyRootApi: true,
+    },
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      legacyRootApi: true,
+    },
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
diff --git a/docs/_snippets/main-config-indexers-jsonstories.md b/docs/_snippets/main-config-indexers-jsonstories.md
index fc6e02f908d5..f3ee499fa206 100644
--- a/docs/_snippets/main-config-indexers-jsonstories.md
+++ b/docs/_snippets/main-config-indexers-jsonstories.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import fs from 'fs/promises';
 
 const jsonStoriesIndexer = {
@@ -30,10 +30,10 @@ const config = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+import type { Indexer } from 'storybook/internal/types';
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
-import type { Indexer } from 'storybook/internal/types';
 
 import fs from 'fs/promises';
 
@@ -65,3 +65,72 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import type { Indexer } from 'storybook/internal/types';
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import fs from 'fs/promises';
+
+const jsonStoriesIndexer: Indexer = {
+  test: /stories\.json$/,
+  createIndex: async (fileName) => {
+    const content = JSON.parse(fs.readFileSync(fileName));
+
+    const stories = generateStoryIndexesFromJson(content);
+
+    return stories.map((story) => ({
+      type: 'story',
+      importPath: `virtual:jsonstories--${fileName}--${story.componentName}`,
+      exportName: story.name,
+    }));
+  },
+};
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // 👇 Make sure files to index are included in `stories`
+    '../src/**/*.stories.json',
+  ],
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import fs from 'fs/promises';
+
+const jsonStoriesIndexer = {
+  test: /stories\.json$/,
+  createIndex: async (fileName) => {
+    const content = JSON.parse(fs.readFileSync(fileName));
+
+    const stories = generateStoryIndexesFromJson(content);
+
+    return stories.map((story) => ({
+      type: 'story',
+      importPath: `virtual:jsonstories--${fileName}--${story.componentName}`,
+      exportName: story.name,
+    }));
+  },
+};
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // 👇 Make sure files to index are included in `stories`
+    '../src/**/*.stories.json',
+  ],
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer],
+});
+```
diff --git a/docs/_snippets/main-config-indexers-title.md b/docs/_snippets/main-config-indexers-title.md
index 51a1758f0890..6952d1bd8d3e 100644
--- a/docs/_snippets/main-config-indexers-title.md
+++ b/docs/_snippets/main-config-indexers-title.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.ts" renderer="common" language="js"
+```js filename=".storybook/main.ts" renderer="common" language="js" tabTitle="CSF 3"
 const combosIndexer = {
   test: /\.stories\.[tj]sx?$/,
   createIndex: async (fileName, { makeTitle }) => {
@@ -28,7 +28,7 @@ const config = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 import type { Indexer } from 'storybook/internal/types';
@@ -60,3 +60,68 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import type { Indexer } from 'storybook/internal/types';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+const combosIndexer: Indexer = {
+  test: /\.stories\.[tj]sx?$/,
+  createIndex: async (fileName, { makeTitle }) => {
+    // 👇 Grab title from fileName
+    const title = fileName.match(/\/(.*)\.stories/)[1];
+
+    // Read file and generate entries ...
+    const entries = [];
+
+    return entries.map((entry) => ({
+      type: 'story',
+      // 👇 Use makeTitle to format the title
+      title: `${makeTitle(title)} Custom`,
+      importPath: fileName,
+      exportName: entry.name,
+    }));
+  },
+};
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.ts" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+const combosIndexer = {
+  test: /\.stories\.[tj]sx?$/,
+  createIndex: async (fileName, { makeTitle }) => {
+    // 👇 Grab title from fileName
+    const title = fileName.match(/\/(.*)\.stories/)[1];
+
+    // Read file and generate entries ...
+    let entries = [];
+    // Read file and generate entries...
+
+    return entries.map((entry) => ({
+      type: 'story',
+      // 👇 Use makeTitle to format the title
+      title: `${makeTitle(title)} Custom`,
+      importPath: fileName,
+      exportName: entry.name,
+    }));
+  },
+};
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
+});
+```
diff --git a/docs/_snippets/main-config-indexers.md b/docs/_snippets/main-config-indexers.md
index f2b1a40463ae..2a3f4a0498be 100644
--- a/docs/_snippets/main-config-indexers.md
+++ b/docs/_snippets/main-config-indexers.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -20,7 +20,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -45,3 +45,53 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // 👇 Make sure files to index are included in `stories`
+    '../src/**/*.custom-stories.@(js|jsx|ts|tsx)',
+  ],
+  experimental_indexers: async (existingIndexers) => {
+    const customIndexer = {
+      test: /\.custom-stories\.[tj]sx?$/,
+      createIndex: async (fileName) => {
+        // See API and examples below...
+      },
+    };
+    return [...existingIndexers, customIndexer];
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // 👇 Make sure files to index are included in `stories`
+    '../src/**/*.custom-stories.@(js|jsx|ts|tsx)',
+  ],
+  experimental_indexers: async (existingIndexers) => {
+    const customIndexer = {
+      test: /\.custom-stories\.[tj]sx?$/,
+      createIndex: async (fileName) => {
+        // See API and examples below...
+      },
+    };
+    return [...existingIndexers, customIndexer];
+  },
+});
+```
diff --git a/docs/_snippets/main-config-log-level.md b/docs/_snippets/main-config-log-level.md
index 00276c8eabba..2b4003ee020e 100644
--- a/docs/_snippets/main-config-log-level.md
+++ b/docs/_snippets/main-config-log-level.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -7,7 +7,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -19,3 +19,27 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  logLevel: 'debug',
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  logLevel: 'debug',
+});
+```
diff --git a/docs/_snippets/main-config-manager-head.md b/docs/_snippets/main-config-manager-head.md
index 7d9fe8f240d7..734498d61637 100644
--- a/docs/_snippets/main-config-manager-head.md
+++ b/docs/_snippets/main-config-manager-head.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -25,3 +25,33 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  managerHead: (head) => `
+    ${head}
+    <link rel="preload" href="/fonts/my-custom-manager-font.woff2" />
+  `,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  managerHead: (head) => `
+    ${head}
+    <link rel="preload" href="/fonts/my-custom-manager-font.woff2" />
+  `,
+});
+```
diff --git a/docs/_snippets/main-config-preview-body.md b/docs/_snippets/main-config-preview-body.md
index 712fbd860de5..e2de4758e699 100644
--- a/docs/_snippets/main-config-preview-body.md
+++ b/docs/_snippets/main-config-preview-body.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -12,7 +12,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -29,3 +29,37 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
diff --git a/docs/_snippets/main-config-preview-head.md b/docs/_snippets/main-config-preview-head.md
index 4eb7aa774c35..965f84ed5e7f 100644
--- a/docs/_snippets/main-config-preview-head.md
+++ b/docs/_snippets/main-config-preview-head.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -12,7 +12,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -29,3 +29,37 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  previewHead: (head) => `
+    ${head}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  previewHead: (head) => `
+    ${head}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
diff --git a/docs/_snippets/main-config-preview.md b/docs/_snippets/main-config-preview.md
index 65f3f3e51179..7ba3a38d8cba 100644
--- a/docs/_snippets/main-config-preview.md
+++ b/docs/_snippets/main-config-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="body"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="Body (CSF 3)"
 export default {
   previewBody: (body) => `
     ${body}
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="body"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="Body (CSF 3)"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -25,7 +25,7 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="head"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="Head (CSF 3)"
 export default {
   previewHead: (head) => `
     ${head}
@@ -38,7 +38,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="head"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="Head (CSF 3)"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -55,3 +55,67 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="Body (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="Body (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="Head (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        background: #827979;
+      }
+    </style>
+ `,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="Head (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        background: #827979;
+      }
+    </style>
+ `,
+});
+```
diff --git a/docs/_snippets/main-config-refs-disable.md b/docs/_snippets/main-config-refs-disable.md
index d4c04ac877a5..b7f6878155a2 100644
--- a/docs/_snippets/main-config-refs-disable.md
+++ b/docs/_snippets/main-config-refs-disable.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'package-name': { disable: true },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'package-name': { disable: true },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-refs-with-function.md b/docs/_snippets/main-config-refs-with-function.md
index 287795f517b6..8ad2ae33bb54 100644
--- a/docs/_snippets/main-config-refs-with-function.md
+++ b/docs/_snippets/main-config-refs-with-function.md
@@ -1,9 +1,8 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-
   // 👇 Retrieve the current environment from the configType argument
   refs: (config, { configType }) => {
     if (configType === 'DEVELOPMENT') {
@@ -32,14 +31,13 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-
   // 👇 Retrieve the current environment from the configType argument
   refs: (config, { configType }) => {
     if (configType === 'DEVELOPMENT') {
@@ -69,3 +67,75 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // 👇 Retrieve the current environment from the configType argument
+  refs: (config, { configType }) => {
+    if (configType === 'DEVELOPMENT') {
+      return {
+        react: {
+          title: 'Composed React Storybook running in development mode',
+          url: 'http://localhost:7007',
+        },
+        angular: {
+          title: 'Composed Angular Storybook running in development mode',
+          url: 'http://localhost:7008',
+        },
+      };
+    }
+    return {
+      react: {
+        title: 'Composed React Storybook running in production',
+        url: 'https://your-production-react-storybook-url',
+      },
+      angular: {
+        title: 'Composed Angular Storybook running in production',
+        url: 'https://your-production-angular-storybook-url',
+      },
+    };
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // 👇 Retrieve the current environment from the configType argument
+  refs: (config, { configType }) => {
+    if (configType === 'DEVELOPMENT') {
+      return {
+        react: {
+          title: 'Composed React Storybook running in development mode',
+          url: 'http://localhost:7007',
+        },
+        angular: {
+          title: 'Composed Angular Storybook running in development mode',
+          url: 'http://localhost:7008',
+        },
+      };
+    }
+    return {
+      react: {
+        title: 'Composed React Storybook running in production',
+        url: 'https://your-production-react-storybook-url',
+      },
+      angular: {
+        title: 'Composed Angular Storybook running in production',
+        url: 'https://your-production-angular-storybook-url',
+      },
+    };
+  },
+});
+```
diff --git a/docs/_snippets/main-config-refs.md b/docs/_snippets/main-config-refs.md
index 65615ec97e58..c523efc4cd34 100644
--- a/docs/_snippets/main-config-refs.md
+++ b/docs/_snippets/main-config-refs.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -33,3 +33,41 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'design-system': {
+      title: 'Storybook Design System',
+      url: 'https://master--5ccbc373887ca40020446347.chromatic.com/',
+      expanded: false, // Optional, true by default,
+      sourceUrl: 'https://github.com/storybookjs/storybook', // Optional
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'design-system': {
+      title: 'Storybook Design System',
+      url: 'https://master--5ccbc373887ca40020446347.chromatic.com/',
+      expanded: false, // Optional, true by default
+      sourceUrl: 'https://github.com/storybookjs/storybook', // Optional
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-static-dirs-with-object.md b/docs/_snippets/main-config-static-dirs-with-object.md
index 106616964580..a33c62a6b1a4 100644
--- a/docs/_snippets/main-config-static-dirs-with-object.md
+++ b/docs/_snippets/main-config-static-dirs-with-object.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -7,7 +7,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -19,3 +19,27 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
+});
+```
diff --git a/docs/_snippets/main-config-static-dirs.md b/docs/_snippets/main-config-static-dirs.md
index 0e1c0c46990f..edbfa31d99ec 100644
--- a/docs/_snippets/main-config-static-dirs.md
+++ b/docs/_snippets/main-config-static-dirs.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -7,7 +7,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -19,3 +19,27 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../public', '../static'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../public', '../static'],
+});
+```
diff --git a/docs/_snippets/main-config-stories-ordered.md b/docs/_snippets/main-config-stories-ordered.md
index 6ea839784c91..e3e02cfe99df 100644
--- a/docs/_snippets/main-config-stories-ordered.md
+++ b/docs/_snippets/main-config-stories-ordered.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,14 +9,45 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../src/**/*.mdx', // 👈 These will display first in the sidebar
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', // 👈 Followed by these
+  ],
 };
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    '../src/**/*.mdx', // 👈 These will display first in the sidebar
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', // 👈 Followed by these
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    '../src/**/*.mdx', // 👈 These will display first in the sidebar
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', // 👈 Followed by these
+  ],
+});
+```
diff --git a/docs/_snippets/main-config-stories-with-logic.md b/docs/_snippets/main-config-stories-with-logic.md
index 830412d3fb5e..ae1283e3dbd4 100644
--- a/docs/_snippets/main-config-stories-with-logic.md
+++ b/docs/_snippets/main-config-stories-with-logic.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 async function findStories() {
   // your custom logic returns a list of files
 }
@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 import type { StoriesEntry } from 'storybook/internal/types';
@@ -34,3 +34,43 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import type { StoriesEntry } from 'storybook/internal/types';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+async function findStories(): Promise<StoriesEntry[]> {
+  // your custom logic returns a list of files
+}
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: async (list: StoriesEntry[]) => [
+    ...list,
+    // 👇 Add your found stories to the existing list of story files
+    ...(await findStories()),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+async function findStories() {
+  // your custom logic returns a list of files
+}
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: async (list) => [
+    ...list,
+    // 👇 Add your found stories to the existing list of story files
+    ...(await findStories()),
+  ],
+});
+```
diff --git a/docs/_snippets/main-config-stories-with-object.md b/docs/_snippets/main-config-stories-with-object.md
index f8b1c398c778..863a786ad555 100644
--- a/docs/_snippets/main-config-stories-with-object.md
+++ b/docs/_snippets/main-config-stories-with-object.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -15,7 +15,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -35,3 +35,43 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    {
+      // 👇 Sets the directory containing your stories
+      directory: '../packages/components',
+      // 👇 Storybook will load all files that match this glob
+      files: '*.stories.*',
+      // 👇 Used when generating automatic titles for your stories
+      titlePrefix: 'MyComponents',
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    {
+      // 👇 Sets the directory containing your stories
+      directory: '../packages/components',
+      // 👇 Storybook will load all files that match this glob
+      files: '*.stories.*',
+      // 👇 Used when generating automatic titles for your stories
+      titlePrefix: 'MyComponents',
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/main-config-stories.md b/docs/_snippets/main-config-stories.md
index 1ab977bcda81..548b8df91e09 100644
--- a/docs/_snippets/main-config-stories.md
+++ b/docs/_snippets/main-config-stories.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -17,3 +17,25 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
diff --git a/docs/_snippets/main-config-swc-jsx-transform.md b/docs/_snippets/main-config-swc-jsx-transform.md
index f942eee4e7fc..78ea1ea7ab34 100644
--- a/docs/_snippets/main-config-swc-jsx-transform.md
+++ b/docs/_snippets/main-config-swc-jsx-transform.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     name: '@storybook/your-framework',
@@ -16,7 +16,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -38,3 +38,47 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {},
+  },
+  swc: (config, options) => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {},
+  },
+  swc: (config, options) => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+});
+```
diff --git a/docs/_snippets/main-config-swc.md b/docs/_snippets/main-config-swc.md
index 670bdb51b922..f4fb32af6f62 100644
--- a/docs/_snippets/main-config-swc.md
+++ b/docs/_snippets/main-config-swc.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     name: '@storybook/your-framework',
@@ -13,8 +13,9 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 import type { Options } from '@swc/core';
+
 // Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -33,3 +34,43 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import type { Options } from '@swc/core';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {},
+  },
+  swc: (config: Options, options): Options => {
+    return {
+      ...config,
+      // Apply your custom SWC configuration
+    };
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {},
+  },
+  swc: (config, options) => {
+    return {
+      ...config,
+      // Apply your custom SWC configuration
+    };
+  },
+});
+```
diff --git a/docs/_snippets/main-config-tags-test-fn-exclude.md b/docs/_snippets/main-config-tags-test-fn-exclude.md
index ca43bf468932..adc57f3f7573 100644
--- a/docs/_snippets/main-config-tags-test-fn-exclude.md
+++ b/docs/_snippets/main-config-tags-test-fn-exclude.md
@@ -1,18 +1,18 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   tags: {
     // 👇 Adjust the default configuration of this tag
-    'test-fn': {
+    _test: {
       defaultFilterSelection: 'exclude',
     },
   },
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -21,7 +21,7 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   tags: {
     // 👇 Adjust the default configuration of this tag
-    'test-fn': {
+    _test: {
       defaultFilterSelection: 'exclude',
     },
   },
@@ -29,3 +29,40 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  tags: {
+    // 👇 Adjust the default configuration of this tag
+    _test: {
+      defaultFilterSelection: 'exclude',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+  framework: '@storybook/your-framework',
+
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  tags: {
+    // 👇 Adjust the default configuration of this tag
+    _test: {
+      defaultFilterSelection: 'exclude',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-tags.md b/docs/_snippets/main-config-tags.md
index 40c4ff8c73ba..86434ccc2791 100644
--- a/docs/_snippets/main-config-tags.md
+++ b/docs/_snippets/main-config-tags.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -12,7 +12,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -29,3 +29,38 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  tags: {
+    // 👇 Define a custom tag named "experimental"
+    experimental: {
+      defaultFilterSelection: 'exclude', // Or 'include'
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  tags: {
+    // 👇 Define a custom tag named "experimental"
+    experimental: {
+      defaultFilterSelection: 'exclude', // Or 'include'
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-autodocs.md b/docs/_snippets/main-config-test-disable-autodocs.md
index c239137b3a7f..5d936de597d9 100644
--- a/docs/_snippets/main-config-test-disable-autodocs.md
+++ b/docs/_snippets/main-config-test-disable-autodocs.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -27,3 +27,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableAutoDocs: false,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableAutoDocs: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-blocks.md b/docs/_snippets/main-config-test-disable-blocks.md
index 089aafed75a9..fc02c383f4e7 100644
--- a/docs/_snippets/main-config-test-disable-blocks.md
+++ b/docs/_snippets/main-config-test-disable-blocks.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -27,3 +27,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableBlocks: false,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableBlocks: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-disableaddons.md b/docs/_snippets/main-config-test-disable-disableaddons.md
index 42479c717751..76f58bfd1ee6 100644
--- a/docs/_snippets/main-config-test-disable-disableaddons.md
+++ b/docs/_snippets/main-config-test-disable-disableaddons.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -12,7 +12,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -29,3 +29,37 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-vitest'],
+  build: {
+    test: {
+      disabledAddons: ['@storybook/addon-a11y'],
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-vitest'],
+  build: {
+    test: {
+      disabledAddons: ['@storybook/addon-a11y'],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-docgen.md b/docs/_snippets/main-config-test-disable-docgen.md
index 3494578b77c2..545b8438cfc4 100644
--- a/docs/_snippets/main-config-test-disable-docgen.md
+++ b/docs/_snippets/main-config-test-disable-docgen.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -27,3 +27,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableDocgen: false,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableDocgen: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-mdx.md b/docs/_snippets/main-config-test-disable-mdx.md
index 2bc16acc1a36..77cfc7bc982c 100644
--- a/docs/_snippets/main-config-test-disable-mdx.md
+++ b/docs/_snippets/main-config-test-disable-mdx.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -27,3 +27,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableMDXEntries: false,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableMDXEntries: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-sourcemaps.md b/docs/_snippets/main-config-test-disable-sourcemaps.md
index 73ce5fb7307f..6d77d68fa264 100644
--- a/docs/_snippets/main-config-test-disable-sourcemaps.md
+++ b/docs/_snippets/main-config-test-disable-sourcemaps.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -27,3 +27,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableSourcemaps: false,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableSourcemaps: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-treeshaking.md b/docs/_snippets/main-config-test-disable-treeshaking.md
index 7dd4927576fb..cc3c826f34ab 100644
--- a/docs/_snippets/main-config-test-disable-treeshaking.md
+++ b/docs/_snippets/main-config-test-disable-treeshaking.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -27,3 +27,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableTreeShaking: false,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableTreeShaking: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-check-options.md b/docs/_snippets/main-config-typescript-check-options.md
index a3edb659e639..07cc9f88ecec 100644
--- a/docs/_snippets/main-config-typescript-check-options.md
+++ b/docs/_snippets/main-config-typescript-check-options.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -15,3 +15,19 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: true,
+    checkOptions: {
+      eslint: true,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-check.md b/docs/_snippets/main-config-typescript-check.md
index 501c994aa5e4..5399472f43fb 100644
--- a/docs/_snippets/main-config-typescript-check.md
+++ b/docs/_snippets/main-config-typescript-check.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -12,3 +12,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md b/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
index bb0073e6b3cb..8700b7afb2bd 100644
--- a/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
+++ b/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -17,3 +17,21 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      // 👇 Default prop filter, which excludes props from node_modules
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-react-docgen.md b/docs/_snippets/main-config-typescript-react-docgen.md
index e76bfc0f67f7..7a797f7e6690 100644
--- a/docs/_snippets/main-config-typescript-react-docgen.md
+++ b/docs/_snippets/main-config-typescript-react-docgen.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -12,3 +12,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen',
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-skip-compiler.md b/docs/_snippets/main-config-typescript-skip-compiler.md
index 4a0f99fa77ce..2f1945221bbc 100644
--- a/docs/_snippets/main-config-typescript-skip-compiler.md
+++ b/docs/_snippets/main-config-typescript-skip-compiler.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -12,3 +12,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    skipCompiler: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typical.md b/docs/_snippets/main-config-typical.md
index caa1cc076889..3f4cb1ebf855 100644
--- a/docs/_snippets/main-config-typical.md
+++ b/docs/_snippets/main-config-typical.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 const config = {
   // Required
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
@@ -6,15 +6,12 @@ const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   // Optional
   addons: ['@storybook/addon-docs'],
-  docs: {
-    defaultName: 'Documentation',
-  },
   staticDirs: ['../public'],
 };
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -24,11 +21,38 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   // Optional
   addons: ['@storybook/addon-docs'],
-  docs: {
-    defaultName: 'Documentation',
-  },
   staticDirs: ['../public'],
 };
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Required
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // Optional
+  addons: ['@storybook/addon-docs'],
+  staticDirs: ['../public'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Required
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // Optional
+  addons: ['@storybook/addon-docs'],
+  staticDirs: ['../public'],
+});
+```
diff --git a/docs/_snippets/main-config-vite-final-env.md b/docs/_snippets/main-config-vite-final-env.md
index 08169883723c..d9d950764f26 100644
--- a/docs/_snippets/main-config-vite-final-env.md
+++ b/docs/_snippets/main-config-vite-final-env.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using, e.g. react-vite, nextjs-vite, vue3-vite, etc.
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -21,3 +21,86 @@ export default {
   },
 };
 ```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return mergeConfig(config, {
+      // Your environment configuration here
+    });
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return mergeConfig(config, {
+      // Your environment configuration here
+    });
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return mergeConfig(config, {
+      // Your environment configuration here
+    });
+  },
+});
+```
diff --git a/docs/_snippets/main-config-vite-final.md b/docs/_snippets/main-config-vite-final.md
index 5420eb7082df..17804155a7d4 100644
--- a/docs/_snippets/main-config-vite-final.md
+++ b/docs/_snippets/main-config-vite-final.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs-vite, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -19,7 +19,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs-vite, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -43,3 +43,51 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return mergeConfig(config, {
+      // Your environment configuration here
+    });
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return mergeConfig(config, {
+      // Your environment configuration here
+    });
+  },
+});
+```
diff --git a/docs/_snippets/main-config-webpack-final.md b/docs/_snippets/main-config-webpack-final.md
index 1377548bdb8d..0265b4f22e52 100644
--- a/docs/_snippets/main-config-webpack-final.md
+++ b/docs/_snippets/main-config-webpack-final.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
   framework: '@storybook/your-framework',
@@ -15,7 +15,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -35,3 +35,43 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config, { configType }) => {
+    if (configType === 'DEVELOPMENT') {
+      // Modify config for development
+    }
+    if (configType === 'PRODUCTION') {
+      // Modify config for production
+    }
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config, { configType }) => {
+    if (configType === 'DEVELOPMENT') {
+      // Modify config for development
+    }
+    if (configType === 'PRODUCTION') {
+      // Modify config for production
+    }
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/mock-context-container-global.md b/docs/_snippets/mock-context-container-global.md
index 18525632e8c1..9f24156103a7 100644
--- a/docs/_snippets/mock-context-container-global.md
+++ b/docs/_snippets/mock-context-container-global.md
@@ -1,8 +1,7 @@
-```js filename=".storybook/preview.js" renderer="react" language="js"
-import React from 'react';
+```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
+import * as React from 'react';
 
 import { normal as NavigationNormal } from '../components/Navigation.stories';
-
 import GlobalContainerContext from '../components/lib/GlobalContainerContext';
 
 const context = {
@@ -18,14 +17,13 @@ const AppDecorator = (storyFn) => {
 export default { decorators: [AppDecorator] };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="react" language="ts"
-import React from 'react';
+```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
+import * as React from 'react';
 
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { normal as NavigationNormal } from '../components/Navigation.stories';
-
 import GlobalContainerContext from '../components/lib/GlobalContainerContext';
 
 const context = {
@@ -45,9 +43,8 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="solid" language="js"
+```jsx filename=".storybook/preview.js" renderer="solid" language="js"
 import { normal as NavigationNormal } from '../components/Navigation.stories';
-
 import GlobalContainerContext from '../components/lib/GlobalContainerContext';
 
 const context = {
@@ -62,9 +59,8 @@ const AppDecorator = (storyFn) => {
 export const decorators = [AppDecorator];
 ```
 
-```ts filename=".storybook/preview.ts" renderer="solid" language="ts"
+```tsx filename=".storybook/preview.ts" renderer="solid" language="ts"
 import { normal as NavigationNormal } from '../components/Navigation.stories';
-
 import GlobalContainerContext from '../components/lib/GlobalContainerContext';
 
 const context = {
@@ -83,3 +79,53 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { normal as NavigationNormal } from '../components/Navigation.stories';
+import GlobalContainerContext from '../components/lib/GlobalContainerContext';
+
+const context = {
+  NavigationContainer: NavigationNormal,
+};
+
+const AppDecorator = (storyFn) => {
+  return (
+    <GlobalContainerContext.Provider value={context}>{storyFn()}</GlobalContainerContext.Provider>
+  );
+};
+
+export default definePreview({
+  decorators: [AppDecorator],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { normal as NavigationNormal } from '../components/Navigation.stories';
+import GlobalContainerContext from '../components/lib/GlobalContainerContext';
+
+const context = {
+  NavigationContainer: NavigationNormal,
+};
+
+const AppDecorator = (storyFn) => {
+  return (
+    <GlobalContainerContext.Provider value={context}>{storyFn()}</GlobalContainerContext.Provider>
+  );
+};
+
+export default definePreview({
+  decorators: [AppDecorator],
+});
+```
diff --git a/docs/_snippets/mock-provider-in-preview.md b/docs/_snippets/mock-provider-in-preview.md
index 52fc81dbc872..aef0f850697a 100644
--- a/docs/_snippets/mock-provider-in-preview.md
+++ b/docs/_snippets/mock-provider-in-preview.md
@@ -1,4 +1,4 @@
-```jsx filename=".storybook/preview.jsx" renderer="react" language="js"
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 import { ThemeProvider } from 'styled-components';
@@ -22,7 +22,7 @@ export default {
 };
 ```
 
-```tsx filename=".storybook/preview.tsx" renderer="react" language="ts"
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
@@ -50,3 +50,59 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ThemeProvider } from 'styled-components';
+
+// themes = { light, dark }
+import * as themes from '../src/themes';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading the theme value from parameters
+      const { theme = 'light' } = parameters;
+      return (
+        <ThemeProvider theme={themes[theme]}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ThemeProvider } from 'styled-components';
+
+// themes = { light, dark }
+import * as themes from '../src/themes';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading the theme value from parameters
+      const { theme = 'light' } = parameters;
+      return (
+        <ThemeProvider theme={themes[theme]}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/module-aliases-config.md b/docs/_snippets/module-aliases-config.md
index 66c8ba418ea8..7745c67d9ec3 100644
--- a/docs/_snippets/module-aliases-config.md
+++ b/docs/_snippets/module-aliases-config.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="vite"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="Vite (CSF 3)"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs-vite, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -22,7 +22,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="vite"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="Vite (CSF 3)"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs-vite, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -50,7 +50,7 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="webpack"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="Webpack (CSF 3)"
 export default {
   // Replace your-framework with the framework you are using (e.g., nextjs, react-webpack5)
   framework: '@storybook/your-framework',
@@ -74,7 +74,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="webpack"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="Webpack (CSF 3)"
 // Replace your-framework with the framework you are using (e.g., nextjs, react-webpack5)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -101,3 +101,111 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="Vite (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  viteFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve?.alias,
+        // 👇 External module
+        lodash: import.meta.resolve('./lodash.mock'),
+        // 👇 Internal modules
+        '@/api': import.meta.resolve('./api.mock.ts'),
+        '@/app/actions': import.meta.resolve('./app/actions.mock.ts'),
+        '@/lib/session': import.meta.resolve('./lib/session.mock.ts'),
+        '@/lib/db': import.meta.resolve('./lib/db.mock.ts'),
+      };
+    }
+
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="Vite (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  viteFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve?.alias,
+        // 👇 External module
+        lodash: import.meta.resolve('./lodash.mock'),
+        // 👇 Internal modules
+        '@/api': import.meta.resolve('./api.mock.ts'),
+        '@/app/actions': import.meta.resolve('./app/actions.mock.ts'),
+        '@/lib/session': import.meta.resolve('./lib/session.mock.ts'),
+        '@/lib/db': import.meta.resolve('./lib/db.mock.ts'),
+      };
+    }
+
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="Webpack (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., nextjs, react-webpack5)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        // 👇 External module
+        lodash: import.meta.resolve('./lodash.mock'),
+        // 👇 Internal modules
+        '@/api$': import.meta.resolve('./api.mock.ts'),
+        '@/app/actions$': import.meta.resolve('./app/actions.mock.ts'),
+        '@/lib/session$': import.meta.resolve('./lib/session.mock.ts'),
+        '@/lib/db$': import.meta.resolve('./lib/db.mock.ts'),
+      };
+    }
+
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="Webpack (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., nextjs, react-webpack5)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        // 👇 External module
+        lodash: import.meta.resolve('./lodash.mock'),
+        // 👇 Internal modules
+        '@/api$': import.meta.resolve('./api.mock.ts'),
+        '@/app/actions$': import.meta.resolve('./app/actions.mock.ts'),
+        '@/lib/session$': import.meta.resolve('./lib/session.mock.ts'),
+        '@/lib/db$': import.meta.resolve('./lib/db.mock.ts'),
+      };
+    }
+
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/mount-advanced.md b/docs/_snippets/mount-advanced.md
index d7c00d14e825..6f3adcd911a4 100644
--- a/docs/_snippets/mount-advanced.md
+++ b/docs/_snippets/mount-advanced.md
@@ -1,4 +1,4 @@
-```tsx filename="Page.stories.tsx" renderer="react" language="ts"
+```tsx filename="Page.stories.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g., react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -20,7 +20,7 @@ export const Default: Story = {
     const canvas = await mount(
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      <Page {...args} params={{ id: String(note.id) }} />
+      <Page {...args} params={{ id: String(note.id) }} />,
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -32,7 +32,7 @@ export const Default: Story = {
 };
 ```
 
-```jsx filename="Page.stories.jsx" renderer="react" language="js"
+```jsx filename="Page.stories.jsx" renderer="react" language="js" tabTitle="CSF 3"
 // 👇 Automocked module resolves to '../lib/__mocks__/db'
 import db from '../lib/db';
 import { Page } from './Page';
@@ -48,7 +48,7 @@ export const Default = {
     const canvas = await mount(
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      <Page {...args} params={{ id: String(note.id) }} />
+      <Page {...args} params={{ id: String(note.id) }} />,
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -83,7 +83,7 @@ export const Default: Story = {
       Page,
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      { props: { ...args, params: { id: String(note.id) } } }
+      { props: { ...args, params: { id: String(note.id) } } },
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -112,7 +112,7 @@ export const Default = {
       Page,
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      { props: { ...args, params: { id: String(note.id) } } }
+      { props: { ...args, params: { id: String(note.id) } } },
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -146,7 +146,7 @@ export const Default: Story = {
       Page,
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      { props: { ...args, params: { id: String(note.id) } } }
+      { props: { ...args, params: { id: String(note.id) } } },
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -175,7 +175,7 @@ export const Default = {
       Page,
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      { props: { ...args, params: { id: String(note.id) } } }
+      { props: { ...args, params: { id: String(note.id) } } },
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -186,3 +186,66 @@ export const Default = {
   },
 };
 ```
+
+```tsx filename="Page.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// 👇 Automocked module resolves to '../lib/__mocks__/db'
+import db from '../lib/db';
+import { Page } from './Page';
+
+const meta = preview.meta({ component: Page });
+
+export const Default = meta.story({
+  play: async ({ mount, args, userEvent }) => {
+    const note = await db.note.create({
+      data: { title: 'Mount inside of play' },
+    });
+
+    const canvas = await mount(
+      // 👇 Pass data that is created inside of the play function to the component
+      //   For example, a just-generated UUID
+      <Page {...args} params={{ id: String(note.id) }} />,
+    );
+
+    await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
+  },
+  argTypes: {
+    // 👇 Make the params prop un-controllable, as the value is always overriden in the play function.
+    params: { control: { disable: true } },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Page.stories.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+// 👇 Automocked module resolves to '../lib/__mocks__/db'
+import db from '../lib/db';
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const Default = meta.story({
+  play: async ({ mount, args, userEvent }) => {
+    const note = await db.note.create({
+      data: { title: 'Mount inside of play' },
+    });
+
+    const canvas = await mount(
+      // 👇 Pass data that is created inside of the play function to the component
+      //   For example, a just-generated UUID
+      <Page {...args} params={{ id: String(note.id) }} />,
+    );
+
+    await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
+  },
+  argTypes: {
+    // 👇 Make the params prop un-controllable, as the value is always overriden in the play function.
+    params: { control: { disable: true } },
+  },
+});
+```
diff --git a/docs/_snippets/mount-basic.md b/docs/_snippets/mount-basic.md
index 277302a01edb..0f0e9ba51ee9 100644
--- a/docs/_snippets/mount-basic.md
+++ b/docs/_snippets/mount-basic.md
@@ -1,4 +1,4 @@
-```js filename="Page.stories.js" renderer="common" language="js"
+```js filename="Page.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 // ...rest of story file
@@ -13,7 +13,7 @@ export const ChristmasUI = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts"
+```ts filename="Page.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 // ...rest of story file
@@ -101,3 +101,47 @@ export const ChristmasUI = {
   },
 };
 ```
+
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';
+
+import Page from './Page';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const ChristmasUI = meta.story({
+  async play({ mount }) {
+    MockDate.set('2024-12-25');
+    // 👇 Render the component with the mocked date
+    await mount();
+    // ...rest of test
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';
+
+import Page from './Page';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const ChristmasUI = meta.story({
+  async play({ mount }) {
+    MockDate.set('2024-12-25');
+    // 👇 Render the component with the mocked date
+    await mount();
+    // ...rest of test
+  },
+});
+```
diff --git a/docs/_snippets/msw-addon-configure-handlers-graphql.md b/docs/_snippets/msw-addon-configure-handlers-graphql.md
index c645185e1877..c7bf85337361 100644
--- a/docs/_snippets/msw-addon-configure-handlers-graphql.md
+++ b/docs/_snippets/msw-addon-configure-handlers-graphql.md
@@ -128,7 +128,8 @@ export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
 export class MockGraphQLModule {}
 ```
 
-```js filename="YourPage.stories.js|jsx" renderer="react" language="js"
+```jsx filename="YourPage.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
+import * as React from 'react';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 import { graphql, HttpResponse, delay } from 'msw';
 
@@ -223,13 +224,14 @@ export const MockedError = {
 };
 ```
 
-```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
+```tsx filename="YourPage.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
+import * as React from 'react';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 import { graphql, HttpResponse, delay } from 'msw';
 
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
 import { DocumentScreen } from './YourPage';
 
 const mockedClient = new ApolloClient({
@@ -927,3 +929,200 @@ export const MockedError: Story = {
   });
 </script>
 ```
+
+```tsx filename="YourPage.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { graphql, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import { DocumentScreen } from './YourPage';
+
+const mockedClient = new ApolloClient({
+  uri: 'https://your-graphql-endpoint',
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+    query: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+  },
+});
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+const meta = preview.meta({
+  component: DocumentScreen,
+  decorators: [
+    (Story) => (
+      <ApolloProvider client={mockedClient}>
+        <Story />
+      </ApolloProvider>
+    ),
+  ],
+});
+
+export const MockedSuccess = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', () => {
+          return HttpResponse.json({
+            data: {
+              allInfo: {
+                ...TestData,
+              },
+            },
+          });
+        }),
+      ],
+    },
+  },
+});
+
+export const MockedError = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', async () => {
+          await delay(800);
+          return HttpResponse.json({
+            errors: [
+              {
+                message: 'Access denied',
+              },
+            ],
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="YourPage.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { graphql, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import { DocumentScreen } from './YourPage';
+
+const mockedClient = new ApolloClient({
+  uri: 'https://your-graphql-endpoint',
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+    query: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+  },
+});
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const meta = preview.meta({
+  component: DocumentScreen,
+  decorators: [
+    (Story) => (
+      <ApolloProvider client={mockedClient}>
+        <Story />
+      </ApolloProvider>
+    ),
+  ],
+});
+
+export const MockedSuccess = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', () => {
+          return HttpResponse.json({
+            data: {
+              allInfo: {
+                ...TestData,
+              },
+            },
+          });
+        }),
+      ],
+    },
+  },
+});
+
+export const MockedError = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', async () => {
+          await delay(800);
+          return HttpResponse.json({
+            errors: [
+              {
+                message: 'Access denied',
+              },
+            ],
+          });
+        }),
+      ],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/msw-addon-configure-handlers-http.md b/docs/_snippets/msw-addon-configure-handlers-http.md
index 0d7cd9090149..350dd397c29b 100644
--- a/docs/_snippets/msw-addon-configure-handlers-http.md
+++ b/docs/_snippets/msw-addon-configure-handlers-http.md
@@ -195,7 +195,7 @@ export const MockedError = {
 };
 ```
 
-```js filename="YourPage.stories.js|jsx" renderer="common" language="js"
+```js filename="YourPage.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { http, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage';
@@ -393,7 +393,7 @@ export const MockedError: Story = {
 };
 ```
 
-```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -585,3 +585,133 @@ export const MockedError: Story = {
   },
 };
 ```
+
+```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { http, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import { DocumentScreen } from './YourPage';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+});
+
+// 👇 The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+export const MockedSuccess = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint/', () => {
+          return HttpResponse.json(TestData);
+        }),
+      ],
+    },
+  },
+});
+
+export const MockedError = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint', async () => {
+          await delay(800);
+          return new HttpResponse(null, {
+            status: 403,
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="YourPage.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { http, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import { DocumentScreen } from './YourPage';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+});
+
+// 👇 The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+export const MockedSuccess = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint/', () => {
+          return HttpResponse.json(TestData);
+        }),
+      ],
+    },
+  },
+});
+
+export const MockedError = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint', async () => {
+          await delay(800);
+          return new HttpResponse(null, {
+            status: 403,
+          });
+        }),
+      ],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/msw-addon-initialize.md b/docs/_snippets/msw-addon-initialize.md
index f11e6909822b..6a04e821f59e 100644
--- a/docs/_snippets/msw-addon-initialize.md
+++ b/docs/_snippets/msw-addon-initialize.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { initialize, mswLoader } from 'msw-storybook-addon';
 
 /*
@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -34,3 +34,43 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { initialize, mswLoader } from 'msw-storybook-addon';
+
+/*
+ * Initializes MSW
+ * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ * to learn how to customize it
+ */
+initialize();
+
+export default definePreview({
+  // ... rest of preview configuration
+  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { initialize, mswLoader } from 'msw-storybook-addon';
+
+/*
+ * Initializes MSW
+ * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ * to learn how to customize it
+ */
+initialize();
+
+export default definePreview({
+  // ... rest of preview configuration
+  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
+});
+```
diff --git a/docs/_snippets/my-component-disable-toc.md b/docs/_snippets/my-component-disable-toc.md
index 2e4f9523a534..c7e6388ac45c 100644
--- a/docs/_snippets/my-component-disable-toc.md
+++ b/docs/_snippets/my-component-disable-toc.md
@@ -54,7 +54,7 @@ export default {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="common" language="js"
+```js filename="MyComponent.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -111,7 +111,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -163,3 +163,40 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/my-component-env-var-config.md b/docs/_snippets/my-component-env-var-config.md
index 92574bd23f6c..23d51f5c7061 100644
--- a/docs/_snippets/my-component-env-var-config.md
+++ b/docs/_snippets/my-component-env-var-config.md
@@ -18,7 +18,7 @@ export const Default: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -32,7 +32,7 @@ export const Default = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -80,3 +80,36 @@ export const Default: Story = {
   },
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Default = meta.story({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Default = meta.story({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
diff --git a/docs/_snippets/my-component-exclude-tags.md b/docs/_snippets/my-component-exclude-tags.md
index 377c4587622e..d4be41376309 100644
--- a/docs/_snippets/my-component-exclude-tags.md
+++ b/docs/_snippets/my-component-exclude-tags.md
@@ -18,7 +18,7 @@ export const ExcludeStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -33,7 +33,7 @@ export const ExcludeStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -53,3 +53,39 @@ export const ExcludeStory: Story = {
   tags: ['no-tests'],
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  //👇 Provides the `no-tests` tag to all stories in this file
+  tags: ['no-tests'],
+});
+
+export const ExcludeStory = meta.story({
+  //👇 Adds the `no-tests` tag to this story to exclude it from the tests when enabled in the test-runner configuration
+  tags: ['no-tests'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  //👇 Provides the `no-tests` tag to all stories in this file
+  tags: ['no-tests'],
+});
+
+export const ExcludeStory = meta.story({
+  //👇 Adds the `no-tests` tag to this story to exclude it from the tests when enabled in the test-runner configuration
+  tags: ['no-tests'],
+});
+```
diff --git a/docs/_snippets/my-component-include-tags.md b/docs/_snippets/my-component-include-tags.md
index d5c14b5d0dc5..91866513c704 100644
--- a/docs/_snippets/my-component-include-tags.md
+++ b/docs/_snippets/my-component-include-tags.md
@@ -18,7 +18,7 @@ export const IncludeStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -33,7 +33,7 @@ export const IncludeStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -53,3 +53,39 @@ export const IncludeStory: Story = {
   tags: ['test-only'],
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  //👇 Provides the `test-only` tag to all stories in this file
+  tags: ['test-only'],
+});
+
+export const IncludeStory = meta.story({
+  //👇 Adds the `test-only` tag to this story to be included in the tests when enabled in the test-runner configuration
+  tags: ['test-only'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  //👇 Provides the `test-only` tag to all stories in this file
+  tags: ['test-only'],
+});
+
+export const IncludeStory = meta.story({
+  //👇 Adds the `test-only` tag to this story to be included in the tests when enabled in the test-runner configuration
+  tags: ['test-only'],
+});
+```
diff --git a/docs/_snippets/my-component-skip-tags.md b/docs/_snippets/my-component-skip-tags.md
index 3a0bcce14ecf..183cf19f33a6 100644
--- a/docs/_snippets/my-component-skip-tags.md
+++ b/docs/_snippets/my-component-skip-tags.md
@@ -18,7 +18,7 @@ export const SkipStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -33,7 +33,7 @@ export const SkipStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -53,3 +53,39 @@ export const SkipStory: Story = {
   tags: ['skip-test'],
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  //👇 Provides the `skip-test` tag to all stories in this file
+  tags: ['skip-test'],
+});
+
+export const SkipStory = meta.story({
+  //👇 Adds the `skip-test` tag to this story to allow it to be skipped in the tests when enabled in the test-runner configuration
+  tags: ['skip-test'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  //👇 Provides the `skip-test` tag to all stories in this file
+  tags: ['skip-test'],
+});
+
+export const SkipStory = meta.story({
+  //👇 Adds the `skip-test` tag to this story to allow it to be skipped in the tests when enabled in the test-runner configuration
+  tags: ['skip-test'],
+});
+```
diff --git a/docs/_snippets/my-component-story-basic-and-props.md b/docs/_snippets/my-component-story-basic-and-props.md
index 5b3d14825e13..d7f529992211 100644
--- a/docs/_snippets/my-component-story-basic-and-props.md
+++ b/docs/_snippets/my-component-story-basic-and-props.md
@@ -21,7 +21,7 @@ export const WithProp: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -35,7 +35,7 @@ export const WithProp = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -55,7 +55,7 @@ export const WithProp: Story = {
 };
 ```
 
-```js filename="MyComponent.story.js|jsx" renderer="solid" language="js"
+```jsx filename="MyComponent.story.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -264,3 +264,36 @@ export const WithProp: Story = {
   render: () => html`<my-component prop="value" />`,
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Basic = meta.story();
+
+export const WithProp = meta.story({
+  render: () => <MyComponent prop="value" />,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Basic = meta.story();
+
+export const WithProp = meta.story({
+  render: () => <MyComponent prop="value" />,
+});
+```
diff --git a/docs/_snippets/my-component-story-mandatory-export.md b/docs/_snippets/my-component-story-mandatory-export.md
index e29dba1c9178..4e8724606939 100644
--- a/docs/_snippets/my-component-story-mandatory-export.md
+++ b/docs/_snippets/my-component-story-mandatory-export.md
@@ -129,7 +129,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -182,3 +182,47 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Path/To/MyComponent',
+  component: MyComponent,
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Path/To/MyComponent',
+  component: MyComponent,
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
+});
+```
diff --git a/docs/_snippets/my-component-story-use-globaltype.md b/docs/_snippets/my-component-story-use-globaltype.md
index 2798345e04f0..82f280ba7d2b 100644
--- a/docs/_snippets/my-component-story-use-globaltype.md
+++ b/docs/_snippets/my-component-story-use-globaltype.md
@@ -35,7 +35,7 @@ export const StoryWithLocale: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -65,7 +65,7 @@ export const StoryWithLocale = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -454,3 +454,68 @@ export const StoryWithLocale: Story = {
   },
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale = meta.story({
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <p>{caption}</p>;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale = meta.story({
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <p>{caption}</p>;
+  },
+});
+```
diff --git a/docs/_snippets/my-component-story-with-nonstory.md b/docs/_snippets/my-component-story-with-nonstory.md
index e39a9ab702df..b8166069bc92 100644
--- a/docs/_snippets/my-component-story-with-nonstory.md
+++ b/docs/_snippets/my-component-story-with-nonstory.md
@@ -31,7 +31,7 @@ export const ComplexStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 import someData from './data.json';
@@ -58,7 +58,7 @@ export const ComplexStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -367,3 +367,63 @@ export const ComplexStory: Story = {
   },
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+import someData from './data.json';
+
+const meta = preview.meta({
+  component: MyComponent,
+  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
+  excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
+});
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+export const SimpleStory = meta.story({
+  args: {
+    data: simpleData,
+  },
+});
+
+export const ComplexStory = meta.story({
+  args: {
+    data: complexData,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+import someData from './data.json';
+
+const meta = preview.meta({
+  component: MyComponent,
+  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
+  excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
+});
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+export const SimpleStory = meta.story({
+  args: {
+    data: simpleData,
+  },
+});
+
+export const ComplexStory = meta.story({
+  args: {
+    data: complexData,
+  },
+});
+```
diff --git a/docs/_snippets/my-component-story-with-storyname.md b/docs/_snippets/my-component-story-with-storyname.md
index 9b27516df12d..ec7be6662ddf 100644
--- a/docs/_snippets/my-component-story-with-storyname.md
+++ b/docs/_snippets/my-component-story-with-storyname.md
@@ -16,7 +16,7 @@ export const Simple: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -29,7 +29,7 @@ export const Simple = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -74,3 +74,34 @@ export const Simple: Story = {
   // ...
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Simple = meta.story({
+  name: 'So simple!',
+  // ...
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Simple = meta.story({
+  name: 'So simple!',
+  // ...
+});
+```
diff --git a/docs/_snippets/my-component-vite-env-variables.md b/docs/_snippets/my-component-vite-env-variables.md
index ca9f0a2cfcbd..97f14255f517 100644
--- a/docs/_snippets/my-component-vite-env-variables.md
+++ b/docs/_snippets/my-component-vite-env-variables.md
@@ -33,7 +33,7 @@ export const ExampleStory = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -89,7 +89,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -140,3 +140,38 @@ export const ExampleStory: Story = {
   },
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+});
+```
diff --git a/docs/_snippets/my-component-with-env-variables.md b/docs/_snippets/my-component-with-env-variables.md
index 26133c5fc4a6..9a83b7ecf57c 100644
--- a/docs/_snippets/my-component-with-env-variables.md
+++ b/docs/_snippets/my-component-with-env-variables.md
@@ -50,7 +50,7 @@ export const ExampleStory = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -103,7 +103,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -151,3 +151,36 @@ export const ExampleStory: Story = {
   },
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-add-framework.md b/docs/_snippets/nextjs-add-framework.md
index 25ea8b1984a5..1c87e051035a 100644
--- a/docs/_snippets/nextjs-add-framework.md
+++ b/docs/_snippets/nextjs-add-framework.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   // framework: '@storybook/react-webpack5', 👈 Remove this
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
@@ -17,3 +17,27 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/nextjs', // 👈 Add this
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/nextjs', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/nextjs-app-directory-in-meta.md b/docs/_snippets/nextjs-app-directory-in-meta.md
index 545bd0954f88..565b999547b5 100644
--- a/docs/_snippets/nextjs-app-directory-in-meta.md
+++ b/docs/_snippets/nextjs-app-directory-in-meta.md
@@ -1,4 +1,4 @@
-```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js"
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 export default {
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts"
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -27,3 +27,34 @@ const meta = {
 } satisfies Meta<typeof NavigationBasedComponent>;
 export default meta;
 ```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true, // 👈 Set this
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true, // 👈 Set this
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-app-directory-in-preview.md b/docs/_snippets/nextjs-app-directory-in-preview.md
index 77e1418c19aa..8ecf8d79e6e9 100644
--- a/docs/_snippets/nextjs-app-directory-in-preview.md
+++ b/docs/_snippets/nextjs-app-directory-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="react" language="js"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   parameters: {
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="react" language="ts"
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Preview } from '@storybook/your-framework';
 
@@ -26,3 +26,35 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-cache-mock.md b/docs/_snippets/nextjs-cache-mock.md
index 2c5490924d1a..a8f0f81271dd 100644
--- a/docs/_snippets/nextjs-cache-mock.md
+++ b/docs/_snippets/nextjs-cache-mock.md
@@ -1,4 +1,4 @@
-```js filename="MyForm.stories.js" renderer="react" language="js"
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 /*
@@ -23,7 +23,7 @@ export const Submitted = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts"
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -50,3 +50,52 @@ export const Submitted: Story = {
   },
 };
 ```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { expect } from 'storybook/test';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { revalidatePath } from '@storybook/your-framework/cache.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const Submitted = meta.story({
+  async play({ canvas, userEvent }) {
+    const submitButton = canvas.getByRole('button', { name: /submit/i });
+    await userEvent.click(saveButton);
+    // 👇 Use any mock assertions on the function
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect } from 'storybook/test';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { revalidatePath } from '@storybook/your-framework/cache.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const Submitted = meta.story({
+  async play({ canvas, userEvent }) {
+    const submitButton = canvas.getByRole('button', { name: /submit/i });
+    await userEvent.click(saveButton);
+    // 👇 Use any mock assertions on the function
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-configure-svgr.md b/docs/_snippets/nextjs-configure-svgr.md
index cb9453655482..332b6fc078aa 100644
--- a/docs/_snippets/nextjs-configure-svgr.md
+++ b/docs/_snippets/nextjs-configure-svgr.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   webpackFinal: async (config) => {
@@ -23,7 +23,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
@@ -51,3 +51,61 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    // This modifies the existing image rule to exclude .svg files
+    // since you want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    // This modifies the existing image rule to exclude .svg files
+    // since you want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-headers-mock.md b/docs/_snippets/nextjs-headers-mock.md
index 823775436b2b..845bbcc2ce50 100644
--- a/docs/_snippets/nextjs-headers-mock.md
+++ b/docs/_snippets/nextjs-headers-mock.md
@@ -1,4 +1,4 @@
-```js filename="MyForm.stories.js" renderer="react" language="js"
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 /*
@@ -29,7 +29,7 @@ export const LoggedInEurope = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts"
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -62,3 +62,64 @@ export const LoggedInEurope: Story = {
   },
 };
 ```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { expect } from 'storybook/test';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { cookies, headers } from '@storybook/your-framework/headers.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const LoggedInEurope = meta.story({
+  async beforeEach() {
+    // 👇 Set mock cookies and headers ahead of rendering
+    cookies().set('username', 'Sol');
+    headers().set('timezone', 'Central European Summer Time');
+  },
+  async play() {
+    // 👇 Assert that your component called the mocks
+    await expect(cookies().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('username');
+    await expect(headers().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('timezone');
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect } from 'storybook/test';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { cookies, headers } from '@storybook/your-framework/headers.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const LoggedInEurope = meta.story({
+  async beforeEach() {
+    // 👇 Set mock cookies and headers ahead of rendering
+    cookies().set('username', 'Sol');
+    headers().set('timezone', 'Central European Summer Time');
+  },
+  async play() {
+    // 👇 Assert that your component called the mocks
+    await expect(cookies().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('username');
+    await expect(headers().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('timezone');
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-image-static-dirs.md b/docs/_snippets/nextjs-image-static-dirs.md
index d15df47b5052..af077340e6e3 100644
--- a/docs/_snippets/nextjs-image-static-dirs.md
+++ b/docs/_snippets/nextjs-image-static-dirs.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   staticDirs: [
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -26,3 +26,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  staticDirs: [
+    {
+      from: '../src/components/fonts',
+      to: 'src/components/fonts',
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  staticDirs: [
+    {
+      from: '../src/components/fonts',
+      to: 'src/components/fonts',
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/nextjs-navigation-mock.md b/docs/_snippets/nextjs-navigation-mock.md
index e5f314f9e391..8d01c2801bca 100644
--- a/docs/_snippets/nextjs-navigation-mock.md
+++ b/docs/_snippets/nextjs-navigation-mock.md
@@ -1,4 +1,4 @@
-```js filename="MyForm.stories.js" renderer="react" language="js"
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 /*
@@ -37,7 +37,7 @@ export const GoBack = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts"
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -78,3 +78,80 @@ export const GoBack: Story = {
   },
 };
 ```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { expect } from 'storybook/test';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { redirect, getRouter } from '@storybook/your-framework/navigation.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+  parameters: {
+    nextjs: {
+      // 👇 As in the Next.js application, next/navigation only works using App Router
+      appDirectory: true,
+    },
+  },
+});
+
+export const Unauthenticated = meta.story({
+  async play() {
+    // 👇 Assert that your component called redirect()
+    await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
+  },
+});
+
+export const GoBack = meta.story({
+  async play({ canvas, userEvent }) {
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect } from 'storybook/test';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { redirect, getRouter } from '@storybook/your-framework/navigation.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+  parameters: {
+    nextjs: {
+      // 👇 As in the Next.js application, next/navigation only works using App Router
+      appDirectory: true,
+    },
+  },
+});
+
+export const Unauthenticated = meta.story({
+  async play() {
+    // 👇 Assert that your component called redirect()
+    await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
+  },
+});
+
+export const GoBack = meta.story({
+  async play({ canvas, userEvent }) {
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-navigation-override-in-story.md b/docs/_snippets/nextjs-navigation-override-in-story.md
index a7865b7185fa..11f142fc99a2 100644
--- a/docs/_snippets/nextjs-navigation-override-in-story.md
+++ b/docs/_snippets/nextjs-navigation-override-in-story.md
@@ -1,4 +1,4 @@
-```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js"
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 export default {
@@ -25,7 +25,7 @@ export const Example = {
 };
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts"
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -57,3 +57,62 @@ export const Example: Story = {
   },
 };
 ```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+});
+
+// Interact with the links to see the route change events in the Actions panel.
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/profile',
+        query: {
+          user: '1',
+        },
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+});
+
+// Interact with the links to see the route change events in the Actions panel.
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/profile',
+        query: {
+          user: '1',
+        },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
index d66c5d30e80a..a2324e16771b 100644
--- a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
@@ -1,4 +1,4 @@
-```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js"
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 export default {
@@ -17,7 +17,7 @@ export default {
 };
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts"
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -39,3 +39,46 @@ const meta = {
 } satisfies Meta<typeof NavigationBasedComponent>;
 export default meta;
 ```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ],
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
index 18aec10d0a20..b44e0602dbe0 100644
--- a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
@@ -1,4 +1,4 @@
-```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js"
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 export default {
@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts"
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -33,3 +33,40 @@ const meta = {
 } satisfies Meta<typeof NavigationBasedComponent>;
 export default meta;
 ```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: ['dashboard', 'analytics'],
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: ['dashboard', 'analytics'],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-remove-addons.md b/docs/_snippets/nextjs-remove-addons.md
index ae8f264e3579..065a5d713d1f 100644
--- a/docs/_snippets/nextjs-remove-addons.md
+++ b/docs/_snippets/nextjs-remove-addons.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   addons: [
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
@@ -25,3 +25,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  addons: [
+    // ...
+    // 👇 These can both be removed
+    // 'storybook-addon-next',
+    // 'storybook-addon-next-router',
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  addons: [
+    // ...
+    // 👇 These can both be removed
+    // 'storybook-addon-next',
+    // 'storybook-addon-next-router',
+  ],
+});
+```
diff --git a/docs/_snippets/nextjs-router-mock.md b/docs/_snippets/nextjs-router-mock.md
index fc8b8565b420..2f2011d8cc4c 100644
--- a/docs/_snippets/nextjs-router-mock.md
+++ b/docs/_snippets/nextjs-router-mock.md
@@ -1,4 +1,4 @@
-```js filename="MyForm.stories.js" renderer="react" language="js"
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 /*
@@ -24,7 +24,7 @@ export const GoBack = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts"
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -52,3 +52,54 @@ export const GoBack: Story = {
   },
 };
 ```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { expect } from 'storybook/test';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/your-framework/router.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const GoBack = meta.story({
+  async play({ canvas, userEvent }) {
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect } from 'storybook/test';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/your-framework/router.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const GoBack = meta.story({
+  async play({ canvas, userEvent }) {
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-router-override-in-story.md b/docs/_snippets/nextjs-router-override-in-story.md
index 42f5219d86e9..4c452ae68b5e 100644
--- a/docs/_snippets/nextjs-router-override-in-story.md
+++ b/docs/_snippets/nextjs-router-override-in-story.md
@@ -1,4 +1,4 @@
-```js filename="RouterBasedComponent.stories.js" renderer="react" language="js"
+```js filename="RouterBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import RouterBasedComponent from './RouterBasedComponent';
 
 export default {
@@ -21,7 +21,7 @@ export const Example = {
 };
 ```
 
-```ts filename="RouterBasedComponent.stories.ts" renderer="react" language="ts"
+```ts filename="RouterBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -49,3 +49,54 @@ export const Example: Story = {
   },
 };
 ```
+
+```ts filename="RouterBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import RouterBasedComponent from './RouterBasedComponent';
+
+const meta = preview.meta({
+  component: RouterBasedComponent,
+});
+
+// Interact with the links to see the route change events in the Actions panel.
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      router: {
+        pathname: '/profile/[id]',
+        asPath: '/profile/1',
+        query: {
+          id: '1',
+        },
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="RouterBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import RouterBasedComponent from './RouterBasedComponent';
+
+const meta = preview.meta({
+  component: RouterBasedComponent,
+});
+
+// Interact with the links to see the route change events in the Actions panel.
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      router: {
+        pathname: '/profile/[id]',
+        asPath: '/profile/1',
+        query: {
+          id: '1',
+        },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-vite-add-framework.md b/docs/_snippets/nextjs-vite-add-framework.md
index 6d790cb6cffe..137479e97e3d 100644
--- a/docs/_snippets/nextjs-vite-add-framework.md
+++ b/docs/_snippets/nextjs-vite-add-framework.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   // framework: '@storybook/react-webpack5', 👈 Remove this
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
@@ -17,3 +17,27 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/nextjs-vite', // 👈 Add this
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/nextjs-vite', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/nextjs-vite-remove-addons.md b/docs/_snippets/nextjs-vite-remove-addons.md
index 5818ff318d5a..0a28992d16bd 100644
--- a/docs/_snippets/nextjs-vite-remove-addons.md
+++ b/docs/_snippets/nextjs-vite-remove-addons.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   addons: [
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
@@ -25,3 +25,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  addons: [
+    // ...
+    // 👇 These can both be removed
+    // 'storybook-addon-next',
+    // 'storybook-addon-next-router',
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  addons: [
+    // ...
+    // 👇 These can both be removed
+    // 'storybook-addon-next',
+    // 'storybook-addon-next-router',
+  ],
+});
+```
diff --git a/docs/_snippets/other-foo-bar-story.md b/docs/_snippets/other-foo-bar-story.md
index 981a9a4dc7df..c8e50d35d0f8 100644
--- a/docs/_snippets/other-foo-bar-story.md
+++ b/docs/_snippets/other-foo-bar-story.md
@@ -21,7 +21,7 @@ export const Baz: Story = {
 };
 ```
 
-```js filename="FooBar.stories.js|jsx" renderer="common" language="js"
+```js filename="FooBar.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Foo } from './Foo';
 
 export default {
@@ -39,7 +39,7 @@ export const Baz = {
 };
 ```
 
-```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -91,3 +91,45 @@ export const Baz: Story = {
   name: 'Insert name here',
 };
 ```
+
+```ts filename="FooBar.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'OtherFoo/Bar',
+  component: Foo,
+  id: 'Foo/Bar', // Or 'foo-bar' if you prefer
+});
+
+export const Baz = meta.story({
+  name: 'Insert name here',
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="FooBar.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'OtherFoo/Bar',
+  component: Foo,
+  // Or 'foo-bar' if you prefer
+  id: 'Foo/Bar',
+});
+
+export const Baz = meta.story({
+  name: 'Insert name here',
+});
+```
diff --git a/docs/_snippets/page-story-args-within-story.md b/docs/_snippets/page-story-args-within-story.md
index d411fd4e975a..68858206d393 100644
--- a/docs/_snippets/page-story-args-within-story.md
+++ b/docs/_snippets/page-story-args-within-story.md
@@ -1,4 +1,4 @@
-```js filename="my-component/component.stories.js|jsx" renderer="react" language="js"
+```jsx filename="my-component/component.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useArgs } from 'storybook/preview-api';
 
 import { Checkbox } from './checkbox';
@@ -29,7 +29,7 @@ export const Example = {
 };
 ```
 
-```ts filename="my-component/component.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="my-component/component.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { useArgs } from 'storybook/preview-api';
@@ -64,3 +64,69 @@ export const Example = {
   },
 } satisfies Story;
 ```
+
+```tsx filename="my-component/component.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { useArgs } from 'storybook/preview-api';
+
+import { Checkbox } from './checkbox';
+
+const meta = preview.meta({
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+});
+
+export const Example = meta.story({
+  args: {
+    isChecked: false,
+    label: 'Try Me!',
+  },
+  /**
+   * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
+   */
+  render: function Render(args) {
+    const [{ isChecked }, updateArgs] = useArgs();
+
+    function onChange() {
+      updateArgs({ isChecked: !isChecked });
+    }
+
+    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="my-component/component.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { useArgs } from 'storybook/preview-api';
+
+import { Checkbox } from './checkbox';
+
+const meta = preview.meta({
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+});
+
+export const Example = meta.story({
+  args: {
+    isChecked: false,
+    label: 'Try Me!',
+  },
+  /**
+   * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
+   */
+  render: function Render(args) {
+    const [{ isChecked }, updateArgs] = useArgs();
+
+    function onChange() {
+      updateArgs({ isChecked: !isChecked });
+    }
+
+    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;
+  },
+});
+```
diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md
index cfcd6856ff3f..eb68bff6ae67 100644
--- a/docs/_snippets/page-story-slots.md
+++ b/docs/_snippets/page-story-slots.md
@@ -27,7 +27,7 @@ export const CustomFooter: Story = {
 };
 ```
 
-```js filename="Page.stories.js|jsx" renderer="react" language="js"
+```jsx filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Page } from './Page';
 
 export default {
@@ -46,7 +46,7 @@ export const CustomFooter = {
 };
 ```
 
-```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -73,7 +73,7 @@ export const CustomFooter = {
 } satisfies Story;
 ```
 
-```js filename="Page.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="Page.stories.js|jsx" renderer="solid" language="js"
 import { Page } from './Page';
 
 export default {
@@ -267,3 +267,46 @@ export const CustomFooter: Story = {
   },
 };
 ```
+
+```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  render: ({ footer, ...args }) => (
+    <Page {...args}>
+      <footer>{footer}</footer>
+    </Page>
+  ),
+});
+
+export const CustomFooter = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  render: ({ footer, ...args }) => (
+    <Page {...args}>
+      <footer>{footer}</footer>
+    </Page>
+  ),
+});
+
+export const CustomFooter = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
diff --git a/docs/_snippets/page-story-with-args-composition.md b/docs/_snippets/page-story-with-args-composition.md
index 6e53798b834b..9d2aef84f1e3 100644
--- a/docs/_snippets/page-story-with-args-composition.md
+++ b/docs/_snippets/page-story-with-args-composition.md
@@ -71,7 +71,7 @@ export const Simple = {
 };
 ```
 
-```js filename="YourPage.stories.js|jsx" renderer="common" language="js"
+```js filename="YourPage.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { DocumentScreen } from './YourPage';
 
 // 👇 Imports the required stories
@@ -145,7 +145,7 @@ export const Simple: Story = {
 };
 ```
 
-```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -214,3 +214,50 @@ export const Simple: Story = {
   },
 };
 ```
+
+```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { DocumentScreen } from './YourPage';
+
+// 👇 Imports the required stories
+import * as PageLayout from './PageLayout.stories';
+import * as DocumentHeader from './DocumentHeader.stories';
+import * as DocumentList from './DocumentList.stories';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+});
+
+export const Simple = meta.story({
+  args: {
+    user: PageLayout.Simple.input.args.user,
+    document: DocumentHeader.Simple.input.args.document,
+    subdocuments: DocumentList.Simple.input.args.documents,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="YourPage.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { DocumentScreen } from './YourPage';
+
+// 👇 Imports the required stories
+import * as PageLayout from './PageLayout.stories';
+import * as DocumentHeader from './DocumentHeader.stories';
+import * as DocumentList from './DocumentList.stories';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+});
+
+export const Simple = meta.story({
+  args: {
+    user: PageLayout.Simple.input.args.user,
+    document: DocumentHeader.Simple.input.args.document,
+    subdocuments: DocumentList.Simple.input.args.documents,
+  },
+});
+```
diff --git a/docs/_snippets/page-story.md b/docs/_snippets/page-story.md
index 8e24c7c16c90..edf465e8e449 100644
--- a/docs/_snippets/page-story.md
+++ b/docs/_snippets/page-story.md
@@ -32,7 +32,7 @@ export const LoggedIn: Story = {
 };
 ```
 
-```js filename="Page.stories.js|jsx" renderer="react" language="js"
+```js filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Page } from './Page';
 
 //👇 Imports all Header stories
@@ -49,7 +49,7 @@ export const LoggedIn = {
 };
 ```
 
-```ts filename="Page.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -280,3 +280,42 @@ export const LoggedIn: Story = {
   },
 };
 ```
+
+```ts filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Page } from './Page';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const LoggedIn = meta.story({
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Page } from './Page';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const LoggedIn = meta.story({
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
diff --git a/docs/_snippets/parameters-in-meta.md b/docs/_snippets/parameters-in-meta.md
index a10645b6e205..b7a722667c28 100644
--- a/docs/_snippets/parameters-in-meta.md
+++ b/docs/_snippets/parameters-in-meta.md
@@ -48,7 +48,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -99,7 +99,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -145,3 +145,36 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      options: {},
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      options: {},
+    },
+  },
+});
+```
diff --git a/docs/_snippets/parameters-in-preview.md b/docs/_snippets/parameters-in-preview.md
index 376eeb0b11d1..76dc0b2c4468 100644
--- a/docs/_snippets/parameters-in-preview.md
+++ b/docs/_snippets/parameters-in-preview.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="js"
+```ts filename=".storybook/preview.ts" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     backgrounds: {
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -28,3 +28,37 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      options: {
+        light: { name: 'Light', value: '#fff' },
+        dark: { name: 'Dark', value: '#333' },
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```ts filename=".storybook/preview.ts" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      options: {
+        light: { name: 'Light', value: '#fff' },
+        dark: { name: 'Dark', value: '#333' },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/parameters-in-story.md b/docs/_snippets/parameters-in-story.md
index 7062cb009821..cbfdf6f5b53c 100644
--- a/docs/_snippets/parameters-in-story.md
+++ b/docs/_snippets/parameters-in-story.md
@@ -71,7 +71,7 @@ export const Primary = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -145,7 +145,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -214,3 +214,50 @@ export const Primary = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      options: {
+        red: { name: 'Red', value: '#f00' },
+        green: { name: 'Green', value: '#0f0' },
+        blue: { name: 'Blue', value: '#00f' },
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      options: {
+        red: { name: 'Red', value: '#f00' },
+        green: { name: 'Green', value: '#0f0' },
+        blue: { name: 'Blue', value: '#00f' },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/play-function-composition.md b/docs/_snippets/play-function-composition.md
index f2bd114ad588..2b27d7895ad1 100644
--- a/docs/_snippets/play-function-composition.md
+++ b/docs/_snippets/play-function-composition.md
@@ -36,7 +36,7 @@ export const CombinedStories: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -69,7 +69,7 @@ export const CombinedStories = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -173,3 +173,74 @@ export const CombinedStories: Story = {
   },
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvas to query the DOM
+ */
+export const FirstStory = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByTestId('an-element'), 'example-value');
+  },
+});
+
+export const SecondStory = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
+  },
+});
+
+export const CombinedStories = meta.story({
+  play: async ({ context, canvas, userEvent }) => {
+    // Runs the FirstStory and Second story play function before running this story's play function
+    await FirstStory.play(context);
+    await SecondStory.play(context);
+    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvas to query the DOM
+ */
+export const FirstStory = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByTestId('an-element'), 'example-value');
+  },
+});
+
+export const SecondStory = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
+  },
+});
+
+export const CombinedStories = meta.story({
+  play: async ({ context, canvas, userEvent }) => {
+    // Runs the FirstStory and Second story play function before running this story's play function
+    await FirstStory.play(context);
+    await SecondStory.play(context);
+    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
+  },
+});
+```
diff --git a/docs/_snippets/play-function-with-canvas.md b/docs/_snippets/play-function-with-canvas.md
index 1c3f5abb08b8..fc6b4ac6b2a1 100644
--- a/docs/_snippets/play-function-with-canvas.md
+++ b/docs/_snippets/play-function-with-canvas.md
@@ -55,7 +55,7 @@ export const ExampleStory = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -113,7 +113,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -167,3 +167,40 @@ export const ExampleStory: Story = {
   },
 };
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('button'));
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('button'));
+  },
+});
+```
diff --git a/docs/_snippets/play-function-with-screen.md b/docs/_snippets/play-function-with-screen.md
index ba0ec926dd11..c95f345beb34 100644
--- a/docs/_snippets/play-function-with-screen.md
+++ b/docs/_snippets/play-function-with-screen.md
@@ -63,10 +63,11 @@ export const Open = {
 };
 ```
 
-```js filename="Dialog.stories.js|jsx" renderer="common" language="js"
-import { Dialog } from './Dialog';
+```js filename="Dialog.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { screen } from 'storybook/test';
 
+import { Dialog } from './Dialog';
+
 export default {
   component: Dialog,
 };
@@ -130,7 +131,7 @@ export const Open: Story = {
 };
 ```
 
-```ts filename="Dialog.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Dialog.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { screen } from 'storybook/test';
@@ -194,3 +195,47 @@ export const Open: Story = {
   },
 };
 ```
+
+```ts filename="Dialog.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { screen } from 'storybook/test';
+
+import { Dialog } from './Dialog';
+
+const meta = preview.meta({
+  component: Dialog,
+});
+
+export const Open = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole('button', { name: 'Open dialog' }));
+
+    // Starts querying from the document
+    const dialog = screen.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Dialog.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { screen } from 'storybook/test';
+
+import { Dialog } from './Dialog';
+
+const meta = preview.meta({
+  component: Dialog,
+});
+
+export const Open = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole('button', { name: 'Open dialog' }));
+
+    // Starts querying from the document
+    const dialog = screen.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+  },
+});
+```
diff --git a/docs/_snippets/play-function.md b/docs/_snippets/play-function.md
index 3ba8da826eef..091d42d549e1 100644
--- a/docs/_snippets/play-function.md
+++ b/docs/_snippets/play-function.md
@@ -113,7 +113,7 @@ export const FilledForm = {
 };
 ```
 
-```js filename="RegistrationForm.stories.js|jsx" renderer="common" language="js"
+```js filename="RegistrationForm.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { RegistrationForm } from './RegistrationForm';
 
 export default {
@@ -229,7 +229,7 @@ export const FilledForm: Story = {
 };
 ```
 
-```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -340,3 +340,78 @@ export const FilledForm: Story = {
   },
 };
 ```
+
+```ts filename="RegistrationForm.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { RegistrationForm } from './RegistrationForm';
+
+const meta = preview.meta({
+  component: RegistrationForm,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvas to query the DOM
+ */
+export const FilledForm = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const submitButton = canvas.getByRole('button');
+    await userEvent.click(submitButton);
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="RegistrationForm.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { RegistrationForm } from './RegistrationForm';
+
+const meta = preview.meta({
+  component: RegistrationForm,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvas to query the DOM
+ */
+export const FilledForm = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const submitButton = canvas.getByRole('button');
+    await userEvent.click(submitButton);
+  },
+});
+```
diff --git a/docs/_snippets/portable-stories-jest-override-globals.md b/docs/_snippets/portable-stories-jest-override-globals.md
index 58833c1ed0fe..442d340bc604 100644
--- a/docs/_snippets/portable-stories-jest-override-globals.md
+++ b/docs/_snippets/portable-stories-jest-override-globals.md
@@ -9,7 +9,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
@@ -33,7 +33,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
diff --git a/docs/_snippets/portable-stories-jest-snapshot-test.md b/docs/_snippets/portable-stories-jest-snapshot-test.md
index 441c21adc38e..3a232543d0a4 100644
--- a/docs/_snippets/portable-stories-jest-snapshot-test.md
+++ b/docs/_snippets/portable-stories-jest-snapshot-test.md
@@ -12,7 +12,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -20,7 +20,7 @@ const compose = (entry) => {
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -58,7 +58,7 @@ describe(options.suite, () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`,
         );
       }
 
@@ -100,7 +100,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -108,7 +108,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -146,7 +146,7 @@ describe(options.suite, () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`,
         );
       }
 
diff --git a/docs/_snippets/portable-stories-playwright-ct-override-globals.md b/docs/_snippets/portable-stories-playwright-ct-override-globals.md
index 3bb8636307f8..b093a43926b6 100644
--- a/docs/_snippets/portable-stories-playwright-ct-override-globals.md
+++ b/docs/_snippets/portable-stories-playwright-ct-override-globals.md
@@ -1,4 +1,4 @@
-```tsx filename="Button.stories.portable.ts" renderer="react" language="ts"
+```ts filename="Button.stories.portable.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import { composeStory } from '@storybook/your-framework';
 
@@ -7,7 +7,7 @@ import meta, { Primary } from './Button.stories';
 export const PrimaryEnglish = composeStory(
   Primary,
   meta,
-  { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+  { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
 );
 
 export const PrimarySpanish = composeStory(Primary, meta, { globals: { locale: 'es' } });
@@ -21,8 +21,20 @@ import meta, { Primary } from './Button.stories';
 export const PrimaryEnglish = composeStory(
   Primary,
   meta,
-  { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+  { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
 );
 
 export const PrimarySpanish = composeStory(Primary, meta, { globals: { locale: 'es' } });
 ```
+
+```ts filename="Button.stories.portable.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { Primary } from './Button.stories';
+
+export const PrimaryEnglish = Primary.extend({
+  globals: { locale: 'en' }, // 👈 Project annotations to override the locale
+});
+
+export const PrimarySpanish = Primary.extend({
+  globals: { locale: 'es' },
+});
+```
diff --git a/docs/_snippets/portable-stories-vitest-override-globals.md b/docs/_snippets/portable-stories-vitest-override-globals.md
index 4681c785770a..fb7e9e368a78 100644
--- a/docs/_snippets/portable-stories-vitest-override-globals.md
+++ b/docs/_snippets/portable-stories-vitest-override-globals.md
@@ -10,7 +10,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
@@ -35,7 +35,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
@@ -59,7 +59,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
diff --git a/docs/_snippets/portable-stories-vitest-snapshot-test.md b/docs/_snippets/portable-stories-vitest-snapshot-test.md
index 88c2f4bed5bb..699c0aa65358 100644
--- a/docs/_snippets/portable-stories-vitest-snapshot-test.md
+++ b/docs/_snippets/portable-stories-vitest-snapshot-test.md
@@ -11,7 +11,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -21,7 +21,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -60,7 +60,7 @@ describe(options.suite, () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`,
         );
       }
 
@@ -102,7 +102,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -112,7 +112,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob<StoryFile>('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -151,7 +151,7 @@ describe(options.suite, () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`,
         );
       }
 
diff --git a/docs/_snippets/react-vite-add-framework.md b/docs/_snippets/react-vite-add-framework.md
index 59094dc55ed2..de2a3ef66f18 100644
--- a/docs/_snippets/react-vite-add-framework.md
+++ b/docs/_snippets/react-vite-add-framework.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   // framework: '@storybook/react-webpack5', 👈 Remove this
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
@@ -17,3 +17,27 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/react-vite', // 👈 Add this
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/react-vite', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/react-vite-framework-options.md b/docs/_snippets/react-vite-framework-options.md
index dc37a8dd5ecf..148f4ea4a0c0 100644
--- a/docs/_snippets/react-vite-framework-options.md
+++ b/docs/_snippets/react-vite-framework-options.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     name: '@storybook/react-vite',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
@@ -23,3 +23,33 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+});
+```
diff --git a/docs/_snippets/react-webpack5-add-framework.md b/docs/_snippets/react-webpack5-add-framework.md
index 98cf0b6d9b44..5c77cc6112dd 100644
--- a/docs/_snippets/react-webpack5-add-framework.md
+++ b/docs/_snippets/react-webpack5-add-framework.md
@@ -1,11 +1,11 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   framework: '@storybook/react-webpack5', // 👈 Add this
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
@@ -15,3 +15,25 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  framework: '@storybook/react-webpack5', // 👈 Add this
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  framework: '@storybook/react-webpack5', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/react-webpack5-framework-options.md b/docs/_snippets/react-webpack5-framework-options.md
index 6a251f4d19ff..8731ddece605 100644
--- a/docs/_snippets/react-webpack5-framework-options.md
+++ b/docs/_snippets/react-webpack5-framework-options.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     name: '@storybook/react-webpack5',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
@@ -23,3 +23,33 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      // ...
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      // ...
+    },
+  },
+});
+```
diff --git a/docs/_snippets/render-custom-in-meta.md b/docs/_snippets/render-custom-in-meta.md
index fdf42d89c9bb..e44cb7825e60 100644
--- a/docs/_snippets/render-custom-in-meta.md
+++ b/docs/_snippets/render-custom-in-meta.md
@@ -33,7 +33,7 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
-```jsx filename="Button.stories.jsx" renderer="react" language="js"
+```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Alert } from './Alert';
 import { Button } from './Button';
 
@@ -61,7 +61,7 @@ export const PrimaryInAlert = {
 };
 ```
 
-```tsx filename="Button.stories.tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -215,3 +215,64 @@ export const PrimaryInAlert: Story = {
   },
 };
 ```
+
+```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Alert } from './Alert';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  render: (args) => (
+    <Alert>
+      Alert text
+      <Button {...args} />
+    </Alert>
+  ),
+});
+
+export const DefaultInAlert = meta.story({
+  args: {
+    label: 'Button',
+  },
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Alert } from './Alert';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  render: (args) => (
+    <Alert>
+      Alert text
+      <Button {...args} />
+    </Alert>
+  ),
+});
+
+export const DefaultInAlert = meta.story({
+  args: {
+    label: 'Button',
+  },
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
diff --git a/docs/_snippets/render-custom-in-story.md b/docs/_snippets/render-custom-in-story.md
index 02cf8b9aa7a8..4d9f296c5524 100644
--- a/docs/_snippets/render-custom-in-story.md
+++ b/docs/_snippets/render-custom-in-story.md
@@ -27,7 +27,7 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
-```jsx filename="Button.stories.jsx" renderer="react" language="js"
+```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Alert } from './Alert';
 import { Button } from './Button';
 
@@ -49,7 +49,7 @@ export const PrimaryInAlert = {
 };
 ```
 
-```tsx filename="Button.stories.tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -173,3 +173,52 @@ export const PrimaryInAlert: Story = {
   `,
 };
 ```
+
+```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Alert } from './Alert';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+  render: (args) => (
+    <Alert>
+      Alert text
+      <Button {...args} />
+    </Alert>
+  ),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Alert } from './Alert';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+  render: (args) => (
+    <Alert>
+      Alert text
+      <Button {...args} />
+    </Alert>
+  ),
+});
+```
diff --git a/docs/_snippets/rsc-feature-flag.md b/docs/_snippets/rsc-feature-flag.md
index 49dc950685d2..1084b10054c7 100644
--- a/docs/_snippets/rsc-feature-flag.md
+++ b/docs/_snippets/rsc-feature-flag.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   features: {
@@ -7,7 +7,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -20,3 +20,29 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  features: {
+    experimentalRSC: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  features: {
+    experimentalRSC: true,
+  },
+});
+```
diff --git a/docs/_snippets/rsc-parameter-in-meta.md b/docs/_snippets/rsc-parameter-in-meta.md
index 4140761986ab..ef080039a129 100644
--- a/docs/_snippets/rsc-parameter-in-meta.md
+++ b/docs/_snippets/rsc-parameter-in-meta.md
@@ -1,4 +1,4 @@
-```js filename="MyServerComponent.stories.js" renderer="react" language="js"
+```js filename="MyServerComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import MyServerComponent from './MyServerComponent';
 
 export default {
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename="MyServerComponent.stories.ts" renderer="react" language="ts"
+```ts filename="MyServerComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with nextjs or nextjs-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -23,3 +23,30 @@ const meta = {
 } satisfies Meta<typeof MyServerComponent>;
 export default meta;
 ```
+
+```ts filename="MyServerComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyServerComponent from './MyServerComponent';
+
+const meta = preview.meta({
+  component: MyServerComponent,
+  parameters: {
+    react: { rsc: false },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyServerComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import MyServerComponent from './MyServerComponent';
+
+const meta = preview.meta({
+  component: MyServerComponent,
+  parameters: {
+    react: { rsc: false },
+  },
+});
+```
diff --git a/docs/_snippets/snapshot-tests-portable-stories.md b/docs/_snippets/snapshot-tests-portable-stories.md
index d14d891dd1e4..118078f8c27e 100644
--- a/docs/_snippets/snapshot-tests-portable-stories.md
+++ b/docs/_snippets/snapshot-tests-portable-stories.md
@@ -12,7 +12,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -20,7 +20,7 @@ const compose = (entry) => {
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -42,7 +42,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -81,7 +81,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -89,7 +89,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(process.cwd(), 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -111,7 +111,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -142,7 +142,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (error) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`,
     );
   }
 };
@@ -151,7 +151,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -170,7 +170,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -209,7 +209,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -219,7 +219,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob<StoryFile>('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -239,7 +239,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
diff --git a/docs/_snippets/storybook-addon-controls-custom-matchers.md b/docs/_snippets/storybook-addon-controls-custom-matchers.md
index c7bb599fe446..557afac23edf 100644
--- a/docs/_snippets/storybook-addon-controls-custom-matchers.md
+++ b/docs/_snippets/storybook-addon-controls-custom-matchers.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     controls: {
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -28,3 +28,37 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-addon-themes-classname-decorator.md b/docs/_snippets/storybook-addon-themes-classname-decorator.md
index d5c49432e19c..f6033d32a50c 100644
--- a/docs/_snippets/storybook-addon-themes-classname-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-classname-decorator.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { withThemeByClassName } from '@storybook/addon-themes';
 
 import '../src/index.css'; // Your application's global CSS file
@@ -18,7 +18,7 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import { Preview, Renderer } from '@storybook/your-framework';
 
@@ -40,3 +40,47 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { Renderer, definePreview } from '@storybook/your-framework';
+
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+import '../src/index.css'; // Your application's global CSS file
+
+export default definePreview({
+  decorators: [
+    withThemeByClassName<Renderer>({
+      themes: {
+        light: '',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+import '../src/index.css'; // Your application's global CSS file
+
+export default definePreview({
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: '',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md b/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
index 7fdd6f38bb5f..548acfd3c9d6 100644
--- a/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
 import '../src/index.css'; // Your application's global CSS file
@@ -19,7 +19,7 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import { Preview, Renderer } from '@storybook/your-framework';
 
@@ -42,3 +42,49 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { Renderer, definePreview } from '@storybook/your-framework';
+
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+
+import '../src/index.css'; // Your application's global CSS file
+
+export default definePreview({
+  decorators: [
+    withThemeByDataAttribute<Renderer>({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+
+import '../src/index.css'; // Your application's global CSS file
+
+export default definePreview({
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
index 7e9f7c148d9c..724db8249990 100644
--- a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
@@ -27,7 +27,7 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import { Preview, Renderer } from '@storybook/your-framework';
 
@@ -58,3 +58,67 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { Renderer, definePreview } from '@storybook/your-framework';
+
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+
+import { ThemeProvider, createGlobalStyle } from 'styled-components';
+
+import { darkTheme, lightTheme } from '../src/themes';
+
+const GlobalStyles = createGlobalStyle`
+  body {
+    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+`;
+
+export default definePreview({
+  decorators: [
+    withThemeFromJSXProvider<Renderer>({
+      themes: {
+        light: lightTheme,
+        dark: darkTheme,
+      },
+      defaultTheme: 'light',
+      Provider: ThemeProvider,
+      GlobalStyles,
+    }),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+
+import { ThemeProvider, createGlobalStyle } from 'styled-components';
+
+import { darkTheme, lightTheme } from '../src/themes';
+
+const GlobalStyles = createGlobalStyle`
+  body {
+    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+`;
+
+export default definePreview({
+  decorators: [
+    withThemeFromJSXProvider({
+      themes: {
+        light: lightTheme,
+        dark: darkTheme,
+      },
+      defaultTheme: 'light',
+      Provider: ThemeProvider,
+      GlobalStyles,
+    }),
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-addons-api-makedecorator.md b/docs/_snippets/storybook-addons-api-makedecorator.md
index 380b13e1ee2d..12715f7e6a11 100644
--- a/docs/_snippets/storybook-addons-api-makedecorator.md
+++ b/docs/_snippets/storybook-addons-api-makedecorator.md
@@ -7,9 +7,9 @@ export const withAddonDecorator = makeDecorator({
   skipIfNoParametersOrOptions: true,
   wrapper: (getStory, context, { parameters }) => {
     /*
-    * Write your custom logic here based on the parameters passed in Storybook's stories.
-    * Although not advised, you can also alter the story output based on the parameters.
-    */
+     * Write your custom logic here based on the parameters passed in Storybook's stories.
+     * Although not advised, you can also alter the story output based on the parameters.
+     */
     return getStory(context);
   },
 });
diff --git a/docs/_snippets/storybook-addons-preset-preview.md b/docs/_snippets/storybook-addons-preset-preview.md
index 5228c7e39115..befa07d08ced 100644
--- a/docs/_snippets/storybook-addons-preset-preview.md
+++ b/docs/_snippets/storybook-addons-preset-preview.md
@@ -1,4 +1,4 @@
-```js filename="example-addon/src/preview.js" renderer="common" language="js"
+```js filename="example-addon/src/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { PARAM_KEY } from './constants';
 
 import { CustomDecorator } from './decorators';
@@ -13,7 +13,7 @@ const preview = {
 export default preview;
 ```
 
-```ts filename="example-addon/src/preview.ts" renderer="common" language="ts"
+```ts filename="example-addon/src/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 import type { Renderer, ProjectAnnotations } from 'storybook/internal/types';
 import { PARAM_KEY } from './constants';
 import { CustomDecorator } from './decorators';
@@ -27,3 +27,37 @@ const preview: ProjectAnnotations<Renderer> = {
 
 export default preview;
 ```
+
+```ts filename="example-addon/src/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import type { ProjectAnnotations, Renderer } from 'storybook/internal/types';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { PARAM_KEY } from './constants';
+import { CustomDecorator } from './decorators';
+
+export default definePreview({
+  decorators: [CustomDecorator],
+  globals: {
+    [PARAM_KEY]: false,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="example-addon/src/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { PARAM_KEY } from './constants';
+import { CustomDecorator } from './decorators';
+
+export default definePreview({
+  decorators: [CustomDecorator],
+  globals: {
+    [PARAM_KEY]: false,
+  },
+});
+```
diff --git a/docs/_snippets/storybook-auto-docs-full-config.md b/docs/_snippets/storybook-auto-docs-full-config.md
index 37f6dde8a550..7f7f17566814 100644
--- a/docs/_snippets/storybook-auto-docs-full-config.md
+++ b/docs/_snippets/storybook-auto-docs-full-config.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -12,7 +12,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -29,3 +29,37 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  docs: {
+    //👇 See the table below for the list of supported options
+    defaultName: 'Documentation',
+    docsMode: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  docs: {
+    //👇 See the table below for the list of supported options
+    defaultName: 'Documentation',
+    docsMode: true,
+  },
+});
+```
diff --git a/docs/_snippets/storybook-auto-docs-main-mdx-config.md b/docs/_snippets/storybook-auto-docs-main-mdx-config.md
index 9ac517ef866e..fcdcf17efc59 100644
--- a/docs/_snippets/storybook-auto-docs-main-mdx-config.md
+++ b/docs/_snippets/storybook-auto-docs-main-mdx-config.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -28,3 +28,36 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+  framework: '@storybook/your-framework',
+  stories: [
+    //👇 Your documentation written in MDX along with your stories goes here
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-docs'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    //👇 Your documentation written in MDX along with your stories goes here
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-docs'],
+});
+```
diff --git a/docs/_snippets/storybook-canvas-doc-block-story.md b/docs/_snippets/storybook-canvas-doc-block-story.md
index de6fd052ae11..5efdd04c564d 100644
--- a/docs/_snippets/storybook-canvas-doc-block-story.md
+++ b/docs/_snippets/storybook-canvas-doc-block-story.md
@@ -1,4 +1,4 @@
-```jsx filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { ColorItem, ColorPalette } from '@storybook/addon-docs/blocks';
 
 import { MyComponent } from './MyComponent';
@@ -49,7 +49,7 @@ export const Colors = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -105,3 +105,110 @@ export const Colors: Story = {
   ),
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { ColorItem, ColorPalette } from '@storybook/addon-docs/blocks';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const theme = {
+  colors: {
+    primaryDark: {
+      value: '#1C1C1C',
+    },
+    primaryRegular: {
+      value: '#363636',
+    },
+    primaryLight1: {
+      value: '#4D4D4D',
+    },
+    primaryLight2: {
+      value: '#878787',
+    },
+    primaryLight3: {
+      value: '#D1D1D1',
+    },
+    primaryLight4: {
+      value: '#EDEDED',
+    },
+  },
+};
+
+// ❌ Don't use the Doc Blocks inside your stories. It will break Storybook with a cryptic error.
+export const Colors = meta.story({
+  render: () => (
+    <ColorPalette>
+      {Object.entries(theme.colors).map(([key, { value }]) => (
+        <ColorItem
+          colors={{
+            [key]: value,
+          }}
+          key={key}
+          subtitle={`theme.colors.${key}`}
+          title={key}
+        />
+      ))}
+    </ColorPalette>
+  ),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { ColorItem, ColorPalette } from '@storybook/addon-docs/blocks';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const theme = {
+  colors: {
+    primaryDark: {
+      value: '#1C1C1C',
+    },
+    primaryRegular: {
+      value: '#363636',
+    },
+    primaryLight1: {
+      value: '#4D4D4D',
+    },
+    primaryLight2: {
+      value: '#878787',
+    },
+    primaryLight3: {
+      value: '#D1D1D1',
+    },
+    primaryLight4: {
+      value: '#EDEDED',
+    },
+  },
+};
+
+// ❌ Don't use the Doc Blocks inside your stories. It will break Storybook with a cryptic error.
+export const Colors = meta.story({
+  render: () => (
+    <ColorPalette>
+      {Object.entries(theme.colors).map(([key, { value }]) => (
+        <ColorItem
+          colors={{
+            [key]: value,
+          }}
+          key={key}
+          subtitle={`theme.colors.${key}`}
+          title={key}
+        />
+      ))}
+    </ColorPalette>
+  ),
+});
+```
diff --git a/docs/_snippets/storybook-component-layout-param.md b/docs/_snippets/storybook-component-layout-param.md
index 22d296747f17..84df08a3ff00 100644
--- a/docs/_snippets/storybook-component-layout-param.md
+++ b/docs/_snippets/storybook-component-layout-param.md
@@ -40,7 +40,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -95,7 +95,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -125,3 +125,32 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // Sets the layout parameter component wide.
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // Sets the layout parameter component wide.
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-coverage-addon-config-options.md b/docs/_snippets/storybook-coverage-addon-config-options.md
index 6bbb3b9b551c..7c0d3b80c55c 100644
--- a/docs/_snippets/storybook-coverage-addon-config-options.md
+++ b/docs/_snippets/storybook-coverage-addon-config-options.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   stories: [],
   addons: [
@@ -16,7 +16,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // For Vite support add the following import
 // import type { AddonOptionsVite } from '@storybook/addon-coverage';
 
@@ -45,3 +45,53 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+// For Vite support add the following import
+// import type { AddonOptionsVite } from '@storybook/addon-coverage';
+import type { AddonOptionsWebpack } from '@storybook/addon-coverage';
+
+const coverageConfig: AddonOptionsWebpack = {
+  istanbul: {
+    include: ['**/stories/**'],
+    exclude: ['**/exampleDirectory/**'],
+  },
+};
+
+export default defineMain({
+  stories: [],
+  addons: [
+    // Other Storybook addons
+    {
+      name: '@storybook/addon-coverage',
+      options: coverageConfig,
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: [],
+  addons: [
+    // Other Storybook addons
+    {
+      name: '@storybook/addon-coverage',
+      options: {
+        istanbul: {
+          include: ['**/stories/**'],
+          exclude: ['**/exampleDirectory/**'],
+        },
+      },
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-coverage-addon-optimized-config.md b/docs/_snippets/storybook-coverage-addon-optimized-config.md
index 463bcd42372a..fbc99b6e8761 100644
--- a/docs/_snippets/storybook-coverage-addon-optimized-config.md
+++ b/docs/_snippets/storybook-coverage-addon-optimized-config.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -12,7 +12,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -29,3 +29,37 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-vitest', '@storybook/addon-coverage'],
+  build: {
+    test: {
+      disabledAddons: ['@storybook/addon-docs'],
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-vitest', '@storybook/addon-coverage'],
+  build: {
+    test: {
+      disabledAddons: ['@storybook/addon-docs'],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-csf-3-auto-title-redundant.md b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
index bb61b14e8e45..d768b8f75ff8 100644
--- a/docs/_snippets/storybook-csf-3-auto-title-redundant.md
+++ b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
@@ -52,7 +52,7 @@ export const Default = {
 };
 ```
 
-```js filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -107,7 +107,7 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="components/MyComponent/MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="components/MyComponent/MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -162,3 +162,42 @@ export const Default: Story = {
   },
 };
 ```
+
+```ts filename="components/MyComponent/MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  component: MyComponent,
+  title: 'components/MyComponent/MyComponent',
+});
+
+export const Default = meta.story({
+  args: {
+    something: 'Something else',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  title: 'components/MyComponent/MyComponent',
+});
+
+export const Default = meta.story({
+  args: {
+    something: 'Something else',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-custom-manager-head.md b/docs/_snippets/storybook-custom-manager-head.md
index 169dda5de52c..80eb948b3138 100644
--- a/docs/_snippets/storybook-custom-manager-head.md
+++ b/docs/_snippets/storybook-custom-manager-head.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   managerHead: (head) => `
     ${head}
@@ -7,7 +7,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -20,3 +20,29 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  managerHead: (head) => `
+    ${head}
+    <link rel="icon" type="image/png" href="/logo192.png" sizes="192x192" />
+  `,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  managerHead: (head) => `
+    ${head}
+    <link rel="icon" type="image/png" href="/logo192.png" sizes="192x192" />
+  `,
+});
+```
diff --git a/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md b/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
index 233b6bc51f10..82be023939ee 100644
--- a/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
+++ b/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
@@ -1,4 +1,4 @@
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 // ❌ Don't use the package's index file to import the component.
 // import { MyComponent } from '@component-package';
 
@@ -15,7 +15,7 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -36,3 +36,42 @@ const meta = {
 
 export default meta;
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// ❌ Don't use the package's index file to import the component.
+// import { MyComponent } from '@component-package';
+
+// ✅ Use the component's export to import it directly.
+import { MyComponent } from '@component-package/src/MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+// ❌ Don't use the package's index file to import the component.
+// import { MyComponent } from '@component-package';
+
+// ✅ Use the component's export to import it directly.
+import { MyComponent } from '@component-package/src/MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+});
+```
diff --git a/docs/_snippets/storybook-interactions-play-function.md b/docs/_snippets/storybook-interactions-play-function.md
index 3d154306d5ac..948bb485eb4d 100644
--- a/docs/_snippets/storybook-interactions-play-function.md
+++ b/docs/_snippets/storybook-interactions-play-function.md
@@ -111,7 +111,7 @@ export const Submitted = {
 };
 ```
 
-```js filename="Form.stories.js|jsx" renderer="common" language="js"
+```js filename="Form.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { expect, fn, waitFor } from 'storybook/test';
 
 import { Form } from './Form';
@@ -225,7 +225,7 @@ export const Submitted: Story = {
 };
 ```
 
-```ts filename="Form.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Form.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -333,3 +333,77 @@ export const Submitted: Story = {
   },
 };
 ```
+
+```ts filename="Form.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { expect, fn, waitFor } from 'storybook/test';
+
+import { Form } from './Form';
+
+const meta = preview.meta({
+  component: Form,
+  args: {
+    // 👇 Use `fn` to spy on the onSubmit arg
+    onSubmit: fn(),
+  },
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvas to query the DOM
+ */
+export const Submitted = meta.story({
+  play: async ({ args, canvas, step, userEvent }) => {
+    await step('Enter credentials', async () => {
+      await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
+      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
+    });
+
+    await step('Submit form', async () => {
+      await userEvent.click(canvas.getByRole('button'));
+    });
+
+    // 👇 Now we can assert that the onSubmit arg was called
+    await waitFor(() => expect(args.onSubmit).toHaveBeenCalled());
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Form.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect, fn, waitFor } from 'storybook/test';
+
+import { Form } from './Form';
+
+const meta = preview.meta({
+  component: Form,
+  args: {
+    // 👇 Use `fn` to spy on the onSubmit arg
+    onSubmit: fn(),
+  },
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvas to query the DOM
+ */
+export const Submitted = meta.story({
+  play: async ({ args, canvas, step, userEvent }) => {
+    // Starts querying the component from its root element
+    await step('Enter credentials', async () => {
+      await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
+      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
+    });
+
+    await step('Submit form', async () => {
+      await userEvent.click(canvas.getByRole('button'));
+    });
+
+    // 👇 Now we can assert that the onSubmit arg was called
+    await waitFor(() => expect(args.onSubmit).toHaveBeenCalled());
+  },
+});
+```
diff --git a/docs/_snippets/storybook-interactions-step-function.md b/docs/_snippets/storybook-interactions-step-function.md
index ca9b47c6a2d3..6698f2a515fa 100644
--- a/docs/_snippets/storybook-interactions-step-function.md
+++ b/docs/_snippets/storybook-interactions-step-function.md
@@ -1,4 +1,4 @@
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 // ...rest of story file
 
 export const Submitted = {
@@ -15,7 +15,7 @@ export const Submitted = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // ...rest of story file
 
 export const Submitted: Story = {
@@ -31,3 +31,51 @@ export const Submitted: Story = {
   },
 };
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Submitted = meta.story({
+  play: async ({ args, canvas, step }) => {
+    await step('Enter email and password', async () => {
+      await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
+      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
+    });
+
+    await step('Submit form', async () => {
+      await userEvent.click(canvas.getByRole('button'));
+    });
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Submitted = meta.story({
+  play: async ({ args, canvas, step }) => {
+    await step('Enter email and password', async () => {
+      await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
+      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
+    });
+
+    await step('Submit form', async () => {
+      await userEvent.click(canvas.getByRole('button'));
+    });
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-advanced-config-example.md b/docs/_snippets/storybook-main-advanced-config-example.md
index 6d1e05b588cf..bf5d7921126f 100644
--- a/docs/_snippets/storybook-main-advanced-config-example.md
+++ b/docs/_snippets/storybook-main-advanced-config-example.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   viteFinal: async (config, options) => {
     // Update config here
@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, angular, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -34,3 +34,43 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  viteFinal: async (config, options) => {
+    // Update config here
+    return config;
+  },
+  webpackFinal: async (config, options) => {
+    // Change webpack config
+    return config;
+  },
+  babel: async (config, options) => {
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  viteFinal: async (config, options) => {
+    // Update config here
+    return config;
+  },
+  webpackFinal: async (config, options) => {
+    // Change webpack config
+    return config;
+  },
+  babel: async (config, options) => {
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-auto-title-custom.md b/docs/_snippets/storybook-main-auto-title-custom.md
index 953baffa4c1b..ba7de374fb8a 100644
--- a/docs/_snippets/storybook-main-auto-title-custom.md
+++ b/docs/_snippets/storybook-main-auto-title-custom.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -27,3 +27,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    {
+      directory: '../src',
+      titlePrefix: 'Custom', // 👈 Configure the title prefix
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    {
+      directory: '../src',
+      titlePrefix: 'Custom', // 👈 Configure the title prefix
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-config-remark-options.md b/docs/_snippets/storybook-main-config-remark-options.md
index 625e9ce922ee..a28fb9fc5098 100644
--- a/docs/_snippets/storybook-main-config-remark-options.md
+++ b/docs/_snippets/storybook-main-config-remark-options.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import remarkGfm from 'remark-gfm';
 
 export default {
@@ -21,7 +21,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 import remarkGfm from 'remark-gfm';
 
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
@@ -47,3 +47,55 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import remarkGfm from 'remark-gfm';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import remarkGfm from 'remark-gfm';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-configuration-src-dir.md b/docs/_snippets/storybook-main-configuration-src-dir.md
index 0075d16cf5e3..44ae4892f913 100644
--- a/docs/_snippets/storybook-main-configuration-src-dir.md
+++ b/docs/_snippets/storybook-main-configuration-src-dir.md
@@ -1,4 +1,4 @@
-```js filename="./storybook/main.js" renderer="common" language="js"
+```js filename="./storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -17,3 +17,25 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="./storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src'],
+});
+```
diff --git a/docs/_snippets/storybook-main-disable-telemetry.md b/docs/_snippets/storybook-main-disable-telemetry.md
index 0b25a861852e..b4848374e2c5 100644
--- a/docs/_snippets/storybook-main-disable-telemetry.md
+++ b/docs/_snippets/storybook-main-disable-telemetry.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-extend-ts-config.md b/docs/_snippets/storybook-main-extend-ts-config.md
index 15d874fc3a6b..7263b83fcf38 100644
--- a/docs/_snippets/storybook-main-extend-ts-config.md
+++ b/docs/_snippets/storybook-main-extend-ts-config.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -15,21 +15,17 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
-import type { StorybookConfig } from '@storybook/your-framework';
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
 
-const config: StorybookConfig = {
+export default defineMain({
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
     check: false,
     checkOptions: {},
-    reactDocgen: 'react-docgen',
-    reactDocgenTypescriptOptions: {}, // Available only when reactDocgen is set to 'react-docgen-typescript'
-    skipCompiler: true,
+    skipCompiler: false,
   },
-};
-
-export default config;
+});
 ```
diff --git a/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md b/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
index e1b0d3f406c4..253032ae0ac2 100644
--- a/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
+++ b/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -27,3 +27,35 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs.
+    reactDocgen: 'react-docgen',
+    check: false,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs.
+    reactDocgen: 'react-docgen',
+    check: false,
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-js-md-files.md b/docs/_snippets/storybook-main-js-md-files.md
index 5c0db6d7f0ac..5023682e3cf6 100644
--- a/docs/_snippets/storybook-main-js-md-files.md
+++ b/docs/_snippets/storybook-main-js-md-files.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -17,3 +17,25 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../my-project/src/components/*.@(js|md)'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../my-project/src/components/*.@(js|md)'],
+});
+```
diff --git a/docs/_snippets/storybook-main-pnpm-with-module-resolution.md b/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
index c4a1575349ee..7fca52749455 100644
--- a/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
+++ b/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -19,11 +19,11 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
-import { dirname, join } from 'node:path';
+import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const getAbsolutePath = (packageName: string) =>
@@ -44,3 +44,52 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+const getAbsolutePath = (packageName: string) =>
+  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+
+export default defineMain({
+  framework: {
+    // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+    name: getAbsolutePath('@storybook/your-framework'),
+    options: {},
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    //👇 Use getAbsolutePath when referencing Storybook's addons and frameworks
+    getAbsolutePath('@storybook/addon-docs'),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+const getAbsolutePath = (packageName) =>
+  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+
+export default defineMain({
+  framework: {
+    name: getAbsolutePath('@storybook/your-framework'),
+    options: {},
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    //👇 Use getAbsolutePath when referencing Storybook's addons and frameworks
+    getAbsolutePath('@storybook/addon-docs'),
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-prop-filter.md b/docs/_snippets/storybook-main-prop-filter.md
index 678475c9a661..9b934055615b 100644
--- a/docs/_snippets/storybook-main-prop-filter.md
+++ b/docs/_snippets/storybook-main-prop-filter.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -21,3 +21,25 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      // Filter out third-party props from node_modules except @mui packages.
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-react-docgen-typescript.md b/docs/_snippets/storybook-main-react-docgen-typescript.md
index 6826f06e3bf4..a83bf0f71f38 100644
--- a/docs/_snippets/storybook-main-react-docgen-typescript.md
+++ b/docs/_snippets/storybook-main-react-docgen-typescript.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -15,3 +15,19 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    // Provide your own options if necessary.
+    // See https://storybook.js.org/docs/configure/typescript for more information.
+    reactDocgenTypescriptOptions: {},
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-ref-local.md b/docs/_snippets/storybook-main-ref-local.md
index 55ebf18ac353..e981690d39bb 100644
--- a/docs/_snippets/storybook-main-ref-local.md
+++ b/docs/_snippets/storybook-main-ref-local.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -16,7 +16,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -37,3 +37,45 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    react: {
+      title: 'React',
+      url: 'http://localhost:7007',
+    },
+    angular: {
+      title: 'Angular',
+      url: 'http://localhost:7008',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    react: {
+      title: 'React',
+      url: 'http://localhost:7007',
+    },
+    angular: {
+      title: 'Angular',
+      url: 'http://localhost:7008',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-register-example-addon.md b/docs/_snippets/storybook-main-register-example-addon.md
index 02b02e44f86c..42edd0432ff0 100644
--- a/docs/_snippets/storybook-main-register-example-addon.md
+++ b/docs/_snippets/storybook-main-register-example-addon.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   addons: [
     // Other Storybook addons
@@ -7,7 +7,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -20,3 +20,29 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y',
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y',
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-simplified-config.md b/docs/_snippets/storybook-main-simplified-config.md
index e1c9da165027..e9ae4aa3d8be 100644
--- a/docs/_snippets/storybook-main-simplified-config.md
+++ b/docs/_snippets/storybook-main-simplified-config.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
   framework: '@storybook/your-framework',
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -25,3 +25,33 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    config.plugins.push(/* ... */);
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    config.plugins.push(/* ... */);
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md b/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
index 559738dc7a4b..8d8095e5bb1f 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import path from 'path';
 
 export default {
@@ -17,7 +17,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 import path from 'path';
 // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
@@ -38,3 +38,47 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import path from 'path';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(process.cwd(), 'src'),
+      };
+    }
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import path from 'path';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(process.cwd(), 'src'),
+      };
+    }
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-ts-module-resolution.md b/docs/_snippets/storybook-main-ts-module-resolution.md
index 90b8e3e8fe60..22af03c10a6c 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 export default {
@@ -19,7 +19,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -43,3 +43,51 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ];
+    }
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ];
+    }
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-using-existing-config.md b/docs/_snippets/storybook-main-using-existing-config.md
index 4814b5e153d1..66cc62fa8fbd 100644
--- a/docs/_snippets/storybook-main-using-existing-config.md
+++ b/docs/_snippets/storybook-main-using-existing-config.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported.
 
 export default {
@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -33,3 +33,41 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported.
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      module: { ...config.module, rules: [...config.module.rules, ...custom.module.rules] },
+    };
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported.
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      module: { ...config.module, rules: [...config.module.rules, ...custom.module.rules] },
+    };
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-webpack-options.md b/docs/_snippets/storybook-main-webpack-options.md
index 437546e830e4..5761530cf23c 100644
--- a/docs/_snippets/storybook-main-webpack-options.md
+++ b/docs/_snippets/storybook-main-webpack-options.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
   framework: '@storybook/your-framework',
@@ -15,7 +15,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -35,3 +35,43 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true,
+        lazyCompilation: true,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true,
+        lazyCompilation: true,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md b/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
index 7da8f8f34f4c..4bf0969415b2 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```jsx filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import * as React from 'react';
 
 import { DocsContainer } from '@storybook/addon-docs/blocks';
@@ -22,12 +22,11 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```tsx filename=".storybook/preview.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 import * as React from 'react';
 
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
-
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 
 const ExampleContainer = ({ children, ...props }) => {
@@ -50,3 +49,57 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+const ExampleContainer = ({ children, ...props }) => {
+  return <DocsContainer {...props}>{children}</DocsContainer>;
+};
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: ExampleContainer,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+const ExampleContainer = ({ children, ...props }) => {
+  return <DocsContainer {...props}>{children}</DocsContainer>;
+};
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: ExampleContainer,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md b/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
index 0e97c75f2b19..69f5a7117b1b 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
@@ -1,4 +1,4 @@
-```jsx filename=".storybook/preview.jsx" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import DocumentationTemplate from './DocumentationTemplate.mdx';
 
 export default {
@@ -9,3 +9,52 @@ export default {
   },
 };
 ```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+import type { Preview } from '@storybook/your-framework';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+const preview = {
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+} satisfies Preview;
+
+export default preview;
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md b/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
index c8b160438774..0cd048c76541 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
@@ -1,4 +1,6 @@
-```jsx filename=".storybook/preview.jsx" renderer="common" language="js"
+```jsx filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import * as React from 'react';
+
 import {
   Title,
   Subtitle,
@@ -32,10 +34,11 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.tsx" renderer="common" language="ts"
+```tsx filename=".storybook/preview.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+import * as React from 'react';
+
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
-
 import {
   Title,
   Subtitle,
@@ -70,3 +73,81 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md b/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
index 338556450ceb..259c87be0334 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
@@ -1,4 +1,5 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```jsx filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import * as React from 'react';
 import { MDXProvider } from '@mdx-js/react';
 
 import { DocsContainer } from '@storybook/addon-docs/blocks';
@@ -31,12 +32,12 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
-import type { Preview } from '@storybook/your-framework';
-
+```tsx filename=".storybook/preview.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+import * as React from 'react';
 import { MDXProvider } from '@mdx-js/react';
 
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+import type { Preview } from '@storybook/your-framework';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 
 import * as DesignSystem from 'your-design-system';
@@ -68,3 +69,77 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import * as DesignSystem from 'your-design-system';
+
+export const MyDocsContainer = (props) => (
+  <MDXProvider
+    components={{
+      h1: DesignSystem.H1,
+      h2: DesignSystem.H2,
+    }}
+  >
+    <DocsContainer {...props} />
+  </MDXProvider>
+);
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: MyDocsContainer,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import * as DesignSystem from 'your-design-system';
+
+export const MyDocsContainer = (props) => (
+  <MDXProvider
+    components={{
+      h1: DesignSystem.H1,
+      h2: DesignSystem.H2,
+    }}
+  >
+    <DocsContainer {...props} />
+  </MDXProvider>
+);
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: MyDocsContainer,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-theme.md b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
index d8af04a9f7ab..e330bd25328f 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-theme.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { themes, ensure } from 'storybook/theming';
 
 export default {
@@ -16,7 +16,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -38,3 +38,47 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ensure, themes } from 'storybook/theming';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: ensure(themes.dark), // The replacement theme to use
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ensure, themes } from 'storybook/theming';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: ensure(themes.dark), // The replacement theme to use
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-configure-globaltypes.md b/docs/_snippets/storybook-preview-configure-globaltypes.md
index 03e565858e5d..06b30b0a0bae 100644
--- a/docs/_snippets/storybook-preview-configure-globaltypes.md
+++ b/docs/_snippets/storybook-preview-configure-globaltypes.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 const preview = {
   globalTypes: {
     theme: {
@@ -22,7 +22,7 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -48,3 +48,55 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      toolbar: {
+        // The label to show for this toolbar item
+        title: 'Theme',
+        icon: 'circlehollow',
+        // Array of plain string values or MenuItem shape (see below)
+        items: ['light', 'dark'],
+        // Change title based on selected value
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      toolbar: {
+        // The label to show for this toolbar item
+        title: 'Theme',
+        icon: 'circlehollow',
+        // Array of plain string values or MenuItem shape (see below)
+        items: ['light', 'dark'],
+        // Change title based on selected value
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-custom-canvas.md b/docs/_snippets/storybook-preview-custom-canvas.md
index a0edc6116e56..2c55bf90720b 100644
--- a/docs/_snippets/storybook-preview-custom-canvas.md
+++ b/docs/_snippets/storybook-preview-custom-canvas.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { MyCanvas } from './MyCanvas';
 
 export default {
@@ -12,7 +12,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -30,3 +30,39 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MyCanvas } from './MyCanvas';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      components: {
+        Canvas: MyCanvas,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MyCanvas } from './MyCanvas';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      components: {
+        Canvas: MyCanvas,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-custom-code-renderer.md b/docs/_snippets/storybook-preview-custom-code-renderer.md
index cf0b87741939..b7af5a9f30c6 100644
--- a/docs/_snippets/storybook-preview-custom-code-renderer.md
+++ b/docs/_snippets/storybook-preview-custom-code-renderer.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { CodeBlock } from './CodeBlock';
 
 export default {
@@ -12,7 +12,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -30,3 +30,39 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { CodeBlock } from './CodeBlock';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      components: {
+        code: CodeBlock,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { CodeBlock } from './CodeBlock';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      components: {
+        code: CodeBlock,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-custom-params.md b/docs/_snippets/storybook-preview-custom-params.md
index 6cc24851153b..253c6db3ee66 100644
--- a/docs/_snippets/storybook-preview-custom-params.md
+++ b/docs/_snippets/storybook-preview-custom-params.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     backgrounds: {
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -28,3 +28,37 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+      ],
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+      ],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-custom-toc.md b/docs/_snippets/storybook-preview-custom-toc.md
index 8fa1d1b93141..8ed35888677c 100644
--- a/docs/_snippets/storybook-preview-custom-toc.md
+++ b/docs/_snippets/storybook-preview-custom-toc.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     docs: {
@@ -17,7 +17,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -40,3 +40,49 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h1, h2, h3',
+        ignoreSelector: '#primary',
+        title: 'Table of Contents',
+        disable: false,
+        unsafeTocbotOptions: {
+          orderedList: false,
+        },
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h1, h2, h3',
+        ignoreSelector: '#primary',
+        title: 'Table of Contents',
+        disable: false,
+        unsafeTocbotOptions: {
+          orderedList: false,
+        },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
index d44404d2aedc..e58aa0dbe13a 100644
--- a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
+++ b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     docs: {
@@ -8,7 +8,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -22,3 +22,31 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-docs-dark-theme.md b/docs/_snippets/storybook-preview-docs-dark-theme.md
index e947fb9f74cb..a88f9dc5be97 100644
--- a/docs/_snippets/storybook-preview-docs-dark-theme.md
+++ b/docs/_snippets/storybook-preview-docs-dark-theme.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { themes } from 'storybook/theming';
 
 export default {
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -26,3 +26,35 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { themes } from 'storybook/theming';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { themes } from 'storybook/theming';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-empty-sort-object.md b/docs/_snippets/storybook-preview-empty-sort-object.md
index 2669a22f5ef2..5942c0a67a66 100644
--- a/docs/_snippets/storybook-preview-empty-sort-object.md
+++ b/docs/_snippets/storybook-preview-empty-sort-object.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     options: {
@@ -12,7 +12,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -30,3 +30,39 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        method: '',
+        order: [],
+        locales: '',
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        method: '',
+        order: [],
+        locales: '',
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-enable-toc.md b/docs/_snippets/storybook-preview-enable-toc.md
index 12ead3b137b4..afbe7e998e80 100644
--- a/docs/_snippets/storybook-preview-enable-toc.md
+++ b/docs/_snippets/storybook-preview-enable-toc.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     docs: {
@@ -8,7 +8,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -22,3 +22,31 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-expanded-controls.md b/docs/_snippets/storybook-preview-expanded-controls.md
index 4dcbe54f895d..83a7bb1f7db6 100644
--- a/docs/_snippets/storybook-preview-expanded-controls.md
+++ b/docs/_snippets/storybook-preview-expanded-controls.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     controls: { expanded: true },
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -18,3 +18,27 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: { expanded: true },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: { expanded: true },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-global-decorator.md b/docs/_snippets/storybook-preview-global-decorator.md
index ed8c05c5618f..18f0b344c9a7 100644
--- a/docs/_snippets/storybook-preview-global-decorator.md
+++ b/docs/_snippets/storybook-preview-global-decorator.md
@@ -9,7 +9,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```jsx filename=".storybook/preview.jsx" renderer="react" language="js"
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 export default {
@@ -24,7 +24,7 @@ export default {
 };
 ```
 
-```tsx filename=".storybook/preview.tsx" renderer="react" language="ts"
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
@@ -135,3 +135,41 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-preview-global-loader.md b/docs/_snippets/storybook-preview-global-loader.md
index d11ba39b7f95..57aa737b9d57 100644
--- a/docs/_snippets/storybook-preview-global-loader.md
+++ b/docs/_snippets/storybook-preview-global-loader.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   loaders: [
     async () => ({
@@ -8,7 +8,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -22,3 +22,31 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  loaders: [
+    async () => ({
+      currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
+    }),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  loaders: [
+    async () => ({
+      currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
+    }),
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-preview-global-parameters.md b/docs/_snippets/storybook-preview-global-parameters.md
index 6cc24851153b..253c6db3ee66 100644
--- a/docs/_snippets/storybook-preview-global-parameters.md
+++ b/docs/_snippets/storybook-preview-global-parameters.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     backgrounds: {
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -28,3 +28,37 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+      ],
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+      ],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-import-global-styles.md b/docs/_snippets/storybook-preview-import-global-styles.md
index 5b15a319e103..0bed11b13d03 100644
--- a/docs/_snippets/storybook-preview-import-global-styles.md
+++ b/docs/_snippets/storybook-preview-import-global-styles.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import '../src/styles/global.css';
 
 export default {
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -18,3 +18,27 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import '../src/styles/global.css';
+
+export default definePreview({
+  parameters: {},
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import '../src/styles/global.css';
+
+export default definePreview({
+  parameters: {},
+});
+```
diff --git a/docs/_snippets/storybook-preview-layout-param.md b/docs/_snippets/storybook-preview-layout-param.md
index 0bd9f616eed0..be20750b6db3 100644
--- a/docs/_snippets/storybook-preview-layout-param.md
+++ b/docs/_snippets/storybook-preview-layout-param.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     layout: 'centered',
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -18,3 +18,27 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-locales-globaltype.md b/docs/_snippets/storybook-preview-locales-globaltype.md
index 68b40e8283dc..2f72584187a4 100644
--- a/docs/_snippets/storybook-preview-locales-globaltype.md
+++ b/docs/_snippets/storybook-preview-locales-globaltype.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 const preview = {
   globalTypes: {
     locale: {
@@ -23,7 +23,7 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -50,3 +50,57 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  globalTypes: {
+    locale: {
+      description: 'Internationalization locale',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', right: '🇺🇸', title: 'English' },
+          { value: 'fr', right: '🇫🇷', title: 'Français' },
+          { value: 'es', right: '🇪🇸', title: 'Español' },
+          { value: 'zh', right: '🇨🇳', title: '中文' },
+          { value: 'kr', right: '🇰🇷', title: '한국어' },
+        ],
+      },
+    },
+  },
+  initialGlobals: {
+    locale: 'en',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  globalTypes: {
+    locale: {
+      description: 'Internationalization locale',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', right: '🇺🇸', title: 'English' },
+          { value: 'fr', right: '🇫🇷', title: 'Français' },
+          { value: 'es', right: '🇪🇸', title: 'Español' },
+          { value: 'zh', right: '🇨🇳', title: '中文' },
+          { value: 'kr', right: '🇰🇷', title: '한국어' },
+        ],
+      },
+    },
+  },
+  initialGlobals: {
+    locale: 'en',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-matching-argtypes.md b/docs/_snippets/storybook-preview-matching-argtypes.md
index e620eefdb4e0..03ba6aa5d637 100644
--- a/docs/_snippets/storybook-preview-matching-argtypes.md
+++ b/docs/_snippets/storybook-preview-matching-argtypes.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     actions: { argTypesRegex: '^on.*' },
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -18,3 +18,27 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-optout-inline.md b/docs/_snippets/storybook-preview-optout-inline.md
index 58ad829b68ac..a33e934326a0 100644
--- a/docs/_snippets/storybook-preview-optout-inline.md
+++ b/docs/_snippets/storybook-preview-optout-inline.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     docs: {
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -24,3 +24,33 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      // Opt-out of inline rendering
+      story: { inline: false },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      // Opt-out of inline rendering
+      story: { inline: false },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-parameters-color-swatches.md b/docs/_snippets/storybook-preview-parameters-color-swatches.md
index 45f0a34fbf2e..31aa9f98b2e8 100644
--- a/docs/_snippets/storybook-preview-parameters-color-swatches.md
+++ b/docs/_snippets/storybook-preview-parameters-color-swatches.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     controls: {
@@ -8,7 +8,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -22,3 +22,31 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'],
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-register-language-globally.md b/docs/_snippets/storybook-preview-register-language-globally.md
index 2df6b1fd65cf..8a4bc9612927 100644
--- a/docs/_snippets/storybook-preview-register-language-globally.md
+++ b/docs/_snippets/storybook-preview-register-language-globally.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 
@@ -17,7 +17,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -40,3 +40,49 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+
+// Registers and enables scss language support
+SyntaxHighlighter.registerLanguage('scss', scss);
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+
+// Registers and enables scss language support
+SyntaxHighlighter.registerLanguage('scss', scss);
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-sort-function.md b/docs/_snippets/storybook-preview-sort-function.md
index 9f6407a28478..58eda77fdb54 100644
--- a/docs/_snippets/storybook-preview-sort-function.md
+++ b/docs/_snippets/storybook-preview-sort-function.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     options: {
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -25,3 +25,34 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      // The `a` and `b` arguments in this function have a type of `import('storybook/internal/types').IndexEntry`. Remember that the function is executed in a JavaScript environment, so use JSDoc for IntelliSense to introspect it.
+      storySort: (a, b) =>
+        a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: (a, b) =>
+        a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-use-global-type.md b/docs/_snippets/storybook-preview-use-global-type.md
index 157291f609cc..b83528fddf70 100644
--- a/docs/_snippets/storybook-preview-use-global-type.md
+++ b/docs/_snippets/storybook-preview-use-global-type.md
@@ -16,44 +16,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
-import { MyThemes } from '../my-theme-folder/my-theme-file';
-
-const preview = {
-  decorators: [
-    (story, context) => {
-      const selectedTheme = context.globals.theme || 'light';
-      const theme = MyThemes[selectedTheme];
-      // Your theme provider and other context providers goes in the return statement
-      return;
-    },
-  ],
-};
-
-export default preview;
-```
-
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
-import type { Preview } from '@storybook/your-framework';
-
-import { MyThemes } from '../my-theme-folder/my-theme-file';
-
-const preview: Preview = {
-  decorators: [
-    (story, context) => {
-      const selectedTheme = context.globals.theme || 'light';
-      const theme = MyThemes[selectedTheme];
-      // Your theme provider and other context providers goes in the return statement
-      return;
-    },
-  ],
-};
-
-export default preview;
-```
-
-```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js"
+```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { ThemeProvider } from 'styled-components';
 
 import { MyThemes } from '../my-theme-folder/my-theme-file';
@@ -74,7 +37,7 @@ const preview = {
 export default preview;
 ```
 
-```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts"
+```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -165,3 +128,48 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ThemeProvider } from 'styled-components';
+
+import { MyThemes } from '../my-theme-folder/my-theme-file';
+
+export default definePreview({
+  decorators: [
+    (Story, context) => {
+      const theme = MyThemes[context.globals.theme];
+      return (
+        <ThemeProvider theme={theme}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+import { ThemeProvider } from 'styled-components';
+
+import { MyThemes } from '../my-theme-folder/my-theme-file';
+
+export default definePreview({
+  decorators: [
+    (Story, context) => {
+      const theme = MyThemes[context.globals.theme];
+      return (
+        <ThemeProvider theme={theme}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
index f16746b5018a..4aadd7dfa093 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     options: {
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -26,3 +26,35 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', '*', 'WIP'],
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', '*', 'WIP'],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-with-ordered-pages.md b/docs/_snippets/storybook-preview-with-ordered-pages.md
index be68bde861ef..dcbfec1b1463 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     options: {
@@ -10,7 +10,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -26,3 +26,35 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'],
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-with-styled-components-decorator.md b/docs/_snippets/storybook-preview-with-styled-components-decorator.md
index d0176a9d836e..df975665fc46 100644
--- a/docs/_snippets/storybook-preview-with-styled-components-decorator.md
+++ b/docs/_snippets/storybook-preview-with-styled-components-decorator.md
@@ -8,7 +8,7 @@ const preview: Preview = {
   decorators: [
     moduleMetadata({ declarations: [ThemeProvider] }),
     componentWrapperDecorator(
-      (story) => `<theme-provider class="default">${story}</theme-provider>`
+      (story) => `<theme-provider class="default">${story}</theme-provider>`,
     ),
   ],
 };
@@ -20,14 +20,14 @@ const preview: Preview = {
     moduleMetadata({ declarations: [ThemeProvider] }),
     componentWrapperDecorator(
       (story) => `<theme-provider [class]="theme">${story}</theme-provider>`,
-      ({ globals }) => ({ theme: globals.theme })
+      ({ globals }) => ({ theme: globals.theme }),
     ),
   ],
 };
 export default preview;
 ```
 
-```jsx filename=".storybook/preview.js" renderer="react" language="js"
+```jsx filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 import { ThemeProvider } from 'styled-components';
@@ -44,7 +44,7 @@ export default {
 };
 ```
 
-```tsx filename=".storybook/preview.tsx" renderer="react" language="ts"
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
@@ -107,3 +107,45 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ThemeProvider } from 'styled-components';
+
+export default definePreview({
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme="default">
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ThemeProvider } from 'styled-components';
+
+export default definePreview({
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme="default">
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-story-layout-param.md b/docs/_snippets/storybook-story-layout-param.md
index a30369bb73fe..c8655f21b942 100644
--- a/docs/_snippets/storybook-story-layout-param.md
+++ b/docs/_snippets/storybook-story-layout-param.md
@@ -50,7 +50,7 @@ export const WithLayout = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -103,7 +103,7 @@ export const WithLayout: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -151,3 +151,36 @@ export const WithLayout: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const WithLayout = meta.story({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const WithLayout = meta.story({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-storyloading-with-directory.md b/docs/_snippets/storybook-storyloading-with-directory.md
index 45a70a660b19..c717cbee77a1 100644
--- a/docs/_snippets/storybook-storyloading-with-directory.md
+++ b/docs/_snippets/storybook-storyloading-with-directory.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -7,7 +7,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -19,3 +19,27 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  // 👇 Storybook will load all existing stories within the MyStories folder
+  stories: ['../packages/MyStories'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  // 👇 Storybook will load all existing stories within the MyStories folder
+  stories: ['../packages/MyStories'],
+});
+```
diff --git a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
index 840d4239b72f..3f0bd87705c7 100644
--- a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
+++ b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
diff --git a/docs/_snippets/storybook-test-fn-mock-spy.md b/docs/_snippets/storybook-test-fn-mock-spy.md
index 0993dd1d1665..0958dfa2eaaa 100644
--- a/docs/_snippets/storybook-test-fn-mock-spy.md
+++ b/docs/_snippets/storybook-test-fn-mock-spy.md
@@ -94,34 +94,6 @@ export const SaveFlow = {
 };
 ```
 
-```js filename="NoteUI.stories.js" renderer="common" language="js"
-import { expect } from 'storybook/test';
-
-// 👇 Automocked module resolves to '../app/__mocks__/actions'
-import { saveNote } from '../app/actions';
-import { createNotes } from '../app/mocks/notes';
-
-import NoteUI from './note-ui';
-
-export default { component: NoteUI };
-
-const notes = createNotes();
-
-export const SaveFlow = {
-  name: 'Save Flow ▶',
-  args: {
-    isEditing: true,
-    note: notes[0],
-  },
-  play: async ({ canvas }) => {
-    const saveButton = canvas.getByRole('menuitem', { name: /done/i });
-    await userEvent.click(saveButton);
-    // 👇 This is the mock function, so you can assert its behavior
-    await expect(saveNote).toHaveBeenCalled();
-  },
-};
-```
-
 ```svelte filename="NoteUI.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -154,7 +126,7 @@ export const SaveFlow = {
   }} />
 ```
 
-```ts filename="NoteUI.stories.ts" renderer="common" language="ts" tabTitle="CSF"
+```ts filename="NoteUI.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -191,7 +163,7 @@ export const SaveFlow: Story = {
 };
 ```
 
-```ts filename="NoteUI.stories.ts" renderer="common" language="ts"
+```ts filename="NoteUI.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -225,6 +197,34 @@ export const SaveFlow: Story = {
 };
 ```
 
+```js filename="NoteUI.stories.js" renderer="common" language="js" tabTitle="CSF 3"
+import { expect } from 'storybook/test';
+
+// 👇 Automocked module resolves to '../app/__mocks__/actions'
+import { saveNote } from '../app/actions';
+import { createNotes } from '../app/mocks/notes';
+
+import NoteUI from './note-ui';
+
+export default { component: NoteUI };
+
+const notes = createNotes();
+
+export const SaveFlow = {
+  name: 'Save Flow ▶',
+  args: {
+    isEditing: true,
+    note: notes[0],
+  },
+  play: async ({ canvas, userEvent }) => {
+    const saveButton = canvas.getByRole('menuitem', { name: /done/i });
+    await userEvent.click(saveButton);
+    // 👇 This is the mock function, so you can assert its behavior
+    await expect(saveNote).toHaveBeenCalled();
+  },
+};
+```
+
 ```js filename="NoteUI.stories.js" renderer="web-components" language="js"
 import { expect } from 'storybook/test';
 
@@ -285,3 +285,66 @@ export const SaveFlow: Story = {
   },
 };
 ```
+
+```ts filename="NoteUI.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { expect } from 'storybook/test';
+
+// 👇 Automocked module resolves to '../app/__mocks__/actions'
+import { saveNote } from '../app/actions';
+import { createNotes } from '../app/mocks/notes';
+
+import NoteUI from './note-ui';
+
+const meta = preview.meta({ component: NoteUI });
+
+const notes = createNotes();
+
+export const SaveFlow = meta.story({
+  name: 'Save Flow ▶',
+  args: {
+    isEditing: true,
+    note: notes[0],
+  },
+  play: async ({ canvas, userEvent }) => {
+    const saveButton = canvas.getByRole('menuitem', { name: /done/i });
+    await userEvent.click(saveButton);
+    // 👇 This is the mock function, so you can assert its behavior
+    await expect(saveNote).toHaveBeenCalled();
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="NoteUI.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { expect } from 'storybook/test';
+
+// 👇 Automocked module resolves to '../app/__mocks__/actions'
+import { saveNote } from '../app/actions';
+import { createNotes } from '../app/mocks/notes';
+
+import NoteUI from './note-ui';
+
+const meta = preview.meta({
+  component: NoteUI,
+});
+
+const notes = createNotes();
+
+export const SaveFlow = meta.story({
+  name: 'Save Flow ▶',
+  args: {
+    isEditing: true,
+    note: notes[0],
+  },
+  play: async ({ canvas, userEvent }) => {
+    const saveButton = canvas.getByRole('menuitem', { name: /done/i });
+    await userEvent.click(saveButton);
+    // 👇 This is the mock function, so you can assert its behavior
+    await expect(saveNote).toHaveBeenCalled();
+  },
+});
+```
diff --git a/docs/_snippets/storybook-test-mock-return-value.md b/docs/_snippets/storybook-test-mock-return-value.md
index 449ff2e51938..37b0e7df2c06 100644
--- a/docs/_snippets/storybook-test-mock-return-value.md
+++ b/docs/_snippets/storybook-test-mock-return-value.md
@@ -60,7 +60,7 @@ export const Default = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="common" language="js"
+```js filename="Page.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 // 👇 Automocked module resolves to '../lib/__mocks__/session'
 import { getUserFromSession } from '../lib/session';
 
@@ -125,7 +125,7 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts"
+```ts filename="Page.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { mocked } from 'storybook/test';
@@ -188,3 +188,45 @@ export const Default: Story = {
   },
 };
 ```
+
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { mocked } from 'storybook/test';
+
+// 👇 Automocked module resolves to '../lib/__mocks__/session'
+import { getUserFromSession } from '../lib/session';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const Default = meta.story({
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    mocked(getUserFromSession).mockReturnValue({ id: '1', name: 'Alice' });
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+// 👇 Automocked module resolves to '../lib/__mocks__/session'
+import { getUserFromSession } from '../lib/session';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const Default = meta.story({
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
+  },
+});
+```
diff --git a/docs/_snippets/storybook-vite-builder-aliasing.md b/docs/_snippets/storybook-vite-builder-aliasing.md
index ea7f4728f50b..0c6d6aa6a187 100644
--- a/docs/_snippets/storybook-vite-builder-aliasing.md
+++ b/docs/_snippets/storybook-vite-builder-aliasing.md
@@ -1,9 +1,8 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using, e.g. react-vite, nextjs-vite, vue3-vite, etc.
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs'],
   core: {
     builder: '@storybook/builder-vite',
   },
@@ -20,3 +19,79 @@ export default {
   },
 };
 ```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      // Add dependencies to pre-optimization
+      optimizeDeps: {
+        include: ['storybook-dark-mode'],
+      },
+    });
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      // Add dependencies to pre-optimization
+      optimizeDeps: {
+        include: ['storybook-dark-mode'],
+      },
+    });
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      // Add dependencies to pre-optimization
+      optimizeDeps: {
+        include: ['storybook-dark-mode'],
+      },
+    });
+  },
+});
+```
diff --git a/docs/_snippets/storybook-vite-builder-react-docgen.md b/docs/_snippets/storybook-vite-builder-react-docgen.md
index ed3c827efdf0..2c544ea66e87 100644
--- a/docs/_snippets/storybook-vite-builder-react-docgen.md
+++ b/docs/_snippets/storybook-vite-builder-react-docgen.md
@@ -1,7 +1,8 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+  framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs'],
   core: {
     builder: '@storybook/builder-vite',
   },
@@ -12,3 +13,61 @@ export default {
   },
 };
 ```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  typescript: {
+    // Enables the `react-docgen-typescript` parser.
+    // See https://storybook.js.org/docs/api/main-config/main-config-typescript for more information about this option.
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  typescript: {
+    // Enables the `react-docgen-typescript` parser.
+    // See https://storybook.js.org/docs/api/main-config/main-config-typescript for more information about this option.
+    reactDocgen: 'react-docgen-typescript',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  typescript: {
+    // Enables the `react-docgen-typescript` parser.
+    // See https://storybook.js.org/docs/api/main-config/main-config-typescript for more information about this option.
+    reactDocgen: 'react-docgen-typescript',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-vite-builder-register.md b/docs/_snippets/storybook-vite-builder-register.md
index 75348dc62f30..ee6c6511588b 100644
--- a/docs/_snippets/storybook-vite-builder-register.md
+++ b/docs/_snippets/storybook-vite-builder-register.md
@@ -1,9 +1,53 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+  framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs'],
   core: {
     builder: '@storybook/builder-vite', // 👈 The builder enabled here.
   },
 };
 ```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+  },
+});
+```
diff --git a/docs/_snippets/storybook-vite-builder-ts-configure.md b/docs/_snippets/storybook-vite-builder-ts-configure.md
index 9180f5a3fd3c..90c7ea848c16 100644
--- a/docs/_snippets/storybook-vite-builder-ts-configure.md
+++ b/docs/_snippets/storybook-vite-builder-ts-configure.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs-vite, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -13,3 +13,17 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async viteFinal(config, options) {
+    // Add your configuration here
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/tags-autodocs-in-meta.md b/docs/_snippets/tags-autodocs-in-meta.md
index 2deb38f690d7..f4d48ea6369c 100644
--- a/docs/_snippets/tags-autodocs-in-meta.md
+++ b/docs/_snippets/tags-autodocs-in-meta.md
@@ -35,7 +35,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -73,7 +73,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -107,3 +107,29 @@ const meta: Meta = {
 };
 export default meta;
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+});
+```
diff --git a/docs/_snippets/tags-autodocs-in-preview.md b/docs/_snippets/tags-autodocs-in-preview.md
index 50f6fe036602..471224f46cae 100644
--- a/docs/_snippets/tags-autodocs-in-preview.md
+++ b/docs/_snippets/tags-autodocs-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // ...rest of preview
   //👇 Enables auto-generated documentation for all stories
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -18,3 +18,27 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...rest of preview
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...rest of preview
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+});
+```
diff --git a/docs/_snippets/tags-autodocs-remove-component.md b/docs/_snippets/tags-autodocs-remove-component.md
index 7ec68887ff1c..8da45c98dccd 100644
--- a/docs/_snippets/tags-autodocs-remove-component.md
+++ b/docs/_snippets/tags-autodocs-remove-component.md
@@ -35,7 +35,7 @@ export default {
 };
 ```
 
-```js filename="Page.stories.js" renderer="common" language="js"
+```js filename="Page.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Page } from './Page';
 
 export default {
@@ -73,7 +73,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts"
+```ts filename="Page.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -107,3 +107,29 @@ const meta: Meta = {
 };
 export default meta;
 ```
+
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+});
+```
diff --git a/docs/_snippets/tags-autodocs-remove-story.md b/docs/_snippets/tags-autodocs-remove-story.md
index 0c0ac86e4a01..179f7fddcebc 100644
--- a/docs/_snippets/tags-autodocs-remove-story.md
+++ b/docs/_snippets/tags-autodocs-remove-story.md
@@ -50,7 +50,7 @@ export const UndocumentedStory = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -103,7 +103,7 @@ export const UndocumentedStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -156,3 +156,39 @@ export const UndocumentedStory: Story = {
   tags: ['!autodocs'],
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+});
+
+export const UndocumentedStory = meta.story({
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+});
+
+export const UndocumentedStory = meta.story({
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+});
+```
diff --git a/docs/_snippets/tags-combo-example.md b/docs/_snippets/tags-combo-example.md
index 0aea919b2ef4..bf9fb7e1dbf6 100644
--- a/docs/_snippets/tags-combo-example.md
+++ b/docs/_snippets/tags-combo-example.md
@@ -36,7 +36,7 @@ export const Combo: Story = {
 };
 ```
 
-```jsx filename="Button.stories.jsx" renderer="react" language="js"
+```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -67,7 +67,7 @@ export const Combo = {
 };
 ```
 
-```tsx filename="Button.stories.tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -374,3 +374,70 @@ export const Combo: Story = {
   `,
 };
 ```
+
+```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Variant1 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 1 },
+});
+
+export const Variant2 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 2 },
+});
+
+export const Combo = meta.story({
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1} />
+      <Button variant={2} />
+    </>
+  ),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Variant1 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 1 },
+});
+
+export const Variant2 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 2 },
+});
+
+export const Combo = meta.story({
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1} />
+      <Button variant={2} />
+    </>
+  ),
+});
+```
diff --git a/docs/_snippets/tags-docs-only-in-meta.md b/docs/_snippets/tags-docs-only-in-meta.md
index 2a16a239be72..4720aaf25389 100644
--- a/docs/_snippets/tags-docs-only-in-meta.md
+++ b/docs/_snippets/tags-docs-only-in-meta.md
@@ -47,7 +47,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -97,7 +97,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -143,3 +143,37 @@ const meta: Meta = {
 };
 export default meta;
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+});
+```
diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index 92995ef93460..dd80aba6002d 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -83,7 +83,7 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -169,7 +169,7 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -255,3 +255,61 @@ export const ExperimentalFeatureStory: Story = {
   tags: ['experimental'],
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+});
+
+export const ExperimentalFeatureStory = meta.story({
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+});
+
+export const ExperimentalFeatureStory = meta.story({
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+});
+```
diff --git a/docs/_snippets/tags-in-preview.md b/docs/_snippets/tags-in-preview.md
index 18f980618b41..489c2d49ab84 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // ...rest of preview
   /*
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
@@ -28,3 +28,37 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...rest of preview
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
+   */
+  tags: ['autodocs'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...rest of preview
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
+   */
+  tags: ['autodocs'],
+});
+```
diff --git a/docs/_snippets/tags-remove-in-story.md b/docs/_snippets/tags-remove-in-story.md
index 270f0327239a..7c2b66b7045b 100644
--- a/docs/_snippets/tags-remove-in-story.md
+++ b/docs/_snippets/tags-remove-in-story.md
@@ -50,7 +50,7 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -103,7 +103,7 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -156,3 +156,38 @@ export const ExperimentalFeatureStory: Story = {
   tags: ['!stable', 'experimental'],
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+});
+
+export const ExperimentalFeatureStory = meta.story({
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+});
+
+export const ExperimentalFeatureStory = meta.story({
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+});
+```
diff --git a/docs/_snippets/test-runner-custom-page-viewport.md b/docs/_snippets/test-runner-custom-page-viewport.md
index aeccee008e8c..442b4bb76566 100644
--- a/docs/_snippets/test-runner-custom-page-viewport.md
+++ b/docs/_snippets/test-runner-custom-page-viewport.md
@@ -18,7 +18,7 @@ module.exports = {
           // Converts the viewport size from percentages to numbers
           [screen]: parseInt(size),
         }),
-        {}
+        {},
       );
       // Configures the Playwright page to use the viewport size
       page.setViewportSize(viewportSize);
@@ -50,7 +50,7 @@ const config: TestRunnerConfig = {
           // Converts the viewport size from percentages to numbers
           [screen]: parseInt(size),
         }),
-        {}
+        {},
       );
       // Configures the Playwright page to use the viewport size
       page.setViewportSize(viewportSize);
diff --git a/docs/_snippets/vitest-plugin-vitest-config.md b/docs/_snippets/vitest-plugin-vitest-config.md
index 9a9ac56febb5..2649ca34bcca 100644
--- a/docs/_snippets/vitest-plugin-vitest-config.md
+++ b/docs/_snippets/vitest-plugin-vitest-config.md
@@ -40,7 +40,7 @@ export default mergeConfig(
         }),
       ],
     },
-  })
+  }),
 );
 ```
 
@@ -86,7 +86,7 @@ export default mergeConfig(
         }),
       ],
     },
-  })
+  }),
 );
 ```
 
@@ -132,6 +132,6 @@ export default mergeConfig(
         }),
       ],
     },
-  })
+  }),
 );
 ```
diff --git a/docs/_snippets/webpack-final-to-vite-final.md b/docs/_snippets/webpack-final-to-vite-final.md
index aee870a27442..0a96a6c8e886 100644
--- a/docs/_snippets/webpack-final-to-vite-final.md
+++ b/docs/_snippets/webpack-final-to-vite-final.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="With Webpack"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="With Webpack (CSF 3)"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs, angular)
   framework: '@storybook/your-framework',
@@ -22,7 +22,7 @@ export default {
 };
 ```
 
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="With Vite"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="With Vite (CSF 3)"
 import graphql from 'vite-plugin-graphql-loader';
 
 export default {
@@ -38,7 +38,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="With Webpack"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="With Webpack (CSF 3)"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs, angular)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -66,7 +66,7 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="With Vite"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="With Vite (CSF 3)"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 import graphql from 'vite-plugin-graphql-loader';
@@ -84,3 +84,95 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="With Webpack (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async webpackFinal(config) {
+    config.module?.rules?.push({
+      test: /\.(graphql|gql)$/,
+      include: [path.resolve('./lib/emails')],
+      exclude: /node_modules/,
+      loader: 'graphql-tag/loader',
+    });
+    config.module?.rules?.push({
+      test: /\.(graphql|gql)$/,
+      include: [path.resolve('./lib/schema')],
+      exclude: /node_modules/,
+      loader: 'raw-loader',
+    });
+
+    return config;
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="With Webpack (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async webpackFinal(config) {
+    config.module?.rules?.push({
+      test: /\.(graphql|gql)$/,
+      include: [path.resolve('./lib/emails')],
+      exclude: /node_modules/,
+      loader: 'graphql-tag/loader',
+    });
+    config.module?.rules?.push({
+      test: /\.(graphql|gql)$/,
+      include: [path.resolve('./lib/schema')],
+      exclude: /node_modules/,
+      loader: 'raw-loader',
+    });
+
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="With Vite (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import graphql from 'vite-plugin-graphql-loader';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: [...(config.plugins ?? []), graphql()],
+    };
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="With Vite (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import graphql from 'vite-plugin-graphql-loader';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: [...(config.plugins ?? []), graphql()],
+    };
+  },
+});
+```
diff --git a/docs/_snippets/your-component-with-decorator.md b/docs/_snippets/your-component-with-decorator.md
index 8e14872ef37b..601529a532cc 100644
--- a/docs/_snippets/your-component-with-decorator.md
+++ b/docs/_snippets/your-component-with-decorator.md
@@ -13,7 +13,7 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="react" language="js"
+```jsx filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -29,7 +29,7 @@ export default {
 };
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta } from '@storybook/your-framework';
 
@@ -50,7 +50,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="solid" language="js"
+```jsx filename="YourComponent.stories.js|jsx" renderer="solid" language="js"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -181,3 +181,40 @@ const meta: Meta = {
 };
 export default meta;
 ```
+
+```tsx filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```jsx filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md
index 79be92e4ddbb..956f4e4f1e90 100644
--- a/docs/_snippets/your-component.md
+++ b/docs/_snippets/your-component.md
@@ -97,7 +97,7 @@ export const FirstStory = {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 //👇 This default export determines where your story goes in the story list
@@ -112,7 +112,7 @@ export const FirstStory = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -333,3 +333,37 @@ export const FirstStory: Story = {
   },
 };
 ```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This default export determines where your story goes in the story list
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const FirstStory = meta.story({
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const FirstStory = meta.story({
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+});
+```
diff --git a/docs/_snippets/your-theme.md b/docs/_snippets/your-theme.md
index f38a52168d77..5c7d1c4805c5 100644
--- a/docs/_snippets/your-theme.md
+++ b/docs/_snippets/your-theme.md
@@ -6,7 +6,6 @@ export default create({
   // Typography
   fontBase: '"Open Sans", sans-serif',
   fontCode: 'monospace',
-
   brandTitle: 'My custom Storybook',
   brandUrl: 'https://example.com',
   brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
diff --git a/docs/api/csf/csf-next.mdx b/docs/api/csf/csf-next.mdx
index d6aeb3fb73b8..e009f739414b 100644
--- a/docs/api/csf/csf-next.mdx
+++ b/docs/api/csf/csf-next.mdx
@@ -238,7 +238,7 @@ export const PrimaryDisabled = Primary.extend({ args: { disabled: true } });
 //    The test function can run the same code as the play function
 PrimaryDisabled.test('should be disabled', async ({ canvas, userEvent, args }) => {
   const button = await canvas.findByRole('button');
-  await userEvent(button).click();
+  await userEvent.click(button);
 
   await expect(button).toBeDisabled();
   await expect(args.onClick).not.toHaveBeenCalled();
diff --git a/docs/writing-stories/tags.mdx b/docs/writing-stories/tags.mdx
index b30146f086ac..6c5a5a9fbdd3 100644
--- a/docs/writing-stories/tags.mdx
+++ b/docs/writing-stories/tags.mdx
@@ -112,8 +112,8 @@ For a component with many variants, like a Button, a grid of those variants all
 
 ### Test cases that don't clutter the sidebar
 
-(⚠️ **Experimental**: While this API is available for all tags, the built-in `test-fn` tag is experimental)
+(⚠️ **Experimental**: While this API is available for all tags, the built-in `_test` tag is experimental)
 
-If you're using the [experimental `.test` method on CSF Factories](https://github.com/storybookjs/storybook/discussions/30119), you can alter the default behavior of the `test-fn` tag to exclude tests from the sidebar by default. This reduces clutter in the sidebar while still allowing you to run tests for all stories, or adjust the filter to show tests when needed.
+If you're using the [experimental `.test` method on CSF Factories](https://github.com/storybookjs/storybook/discussions/30119), you can alter the default behavior of the `_test` tag to exclude tests from the sidebar by default. This reduces clutter in the sidebar while still allowing you to run tests for all stories, or adjust the filter to show tests when needed.
 
 <CodeSnippets path="main-config-tags-test-fn-exclude.md" />
diff --git a/scripts/package.json b/scripts/package.json
index d7d0f8e215c6..5479bb0c69f1 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -10,6 +10,7 @@
     "check-package": "jiti ./check-package.ts",
     "docs:prettier:check": "cd ../docs && prettier --check ./_snippets || echo 'Please run \"docs:prettier:write\" in the \"scripts\" directory to fix the issues'",
     "docs:prettier:write": "cd ../docs && prettier --write ./_snippets",
+    "docs:codemod": "jiti ./snippets/codemod.ts",
     "generate-sandboxes": "jiti ./sandbox/generate.ts",
     "get-report-message": "jiti ./get-report-message.ts",
     "get-sandbox-dir": "jiti ./get-sandbox-dir.ts",
@@ -129,6 +130,7 @@
     "fast-glob": "^3.3.2",
     "github-release-from-changelog": "^2.1.1",
     "glob": "^10.4.5",
+    "globby": "^14.0.1",
     "http-server": "^14.1.1",
     "husky": "^4.3.7",
     "jiti": "^2.4.2",
diff --git a/scripts/snippets/codemod.ts b/scripts/snippets/codemod.ts
new file mode 100644
index 000000000000..7467a8fc6853
--- /dev/null
+++ b/scripts/snippets/codemod.ts
@@ -0,0 +1,377 @@
+/**
+ * DISCLAIMER:
+ *
+ * This file exists with the sole purpose of assisting the documentation snippets during
+ * introduction of new features. This will probably used only once or twice, but it's REALLY useful
+ * to test codemods as it helps detect many bugs very quickly. It also will be used once we decide
+ * to add extra snippets to more renderers.
+ */
+
+/* eslint-disable @typescript-eslint/no-loop-func */
+
+/* eslint-disable @typescript-eslint/default-param-last */
+import os from 'node:os';
+import { join } from 'node:path';
+
+import { program } from 'commander';
+import { promises as fs } from 'fs';
+import pLimit from 'p-limit';
+import picocolors from 'picocolors';
+import prompts from 'prompts';
+import slash from 'slash';
+
+import { configToCsfFactory } from '../../code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory';
+import { storyToCsfFactory } from '../../code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory';
+import { SNIPPETS_DIRECTORY } from '../utils/constants';
+
+const logger = console;
+
+export const maxConcurrentTasks = Math.max(1, os.cpus().length - 1);
+
+type SnippetInfo = {
+  path: string;
+  source: string;
+  attributes: {
+    filename: string;
+    language: string;
+    renderer: string;
+    tabTitle: string;
+    highlightSyntax: string;
+    [key: string]: string;
+  };
+};
+
+type Codemod = {
+  getTargetSnippet: (snippetInfo: SnippetInfo) => boolean;
+  check: (snippetInfo: SnippetInfo, filePath: string) => boolean;
+  transform: (snippetInfo: SnippetInfo) => string | Promise<string>;
+};
+
+const previousTabTitle = 'CSF 3';
+const newTabTitle = 'CSF Next 🧪';
+
+export async function runSnippetCodemod({
+  glob,
+  check,
+  getTargetSnippet,
+  transform,
+  dryRun = false,
+  promptUser = false,
+}: {
+  glob: string;
+  check: Codemod['check'];
+  getTargetSnippet: Codemod['getTargetSnippet'];
+  transform: Codemod['transform'];
+  dryRun?: boolean;
+  promptUser?: boolean;
+}) {
+  let modifiedCount = 0;
+  let unmodifiedCount = 0;
+  let errorCount = 0;
+  let skippedCount = 0;
+
+  try {
+    // Dynamically import these packages because they are pure ESM modules
+    // eslint-disable-next-line depend/ban-dependencies
+    const { globby } = await import('globby');
+
+    const files = await globby(slash(glob), {
+      followSymbolicLinks: true,
+      ignore: ['node_modules/**', 'dist/**', 'storybook-static/**', 'build/**'],
+    });
+
+    if (!files.length) {
+      logger.error(`No files found for pattern ${glob}`);
+      return;
+    }
+
+    const limit = pLimit(10);
+
+    for (const file of files) {
+      await limit(async () => {
+        try {
+          let source = await fs.readFile(file, 'utf-8');
+          const originalSource = source;
+          const snippets = extractSnippets(source).filter((snip) => check(snip, file));
+
+          if (snippets.length === 0) {
+            unmodifiedCount++;
+            return;
+          }
+
+          const targetSnippet = snippets.find(getTargetSnippet);
+          if (!targetSnippet) {
+            skippedCount++;
+            return;
+          }
+
+          if (promptUser) {
+            logger.log(`\nFile: ${picocolors.yellow(file)}`);
+            const response = await prompts(
+              {
+                type: 'confirm',
+                name: 'apply',
+                message: `Apply codemod?`,
+                initial: true,
+              },
+              {
+                onCancel: () => process.exit(0),
+              }
+            );
+
+            if (!response.apply) {
+              skippedCount++;
+              return;
+            }
+          }
+
+          const counterpartSnippets = snippets.filter((snippet) => {
+            return (
+              snippet !== targetSnippet &&
+              snippet.attributes.tabTitle !== previousTabTitle &&
+              snippet.attributes.tabTitle !== newTabTitle &&
+              snippet.attributes.renderer === targetSnippet.attributes.renderer &&
+              snippet.attributes.language !== targetSnippet.attributes.language
+            );
+          });
+
+          const getSource = (snippet: SnippetInfo) =>
+            `\n\`\`\`${formatAttributes(snippet.attributes)}\n${snippet.source}\n\`\`\`\n`;
+
+          const updateTabTitle = (snippet: SnippetInfo, newTitle: string) => {
+            return snippet.attributes.tabTitle === newTitle
+              ? newTitle
+              : snippet.attributes.tabTitle
+                ? `${snippet.attributes.tabTitle} (${newTitle})`
+                : newTitle;
+          };
+
+          const allSnippets = [targetSnippet, ...counterpartSnippets];
+
+          let lastModifiedSnippet = '';
+          // clone the snippets and apply codemod, then append them to the bottom
+          try {
+            let appendedContent = '';
+
+            if (!dryRun) {
+              // replace attributes of the original snippets with CSF 3
+              await allSnippets.forEach(async (snippet) => {
+                // warn us if there is already a tab title
+                source = source.replace(
+                  formatAttributes(snippet.attributes),
+                  formatAttributes({
+                    ...snippet.attributes,
+                    tabTitle: updateTabTitle(snippet, previousTabTitle),
+                  })
+                );
+                await fs.writeFile(file, source, 'utf-8');
+              });
+            }
+
+            for (const snippet of allSnippets) {
+              // warn us if there is already a tab title
+              if (snippet !== targetSnippet) {
+                appendedContent +=
+                  '\n<!-- JS snippets still needed while providing both CSF 3 & Next -->\n';
+              }
+
+              const newSnippet = { ...snippet };
+              lastModifiedSnippet = formatAttributes(newSnippet.attributes);
+              let transformedSource = getSource({
+                ...newSnippet,
+                attributes: {
+                  ...newSnippet.attributes,
+                  renderer: 'react',
+                  tabTitle: updateTabTitle(newSnippet, newTabTitle),
+                },
+                source: await transform(newSnippet),
+              });
+
+              if (newSnippet.path.includes('.stories')) {
+                transformedSource = transformedSource
+                  .replace(/\/\/ Replace your-framework with .*\n/, '')
+                  .replace(/\* Replace your-framework with .*\n/, '')
+                  .replace(
+                    /(import preview from \"#\.storybook\/preview\";)/g,
+                    `import preview from '../.storybook/preview';`
+                  );
+              } else {
+                transformedSource = transformedSource
+                  .replace(
+                    /Replace your-framework with .*\n/,
+                    'Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)\n'
+                  )
+                  .replace(
+                    /(import { define(Main|Preview) .*)\n/,
+                    '// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)\n$1\n'
+                  );
+              }
+              appendedContent += transformedSource;
+            }
+
+            const updatedSource = source + appendedContent;
+
+            if (!dryRun) {
+              await fs.writeFile(file, updatedSource, 'utf-8');
+            } else {
+              logger.log(
+                `Dry run: would have modified ${picocolors.yellow(file)} with new snippets \n` +
+                  picocolors.green(appendedContent)
+              );
+            }
+
+            modifiedCount++;
+          } catch (transformError) {
+            logger.error(
+              `\nError transforming snippet in file ${picocolors.yellow(file)}:`,
+              '\n',
+              picocolors.green(lastModifiedSnippet),
+              '\n',
+              picocolors.red((transformError as any).message)
+            );
+            errorCount++;
+            await fs.writeFile(file, originalSource, 'utf-8');
+          }
+        } catch (fileError) {
+          logger.error(`Error processing file ${file}:`, fileError);
+          errorCount++;
+        }
+      });
+    }
+  } catch (error) {
+    logger.error('Error applying snippet transform:', error);
+    errorCount++;
+  }
+
+  logger.log(
+    `Summary: ${picocolors.green(`${modifiedCount} files modified`)}, ${picocolors.yellow(`${unmodifiedCount} files unmodified`)}, ${picocolors.gray(`${skippedCount} skipped`)}, ${picocolors.red(`${errorCount} errors`)}`
+  );
+}
+
+export function extractSnippets(source: string): SnippetInfo[] {
+  const snippetRegex =
+    /```(?<highlightSyntax>[a-zA-Z0-9]+)?(?<attributes>[^\n]*)\n(?<content>[\s\S]*?)```/g;
+  const snippets: SnippetInfo[] = [];
+  let match;
+
+  while ((match = snippetRegex.exec(source)) !== null) {
+    const { highlightSyntax, attributes, content } = match.groups || {};
+    const snippetAttributes = parseAttributes(attributes || '');
+    if (highlightSyntax) {
+      snippetAttributes.highlightSyntax = highlightSyntax.trim();
+    }
+
+    snippets.push({
+      path: snippetAttributes.filename || '',
+      source: content.trim(),
+      attributes: snippetAttributes,
+    });
+  }
+
+  return snippets;
+}
+
+export function parseAttributes(attributes: string) {
+  const attributeRegex = /([a-zA-Z0-9.-]+)="([^"]+)"/g;
+  const result: Record<string, string> = {};
+  let match;
+
+  while ((match = attributeRegex.exec(attributes)) !== null) {
+    result[match[1]] = match[2];
+  }
+
+  return result as SnippetInfo['attributes'];
+}
+
+function formatAttributes(attributes: Record<string, string>): string {
+  const formatted = Object.entries(attributes)
+    .filter(([key]) => key !== 'highlightSyntax')
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ');
+  return `${attributes.highlightSyntax || 'js'} ${formatted}`;
+}
+
+const codemods: Record<string, Codemod> = {
+  'csf-factory-story': {
+    check: (snippetInfo: SnippetInfo, filePath: string) => {
+      return (
+        snippetInfo.path.includes('.stories') &&
+        !snippetInfo.attributes?.filename?.includes('CSF 2') &&
+        !filePath.split('/')?.pop()?.startsWith('csf-3') &&
+        snippetInfo.attributes.highlightSyntax !== 'mdx' &&
+        snippetInfo.attributes.tabTitle !== previousTabTitle &&
+        snippetInfo.attributes.tabTitle !== newTabTitle
+      );
+    },
+    getTargetSnippet: (snippetInfo: SnippetInfo) => {
+      return (
+        snippetInfo.attributes.language === 'ts' &&
+        snippetInfo.attributes.tabTitle !== previousTabTitle &&
+        snippetInfo.attributes.tabTitle !== newTabTitle &&
+        (snippetInfo.attributes.renderer === 'react' ||
+          snippetInfo.attributes.renderer === 'common')
+      );
+    },
+    transform: (snippetInfo: SnippetInfo) => {
+      return storyToCsfFactory(snippetInfo, {
+        previewConfigPath: undefined,
+        useSubPathImports: true,
+      });
+    },
+  },
+  'csf-factory-config': {
+    check: (snippetInfo: SnippetInfo) => {
+      return (
+        snippetInfo.attributes.tabTitle !== previousTabTitle &&
+        snippetInfo.attributes.tabTitle !== newTabTitle &&
+        (snippetInfo.path.includes('/preview.') || snippetInfo.path.includes('/main.'))
+      );
+    },
+    getTargetSnippet: (snippetInfo: SnippetInfo) => {
+      return (
+        snippetInfo.attributes.language === 'ts' &&
+        snippetInfo.attributes.tabTitle !== previousTabTitle &&
+        snippetInfo.attributes.tabTitle !== newTabTitle &&
+        (snippetInfo.attributes.renderer === 'react' ||
+          snippetInfo.attributes.renderer === 'common')
+      );
+    },
+    transform: (snippetInfo: SnippetInfo) => {
+      const configType = snippetInfo.path.includes('preview') ? 'preview' : 'main';
+      return configToCsfFactory(snippetInfo, {
+        configType,
+        frameworkPackage: '@storybook/your-framework',
+      });
+    },
+  },
+};
+
+program
+  .name('command')
+  .description('A minimal CLI for demonstration')
+  .argument('<id>', 'ID to process')
+  .requiredOption('--glob <pattern>', 'Glob pattern to match')
+  .option('--dry-run', 'Run without making actual changes', false)
+  .option('--prompt', 'Prompt before applying changes', false)
+  .action(async (id, { glob, dryRun, prompt }) => {
+    const codemod = codemods[id as keyof typeof codemods];
+    if (!codemod) {
+      logger.error(`Unknown codemod "${id}"`);
+      logger.log(
+        `\n\nAvailable codemods: ${Object.keys(codemods)
+          .map((c) => `\n- ${c}`)
+          .join('')}`
+      );
+      process.exit(1);
+    }
+
+    await runSnippetCodemod({
+      glob: join(SNIPPETS_DIRECTORY, glob),
+      dryRun,
+      promptUser: prompt,
+      ...codemod,
+    });
+  });
+
+// Parse and validate arguments
+program.parse(process.argv);
diff --git a/scripts/utils/constants.ts b/scripts/utils/constants.ts
index d783410d3825..53069ee0ffee 100644
--- a/scripts/utils/constants.ts
+++ b/scripts/utils/constants.ts
@@ -5,6 +5,7 @@ export const BEFORE_DIR_NAME = 'before-storybook';
 
 export const ROOT_DIRECTORY = join(__dirname, '..', '..');
 export const CODE_DIRECTORY = join(ROOT_DIRECTORY, 'code');
+export const SNIPPETS_DIRECTORY = join(ROOT_DIRECTORY, 'docs', '_snippets');
 export const PACKS_DIRECTORY = join(ROOT_DIRECTORY, 'packs');
 export const REPROS_DIRECTORY = join(ROOT_DIRECTORY, 'repros');
 export const SANDBOX_DIRECTORY = join(ROOT_DIRECTORY, 'sandbox');
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index 26574f1786ac..ca8f6df08380 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -135,6 +135,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.24.8":
+  version: 7.24.8
+  resolution: "@babel/helper-string-parser@npm:7.24.8"
+  checksum: 10c0/6361f72076c17fabf305e252bf6d580106429014b3ab3c1f5c4eb3e6d465536ea6b670cc0e9a637a77a9ad40454d3e41361a2909e70e305116a23d68ce094c08
+  languageName: node
+  linkType: hard
+
 "@babel/helper-string-parser@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/helper-string-parser@npm:7.25.9"
@@ -149,7 +156,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.20.5, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.25.8, @babel/parser@npm:^7.26.8":
+"@babel/helper-validator-identifier@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-validator-identifier@npm:7.24.7"
+  checksum: 10c0/87ad608694c9477814093ed5b5c080c2e06d44cb1924ae8320474a74415241223cc2a725eea2640dd783ff1e3390e5f95eede978bc540e870053152e58f1d651
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.20.5, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.25.8, @babel/parser@npm:^7.26.8":
   version: 7.26.8
   resolution: "@babel/parser@npm:7.26.8"
   dependencies:
@@ -160,6 +174,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.25.4":
+  version: 7.26.5
+  resolution: "@babel/parser@npm:7.26.5"
+  dependencies:
+    "@babel/types": "npm:^7.26.5"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10c0/2e77dd99ee028ee3c10fa03517ae1169f2432751adf71315e4dc0d90b61639d51760d622f418f6ac665ae4ea65f8485232a112ea0e76f18e5900225d3d19a61e
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.23.2":
   version: 7.23.2
   resolution: "@babel/runtime@npm:7.23.2"
@@ -223,7 +248,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.17.0, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.25.4, @babel/types@npm:^7.26.8":
+"@babel/types@npm:^7.17.0, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.7":
+  version: 7.26.3
+  resolution: "@babel/types@npm:7.26.3"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+  checksum: 10c0/966c5242c5e55c8704bf7a7418e7be2703a0afa4d19a8480999d5a4ef13d095dd60686615fe5983cb7593b4b06ba3a7de8d6ca501c1d78bdd233a10d90be787b
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.22.5":
+  version: 7.25.2
+  resolution: "@babel/types@npm:7.25.2"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.24.8"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: 10c0/e489435856be239f8cc1120c90a197e4c2865385121908e5edb7223cfdff3768cba18f489adfe0c26955d9e7bbb1fb10625bc2517505908ceb0af848989bd864
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.25.4, @babel/types@npm:^7.26.5":
+  version: 7.26.5
+  resolution: "@babel/types@npm:7.26.5"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+  checksum: 10c0/0278053b69d7c2b8573aa36dc5242cad95f0d965e1c0ed21ccacac6330092e59ba5949753448f6d6eccf6ad59baaef270295cc05218352e060ea8c68388638c4
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.26.8":
   version: 7.26.8
   resolution: "@babel/types@npm:7.26.8"
   dependencies:
@@ -1509,6 +1565,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/merge-streams@npm:^2.1.0":
+  version: 2.3.0
+  resolution: "@sindresorhus/merge-streams@npm:2.3.0"
+  checksum: 10c0/69ee906f3125fb2c6bb6ec5cdd84e8827d93b49b3892bce8b62267116cc7e197b5cccf20c160a1d32c26014ecd14470a72a5e3ee37a58f1d6dadc0db1ccf3894
+  languageName: node
+  linkType: hard
+
 "@storybook/scripts@workspace:.":
   version: 0.0.0-use.local
   resolution: "@storybook/scripts@workspace:."
@@ -1582,6 +1645,7 @@ __metadata:
     fast-glob: "npm:^3.3.2"
     github-release-from-changelog: "npm:^2.1.1"
     glob: "npm:^10.4.5"
+    globby: "npm:^14.0.1"
     http-server: "npm:^14.1.1"
     husky: "npm:^4.3.7"
     jiti: "npm:^2.4.2"
@@ -3661,7 +3725,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^5.0.0, chalk@npm:^5.4.1":
+"chalk@npm:^5.0.0":
+  version: 5.3.0
+  resolution: "chalk@npm:5.3.0"
+  checksum: 10c0/8297d436b2c0f95801103ff2ef67268d362021b8210daf8ddbe349695333eb3610a71122172ff3b0272f1ef2cf7cc2c41fdaa4715f52e49ffe04c56340feed09
+  languageName: node
+  linkType: hard
+
+"chalk@npm:^5.4.1":
   version: 5.4.1
   resolution: "chalk@npm:5.4.1"
   checksum: 10c0/b23e88132c702f4855ca6d25cb5538b1114343e41472d5263ee8a37cccfccd9c4216d111e1097c6a27830407a1dc81fecdf2a56f2c63033d4dbbd88c10b0dcef
@@ -4233,15 +4304,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:^4.4.0, debug@npm:^4.4.1":
-  version: 4.4.1
-  resolution: "debug@npm:4.4.1"
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5":
+  version: 4.3.7
+  resolution: "debug@npm:4.3.7"
   dependencies:
     ms: "npm:^2.1.3"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10c0/d2b44bc1afd912b49bb7ebb0d50a860dc93a4dd7d946e8de94abc957bb63726b7dd5aa48c18c2386c379ec024c46692e15ed3ed97d481729f929201e671fcd55
+  checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b
   languageName: node
   linkType: hard
 
@@ -4266,6 +4337,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "debug@npm:4.4.0"
+  dependencies:
+    ms: "npm:^2.1.3"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10c0/db94f1a182bf886f57b4755f85b3a74c39b5114b9377b7ab375dc2cfa3454f09490cc6c30f829df3fc8042bc8b8995f6567ce5cd96f3bc3688bd24027197d9de
+  languageName: node
+  linkType: hard
+
+"debug@npm:^4.4.1":
+  version: 4.4.1
+  resolution: "debug@npm:4.4.1"
+  dependencies:
+    ms: "npm:^2.1.3"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10c0/d2b44bc1afd912b49bb7ebb0d50a860dc93a4dd7d946e8de94abc957bb63726b7dd5aa48c18c2386c379ec024c46692e15ed3ed97d481729f929201e671fcd55
+  languageName: node
+  linkType: hard
+
 "decode-named-character-reference@npm:^1.0.0":
   version: 1.0.2
   resolution: "decode-named-character-reference@npm:1.0.2"
@@ -5855,6 +5950,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fdir@npm:^6.4.2":
+  version: 6.4.3
+  resolution: "fdir@npm:6.4.3"
+  peerDependencies:
+    picomatch: ^3 || ^4
+  peerDependenciesMeta:
+    picomatch:
+      optional: true
+  checksum: 10c0/d13c10120e9625adf21d8d80481586200759928c19405a816b77dd28eaeb80e7c59c5def3e2941508045eb06d34eb47fad865ccc8bf98e6ab988bb0ed160fb6f
+  languageName: node
+  linkType: hard
+
 "fdir@npm:^6.4.4, fdir@npm:^6.4.6":
   version: 6.4.6
   resolution: "fdir@npm:6.4.6"
@@ -6469,6 +6576,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^14.0.1":
+  version: 14.0.2
+  resolution: "globby@npm:14.0.2"
+  dependencies:
+    "@sindresorhus/merge-streams": "npm:^2.1.0"
+    fast-glob: "npm:^3.3.2"
+    ignore: "npm:^5.2.4"
+    path-type: "npm:^5.0.0"
+    slash: "npm:^5.1.0"
+    unicorn-magic: "npm:^0.1.0"
+  checksum: 10c0/3f771cd683b8794db1e7ebc8b6b888d43496d93a82aad4e9d974620f578581210b6c5a6e75ea29573ed16a1345222fab6e9b877a8d1ed56eeb147e09f69c6f78
+  languageName: node
+  linkType: hard
+
 "globby@npm:^7.1.1":
   version: 7.1.1
   resolution: "globby@npm:7.1.1"
@@ -7369,7 +7490,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
+"is-typed-array@npm:^1.1.13":
+  version: 1.1.13
+  resolution: "is-typed-array@npm:1.1.13"
+  dependencies:
+    which-typed-array: "npm:^1.1.14"
+  checksum: 10c0/fa5cb97d4a80e52c2cc8ed3778e39f175a1a2ae4ddf3adae3187d69586a1fd57cfa0b095db31f66aa90331e9e3da79184cea9c6abdcd1abc722dc3c3edd51cca
+  languageName: node
+  linkType: hard
+
+"is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
   version: 1.1.15
   resolution: "is-typed-array@npm:1.1.15"
   dependencies:
@@ -8677,7 +8807,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.4":
+  version: 4.0.7
+  resolution: "micromatch@npm:4.0.7"
+  dependencies:
+    braces: "npm:^3.0.3"
+    picomatch: "npm:^2.3.1"
+  checksum: 10c0/58fa99bc5265edec206e9163a1d2cec5fabc46a5b473c45f4a700adce88c2520456ae35f2b301e4410fb3afb27e9521fb2813f6fc96be0a48a89430e0916a772
+  languageName: node
+  linkType: hard
+
+"micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -9287,7 +9427,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.values@npm:^1.1.6, object.values@npm:^1.1.7, object.values@npm:^1.2.0":
+"object.values@npm:^1.1.6, object.values@npm:^1.2.0":
   version: 1.2.1
   resolution: "object.values@npm:1.2.1"
   dependencies:
@@ -9299,6 +9439,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object.values@npm:^1.1.7":
+  version: 1.2.0
+  resolution: "object.values@npm:1.2.0"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10c0/15809dc40fd6c5529501324fec5ff08570b7d70fb5ebbe8e2b3901afec35cf2b3dc484d1210c6c642cd3e7e0a5e18dd1d6850115337fef46bdae14ab0cb18ac3
+  languageName: node
+  linkType: hard
+
 "on-exit-leak-free@npm:^0.2.0":
   version: 0.2.0
   resolution: "on-exit-leak-free@npm:0.2.0"
@@ -9672,6 +9823,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "path-type@npm:5.0.0"
+  checksum: 10c0/e8f4b15111bf483900c75609e5e74e3fcb79f2ddb73e41470028fcd3e4b5162ec65da9907be077ee5012c18801ff7fffb35f9f37a077f3f81d85a0b7d6578efd
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^2.0.3":
   version: 2.0.3
   resolution: "pathe@npm:2.0.3"
@@ -11210,7 +11368,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slash@npm:^5.0.0":
+"slash@npm:^5.0.0, slash@npm:^5.1.0":
   version: 5.1.0
   resolution: "slash@npm:5.1.0"
   checksum: 10c0/eb48b815caf0bdc390d0519d41b9e0556a14380f6799c72ba35caf03544d501d18befdeeef074bc9c052acf69654bc9e0d79d7f1de0866284137a40805299eb3
@@ -11922,7 +12080,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyglobby@npm:^0.2.14, tinyglobby@npm:^0.2.9":
+"tinyglobby@npm:^0.2.14":
   version: 0.2.14
   resolution: "tinyglobby@npm:0.2.14"
   dependencies:
@@ -11932,6 +12090,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinyglobby@npm:^0.2.9":
+  version: 0.2.10
+  resolution: "tinyglobby@npm:0.2.10"
+  dependencies:
+    fdir: "npm:^6.4.2"
+    picomatch: "npm:^4.0.2"
+  checksum: 10c0/ce946135d39b8c0e394e488ad59f4092e8c4ecd675ef1bcd4585c47de1b325e61ec6adfbfbe20c3c2bfa6fd674c5b06de2a2e65c433f752ae170aff11793e5ef
+  languageName: node
+  linkType: hard
+
 "tinypool@npm:^1.1.1":
   version: 1.1.1
   resolution: "tinypool@npm:1.1.1"
@@ -12270,6 +12438,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicorn-magic@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "unicorn-magic@npm:0.1.0"
+  checksum: 10c0/e4ed0de05b0a05e735c7d8a2930881e5efcfc3ec897204d5d33e7e6247f4c31eac92e383a15d9a6bccb7319b4271ee4bea946e211bf14951fec6ff2cbbb66a92
+  languageName: node
+  linkType: hard
+
 "union@npm:~0.5.0":
   version: 0.5.0
   resolution: "union@npm:0.5.0"
@@ -12844,6 +13019,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"which-typed-array@npm:^1.1.14":
+  version: 1.1.15
+  resolution: "which-typed-array@npm:1.1.15"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.7"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.0.1"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10c0/4465d5348c044032032251be54d8988270e69c6b7154f8fcb2a47ff706fe36f7624b3a24246b8d9089435a8f4ec48c1c1025c5d6b499456b9e5eff4f48212983
+  languageName: node
+  linkType: hard
+
 "which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18":
   version: 1.1.18
   resolution: "which-typed-array@npm:1.1.18"