diff --git a/docs/_snippets/actions-filtering-example.md b/docs/_snippets/actions-filtering-example.md
index 45bc0092f855..7afc88778f09 100644
--- a/docs/_snippets/actions-filtering-example.md
+++ b/docs/_snippets/actions-filtering-example.md
@@ -107,3 +107,140 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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);
+      });
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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);
+      });
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 89471b84c56c..53463f1742a8 100644
--- a/docs/_snippets/actions-spyon-basic-example.md
+++ b/docs/_snippets/actions-spyon-basic-example.md
@@ -50,3 +50,67 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 6137488cea2b..ae44607ed2bd 100644
--- a/docs/_snippets/addon-a11y-config-context-in-story.md
+++ b/docs/_snippets/addon-a11y-config-context-in-story.md
@@ -18,6 +18,120 @@ export const ExampleStory: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
+// ...rest of story file
+
+export const ExampleStory = {
+  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'],
+      },
+    },
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+// ...rest of story file
+
+export const ExampleStory: 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 filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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'],
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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'],
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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 filename="Button.stories.js" renderer="common" language="js"
 // ...rest of story file
 
@@ -67,7 +181,7 @@ export const ExampleStory = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // ...rest of story file
 
 export const ExampleStory: Story = {
@@ -116,7 +230,7 @@ export const ExampleStory: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 // ...rest of story file
 
 export const ExampleStory = {
@@ -189,3 +303,57 @@ export const ExampleStory = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 643f79253e71..be8e190c0db9 100644
--- a/docs/_snippets/addon-a11y-config-in-meta-and-story.md
+++ b/docs/_snippets/addon-a11y-config-in-meta-and-story.md
@@ -1,7 +1,7 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button.component';
+import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -57,6 +57,62 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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
+    },
+  },
+});
+```
+
 ```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';
@@ -230,7 +286,7 @@ export const ExampleStory = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -349,7 +405,7 @@ export const ExampleStory: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -403,7 +459,7 @@ export const ExampleStory = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -460,7 +516,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   parameters: {
@@ -512,6 +568,114 @@ export const ExampleStory = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -625,3 +789,117 @@ export const ExampleStory = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 a533c0785112..733f500d9aae 100644
--- a/docs/_snippets/addon-a11y-config-in-preview.md
+++ b/docs/_snippets/addon-a11y-config-in-preview.md
@@ -72,8 +72,10 @@ 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 addonA11y from '@storybook/addon-a11y';
 
 export default definePreview({
+  addons: [addonA11y()],
   parameters: {
     a11y: {
       /*
@@ -110,8 +112,199 @@ export default definePreview({
 ```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 addonA11y from '@storybook/addon-a11y';
 
 export default definePreview({
+  addons: [addonA11y()],
+  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: {},
+    },
+  },
+  initialGlobals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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: {},
+    },
+  },
+  initialGlobals: {
+    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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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: {},
+    },
+  },
+  initialGlobals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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: {},
+    },
+  },
+  initialGlobals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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: {},
+    },
+  },
+  initialGlobals: {
+    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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
   parameters: {
     a11y: {
       /*
diff --git a/docs/_snippets/addon-a11y-config-rules-in-story.md b/docs/_snippets/addon-a11y-config-rules-in-story.md
index 3ea1497e0184..ff4635acc90f 100644
--- a/docs/_snippets/addon-a11y-config-rules-in-story.md
+++ b/docs/_snippets/addon-a11y-config-rules-in-story.md
@@ -23,6 +23,37 @@ export const IndividualA11yRulesExample: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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 filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 // ...rest of story file
 
@@ -82,7 +113,7 @@ export const IndividualA11yRulesExample = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // ...rest of story file
 
 export const IndividualA11yRulesExample: Story = {
@@ -141,7 +172,7 @@ export const IndividualA11yRulesExample: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 // ...rest of story file
 
 export const IndividualA11yRulesExample = {
@@ -229,3 +260,175 @@ export const IndividualA11yRulesExample = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
+// ...rest of story file
+
+export const IndividualA11yRulesExample = {
+  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,
+          },
+        ],
+      },
+    },
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+// ...rest of story file
+
+export const IndividualA11yRulesExample: 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 filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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,
+          },
+        ],
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 cc242d556a5f..598093be2d4c 100644
--- a/docs/_snippets/addon-a11y-config-rulesets-in-preview.md
+++ b/docs/_snippets/addon-a11y-config-rulesets-in-preview.md
@@ -40,8 +40,10 @@ 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 addonA11y from '@storybook/addon-a11y';
 
 export default definePreview({
+  addons: [addonA11y()],
   parameters: {
     a11y: {
       options: {
@@ -62,8 +64,119 @@ export default definePreview({
 ```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 addonA11y from '@storybook/addon-a11y';
 
 export default definePreview({
+  addons: [addonA11y()],
+  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'],
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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'],
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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'],
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
   parameters: {
     a11y: {
       options: {
diff --git a/docs/_snippets/addon-a11y-disable.md b/docs/_snippets/addon-a11y-disable.md
index 1e4e9c5d5706..f52f19e32604 100644
--- a/docs/_snippets/addon-a11y-disable.md
+++ b/docs/_snippets/addon-a11y-disable.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -20,6 +20,25 @@ export const NonA11yStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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 filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -82,7 +101,7 @@ export const NonA11yStory: Story = {
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -121,7 +140,7 @@ export const NonA11yStory = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -144,7 +163,7 @@ export const NonA11yStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.vue';
 
 export default {
@@ -161,7 +180,7 @@ export const NonA11yStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MyComponent from './MyComponent.vue';
@@ -183,7 +202,47 @@ export const NonA11yStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-component',
 };
@@ -198,7 +257,7 @@ export const ExampleStory = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -218,6 +277,40 @@ export const ExampleStory: Story = {
 };
 ```
 
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ExampleStory = meta.story({
+  globals: {
+    a11y: {
+      // This option disables all automatic a11y checks on this story
+      manual: true,
+    },
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ExampleStory = meta.story({
+  globals: {
+    a11y: {
+      // This option disables all automatic a11y checks on this story
+      manual: true,
+    },
+  },
+});
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/addon-a11y-parameter-error-in-preview.md b/docs/_snippets/addon-a11y-parameter-error-in-preview.md
index 8938dff41f35..06224c2f9553 100644
--- a/docs/_snippets/addon-a11y-parameter-error-in-preview.md
+++ b/docs/_snippets/addon-a11y-parameter-error-in-preview.md
@@ -3,7 +3,6 @@
 import type { Preview } from '@storybook/your-framework';
 
 const preview: Preview = {
-  // ...
   parameters: {
     // 👇 Fail all accessibility tests when violations are found
     a11y: { test: 'error' },
@@ -14,7 +13,6 @@ export default preview;
 
 ```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // ...
   parameters: {
     // 👇 Fail all accessibility tests when violations are found
     a11y: { test: 'error' },
@@ -25,9 +23,10 @@ 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 addonA11y from '@storybook/addon-a11y';
 
 export default definePreview({
-  // ...
+  addons: [addonA11y()],
   parameters: {
     // 👇 Fail all accessibility tests when violations are found
     a11y: { test: 'error' },
@@ -40,9 +39,79 @@ export default definePreview({
 ```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 addonA11y from '@storybook/addon-a11y';
 
 export default definePreview({
-  // ...
+  addons: [addonA11y()],
+  parameters: {
+    // 👇 Fail all accessibility tests when violations are found
+    a11y: { test: 'error' },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  parameters: {
+    // 👇 Fail all accessibility tests when violations are found
+    a11y: { test: 'error' },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  parameters: {
+    // 👇 Fail all accessibility tests when violations are found
+    a11y: { test: 'error' },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonA11y from '@storybook/addon-a11y';
+
+export default definePreview({
+  addons: [addonA11y()],
   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 e57bdca01097..7920d6d22e0a 100644
--- a/docs/_snippets/addon-a11y-parameter-example.md
+++ b/docs/_snippets/addon-a11y-parameter-example.md
@@ -1,7 +1,7 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button.component';
+import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -28,6 +28,33 @@ export const NoA11yFail: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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' },
+  },
+});
+```
+
 ```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';
@@ -115,7 +142,7 @@ export const NoA11yFail = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -177,7 +204,7 @@ export const NoA11yFail: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { Button } from './Button.svelte';
 
 export default {
@@ -202,7 +229,7 @@ export const NoA11yFail = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -230,7 +257,7 @@ export const NoA11yFail: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   parameters: {
@@ -253,6 +280,56 @@ export const NoA11yFail = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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' },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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' },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -308,3 +385,59 @@ export const NoA11yFail = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 2108405d0b64..078d2c1ccf8d 100644
--- a/docs/_snippets/addon-a11y-parameter-remove.md
+++ b/docs/_snippets/addon-a11y-parameter-remove.md
@@ -1,7 +1,7 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import { Meta } from '@storybook/angular';
 
-import { Button } from './Button.component';
+import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -13,6 +13,20 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    // 👇 Remove this once all stories pass accessibility tests
+    // a11y: { test: 'todo' },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
@@ -57,7 +71,7 @@ export default meta;
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta } from '@storybook/your-framework';
 
@@ -89,7 +103,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { Button } from './Button.svelte';
 
 export default {
@@ -101,7 +115,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -114,7 +128,7 @@ const meta: Meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   parameters: {
@@ -124,6 +138,30 @@ export default {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: {
+    // 👇 Remove this once all stories pass accessibility tests
+    // a11y: { test: 'todo' },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: {
+    // 👇 Remove this once all stories pass accessibility tests
+    // a11y: { test: 'todo' },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -153,3 +191,33 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 81e2f6b28bae..28e22c80c3c7 100644
--- a/docs/_snippets/addon-a11y-parameter-todo-in-meta.md
+++ b/docs/_snippets/addon-a11y-parameter-todo-in-meta.md
@@ -1,7 +1,7 @@
-```ts filename="DataTable.stories.ts" renderer="angular" language="ts"
+```ts filename="DataTable.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import { Meta } from '@storybook/angular';
 
-import { DataTable } from './DataTable.component';
+import { DataTable } from './data-table.component';
 
 const meta: Meta<DataTable> = {
   component: DataTable,
@@ -14,6 +14,21 @@ const meta: Meta<DataTable> = {
 export default meta;
 ```
 
+```ts filename="DataTable.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { DataTable } from './data-table.component';
+
+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' },
+  },
+});
+```
+
 ```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';
@@ -61,7 +76,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta } from '@storybook/your-framework';
 
@@ -95,7 +110,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { Button } from './Button.svelte';
 
 export default {
@@ -108,7 +123,7 @@ export default {
 };
 ```
 
-```ts filename="DataTable.stories.ts" renderer="web-components" language="ts"
+```ts filename="DataTable.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta<DataTable> = {
@@ -122,7 +137,7 @@ const meta: Meta<DataTable> = {
 export default meta;
 ```
 
-```js filename="DataTable.stories.js" renderer="web-components" language="js"
+```js filename="DataTable.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-data-table',
   parameters: {
@@ -133,6 +148,32 @@ export default {
 };
 ```
 
+```js filename="DataTable.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-data-table',
+  parameters: {
+    // 👇 This component's accessibility tests will not fail
+    //    Instead, they display warnings in the Storybook UI
+    a11y: { test: 'todo' },
+  },
+});
+```
+
+```ts filename="DataTable.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-data-table',
+  parameters: {
+    // 👇 This component's accessibility tests will not fail
+    //    Instead, they display warnings in the Storybook UI
+    a11y: { test: 'todo' },
+  },
+});
+```
+
 ```ts filename="DataTable.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -163,3 +204,35 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="DataTable.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import DataTable from './DataTable.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import DataTable from './DataTable.vue';
+
+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 703e6725f7ca..5588f8e61968 100644
--- a/docs/_snippets/addon-a11y-register.md
+++ b/docs/_snippets/addon-a11y-register.md
@@ -56,3 +56,72 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y', //👈 The a11y addon goes here
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y', //👈 The a11y addon goes here
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 7ca0bf1c6ab0..cf4720896d8f 100644
--- a/docs/_snippets/addon-actions-action-function.md
+++ b/docs/_snippets/addon-actions-action-function.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { action } from 'storybook/actions';
@@ -16,6 +16,22 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import Button from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -34,7 +50,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
 import Button from './Button.svelte';
@@ -80,7 +96,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -118,7 +134,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
 export default {
@@ -130,7 +146,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 import { action } from 'storybook/actions';
@@ -146,11 +162,39 @@ const meta: Meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
 import preview from '../.storybook/preview';
 
+const meta = preview.meta({
+  component: 'demo-button',
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import { action } from 'storybook/actions';
 
+import preview from '../.storybook/preview';
+
 import Button from './Button';
 
 const meta = preview.meta({
@@ -165,9 +209,10 @@ const meta = preview.meta({
 <!-- 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 preview from '../.storybook/preview';
+
 import Button from './Button';
 
 const meta = preview.meta({
@@ -178,3 +223,37 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 2e6541b1c31b..431f6c31257d 100644
--- a/docs/_snippets/addon-backgrounds-define-globals.md
+++ b/docs/_snippets/addon-backgrounds-define-globals.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -22,6 +22,27 @@ export const OnDark: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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' },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -46,7 +67,7 @@ export const OnDark: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -89,7 +110,7 @@ export const OnDark = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -158,7 +179,7 @@ export const OnDark: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   globals: {
@@ -175,7 +196,7 @@ export const OnDark = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -197,6 +218,44 @@ export const OnDark: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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' },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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' },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -239,3 +298,47 @@ export const OnDark = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 2c460abf60d7..0e9dc6d74e7c 100644
--- a/docs/_snippets/addon-backgrounds-disabled.md
+++ b/docs/_snippets/addon-backgrounds-disabled.md
@@ -32,7 +32,23 @@ export const Large: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disable: true },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -71,7 +87,7 @@ export const Large: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -136,3 +152,94 @@ export const Large = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disable: true },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disable: true },
+  },
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
+export default {
+  component: 'demo-button',
+};
+
+export const Large = {
+  parameters: {
+    backgrounds: { disable: true },
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+const meta: Meta = {
+  component: 'demo-button',
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Large: Story = {
+  parameters: {
+    backgrounds: { disable: true },
+  },
+};
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disable: true },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+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 0b79575dc124..62cc81532675 100644
--- a/docs/_snippets/addon-backgrounds-grid.md
+++ b/docs/_snippets/addon-backgrounds-grid.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -22,6 +22,28 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+// 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'
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -46,7 +68,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 // To apply a grid to all stories of Button:
@@ -90,7 +112,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -160,7 +182,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 // To apply a set of backgrounds to all stories of Button:
 export default {
   component: 'demo-button',
@@ -178,7 +200,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 // To apply a set of backgrounds to all stories of Button:
@@ -200,6 +222,46 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// To apply a set of backgrounds to all stories of Button:
+const meta = preview.meta({
+  component: 'demo-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'
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// To apply a set of backgrounds to all stories of Button:
+const meta = preview.meta({
+  component: 'demo-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'
+      },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -243,3 +305,49 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+// 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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+// 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'
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-backgrounds-options-in-meta.md b/docs/_snippets/addon-backgrounds-options-in-meta.md
index 8c69506c6cab..e4dfa34a7660 100644
--- a/docs/_snippets/addon-backgrounds-options-in-meta.md
+++ b/docs/_snippets/addon-backgrounds-options-in-meta.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -20,7 +20,27 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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 filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   parameters: {
@@ -36,7 +56,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -56,6 +76,42 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Override the default `dark` option
+        dark: { name: 'Dark', value: '#000' },
+        // 👇 Add a new option
+        gray: { name: 'Gray', value: '#CCC' },
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Override the default `dark` option
+        dark: { name: 'Dark', value: '#000' },
+        // 👇 Add a new option
+        gray: { name: 'Gray', value: '#CCC' },
+      },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
@@ -97,7 +153,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -115,7 +171,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -137,6 +193,48 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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' },
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -159,7 +257,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -199,7 +297,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
diff --git a/docs/_snippets/addon-backgrounds-options-in-preview.md b/docs/_snippets/addon-backgrounds-options-in-preview.md
index 7b8e9f0b2fd0..c4f8fcba95e6 100644
--- a/docs/_snippets/addon-backgrounds-options-in-preview.md
+++ b/docs/_snippets/addon-backgrounds-options-in-preview.md
@@ -90,3 +90,117 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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' },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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' },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 2365c5b5a097..184428c3901c 100644
--- a/docs/_snippets/addon-docs-options.md
+++ b/docs/_snippets/addon-docs-options.md
@@ -91,3 +91,117 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        csfPluginOptions: null,
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [],
+          },
+        },
+      },
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        csfPluginOptions: null,
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [],
+          },
+        },
+      },
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 df5fc9500856..6c5f4097a165 100644
--- a/docs/_snippets/addon-viewport-add-viewport-in-preview.md
+++ b/docs/_snippets/addon-viewport-add-viewport-in-preview.md
@@ -138,3 +138,177 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 ad5cd226e38b..82bb5c873eaf 100644
--- a/docs/_snippets/addon-viewport-configuration-in-meta.md
+++ b/docs/_snippets/addon-viewport-configuration-in-meta.md
@@ -15,7 +15,7 @@ export default {
 ```
 
 ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import type { Meta } from 'storybook-solidjs-vite';
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import { MyComponent } from './MyComponent';
@@ -33,12 +33,12 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/angular';
 
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -53,6 +53,24 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
@@ -71,7 +89,7 @@ export default {
 
 ```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';
+import type { Meta } from '@storybook/your-framework';
 
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
@@ -110,7 +128,7 @@ export default meta;
 </script>
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import MyComponent from './MyComponent.svelte';
@@ -146,9 +164,9 @@ export default {
 </script>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
@@ -167,7 +185,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import MyComponent from './MyComponent.vue';
@@ -183,8 +201,8 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/vue3-vite';
 
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
@@ -203,7 +221,45 @@ const meta = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 export default {
@@ -217,8 +273,8 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/web-components-vite';
 
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
@@ -235,11 +291,43 @@ const meta: Meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
 import preview from '../.storybook/preview';
 
+const meta = preview.meta({
+  component: 'my-component',
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
@@ -256,9 +344,10 @@ const meta = preview.meta({
 <!-- 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 preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/addon-viewport-define-globals.md b/docs/_snippets/addon-viewport-define-globals.md
index f1a04d074c78..8e8846e5c5a4 100644
--- a/docs/_snippets/addon-viewport-define-globals.md
+++ b/docs/_snippets/addon-viewport-define-globals.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -22,6 +22,27 @@ export const OnPhone: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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 },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -45,7 +66,7 @@ export const OnPhone: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -87,7 +108,7 @@ export const OnPhone = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -156,7 +177,7 @@ export const OnPhone: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   globals: {
@@ -173,7 +194,7 @@ export const OnPhone = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -195,6 +216,44 @@ export const OnPhone: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -237,3 +296,47 @@ export const OnPhone = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 7f355a96d6c5..74b7e71d6510 100644
--- a/docs/_snippets/addon-viewport-options-in-preview.md
+++ b/docs/_snippets/addon-viewport-options-in-preview.md
@@ -70,3 +70,92 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+  initialGlobals: {
+    viewport: { value: 'ipad', isRotated: false },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+  initialGlobals: {
+    viewport: { value: 'ipad', isRotated: false },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 484075a2b09c..727c37ccf0ce 100644
--- a/docs/_snippets/after-each-in-meta.md
+++ b/docs/_snippets/after-each-in-meta.md
@@ -1,7 +1,7 @@
-```ts filename="Page.stories.ts" renderer="angular" language="ts"
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Page } from './Page';
+import { Page } from './page.component';
 
 const meta: Meta<Page> = {
   component: Page,
@@ -14,13 +14,33 @@ export default meta;
 
 type Story = StoryObj<Page>;
 
-export const Default: Story = {
+export const Basic: Story = {
   async play({ canvas }) {
     // ...
   },
 };
 ```
 
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Page } from './page.component';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+});
+
+export const Basic = meta.story({
+  async play({ canvas }) {
+    // ...
+  },
+});
+```
+
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -42,7 +62,7 @@ export const Default: Story = {
 />
 ```
 
-```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Page from './Page.svelte';
 
 export default {
@@ -53,7 +73,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Basic = {
   async play({ canvas }) {
     // ...
   },
@@ -71,7 +91,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Basic = {
   async play({ canvas }) {
     // ...
   },
@@ -99,7 +119,7 @@ export const Default = {
 />
 ```
 
-```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -116,7 +136,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   async play({ canvas }) {
     // ...
   },
@@ -140,14 +160,14 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   async play({ canvas }) {
     // ...
   },
 };
 ```
 
-```js filename="Page.stories.js" renderer="web-components" language="js"
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-page',
   // 👇 Runs after each story in this file
@@ -156,14 +176,14 @@ export default {
   },
 };
 
-export const Default = {
+export const Basic = {
   async play({ canvas }) {
     // ...
   },
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="web-components" language="ts"
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -177,13 +197,49 @@ export default meta;
 
 type Story = StoryObj;
 
-export const Default: Story = {
+export const Basic: Story = {
   async play({ canvas }) {
     // ...
   },
 };
 ```
 
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-page',
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+});
+
+export const Basic = meta.story({
+  async play({ canvas }) {
+    // ...
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-page',
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+});
+
+export const Basic = meta.story({
+  async play({ canvas }) {
+    // ...
+  },
+});
+```
+
 ```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -197,7 +253,7 @@ const meta = preview.meta({
   },
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
   async play({ canvas }) {
     // ...
   },
@@ -218,7 +274,49 @@ const meta = preview.meta({
   },
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
+  async play({ canvas }) {
+    // ...
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+});
+
+export const Basic = meta.story({
+  async play({ canvas }) {
+    // ...
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+});
+
+export const Basic = meta.story({
   async play({ canvas }) {
     // ...
   },
diff --git a/docs/_snippets/angular-add-compodoc.md b/docs/_snippets/angular-add-compodoc.md
new file mode 100644
index 000000000000..983f8e6a79f8
--- /dev/null
+++ b/docs/_snippets/angular-add-compodoc.md
@@ -0,0 +1,29 @@
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import type { Preview } from '@storybook/angular';
+
+// 👇 Add these
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
+setCompodocJson(docJson);
+
+const preview: Preview = {
+  // ...
+};
+
+export default preview;
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+// 👇 Add these
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
+setCompodocJson(docJson);
+
+const preview = definePreview({
+  // ...
+});
+
+export default preview;
+```
diff --git a/docs/_snippets/angular-add-framework.md b/docs/_snippets/angular-add-framework.md
index c95d6d67eb16..4d6103c389e0 100644
--- a/docs/_snippets/angular-add-framework.md
+++ b/docs/_snippets/angular-add-framework.md
@@ -1,11 +1,4 @@
-```js filename=".storybook/main.js" renderer="angular" language="js"
-export default {
-  // ...
-  framework: '@storybook/angular', // 👈 Add this
-};
-```
-
-```ts filename=".storybook/main.ts" renderer="angular" language="ts"
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import { StorybookConfig } from '@storybook/angular';
 
 const config: StorybookConfig = {
@@ -15,3 +8,12 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  // ...
+  framework: '@storybook/angular', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/angular-application-providers-in-meta-and-story.md b/docs/_snippets/angular-application-providers-in-meta-and-story.md
new file mode 100644
index 000000000000..378556dc9471
--- /dev/null
+++ b/docs/_snippets/angular-application-providers-in-meta-and-story.md
@@ -0,0 +1,76 @@
+```ts filename="ChipsModule.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, applicationConfig } from '@storybook/angular';
+
+import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
+import { importProvidersFrom } from '@angular/core';
+
+import { ChipsModule } from './angular-src/chips.module';
+
+const meta: Meta<ChipsModule> = {
+  component: ChipsModule,
+  decorators: [
+    // Apply application config to all stories
+    applicationConfig({
+      // List of providers and environment providers that should be available to the root component and all its children.
+      providers: [
+        ...
+        // Import application-wide providers from a module
+        importProvidersFrom(BrowserAnimationsModule)
+        // Or use provide-style functions if available instead, e.g.
+        provideAnimations()
+      ],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<ChipsModule>;
+
+export const WithCustomApplicationProvider: Story = {
+  render: () => ({
+    // Apply application config to a specific story
+    applicationConfig: {
+      // The providers will be merged with the ones defined in the applicationConfig decorator's providers array of the global meta object
+      providers: [...],
+    }
+  })
+}
+```
+
+```ts filename="ChipsModule.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { applicationConfig } from '@storybook/angular';
+
+import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
+import { importProvidersFrom } from '@angular/core';
+
+import preview from '../.storybook/preview';
+
+import { ChipsModule } from './angular-src/chips.module';
+
+const meta = preview.type<{ args: ChipsModule }>().meta({
+  component: ChipsModule,
+  decorators: [
+    // Apply application config to all stories
+    applicationConfig({
+      // List of providers and environment providers that should be available to the root component and all its children.
+      providers: [
+        ...
+        // Import application-wide providers from a module
+        importProvidersFrom(BrowserAnimationsModule)
+        // Or use provide-style functions if available instead, e.g.
+        provideAnimations()
+      ],
+    }),
+  ],
+});
+
+export const WithCustomApplicationProvider = meta.story({
+  render: () => ({
+    // Apply application config to a specific story
+    applicationConfig: {
+      // The providers will be merged with the ones defined in the applicationConfig decorator's providers array of the global meta object
+      providers: [...],
+    }
+  })
+});
+```
diff --git a/docs/_snippets/angular-framework-options-enable-ivy-false.md b/docs/_snippets/angular-framework-options-enable-ivy-false.md
new file mode 100644
index 000000000000..acde991ef286
--- /dev/null
+++ b/docs/_snippets/angular-framework-options-enable-ivy-false.md
@@ -0,0 +1,41 @@
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: [
+    /* ... */
+  ],
+  addons: [
+    /* ... */
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableIvy: false,
+    },
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+const config = defineMain({
+  stories: [
+    /* ... */
+  ],
+  addons: [
+    /* ... */
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableIvy: false,
+    },
+  },
+});
+
+export default config;
+```
diff --git a/docs/_snippets/angular-framework-options-enable-ngcc-false.md b/docs/_snippets/angular-framework-options-enable-ngcc-false.md
new file mode 100644
index 000000000000..c63810cf64be
--- /dev/null
+++ b/docs/_snippets/angular-framework-options-enable-ngcc-false.md
@@ -0,0 +1,41 @@
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: [
+    /* ... */
+  ],
+  addons: [
+    /* ... */
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableNgcc: false,
+    },
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+const config = defineMain({
+  stories: [
+    /* ... */
+  ],
+  addons: [
+    /* ... */
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableNgcc: false,
+    },
+  },
+});
+
+export default config;
+```
diff --git a/docs/_snippets/angular-framework-options.md b/docs/_snippets/angular-framework-options.md
new file mode 100644
index 000000000000..ee683e378d11
--- /dev/null
+++ b/docs/_snippets/angular-framework-options.md
@@ -0,0 +1,29 @@
+```js filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
+
+```js filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+const config = defineMain({
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      // ...
+    },
+  },
+});
+
+export default config;
+```
diff --git a/docs/_snippets/api-doc-block-argtypes-parameter.md b/docs/_snippets/api-doc-block-argtypes-parameter.md
index 4d3fb95950a7..35141c192b23 100644
--- a/docs/_snippets/api-doc-block-argtypes-parameter.md
+++ b/docs/_snippets/api-doc-block-argtypes-parameter.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -7,7 +7,7 @@ const meta: Meta<Button> = {
   component: Button,
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      argTypes: { exclude: ['style'] },
     },
   },
 };
@@ -15,6 +15,21 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      argTypes: { exclude: ['style'] },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -25,21 +40,21 @@ export default meta;
     component: Button,
     parameters: {
       docs: {
-        controls: { exclude: ['style'] },
+        argTypes: { exclude: ['style'] },
       },
     },
   });
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
   component: Button,
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      argTypes: { exclude: ['style'] },
     },
   },
 };
@@ -52,7 +67,7 @@ export default {
   component: Button,
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      argTypes: { exclude: ['style'] },
     },
   },
 };
@@ -68,14 +83,14 @@ export default {
     component: Button,
     parameters: {
       docs: {
-        controls: { exclude: ['style'] },
+        argTypes: { exclude: ['style'] },
       },
     },
   });
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -85,7 +100,7 @@ const meta = {
   component: Button,
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      argTypes: { exclude: ['style'] },
     },
   },
 } satisfies Meta<typeof Button>;
@@ -103,7 +118,7 @@ const meta = {
   component: Button,
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      argTypes: { exclude: ['style'] },
     },
   },
 } satisfies Meta<typeof Button>;
@@ -111,25 +126,25 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      argTypes: { exclude: ['style'] },
     },
   },
 };
 ```
 
-```ts filename="Button.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
   component: 'demo-button',
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      argTypes: { exclude: ['style'] },
     },
   },
 };
@@ -137,6 +152,32 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: {
+    docs: {
+      argTypes: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: {
+    docs: {
+      argTypes: { exclude: ['style'] },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -146,7 +187,7 @@ const meta = preview.meta({
   component: Button,
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      argTypes: { exclude: ['style'] },
     },
   },
 });
@@ -162,7 +203,39 @@ const meta = preview.meta({
   component: Button,
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      argTypes: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      argTypes: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      argTypes: { exclude: ['style'] },
     },
   },
 });
diff --git a/docs/_snippets/api-doc-block-canvas-parameter.md b/docs/_snippets/api-doc-block-canvas-parameter.md
index 2b822406ba19..f885229e60ba 100644
--- a/docs/_snippets/api-doc-block-canvas-parameter.md
+++ b/docs/_snippets/api-doc-block-canvas-parameter.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -19,6 +19,24 @@ export const Basic: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -39,7 +57,7 @@ export const Basic: Story = {
   }} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -91,7 +109,7 @@ export const Basic = {
   }} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -135,7 +153,7 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Button',
   component: 'demo-button',
@@ -150,7 +168,7 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -170,6 +188,40 @@ export const Basic: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Button',
+  component: 'demo-button',
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Button',
+  component: 'demo-button',
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -206,3 +258,41 @@ export const Basic = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 5ba2a13a6eb5..f4dd7aa3fee2 100644
--- a/docs/_snippets/api-doc-block-controls-parameter.md
+++ b/docs/_snippets/api-doc-block-controls-parameter.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -15,6 +15,21 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -32,7 +47,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -75,7 +90,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -111,22 +126,19 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Button',
   component: 'demo-button',
-};
-
-export const Basic = {
   parameters: {
     docs: {
-      canvas: { sourceState: 'shown' },
+      controls: { exclude: ['style'] },
     },
   },
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -142,6 +154,34 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Button',
+  component: 'demo-button',
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Button',
+  component: 'demo-button',
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -172,3 +212,35 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 73052ffe4c9a..2db5926f156f 100644
--- a/docs/_snippets/api-doc-block-description-example.md
+++ b/docs/_snippets/api-doc-block-description-example.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -36,6 +36,41 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+/**
+ * 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',
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -74,7 +109,7 @@ export const Primary: Story = {
   }} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 /**
@@ -178,7 +213,7 @@ export const Primary = {
   }} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -256,7 +291,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 /**
  * Button stories
  * These stories showcase the button
@@ -288,7 +323,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 /**
@@ -325,6 +360,74 @@ export const Primary: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+/**
+ * Button stories
+ * These stories showcase the button
+ */
+const meta = preview.meta({
+  title: 'Button',
+  component: 'demo-button',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Another description, overriding the comments',
+      },
+    },
+  },
+});
+
+/**
+ * # Button stories
+ * These stories showcase the button
+ */
+export const Primary = meta.story({
+  parameters: {
+    docs: {
+      description: {
+        story: 'Another description on the story, overriding the comments',
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+/**
+ * Button stories
+ * These stories showcase the button
+ */
+const meta = preview.meta({
+  title: 'Button',
+  component: 'demo-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',
+      },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -391,3 +494,75 @@ export const Primary = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+/**
+ * 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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+/**
+ * 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',
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/api-doc-block-source-parameter.md b/docs/_snippets/api-doc-block-source-parameter.md
index 6c9897cc3d49..cfabd70472bc 100644
--- a/docs/_snippets/api-doc-block-source-parameter.md
+++ b/docs/_snippets/api-doc-block-source-parameter.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -13,12 +13,30 @@ type Story = StoryObj<Button>;
 export const Basic: Story = {
   parameters: {
     docs: {
-      source: { language: 'tsx' },
+      source: { language: 'ts' },
     },
   },
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'ts' },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -39,7 +57,7 @@ export const Basic: Story = {
   }} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -65,7 +83,7 @@ export default {
 export const Basic = {
   parameters: {
     docs: {
-      source: { language: 'jsx' },
+      source: { language: 'js' },
     },
   },
 };
@@ -91,7 +109,7 @@ export const Basic = {
   }} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -129,32 +147,30 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   parameters: {
     docs: {
-      source: { language: 'tsx' },
+      source: { language: 'ts' },
     },
   },
 };
 ```
 
-```js filename="Button.stories.ts" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
-  title: 'Button',
   component: 'demo-button',
 };
 
 export const Basic = {
   parameters: {
     docs: {
-      source: { language: 'tsx' },
+      source: { language: 'js' },
     },
   },
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
-  title: 'Button',
   component: 'demo-button',
 };
 
@@ -164,12 +180,44 @@ type Story = StoryObj;
 export const Basic: Story = {
   parameters: {
     docs: {
-      source: { language: 'tsx' },
+      source: { language: 'ts' },
     },
   },
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'tsx' },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'tsx' },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -206,3 +254,41 @@ export const Basic = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'vue' },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'vue' },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/api-doc-block-story-parameter.md b/docs/_snippets/api-doc-block-story-parameter.md
index 8504171cac50..ae256429c282 100644
--- a/docs/_snippets/api-doc-block-story-parameter.md
+++ b/docs/_snippets/api-doc-block-story-parameter.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -19,6 +19,24 @@ export const Basic: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      story: { autoplay: true },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -39,7 +57,7 @@ export const Basic: Story = {
   }} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -91,7 +109,7 @@ export const Basic = {
   }} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -135,9 +153,8 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
-  title: 'Button',
   component: 'demo-button',
 };
 
@@ -150,11 +167,10 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
-  title: 'Button',
   component: 'demo-button',
 };
 
@@ -170,6 +186,38 @@ export const Basic: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      story: { autoplay: true },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      story: { autoplay: true },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -206,3 +254,41 @@ export const Basic = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 069c150c40df..69dfdc1770dc 100644
--- a/docs/_snippets/arg-types-control.md
+++ b/docs/_snippets/arg-types-control.md
@@ -1,7 +1,7 @@
-```ts filename="Example.stories.ts" renderer="angular" language="ts"
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Example } from './Example';
+import { Example } from './example.component';
 
 const meta: Meta<Example> = {
   component: Example,
@@ -20,6 +20,26 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './example.component';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="Example.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -42,7 +62,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Example from './Example.svelte';
 
 export default {
@@ -100,7 +120,7 @@ export default {
 </script>
 ```
 
-```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -146,7 +166,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-example',
   argTypes: {
@@ -162,7 +182,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -182,6 +202,42 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+});
+```
+
 ```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -206,6 +262,7 @@ const meta = preview.meta({
 
 ```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({
@@ -222,3 +279,45 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Example.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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 eee71b8c5160..5b42e7105dbb 100644
--- a/docs/_snippets/arg-types-default-value.md
+++ b/docs/_snippets/arg-types-default-value.md
@@ -1,7 +1,7 @@
-```ts filename="Example.stories.ts" renderer="angular" language="ts"
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Example } from './Example';
+import { Example } from './example.component';
 
 const meta: Meta<Example> = {
   component: Example,
@@ -20,6 +20,26 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './example.component';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      // ⛔️ Deprecated, do not use
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+});
+```
+
 ```svelte filename="Example.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -42,7 +62,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Example from './Example.svelte';
 
 export default {
@@ -100,7 +120,7 @@ export default {
 </script>
 ```
 
-```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -146,7 +166,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-example',
   argTypes: {
@@ -162,7 +182,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -182,6 +202,42 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      // ⛔️ Deprecated, do not use
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      // ⛔️ Deprecated, do not use
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+});
+```
+
 ```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -222,3 +278,45 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Example.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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 50e25f2867bc..30d6ac827fb3 100644
--- a/docs/_snippets/arg-types-description.md
+++ b/docs/_snippets/arg-types-description.md
@@ -1,7 +1,7 @@
-```ts filename="Example.stories.ts" renderer="angular" language="ts"
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Example } from './Example';
+import { Example } from './example.component';
 
 const meta: Meta<Example> = {
   component: Example,
@@ -15,6 +15,21 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './example.component';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+});
+```
+
 ```svelte filename="Example.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -32,7 +47,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Example from './Example.svelte';
 
 export default {
@@ -75,7 +90,7 @@ export default {
 </script>
 ```
 
-```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -111,7 +126,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-example',
   argTypes: {
@@ -122,7 +137,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -137,6 +152,32 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+});
+```
+
 ```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -167,3 +208,35 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Example.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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 7a38680e4a15..daf6bb7b10b1 100644
--- a/docs/_snippets/arg-types-if.md
+++ b/docs/_snippets/arg-types-if.md
@@ -1,7 +1,7 @@
-```ts filename="Example.stories.ts" renderer="angular" language="ts"
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Example } from './Example';
+import { Example } from './example.component';
 
 const meta: Meta<Example> = {
   component: Example,
@@ -37,6 +37,43 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './example.component';
+
+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 } },
+  },
+});
+```
+
 ```svelte filename="Example.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -76,7 +113,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Example from './Example.svelte';
 
 export default {
@@ -185,7 +222,7 @@ export default {
 </script>
 ```
 
-```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -265,7 +302,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-example',
   argTypes: {
@@ -298,7 +335,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -335,6 +372,76 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 } },
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 } },
+  },
+});
+```
+
 ```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -409,3 +516,79 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Example.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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 c4316abedefa..4bb13a963866 100644
--- a/docs/_snippets/arg-types-in-meta.md
+++ b/docs/_snippets/arg-types-in-meta.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -17,6 +17,23 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -36,8 +53,8 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
-import { Button } from './Button';
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
+import Button from './Button.svelte';
 
 export default {
   component: Button,
@@ -85,11 +102,11 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
-import { Button } from './Button';
+import Button from './Button.svelte';
 
 const meta = {
   component: Button,
@@ -125,7 +142,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   argTypes: {
@@ -138,7 +155,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -155,6 +172,36 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -189,3 +236,39 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 9a536e659576..90afc33fe33f 100644
--- a/docs/_snippets/arg-types-in-preview.md
+++ b/docs/_snippets/arg-types-in-preview.md
@@ -58,3 +58,77 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 4da2c5716cd8..bb9c7d7b5295 100644
--- a/docs/_snippets/arg-types-in-story.md
+++ b/docs/_snippets/arg-types-in-story.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -22,6 +22,26 @@ export const Basic: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -41,7 +61,7 @@ export const Basic: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -96,7 +116,7 @@ export const Basic = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -144,7 +164,7 @@ export const Basic: Story = {
 } satisfies Story;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
@@ -160,7 +180,7 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -181,6 +201,42 @@ export const Basic: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Basic = meta.story({
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Basic = meta.story({
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -221,3 +277,45 @@ export const Basic = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 2877d15799b3..ca7291582e87 100644
--- a/docs/_snippets/arg-types-mapping.md
+++ b/docs/_snippets/arg-types-mapping.md
@@ -1,25 +1,3 @@
-```ts filename="Example.stories.ts" renderer="angular" language="ts"
-import type { Meta } from '@storybook/angular';
-
-import { Example } from './Example';
-
-const meta: Meta<Example> = {
-  component: Example,
-  argTypes: {
-    label: {
-      control: { type: 'select' },
-      options: ['Normal', 'Bold', 'Italic'],
-      mapping: {
-        Bold: <b>Bold</b>,
-        Italic: <i>Italic</i>,
-      },
-    },
-  },
-};
-
-export default meta;
-```
-
 ```svelte filename="Example.stories.svelte" renderer="svelte" language="js"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -129,7 +107,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -147,7 +125,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -169,6 +147,46 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    label: {
+      control: { type: 'select' },
+      options: ['Normal', 'Bold', 'Italic'],
+      mapping: {
+        Bold: html`<b>Bold</b>`,
+        Italic: html`<i>Italic</i>`,
+      },
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    label: {
+      control: { type: 'select' },
+      options: ['Normal', 'Bold', 'Italic'],
+      mapping: {
+        Bold: html`<b>Bold</b>`,
+        Italic: html`<i>Italic</i>`,
+      },
+    },
+  },
+});
+```
+
 ```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/arg-types-name.md b/docs/_snippets/arg-types-name.md
index 248ddcb7bc13..9db1f728ff21 100644
--- a/docs/_snippets/arg-types-name.md
+++ b/docs/_snippets/arg-types-name.md
@@ -1,7 +1,7 @@
-```ts filename="Example.stories.ts" renderer="angular" language="ts"
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Example } from './Example';
+import { Example } from './example.component';
 
 const meta: Meta<Example> = {
   component: Example,
@@ -15,6 +15,21 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './example.component';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+});
+```
+
 ```svelte filename="Example.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -32,7 +47,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Example from './Example.svelte';
 
 export default {
@@ -75,7 +90,7 @@ export default {
 </script>
 ```
 
-```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -111,7 +126,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-example',
   argTypes: {
@@ -122,7 +137,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -137,6 +152,32 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+});
+```
+
 ```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -167,3 +208,35 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Example.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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 fcec0bc5b7d6..6b6078c7bed2 100644
--- a/docs/_snippets/arg-types-options.md
+++ b/docs/_snippets/arg-types-options.md
@@ -1,7 +1,7 @@
-```ts filename="Example.stories.ts" renderer="angular" language="ts"
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Example } from './Example';
+import { Example } from './example.component';
 
 const meta: Meta<Example> = {
   component: Example,
@@ -15,6 +15,21 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './example.component';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+});
+```
+
 ```svelte filename="Example.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -32,7 +47,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Example from './Example.svelte';
 
 export default {
@@ -75,7 +90,7 @@ export default {
 </script>
 ```
 
-```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -93,17 +108,6 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
-export default {
-  component: 'demo-example',
-  argTypes: {
-    icon: {
-      options: ['arrow-up', 'arrow-down', 'loading'],
-    },
-  },
-};
-```
-
 ```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';
@@ -122,7 +126,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-example',
   argTypes: {
@@ -133,7 +137,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -148,6 +152,32 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+});
+```
+
 ```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -178,3 +208,35 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Example.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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 75b8af72fa15..1a15adbf0ba9 100644
--- a/docs/_snippets/arg-types-table.md
+++ b/docs/_snippets/arg-types-table.md
@@ -1,7 +1,7 @@
-```ts filename="Example.stories.ts" renderer="angular" language="ts"
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Example } from './Example';
+import { Example } from './example.component';
 
 const meta: Meta<Example> = {
   component: Example,
@@ -18,6 +18,24 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './example.component';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="Example.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -38,7 +56,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Example from './Example.svelte';
 
 export default {
@@ -90,7 +108,7 @@ export default {
 </script>
 ```
 
-```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -132,7 +150,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-example',
   argTypes: {
@@ -146,7 +164,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -164,6 +182,38 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+});
+```
+
 ```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -200,3 +250,41 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Example.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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 0008b3e54678..a4fd1823cfd3 100644
--- a/docs/_snippets/arg-types-type.md
+++ b/docs/_snippets/arg-types-type.md
@@ -1,7 +1,7 @@
-```ts filename="Example.stories.ts" renderer="angular" language="ts"
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Example } from './Example';
+import { Example } from './example.component';
 
 const meta: Meta<Example> = {
   component: Example,
@@ -13,6 +13,19 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Example } from './example.component';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+});
+```
+
 ```svelte filename="Example.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -28,7 +41,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Example.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Example from './Example.svelte';
 
 export default {
@@ -65,7 +78,7 @@ export default {
 </script>
 ```
 
-```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Example.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -97,7 +110,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-example',
   argTypes: {
@@ -106,7 +119,7 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -119,6 +132,28 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: { type: 'number' },
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-example',
+  argTypes: {
+    value: { type: 'number' },
+  },
+});
+```
+
 ```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -145,3 +180,31 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Example.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Example from './Example.vue';
+
+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 5b79f4ff2313..ee00efbf42c7 100644
--- a/docs/_snippets/args-in-preview.md
+++ b/docs/_snippets/args-in-preview.md
@@ -38,3 +38,52 @@ export default definePreview({
   args: { theme: 'light' },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 0c9153273598..9081b4a016cd 100644
--- a/docs/_snippets/automock-register-full.md
+++ b/docs/_snippets/automock-register-full.md
@@ -61,3 +61,82 @@ export default definePreview({
   // ...
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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 snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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 definePreview({
+  // ...
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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({
+  // ...
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 definePreview({
+  // ...
+});
+```
diff --git a/docs/_snippets/automock-register-mock-file.md b/docs/_snippets/automock-register-mock-file.md
index 24e957e939c8..d18f3ad3c7c8 100644
--- a/docs/_snippets/automock-register-mock-file.md
+++ b/docs/_snippets/automock-register-mock-file.md
@@ -61,3 +61,82 @@ export default definePreview({
   // ...
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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 snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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 definePreview({
+  // ...
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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({
+  // ...
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 definePreview({
+  // ...
+});
+```
diff --git a/docs/_snippets/automock-register-spy.md b/docs/_snippets/automock-register-spy.md
index 87c4337728f7..5e54b3a9b6ac 100644
--- a/docs/_snippets/automock-register-spy.md
+++ b/docs/_snippets/automock-register-spy.md
@@ -61,3 +61,82 @@ export default definePreview({
   // ...
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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 snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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 definePreview({
+  // ...
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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({
+  // ...
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 definePreview({
+  // ...
+});
+```
diff --git a/docs/_snippets/automocked-modules-in-story.md b/docs/_snippets/automocked-modules-in-story.md
index 072641661fda..a8ede4299fe2 100644
--- a/docs/_snippets/automocked-modules-in-story.md
+++ b/docs/_snippets/automocked-modules-in-story.md
@@ -1,8 +1,8 @@
-```ts filename="AuthButton.stories.ts" renderer="angular" language="ts"
+```ts filename="AuthButton.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 import { expect, mocked } from 'storybook/test';
 
-import { AuthButton } from './AuthButton.component';
+import { AuthButton } from './auth-button.component';
 
 import { v4 as uuidv4 } from 'uuid';
 import { getUserFromSession } from '../lib/session';
@@ -31,6 +31,37 @@ export const LogIn: Story = {
 };
 ```
 
+```ts filename="AuthButton.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { expect, mocked } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { AuthButton } from './auth-button.component';
+
+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();
+  },
+});
+```
+
 ```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';
@@ -127,7 +158,7 @@ export const LogIn = {
 />
 ```
 
-```ts filename="AuthButton.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="AuthButton.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { expect, mocked } from 'storybook/test';
@@ -194,7 +225,7 @@ export const LogIn: Story = {
 />
 ```
 
-```js filename="AuthButton.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="AuthButton.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 import { AuthButton } from './AuthButton.svelte';
@@ -223,7 +254,7 @@ export const LogIn = {
 };
 ```
 
-```ts filename="AuthButton.stories.ts" renderer="web-components" language="ts"
+```ts filename="AuthButton.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { expect, mocked } from 'storybook/test';
 
@@ -254,7 +285,7 @@ export const LogIn: Story = {
 };
 ```
 
-```js filename="AuthButton.stories.js" renderer="web-components" language="js"
+```js filename="AuthButton.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 import { v4 as uuidv4 } from 'uuid';
@@ -281,10 +312,69 @@ export const LogIn = {
 };
 ```
 
-```ts filename="AuthButton.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```ts filename="AuthButton.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { expect, mocked } from 'storybook/test';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-auth-button',
+  // 👇 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 filename="AuthButton.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
 import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-auth-button',
+  // 👇 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();
+  },
+});
+```
+
+```ts filename="AuthButton.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import { expect, mocked } from 'storybook/test';
 
+import preview from '../.storybook/preview';
+
 import { AuthButton } from './AuthButton';
 
 import { v4 as uuidv4 } from 'uuid';
@@ -314,9 +404,10 @@ export const LogIn = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { AuthButton } from './AuthButton';
 
 import { v4 as uuidv4 } from 'uuid';
@@ -342,3 +433,67 @@ export const LogIn = meta.story({
   },
 });
 ```
+
+```ts filename="AuthButton.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { expect, mocked } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import AuthButton from './AuthButton.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import AuthButton from './AuthButton.vue';
+
+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 64367a724e5c..7a07c071cb58 100644
--- a/docs/_snippets/before-all-in-preview.md
+++ b/docs/_snippets/before-all-in-preview.md
@@ -50,3 +50,67 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import { init } from '../project-bootstrap';
+
+export default definePreview({
+  async beforeAll() {
+    await init();
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+import { init } from '../project-bootstrap';
+
+export default definePreview({
+  async beforeAll() {
+    await init();
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 6824c0b9053d..100e8a979435 100644
--- a/docs/_snippets/before-each-in-meta-mock-date.md
+++ b/docs/_snippets/before-each-in-meta-mock-date.md
@@ -1,4 +1,4 @@
-```ts filename="Page.stories.ts" renderer="angular" language="ts"
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import MockDate from 'mockdate';
@@ -21,13 +21,40 @@ export default meta;
 
 type Story = StoryObj<Page>;
 
-export const Default: Story = {
+export const Basic: Story = {
   async play({ canvas }) {
     // ... This will run with the mocked Date
   },
 };
 ```
 
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';
+
+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 Basic = meta.story({
+  async play({ canvas }) {
+    // ... This will run with the mocked Date
+  },
+});
+```
+
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -56,7 +83,7 @@ export const Default: Story = {
 />
 ```
 
-```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 import Page from './Page.svelte';
@@ -74,7 +101,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Basic = {
   async play({ canvas }) {
     // ... This will run with the mocked Date
   },
@@ -99,7 +126,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Basic = {
   async play({ canvas }) {
     // ... This will run with the mocked Date
   },
@@ -134,7 +161,7 @@ export const Default = {
 />
 ```
 
-```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -158,7 +185,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   async play({ canvas }) {
     // ... This will run with the mocked Date
   },
@@ -189,14 +216,14 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   async play({ canvas }) {
     // ... This will run with the mocked Date
   },
 };
 ```
 
-```js filename="Page.stories.js" renderer="web-components" language="js"
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 export default {
@@ -212,14 +239,14 @@ export default {
   },
 };
 
-export const Default = {
+export const Basic = {
   async play({ canvas }) {
     // ... This will run with the mocked Date
   },
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="web-components" language="ts"
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import MockDate from 'mockdate';
@@ -240,18 +267,68 @@ export default meta;
 
 type Story = StoryObj;
 
-export const Default: Story = {
+export const Basic: Story = {
   async play({ canvas }) {
     // ... This will run with the mocked Date
   },
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
 import preview from '../.storybook/preview';
 
+const meta = preview.meta({
+  component: 'my-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 Basic = meta.story({
+  async play({ canvas }) {
+    // ... This will run with the mocked Date
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-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 Basic = meta.story({
+  async play({ canvas }) {
+    // ... This will run with the mocked Date
+  },
+});
+```
+
+```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({
@@ -267,7 +344,7 @@ const meta = preview.meta({
   },
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
   async play({ canvas }) {
     // ... This will run with the mocked Date
   },
@@ -277,9 +354,10 @@ export const Default = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { Page } from './Page';
 
 const meta = preview.meta({
@@ -295,7 +373,63 @@ const meta = preview.meta({
   },
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
+  async play({ canvas }) {
+    // ... This will run with the mocked Date
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+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 Basic = 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="vue" language="js" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+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 Basic = 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 4a1a369ec8b0..35b6c4e45c4b 100644
--- a/docs/_snippets/before-each-in-preview.md
+++ b/docs/_snippets/before-each-in-preview.md
@@ -50,3 +50,67 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import MockDate from 'mockdate';
+
+export default definePreview({
+  async beforeEach() {
+    MockDate.reset();
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+import MockDate from 'mockdate';
+
+export default definePreview({
+  async beforeEach() {
+    MockDate.reset();
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 803807e2638f..049d81fb2fc2 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -1,11 +1,9 @@
-```ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { moduleMetadata } from '@storybook/angular';
+```ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import { ButtonGroup } from './ButtonGroup.component';
+import { ButtonGroup } from './button-group.component';
 import { Button } from './button.component';
 
 //👇 Imports the Button stories
@@ -32,6 +30,37 @@ export const Pair: Story = {
 };
 ```
 
+```ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { CommonModule } from '@angular/common';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { ButtonGroup } from './button-group.component';
+import { Button } from './button.component';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: ButtonGroup,
+  decorators: [
+    moduleMetadata({
+      declarations: [Button],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+export const Pair = meta.story({
+  args: {
+    buttons: [{ ...ButtonStories.Primary.input.args }, { ...ButtonStories.Secondary.input.args }],
+    orientation: 'horizontal',
+  },
+});
+```
+
 ```js filename="ButtonGroup.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { ButtonGroup } from '../ButtonGroup';
 
@@ -138,7 +167,7 @@ export const Pair: Story = {
 />
 ```
 
-```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import ButtonGroup from '../ButtonGroup.svelte';
 
 //👇 Imports the Button stories
@@ -179,7 +208,7 @@ export const Pair = {
 />
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -203,7 +232,7 @@ export const Pair: Story = {
 };
 ```
 
-```js filename="ButtonGroup.stories.js" renderer="vue" language="js"
+```js filename="ButtonGroup.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import ButtonGroup from './ButtonGroup.vue';
 
 //👇 Imports the Button stories
@@ -233,7 +262,7 @@ export const Pair = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts"
+```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import ButtonGroup from './ButtonGroup.vue';
@@ -263,7 +292,7 @@ export const Pair: Story = {
 };
 ```
 
-```js filename="ButtonGroup.stories.js" renderer="web-components" language="js"
+```js filename="ButtonGroup.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 // 👇 Imports the Button stories
 import * as ButtonStories from './Button.stories';
 
@@ -279,7 +308,7 @@ export const Pair = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="web-components" language="ts"
+```ts filename="ButtonGroup.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 // 👇 Imports the Button stories
@@ -300,6 +329,98 @@ export const Pair: Story = {
 };
 ```
 
+```js filename="ButtonGroup.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// 👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: 'demo-button-group',
+});
+
+export const Pair = meta.story({
+  args: {
+    buttons: [{ ...ButtonStories.Primary.input.args }, { ...ButtonStories.Secondary.input.args }],
+    orientation: 'horizontal',
+  },
+});
+```
+
+```ts filename="ButtonGroup.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// 👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: 'demo-button-group',
+});
+
+export const Pair = meta.story({
+  args: {
+    buttons: [{ ...ButtonStories.Primary.input.args }, { ...ButtonStories.Secondary.input.args }],
+    orientation: 'horizontal',
+  },
+});
+```
+
+```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import ButtonGroup from './ButtonGroup.vue';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: ButtonGroup,
+});
+
+export const Pair = meta.story({
+  render: (args) => ({
+    components: { ButtonGroup },
+    setup() {
+      return { args };
+    },
+    template: '<ButtonGroup v-bind="args" />',
+  }),
+  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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import ButtonGroup from './ButtonGroup.vue';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: ButtonGroup,
+});
+
+export const Pair = meta.story({
+  render: (args) => ({
+    components: { ButtonGroup },
+    setup() {
+      return { args };
+    },
+    template: '<ButtonGroup v-bind="args" />',
+  }),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.input.args }, { ...ButtonStories.Secondary.input.args }],
+    orientation: 'horizontal',
+  },
+});
+```
+
 ```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/button-implementation.md b/docs/_snippets/button-implementation.md
index 9e9c3ee4cc70..f3554a2eaa1f 100644
--- a/docs/_snippets/button-implementation.md
+++ b/docs/_snippets/button-implementation.md
@@ -1,4 +1,4 @@
-```ts filename="Button.component.ts" renderer="angular" language="ts"
+```ts filename="button.component.ts" renderer="angular" language="ts"
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
diff --git a/docs/_snippets/button-story-argtypes-with-categories.md b/docs/_snippets/button-story-argtypes-with-categories.md
index fde3403910b2..6637773506e4 100644
--- a/docs/_snippets/button-story-argtypes-with-categories.md
+++ b/docs/_snippets/button-story-argtypes-with-categories.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -42,6 +42,48 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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 filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
@@ -127,7 +169,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   argTypes: {
@@ -165,7 +207,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -207,6 +249,86 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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',
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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',
+      },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -291,3 +413,87 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import Button from './Button.vue';
+
+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 631b8430d65c..10140c72ace3 100644
--- a/docs/_snippets/button-story-argtypes-with-subcategories.md
+++ b/docs/_snippets/button-story-argtypes-with-subcategories.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -46,6 +46,52 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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 filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
@@ -139,7 +185,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   argTypes: {
@@ -181,7 +227,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -227,6 +273,94 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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',
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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',
+      },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -319,3 +453,95 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import Button from './Button.vue';
+
+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-with-satisfies-story-level.md b/docs/_snippets/button-story-baseline-with-satisfies-story-level.md
index 6974bcfc1800..eca8aaebc468 100644
--- a/docs/_snippets/button-story-baseline-with-satisfies-story-level.md
+++ b/docs/_snippets/button-story-baseline-with-satisfies-story-level.md
@@ -1,3 +1,23 @@
+```ts filename="Button.stories.ts" renderer="angular" language="ts"
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './button.component';
+
+const meta = {
+  component: Button,
+} satisfies Meta<Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+} satisfies Story;
+```
+
 ```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';
diff --git a/docs/_snippets/button-story-baseline-with-satisfies.md b/docs/_snippets/button-story-baseline-with-satisfies.md
index 8dd1e03abbf1..819e4ad00ce2 100644
--- a/docs/_snippets/button-story-baseline-with-satisfies.md
+++ b/docs/_snippets/button-story-baseline-with-satisfies.md
@@ -1,3 +1,15 @@
+```ts filename="Button.stories.ts" renderer="angular" language="ts"
+import type { Meta } from '@storybook/angular';
+
+import { Button } from './button.component';
+
+const meta = {
+  component: Button,
+} satisfies Meta<Button>; // 👈 Satisfies operator being used for stricter type checking.
+
+export default meta;
+```
+
 ```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 } from '@storybook/your-framework';
diff --git a/docs/_snippets/button-story-baseline.md b/docs/_snippets/button-story-baseline.md
index 03c705e5564e..4fc1e84945bf 100644
--- a/docs/_snippets/button-story-baseline.md
+++ b/docs/_snippets/button-story-baseline.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -18,6 +18,23 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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,
+  },
+});
+```
+
 ```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';
@@ -39,7 +56,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -49,7 +66,6 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-//👇 Throws a type error if the args don't match the component props
 export const Primary: Story = {
   args: {
     primary: true,
@@ -57,6 +73,21 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+//👇 Throws a type error if the args don't match the component props
+export const Primary = meta.story({
+  args: {
+    primary: true,
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -73,3 +104,20 @@ export const Primary = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 ab08cabf2da7..9e7ccb8af4e5 100644
--- a/docs/_snippets/button-story-click-handler-args.md
+++ b/docs/_snippets/button-story-click-handler-args.md
@@ -1,6 +1,5 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, argsToTemplate } from '@storybook/angular';
 
 import { action } from 'storybook/actions';
 
@@ -31,6 +30,36 @@ export const Text: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { argsToTemplate } from '@storybook/angular';
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: (args) => ({
+    props: args,
+    // The argsToTemplate helper function converts the args to property and event bindings.
+    // You could also write the template in plain HTML and bind to the component's inputs and outputs yourself:
+    // <storybook-button ["label"]="label" (onClick)="onClick($event)">
+    // We don't recommend the latter since it can conflict with how Storybook applies arguments via the Controls panel.
+    // Binding to the component's inputs and outputs yourself will conflict with default values set inside the component's class.
+    // In edge-case scenarios, you may need to define the template yourself, though.
+    template: `<storybook-button ${argsToTemplate(args)}></storybook-button>`,
+  }),
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+});
+```
+
 ```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
@@ -73,6 +102,46 @@ export const Text = {
 };
 ```
 
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+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} />,
+});
+```
+
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+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} />,
+});
+```
+
 ```jsx filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { action } from 'storybook/actions';
 
@@ -155,7 +224,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const Text: Story = {
   render: ({ label, click }) => ({
     Component: Button,
     props: {
@@ -172,7 +241,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
 import Button from './Button.vue';
@@ -198,7 +267,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { action } from 'storybook/actions';
@@ -212,7 +281,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const Text: Story = {
   render: (args) => ({
     components: { Button },
     setup() {
@@ -229,7 +298,63 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return {
+        ...args,
+        onClick: action('clicked'),
+      };
+    },
+    template: '<Button @click="onClick" :label="label" />',
+  }),
+  args: {
+    label: 'Hello',
+  },
+});
+```
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return {
+        ...args,
+        onClick: action('clicked'),
+      };
+    },
+    template: '<Button @click="onClick" :label="label" />',
+  }),
+  args: {
+    label: 'Hello',
+  },
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
 import { html } from 'lit';
@@ -248,7 +373,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { action } from 'storybook/actions';
@@ -272,43 +397,44 @@ export const Text: Story = {
 };
 ```
 
-```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
-import preview from '../.storybook/preview';
-
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
 import { action } from 'storybook/actions';
 
-import { Button } from './Button';
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
 
 const meta = preview.meta({
-  component: Button,
+  component: 'custom-button',
 });
 
 export const Text = meta.story({
+  render: ({ label, onClick }) =>
+    html`<custom-button label=${label} @click=${onClick}></custom-button>`,
   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';
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { action } from 'storybook/actions';
 
-import { Button } from './Button';
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
 
 const meta = preview.meta({
-  component: Button,
+  component: 'custom-button',
 });
 
 export const Text = meta.story({
+  render: ({ label, onClick }) =>
+    html`<custom-button label=${label} @click=${onClick}></custom-button>`,
   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 3f8ece8cb4f5..e7fe8f66ae25 100644
--- a/docs/_snippets/button-story-click-handler-simplificated.md
+++ b/docs/_snippets/button-story-click-handler-simplificated.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -15,6 +15,20 @@ export const Text: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {},
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
@@ -45,6 +59,34 @@ export const Text: 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,
+});
+
+export const Text = meta.story({
+  args: {},
+});
+```
+
+```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 Text = meta.story({
+  args: {},
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
@@ -104,7 +146,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -119,7 +161,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -140,7 +182,41 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    onClick: {},
+  },
+});
+
+export const Text = meta.story({
+  args: {},
+});
+```
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    onClick: {},
+  },
+});
+
+export const Text = meta.story({
+  args: {},
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'custom-button',
   argTypes: {
@@ -153,7 +229,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -171,13 +247,14 @@ export const Text: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Button } from './Button';
-
 const meta = preview.meta({
-  component: Button,
+  component: 'custom-button',
+  argTypes: {
+    onClick: { action: 'onClick' },
+  },
 });
 
 export const Text = meta.story({
@@ -185,14 +262,14 @@ export const Text = 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 🧪"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
-import { Button } from './Button';
 
 const meta = preview.meta({
-  component: Button,
+  component: 'custom-button',
+  argTypes: {
+    onClick: { action: 'onClick' },
+  },
 });
 
 export const Text = meta.story({
diff --git a/docs/_snippets/button-story-click-handler.md b/docs/_snippets/button-story-click-handler.md
index 37295c786e8a..6d9d4f62de0b 100644
--- a/docs/_snippets/button-story-click-handler.md
+++ b/docs/_snippets/button-story-click-handler.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { action } from 'storybook/actions';
@@ -23,6 +23,28 @@ export const Text: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: () => ({
+    props: {
+      label: 'Button',
+      onClick: action('clicked'),
+    },
+    template: `<storybook-button [label]="label" (onClick)="onClick($event)"></storybook-button>`,
+  }),
+});
+```
+
 ```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
@@ -57,6 +79,38 @@ export const Basic: Story = {
 };
 ```
 
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+});
+```
+
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+});
+```
+
 ```jsx filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { action } from 'storybook/actions';
 
@@ -139,7 +193,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 
 import Button from './Button.vue';
@@ -161,7 +215,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { action } from 'storybook/actions';
@@ -188,7 +242,55 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: () => ({
+    components: { Button },
+    setup() {
+      return {
+        onClick: action('clicked'),
+      };
+    },
+    template: '<Button label="Hello" @click="onClick" />',
+  }),
+});
+```
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { action } from 'storybook/actions';
+
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: () => ({
+    components: { Button },
+    setup() {
+      return {
+        onClick: action('clicked'),
+      };
+    },
+    template: '<Button label="Hello" @click="onClick" />',
+  }),
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 import { action } from 'storybook/actions';
@@ -202,7 +304,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { action } from 'storybook/actions';
@@ -221,35 +323,34 @@ export const Text: Story = {
 };
 ```
 
-```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
-import preview from '../.storybook/preview';
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
 
 import { action } from 'storybook/actions';
 
-import { Button } from './Button';
+import preview from '../.storybook/preview';
 
 const meta = preview.meta({
-  component: Button,
+  component: 'custom-button',
 });
 
-export const Basic = meta.story({
-  render: () => <Button label="Hello" onClick={action('clicked')} />,
+export const Text = meta.story({
+  render: () => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
 });
 ```
 
-<!-- JS snippets still needed while providing both CSF 3 & Next -->
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
 
-```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';
+import preview from '../.storybook/preview';
 
 const meta = preview.meta({
-  component: Button,
+  component: 'custom-button',
 });
 
 export const Text = meta.story({
-  render: () => <Button label="Hello" onClick={action('clicked')} />,
+  render: () => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
 });
 ```
diff --git a/docs/_snippets/button-story-component-args-primary.md b/docs/_snippets/button-story-component-args-primary.md
index 23442d03c23c..9dd8ff2498c7 100644
--- a/docs/_snippets/button-story-component-args-primary.md
+++ b/docs/_snippets/button-story-component-args-primary.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -18,6 +18,24 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
@@ -111,7 +129,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -147,7 +165,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -168,7 +186,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -184,7 +202,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -204,7 +222,45 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   // 👇 Creates specific argTypes
@@ -218,7 +274,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -236,6 +292,38 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  // 👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    // 👇 Now all Button stories will be primary.
+    primary: true,
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  // 👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    // 👇 Now all Button stories will be primary.
+    primary: true,
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md
index 15745fdd40a2..7240f4b8df51 100644
--- a/docs/_snippets/button-story-component-decorator.md
+++ b/docs/_snippets/button-story-component-decorator.md
@@ -1,17 +1,14 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
-import type { Meta } from '@storybook/angular';
-
-import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
 
 import { Button } from './button.component';
-
 import { Parent } from './parent.component'; // Parent contains ng-content
 
 const meta: Meta<Button> = {
   component: Button,
   decorators: [
     moduleMetadata({
-      declarations: [ParentComponent],
+      declarations: [Parent],
     }),
     // With template
     componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`),
@@ -23,9 +20,29 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="html" language="js"
-import { createButton } from './Button';
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+import { Parent } from './parent.component'; // Parent contains ng-content
+
+const meta = preview.meta({
+  component: Button,
+  decorators: [
+    moduleMetadata({
+      declarations: [Parent],
+    }),
+    // With template
+    componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`),
+    // With component which contains ng-content
+    componentWrapperDecorator(Parent),
+  ],
+});
+```
 
+```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
@@ -41,21 +58,12 @@ export default {
     },
   ],
 };
-
-/*
- *👇 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: (args) => createButton(args),
-};
 ```
 
 ```ts filename="Button.stories.ts" renderer="html" language="ts"
-import type { Meta, StoryObj } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 
-import { createButton, ButtonArgs } from './Button';
+import { ButtonArgs } from './Button';
 
 const meta: Meta<ButtonArgs> = {
   /* 👇 The title prop is optional.
@@ -74,11 +82,6 @@ const meta: Meta<ButtonArgs> = {
 };
 
 export default meta;
-type Story = StoryObj<ButtonArgs>;
-
-export const Primary: Story = {
-  render: (args) => createButton(args),
-};
 ```
 
 ```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
@@ -99,7 +102,7 @@ export default {
 
 ```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';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
@@ -166,7 +169,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
@@ -190,7 +193,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -205,7 +208,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -214,7 +217,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -227,19 +230,41 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
   component: 'demo-button',
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
-
-export const Example = {};
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
 
@@ -249,9 +274,28 @@ const meta: Meta = {
 };
 
 export default meta;
-type Story = StoryObj;
+```
 
-export const Example: Story = {};
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
+});
 ```
 
 ```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
diff --git a/docs/_snippets/button-story-controls-primary-variant.md b/docs/_snippets/button-story-controls-primary-variant.md
index 511c1e134472..3f9cb146531b 100644
--- a/docs/_snippets/button-story-controls-primary-variant.md
+++ b/docs/_snippets/button-story-controls-primary-variant.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -17,6 +17,22 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    variant: 'primary',
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -31,7 +47,7 @@ export const Primary: Story = {
 <Story name="Primary" args={{ variant: 'primary' }} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -73,7 +89,7 @@ export const Primary = {
 <Story name="Primary" args={{ variant: 'primary' }} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -113,7 +129,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
@@ -125,7 +141,7 @@ export const Success = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -142,6 +158,34 @@ export const Primary: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Success = meta.story({
+  args: {
+    variant: 'primary',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Primary = meta.story({
+  args: {
+    variant: 'primary',
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -162,6 +206,7 @@ export const Primary = meta.story({
 
 ```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({
@@ -174,3 +219,37 @@ export const Primary = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 52c9bffc6c73..6b0f8596e963 100644
--- a/docs/_snippets/button-story-controls-radio-group.md
+++ b/docs/_snippets/button-story-controls-radio-group.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -16,6 +16,22 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -34,7 +50,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -80,7 +96,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -118,7 +134,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   argTypes: {
@@ -130,7 +146,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -146,6 +162,34 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -166,6 +210,7 @@ const meta = preview.meta({
 
 ```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({
@@ -178,3 +223,37 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 8a838017283b..5af4660489e8 100644
--- a/docs/_snippets/button-story-decorator.md
+++ b/docs/_snippets/button-story-decorator.md
@@ -1,10 +1,12 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import {
+  type Meta,
+  type StoryObj,
+  componentWrapperDecorator,
+  moduleMetadata,
+} from '@storybook/angular';
 
 import { Button } from './button.component';
-
 import { Parent } from './parent.component'; // Parent contains ng-content
 
 const meta: Meta<Button> = {
@@ -28,6 +30,32 @@ export const InsideParent: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+import { Parent } from './parent.component'; // Parent contains ng-content
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
+});
+
+export const InsideParent = meta.story({
+  decorators: [
+    moduleMetadata({
+      declarations: [Parent],
+    }),
+    componentWrapperDecorator(Parent),
+  ],
+});
+```
+
 ```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
@@ -133,7 +161,7 @@ export const Primary: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
@@ -166,7 +194,7 @@ export const Primary = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -185,7 +213,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -206,7 +234,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -232,7 +260,55 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: () => ({
+    components: { Button },
+    template: '<Button primary label="Hello World" />',
+  }),
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: () => ({
+    components: { Button },
+    template: '<Button primary label="Hello World" />',
+  }),
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -244,7 +320,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -259,6 +335,34 @@ export const Primary: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Primary = meta.story({
+  decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Primary = meta.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';
 
diff --git a/docs/_snippets/button-story-default-export-with-component.md b/docs/_snippets/button-story-default-export-with-component.md
index bbb92c917a3f..2841563f9a0a 100644
--- a/docs/_snippets/button-story-default-export-with-component.md
+++ b/docs/_snippets/button-story-default-export-with-component.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -10,6 +10,16 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+```
+
 ```js filename="Button.stories.js" renderer="ember" language="js"
 export default {
   component: 'button',
@@ -77,7 +87,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -97,7 +107,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -110,7 +120,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -118,7 +128,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -130,13 +140,35 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -147,6 +179,23 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Button',
+  component: 'demo-button',
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/button-story-default-export.md b/docs/_snippets/button-story-default-export.md
index f78209caa45f..f057bd2d38d1 100644
--- a/docs/_snippets/button-story-default-export.md
+++ b/docs/_snippets/button-story-default-export.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -15,6 +15,21 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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,
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -32,7 +47,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -75,7 +90,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -139,14 +154,14 @@ const meta: Meta<ButtonArgs> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Button',
   component: 'demo-button',
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -157,6 +172,32 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+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: 'demo-button',
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+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: 'demo-button',
+});
+```
+
 ```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -176,6 +217,7 @@ const meta = preview.meta({
 
 ```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({
@@ -187,3 +229,35 @@ const meta = preview.meta({
   component: Button,
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 744c672e2e83..c147fe15fdbe 100644
--- a/docs/_snippets/button-story-disable-addon.md
+++ b/docs/_snippets/button-story-disable-addon.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -13,6 +13,19 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    myAddon: { disable: true }, // Disables the addon
+  },
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
@@ -50,7 +63,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   parameters: {
@@ -59,7 +72,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -72,6 +85,28 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: {
+    myAddon: { disable: true }, // Disables the addon
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: {
+    myAddon: { disable: true }, // Disables the addon
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -94,6 +129,7 @@ const meta = preview.meta({
 
 ```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({
@@ -108,3 +144,41 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 e38a5932f04b..86af960abf46 100644
--- a/docs/_snippets/button-story-grouped.md
+++ b/docs/_snippets/button-story-grouped.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -15,6 +15,21 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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,
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -32,7 +47,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -75,7 +90,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -111,14 +126,14 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Design System/Atoms/Button',
   component: 'demo-button',
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -129,6 +144,24 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Design System/Atoms/Button',
+  component: 'demo-button',
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Design System/Atoms/Button',
+  component: 'demo-button',
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -148,6 +181,7 @@ const meta = preview.meta({
 
 ```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({
@@ -159,3 +193,35 @@ const meta = preview.meta({
   component: Button,
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 de806b452b30..18492a0cf67a 100644
--- a/docs/_snippets/button-story-hoisted.md
+++ b/docs/_snippets/button-story-hoisted.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button as ButtonComponent } from './button.component';
@@ -19,6 +19,24 @@ type Story = StoryObj<ButtonComponent>;
 export const Button: Story = {};
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button as ButtonComponent } from './button.component';
+
+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 filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button as ButtonComponent } from './Button';
 
@@ -57,7 +75,7 @@ type Story = StoryObj<typeof meta>;
 export const Button: Story = {};
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Design System/Atoms/Button',
   component: 'demo-button',
@@ -67,7 +85,7 @@ export default {
 export const Button = {};
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -82,6 +100,30 @@ type Story = StoryObj;
 export const Button: Story = {};
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Design System/Atoms/Button',
+  component: 'demo-button',
+});
+
+// This is the only named export in the file, and it matches the component name
+export const Button = meta.story();
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Design System/Atoms/Button',
+  component: 'demo-component',
+});
+
+// This is the only named export in the file, and it matches the component name
+export const Button = meta.story();
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -104,6 +146,7 @@ export const Button = meta.story();
 
 ```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({
@@ -118,3 +161,41 @@ const meta = preview.meta({
 // This is the only named export in the file, and it matches the component name
 export const Button = meta.story();
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import ButtonComponent from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import ButtonComponent from './Button.vue';
+
+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 608576223e18..dc19544796f2 100644
--- a/docs/_snippets/button-story-hypothetical-example.md
+++ b/docs/_snippets/button-story-hypothetical-example.md
@@ -38,7 +38,9 @@ export const Sample: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+<!-- These serve as abstract examples to inform how frameworks can be built, so "common" is fine here -->
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
 import { Button } from './Button';
@@ -59,8 +61,9 @@ export const Sample = 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 🧪"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-matching-argtypes.md b/docs/_snippets/button-story-matching-argtypes.md
index d615f7cbcfe5..208eed337d27 100644
--- a/docs/_snippets/button-story-matching-argtypes.md
+++ b/docs/_snippets/button-story-matching-argtypes.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -11,6 +11,17 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -24,7 +35,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -55,7 +66,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -83,15 +94,15 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   parameters: { actions: { argTypesRegex: '^on.*' } },
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
   component: 'demo-button',
@@ -101,6 +112,24 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -116,6 +145,7 @@ const meta = preview.meta({
 
 ```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({
@@ -123,3 +153,27 @@ const meta = preview.meta({
   parameters: { actions: { argTypesRegex: '^on.*' } },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 0461a4861721..455860489efa 100644
--- a/docs/_snippets/button-story-onclick-action-spy.md
+++ b/docs/_snippets/button-story-onclick-action-spy.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { fn } from 'storybook/test';
@@ -14,6 +14,20 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { fn } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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() },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -30,7 +44,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { fn } from 'storybook/test';
 
 import Button from './Button.svelte';
@@ -70,7 +84,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -105,10 +119,10 @@ 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 preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
@@ -121,9 +135,10 @@ const meta = preview.meta({
 <!-- 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 preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
@@ -132,3 +147,81 @@ const meta = preview.meta({
   args: { onClick: fn() },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { fn } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { fn } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
+import { fn } from 'storybook/test';
+
+export default {
+  component: 'demo-button',
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/web-components-vite';
+
+import { fn } from 'storybook/test';
+
+const meta: Meta = {
+  component: 'demo-button',
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { fn } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { fn } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 5d0a83b74624..7f2178e2a715 100644
--- a/docs/_snippets/button-story-primary-composition.md
+++ b/docs/_snippets/button-story-primary-composition.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -25,6 +25,30 @@ export const Secondary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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,
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -46,7 +70,7 @@ export const Secondary: Story = {
 <Story name="Secondary" args={{...primaryArgs, primary: false}} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -111,7 +135,7 @@ export const Secondary = {
 <Story name="Secondary" args={{...primaryArgs, primary: false}} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -167,7 +191,7 @@ export const Secondary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
@@ -187,7 +211,7 @@ export const Secondary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -212,6 +236,50 @@ export const Secondary: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    primary: false,
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    primary: false,
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -240,6 +308,7 @@ export const Secondary = meta.story({
 
 ```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({
@@ -260,3 +329,53 @@ export const Secondary = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 30f106263fdd..0e2cc3b42db9 100644
--- a/docs/_snippets/button-story-primary-long-name.md
+++ b/docs/_snippets/button-story-primary-long-name.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -25,6 +25,30 @@ export const PrimaryLongName: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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',
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -50,7 +74,7 @@ export const PrimaryLongName: Story = {
   }} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -119,7 +143,7 @@ export const PrimaryLongName = {
   }} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -175,7 +199,7 @@ export const PrimaryLongName: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
@@ -195,7 +219,7 @@ export const PrimaryLongName = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -220,6 +244,50 @@ export const PrimaryLongName: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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',
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -248,6 +316,7 @@ export const PrimaryLongName = meta.story({
 
 ```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({
@@ -268,3 +337,53 @@ export const PrimaryLongName = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 d39746896791..fd8fa6ffc1d3 100644
--- a/docs/_snippets/button-story-rename-story.md
+++ b/docs/_snippets/button-story-rename-story.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -20,6 +20,25 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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 filename="Button.stories.js" renderer="html" language="js"
 import { createButton } from './Button';
 
@@ -176,7 +195,7 @@ export const Primary: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -193,7 +212,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -216,7 +235,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -233,7 +252,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -255,7 +274,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
@@ -270,7 +289,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -290,6 +309,80 @@ export const Primary: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Primary = meta.story({
+  // 👇 Rename this story
+  name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Primary = meta.story({
+  // 👇 Rename this story
+  name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  // 👇 Rename this story
+  name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index 16817189e13a..ec16735ba7b6 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -32,6 +32,37 @@ export const Tertiary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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 filename="Button.stories.js" renderer="html" language="js"
 import { createButton } from './Button';
 
@@ -281,7 +312,7 @@ export const Tertiary: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -346,7 +377,7 @@ export const Tertiary = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -381,7 +412,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -436,7 +467,7 @@ export const Tertiary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -496,7 +527,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
@@ -523,7 +554,7 @@ export const Tertiary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -555,6 +586,180 @@ export const Tertiary: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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: '📚📕📈🤓',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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: '📚📕📈🤓',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    background: '#ff0',
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Primary.input.args,
+    label: '😄👍😍💯',
+  },
+});
+
+export const Tertiary = meta.story({
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Primary.input.args,
+    label: '📚📕📈🤓',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Primary.input.args,
+    label: '😄👍😍💯',
+  },
+});
+
+export const Tertiary = meta.story({
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Primary.input.args,
+    label: '📚📕📈🤓',
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/button-story-with-addon-example.md b/docs/_snippets/button-story-with-addon-example.md
index 7a5b84ba3008..40486d812154 100644
--- a/docs/_snippets/button-story-with-addon-example.md
+++ b/docs/_snippets/button-story-with-addon-example.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -33,6 +33,38 @@ export const Basic: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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: () => ({
+    template: `<app-button>hello</<app-button>`,
+  }),
+});
+```
+
 ```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import * as React from 'react';
 
@@ -174,7 +206,7 @@ export const Basic: Story = {
 <Story name="Basic"/>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -219,7 +251,7 @@ export const Basic = {};
 <Story name="Basic"/>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -246,7 +278,7 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {};
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -272,7 +304,7 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -308,7 +340,7 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -332,7 +364,7 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -361,6 +393,126 @@ export const Basic: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Button',
+  component: 'custom-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: () => html`<custom-button label="Hello"></custom-button>`,
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Button',
+  component: 'custom-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: () => html`<custom-button label="Hello"></custom-button>`,
+});
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: () => ({
+    components: { Button },
+    template: '<Button label="Hello" />',
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: () => ({
+    components: { Button },
+    template: '<Button label="Hello" />',
+  }),
+});
+```
+
 ```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import * as React from 'react';
 
diff --git a/docs/_snippets/button-story-with-args.md b/docs/_snippets/button-story-with-args.md
index dea019fab309..7db3f5e89117 100644
--- a/docs/_snippets/button-story-with-args.md
+++ b/docs/_snippets/button-story-with-args.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular/';
 
 import { Button } from './button.component';
@@ -18,6 +18,23 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="html" language="js"
 export default {
   /* 👇 The title prop is optional.
@@ -205,7 +222,7 @@ export const Primary: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -240,7 +257,7 @@ export const Primary = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -261,7 +278,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -288,7 +305,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -320,7 +337,67 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
@@ -333,7 +410,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -351,6 +428,36 @@ export const Primary: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md
index 08a4ac063c7f..8f3731ddc5cf 100644
--- a/docs/_snippets/button-story-with-emojis.md
+++ b/docs/_snippets/button-story-with-emojis.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -43,6 +43,48 @@ export const Tertiary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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: () => ({
+    props: {
+      label: 'Button',
+      backgroundColor: '#ff0',
+    },
+  }),
+});
+
+export const Secondary = meta.story({
+  render: () => ({
+    props: {
+      label: '😄👍😍💯',
+      backgroundColor: '#ff0',
+    },
+  }),
+});
+
+export const Tertiary = meta.story({
+  render: () => ({
+    props: {
+      label: '📚📕📈🤓',
+      backgroundColor: '#ff0',
+    },
+  }),
+});
+```
+
 ```js filename="Button.stories.js" renderer="html" language="js"
 import { createButton } from './Button';
 
@@ -215,7 +257,7 @@ export const Tertiary: Story = {
 </Story>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -282,7 +324,7 @@ export const Tertiary = {
 </Story>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -331,7 +373,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -365,7 +407,7 @@ export const Tertiary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -404,7 +446,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -429,7 +471,7 @@ export const Tertiary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -459,6 +501,134 @@ export const Tertiary: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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: () => html`<demo-button .backgroundColor="#ff0" .label="Button"></demo-button>`,
+});
+
+export const Secondary = meta.story({
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="😄👍😍💯"></demo-button>`,
+});
+
+export const Tertiary = meta.story({
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="📚📕📈🤓"></demo-button>`,
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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: () => html`<demo-button .backgroundColor="#ff0" .label="Button"></demo-button>`,
+});
+
+export const Secondary = meta.story({
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="😄👍😍💯"></demo-button>`,
+});
+
+export const Tertiary = meta.story({
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="📚📕📈🤓"></demo-button>`,
+});
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="Button" />',
+  }),
+});
+
+export const Secondary = meta.story({
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />',
+  }),
+});
+
+export const Tertiary = meta.story({
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="Button" />',
+  }),
+});
+
+export const Secondary = meta.story({
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />',
+  }),
+});
+
+export const Tertiary = meta.story({
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
+  }),
+});
+```
+
 ```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/checkbox-story-csf.md b/docs/_snippets/checkbox-story-csf.md
index 4f68fcae77a9..540871a7d53f 100644
--- a/docs/_snippets/checkbox-story-csf.md
+++ b/docs/_snippets/checkbox-story-csf.md
@@ -1,4 +1,4 @@
-```ts filename="CheckBox.stories.ts" renderer="angular" language="ts"
+```ts filename="Checkbox.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Checkbox } from './checkbox.component';
@@ -17,6 +17,22 @@ export const Unchecked: Story = {
 };
 ```
 
+```ts filename="Checkbox.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Checkbox } from './checkbox.component';
+
+const meta = preview.meta({
+  component: Checkbox,
+});
+
+export const Unchecked = meta.story({
+  args: {
+    label: 'Unchecked',
+  },
+});
+```
+
 ```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -36,7 +52,7 @@ export const Unchecked: Story = {
 />
 ```
 
-```js filename="Checkbox.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Checkbox.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Checkbox from './Checkbox.svelte';
 
 export default {
@@ -83,7 +99,7 @@ export const Unchecked = {
 />
 ```
 
-```ts filename="Checkbox.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Checkbox.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -123,10 +139,9 @@ export const Unchecked: Story = {
 };
 ```
 
-```js filename="Checkbox.stories.js" renderer="web-components" language="js"
+```js filename="Checkbox.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
-  title: 'Checkbox',
-  component: 'checkbox',
+  component: 'demo-checkbox',
 };
 
 export const Unchecked = {
@@ -136,11 +151,11 @@ export const Unchecked = {
 };
 ```
 
-```ts filename="Checkbox.stories.ts" renderer="web-components" language="ts"
+```ts filename="Checkbox.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
-  component: 'checkbox-element',
+  component: 'demo-checkbox',
 };
 
 export default meta;
@@ -153,6 +168,34 @@ export const Unchecked: Story = {
 };
 ```
 
+```js filename="Checkbox.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-checkbox',
+});
+
+export const Unchecked = meta.story({
+  args: {
+    label: 'Unchecked',
+  },
+});
+```
+
+```ts filename="Checkbox.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-checkbox',
+});
+
+export const Unchecked = meta.story({
+  args: {
+    label: 'Unchecked',
+  },
+});
+```
+
 ```ts filename="Checkbox.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -173,6 +216,7 @@ export const Unchecked = meta.story({
 
 ```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({
@@ -185,3 +229,37 @@ export const Unchecked = meta.story({
   },
 });
 ```
+
+```ts filename="Checkbox.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Checkbox from './Checkbox.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Checkbox from './Checkbox.vue';
+
+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 d56382188272..7875c44f6f47 100644
--- a/docs/_snippets/checkbox-story-grouped.md
+++ b/docs/_snippets/checkbox-story-grouped.md
@@ -1,4 +1,4 @@
-```ts filename="CheckBox.stories.ts" renderer="angular" language="ts"
+```ts filename="Checkbox.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Checkbox } from './checkbox.component';
@@ -9,17 +9,32 @@ const meta: Meta<Checkbox> = {
    * to learn how to generate automatic titles
    */
   title: 'Design System/Atoms/Checkbox',
-  component: CheckBox,
+  component: Checkbox,
 };
 
 export default meta;
 ```
 
+```ts filename="Checkbox.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Checkbox } from './checkbox.component';
+
+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,
+});
+```
+
 ```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import CheckBox from './Checkbox.svelte';
+  import Checkbox from './Checkbox.svelte';
 
   const { Story } = defineMeta({
     /* 👇 The title prop is optional.
@@ -27,13 +42,13 @@ export default meta;
      * to learn how to generate automatic titles
      */
     title: 'Design System/Atoms/Checkbox',
-    component: CheckBox,
+    component: Checkbox,
   });
 </script>
 ```
 
-```js filename="Checkbox.stories.js" renderer="svelte" language="js" tabTitle="CSF"
-import CheckBox from './Checkbox.svelte';
+```js filename="Checkbox.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
+import Checkbox from './Checkbox.svelte';
 
 export default {
   /* 👇 The title prop is optional.
@@ -41,12 +56,12 @@ export default {
    * to learn how to generate automatic titles
    */
   title: 'Design System/Atoms/Checkbox',
-  component: CheckBox,
+  component: Checkbox,
 };
 ```
 
 ```js filename="Checkbox.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
-import { CheckBox } from './Checkbox';
+import { Checkbox } from './Checkbox';
 
 export default {
   /* 👇 The title prop is optional.
@@ -54,7 +69,7 @@ export default {
    * to learn how to generate automatic titles
    */
   title: 'Design System/Atoms/Checkbox',
-  component: CheckBox,
+  component: Checkbox,
 };
 ```
 
@@ -62,7 +77,7 @@ export default {
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import CheckBox from './Checkbox.svelte';
+  import Checkbox from './Checkbox.svelte';
 
   const { Story } = defineMeta({
     /* 👇 The title prop is optional.
@@ -70,16 +85,16 @@ export default {
      * to learn how to generate automatic titles
      */
     title: 'Design System/Atoms/Checkbox',
-    component: CheckBox,
+    component: Checkbox,
   });
 </script>
 ```
 
-```ts filename="CheckBox.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Checkbox.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
-import CheckBox from './Checkbox.svelte';
+import Checkbox from './Checkbox.svelte';
 
 const meta = {
   /* 👇 The title prop is optional.
@@ -87,17 +102,17 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Design System/Atoms/Checkbox',
-  component: CheckBox,
-} satisfies Meta<typeof CheckBox>;
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>;
 
 export default meta;
 ```
 
-```ts filename="CheckBox.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+```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';
 
-import { CheckBox } from './Checkbox';
+import { Checkbox } from './Checkbox';
 
 const meta = {
   /* 👇 The title prop is optional.
@@ -105,20 +120,20 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Design System/Atoms/Checkbox',
-  component: CheckBox,
-} satisfies Meta<typeof CheckBox>;
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>;
 
 export default meta;
 ```
 
-```js filename="Checkbox.stories.js" renderer="web-components" language="js"
+```js filename="Checkbox.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Design System/Atoms/Checkbox',
   component: 'demo-checkbox',
 };
 ```
 
-```ts filename="CheckBox.stories.ts" renderer="web-components" language="ts"
+```ts filename="Checkbox.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -129,10 +144,28 @@ const meta: Meta = {
 export default meta;
 ```
 
-```ts filename="CheckBox.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="Checkbox.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Design System/Atoms/Checkbox',
+  component: 'demo-checkbox',
+});
+```
+
+```ts filename="Checkbox.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Design System/Atoms/Checkbox',
+  component: 'demo-checkbox',
+});
+```
+
+```ts filename="Checkbox.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { CheckBox } from './Checkbox';
+import { Checkbox } from './Checkbox';
 
 const meta = preview.meta({
   /* 👇 The title prop is optional.
@@ -140,7 +173,7 @@ const meta = preview.meta({
    * to learn how to generate automatic titles
    */
   title: 'Design System/Atoms/Checkbox',
-  component: CheckBox,
+  component: Checkbox,
 });
 ```
 
@@ -148,7 +181,40 @@ const meta = preview.meta({
 
 ```js filename="Checkbox.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
-import { CheckBox } from './Checkbox';
+
+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,
+});
+```
+
+```ts filename="Checkbox.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Checkbox from './Checkbox.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Checkbox from './Checkbox.vue';
 
 const meta = preview.meta({
   /* 👇 The title prop is optional.
@@ -156,6 +222,6 @@ const meta = preview.meta({
    * to learn how to generate automatic titles
    */
   title: 'Design System/Atoms/Checkbox',
-  component: CheckBox,
+  component: Checkbox,
 });
 ```
diff --git a/docs/_snippets/checkbox-story.md b/docs/_snippets/checkbox-story.md
index 75fecb5fec3b..c85a6ddb14c9 100644
--- a/docs/_snippets/checkbox-story.md
+++ b/docs/_snippets/checkbox-story.md
@@ -33,7 +33,7 @@ Use checkboxes to select one or more options from a list of choices.
 ```
 
 <!-- prettier-ignore -->
-```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF 3"
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
diff --git a/docs/_snippets/code-panel-enable-in-preview.md b/docs/_snippets/code-panel-enable-in-preview.md
index 430727de301b..79e2d0fa2a90 100644
--- a/docs/_snippets/code-panel-enable-in-preview.md
+++ b/docs/_snippets/code-panel-enable-in-preview.md
@@ -50,3 +50,67 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 a86dfe85f8e2..bb0b7c8fef41 100644
--- a/docs/_snippets/code-panel-in-meta-and-story.md
+++ b/docs/_snippets/code-panel-in-meta-and-story.md
@@ -1,7 +1,7 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button.component';
+import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -37,6 +37,42 @@ export const Secondary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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,
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
@@ -149,7 +185,7 @@ export const Secondary = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -228,7 +264,7 @@ export const Secondary: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -262,7 +298,7 @@ export const Secondary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -301,7 +337,7 @@ export const Secondary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -335,7 +371,81 @@ export const Secondary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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,
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -372,9 +482,9 @@ export const Secondary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
-  component: 'my-component',
+  component: 'demo-button',
   parameters: {
     docs: {
       // 👇 Enable Code panel for all stories in this file
@@ -404,6 +514,74 @@ export const Secondary = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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,
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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,
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
index b7ce47517de2..13615dce8a37 100644
--- a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
+++ b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -21,6 +21,27 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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 },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -44,7 +65,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -105,7 +126,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -153,7 +174,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   argTypes: {
@@ -170,7 +191,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -191,6 +212,44 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -216,6 +275,7 @@ const meta = preview.meta({
 
 ```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({
@@ -233,3 +293,47 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 9b9ce8f5ee46..a8acd062cd98 100644
--- a/docs/_snippets/component-story-conditional-controls-toggle.md
+++ b/docs/_snippets/component-story-conditional-controls-toggle.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -18,6 +18,24 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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' } },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -38,7 +56,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -90,7 +108,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -132,7 +150,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   argTypes: {
@@ -146,7 +164,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -164,6 +182,38 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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' } },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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' } },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -186,6 +236,7 @@ const meta = preview.meta({
 
 ```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({
@@ -200,3 +251,41 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 56d6e815cb08..4d8e7e791fb0 100644
--- a/docs/_snippets/component-story-custom-args-complex.md
+++ b/docs/_snippets/component-story-custom-args-complex.md
@@ -1,4 +1,4 @@
-```ts filename="YourComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { YourComponent } from './your-component.component';
@@ -40,6 +40,45 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './your-component.component';
+
+const someFunction = (valuePropertyA: String, valuePropertyB: String) => {
+  // Do some logic here
+};
+
+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'],
+    },
+  },
+});
+
+export const ExampleStory = meta.story({
+  render: (args) => {
+    const { propertyA, propertyB } = args;
+    //👇 Assigns the function result to a variable
+    const someFunctionResult = someFunction(propertyA, propertyB);
+    return {
+      props: {
+        ...args,
+        someProperty: someFunctionResult,
+      },
+    };
+  },
+  args: { propertyA: 'Item One', propertyB: 'Another Item One' },
+});
+```
+
 ```jsx filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { YourComponent } from './your-component';
 
@@ -244,7 +283,7 @@ export const ExampleStory: Story = {
 </Story>
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.svelte';
 
 export default {
@@ -323,7 +362,7 @@ export const ExampleStory = {
 </Story>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -369,7 +408,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="vue" language="js"
+```js filename="YourComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.vue';
 
 export default {
@@ -415,7 +454,7 @@ export const ExampleStory = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import YourComponent from './YourComponent.vue';
@@ -466,7 +505,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -507,7 +546,7 @@ export const ExampleStory = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -553,6 +592,190 @@ export const ExampleStory: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'custom-component',
+  //👇 Creates specific argTypes
+  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: ({ propertyA, propertyB }) => {
+    //👇 Assigns the function result to a variable
+    const someFunctionResult = someFunction(propertyA, propertyB);
+
+    return html`
+      <custom-component
+        .propertyA=${propertyA}
+        .propertyB=${propertyB}
+        .someProperty=${someFunctionResult}
+      ></custom-component>
+    `;
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'custom-component',
+  //👇 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: any, valuePropertyB: any) => {
+  // Do some logic here
+};
+
+export const ExampleStory = meta.story({
+  render: ({ propertyA, propertyB }) => {
+    //👇 Assigns the function result to a variable
+    const someFunctionResult = someFunction(propertyA, propertyB);
+
+    return html`
+      <custom-component
+        .propertyA=${propertyA}
+        .propertyB=${propertyB}
+        .someProperty=${someFunctionResult}
+      ></custom-component>
+    `;
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+});
+```
+
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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 functionResult = someFunction(propertyA, propertyB);
+    return {
+      components: { YourComponent },
+      setup() {
+        return {
+          ...args,
+          //👇 Replaces arg variable with the override (without the need of mutation)
+          someProperty: functionResult,
+        };
+      },
+      template:
+        '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
+    };
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="YourComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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 functionResult = someFunction(propertyA, propertyB);
+    return {
+      components: { YourComponent },
+      setup() {
+        return {
+          ...args,
+          //👇 Replaces arg variable with the override (without the need of mutation)
+          someProperty: functionResult,
+        };
+      },
+      template:
+        '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
+    };
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+});
+```
+
 ```tsx filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/component-story-custom-args-icons.md b/docs/_snippets/component-story-custom-args-icons.md
deleted file mode 100644
index fdae31c4b277..000000000000
--- a/docs/_snippets/component-story-custom-args-icons.md
+++ /dev/null
@@ -1,36 +0,0 @@
-```ts filename="Icon.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import Icon from './icon.component';
-
-import { IconA, IconB, IconC, IconD, IconE } from './icons';
-
-// Maps the icons to a JSON serializable object to be safely used with the argTypes
-const iconMap = { IconA, IconB, IconC, IconD, IconE };
-
-const meta: Meta<Icon> = {
-  title: 'My Story with Icons',
-  component: Icon,
-  argTypes: {
-    icon: {
-      options: Object.keys(iconMap),
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<Icon>;
-
-const Template: Story = (args) => {
-  // retrieves the appropriate icon passes it as a component prop
-  const { icon } = args;
-  const selectedIcon = iconMap[icon];
-  return {
-    component: Icon,
-    props: {
-      ...args,
-      icon: selectedIcon,
-    },
-  };
-};
-```
diff --git a/docs/_snippets/component-story-custom-args-mapping.md b/docs/_snippets/component-story-custom-args-mapping.md
index 8b7522fb0b11..ace84d0db205 100644
--- a/docs/_snippets/component-story-custom-args-mapping.md
+++ b/docs/_snippets/component-story-custom-args-mapping.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -30,6 +30,36 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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',
+        },
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -62,7 +92,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
@@ -150,7 +180,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -216,13 +246,121 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
-import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
+import { html } from 'lit';
 
-const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+const arrows = {
+  Up: html`<icon-arrow-up></icon-arrow-up>`,
+  Down: html`<icon-arrow-down></icon-arrow-down>`,
+  Left: html`<icon-arrow-left></icon-arrow-left>`,
+  Right: html`<icon-arrow-right></icon-arrow-right>`,
+};
 
 export default {
   component: 'demo-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
+      },
+    },
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import { html } from 'lit';
+
+import type { Meta } from '@storybook/web-components-vite';
+
+const arrows = {
+  Up: html`<icon-arrow-up></icon-arrow-up>`,
+  Down: html`<icon-arrow-down></icon-arrow-down>`,
+  Left: html`<icon-arrow-left></icon-arrow-left>`,
+  Right: html`<icon-arrow-right></icon-arrow-right>`,
+};
+
+const meta: Meta = {
+  component: 'demo-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
+      },
+    },
+  },
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const arrows = {
+  Up: html`<icon-arrow-up></icon-arrow-up>`,
+  Down: html`<icon-arrow-down></icon-arrow-down>`,
+  Left: html`<icon-arrow-left></icon-arrow-left>`,
+  Right: html`<icon-arrow-right></icon-arrow-right>`,
+};
+
+const meta = preview.meta({
+  component: 'demo-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
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const arrows = {
+  Up: html`<icon-arrow-up></icon-arrow-up>`,
+  Down: html`<icon-arrow-down></icon-arrow-down>`,
+  Left: html`<icon-arrow-left></icon-arrow-left>`,
+  Right: html`<icon-arrow-right></icon-arrow-right>`,
+};
+
+const meta = preview.meta({
+  component: 'demo-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
+      },
+    },
+  },
+});
+```
+
+```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
@@ -239,18 +377,22 @@ export default {
       },
     },
   },
-};
+});
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta } from '@storybook/web-components-vite';
+<!-- 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: Meta = {
-  component: 'demo-button',
+const meta = preview.meta({
+  component: Button,
   argTypes: {
     arrow: {
       options: Object.keys(arrows), // An array of serializable values
@@ -267,15 +409,13 @@ const meta: Meta = {
       },
     },
   },
-};
-
-export default meta;
+});
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Button } from './Button';
+import Button from './Button.vue';
 
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
@@ -304,9 +444,10 @@ const meta = preview.meta({
 
 <!-- JS snippets still needed while providing both CSF 3 & Next -->
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
-import { Button } from './Button';
+
+import Button from './Button.vue';
 
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
diff --git a/docs/_snippets/component-story-disable-controls-alt.md b/docs/_snippets/component-story-disable-controls-alt.md
index 6f1f5555b859..e8fbdb742aa8 100644
--- a/docs/_snippets/component-story-disable-controls-alt.md
+++ b/docs/_snippets/component-story-disable-controls-alt.md
@@ -1,7 +1,7 @@
-```ts filename="YourComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { YourComponent } from './YourComponent.component';
+import { YourComponent } from './your-component.component';
 
 const meta: Meta<YourComponent> = {
   component: YourComponent,
@@ -16,6 +16,22 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './your-component.component';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -34,7 +50,7 @@ export default meta;
 </script>
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.svelte';
 
 export default {
@@ -80,7 +96,7 @@ export default {
 </script>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -118,7 +134,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js" renderer="web-components" language="js"
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'your-component',
   argTypes: {
@@ -130,7 +146,7 @@ export default {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -146,6 +162,34 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'your-component',
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+});
+```
+
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'your-component',
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+});
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -166,6 +210,7 @@ const meta = preview.meta({
 
 ```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({
@@ -178,3 +223,37 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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 fbd5a3289f38..58557e17aac4 100644
--- a/docs/_snippets/component-story-disable-controls-regex.md
+++ b/docs/_snippets/component-story-disable-controls-regex.md
@@ -1,7 +1,7 @@
-```ts filename="YourComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { YourComponent } from './YourComponent.component';
+import { YourComponent } from './your-component.component';
 
 const meta: Meta<YourComponent> = {
   component: YourComponent,
@@ -35,6 +35,40 @@ export const RegexExclude: Story = {
 };
 ```
 
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './your-component.component';
+
+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*/ },
+  },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -75,7 +109,7 @@ export const RegexExclude: Story = {
 />
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.svelte';
 
 export default {
@@ -179,7 +213,7 @@ export const RegexExclude = {
 />
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -255,7 +289,7 @@ export const RegexExclude: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="web-components" language="js"
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'your-component',
 };
@@ -285,7 +319,7 @@ export const RegexExclude = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -320,6 +354,70 @@ export const RegexExclude: Story = {
 };
 ```
 
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'your-component',
+});
+
+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*/ },
+  },
+});
+```
+
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'your-component',
+});
+
+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*/ },
+  },
+});
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -358,6 +456,7 @@ export const RegexExclude = meta.story({
 
 ```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({
@@ -388,3 +487,73 @@ export const RegexExclude = meta.story({
   },
 });
 ```
+
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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 8b7ac63093af..7d42eacacc24 100644
--- a/docs/_snippets/component-story-disable-controls.md
+++ b/docs/_snippets/component-story-disable-controls.md
@@ -1,7 +1,7 @@
-```ts filename="YourComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { YourComponent } from './YourComponent.component';
+import { YourComponent } from './your-component.component';
 
 const meta: Meta<YourComponent> = {
   component: YourComponent,
@@ -18,6 +18,24 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './your-component.component';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -38,7 +56,7 @@ export default meta;
 </script>
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.svelte';
 
 export default {
@@ -90,7 +108,7 @@ export default {
 </script>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -132,7 +150,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js" renderer="web-components" language="js"
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'your-component',
   argTypes: {
@@ -146,7 +164,7 @@ export default {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -164,6 +182,38 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'your-component',
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+});
+```
+
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'your-component',
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+});
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -186,6 +236,7 @@ const meta = preview.meta({
 
 ```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({
@@ -200,3 +251,41 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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 905e3e690bec..fa1ebf3a3de8 100644
--- a/docs/_snippets/component-story-figma-integration.md
+++ b/docs/_snippets/component-story-figma-integration.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 // More on default export: https://storybook.js.org/docs/writing-stories/#default-export
 const meta: Meta<MyComponent> = {
@@ -21,6 +21,26 @@ export const Example: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+// 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 filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -124,7 +144,7 @@ export const Example: Story = {
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 // More on default export: https://storybook.js.org/docs/writing-stories/#default-export
@@ -164,7 +184,7 @@ export const Example = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -188,7 +208,7 @@ export const Example: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.vue';
 
 // More on default export: https://storybook.js.org/docs/writing-stories/#default-export
@@ -206,7 +226,7 @@ export const Example = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MyComponent from './MyComponent.vue';
@@ -229,7 +249,49 @@ export const Example: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+// 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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+// 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 filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-component',
 };
@@ -244,7 +306,7 @@ export const Example = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -264,6 +326,40 @@ export const Example: Story = {
 };
 ```
 
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const Example = meta.story({
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const Example = meta.story({
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+});
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/component-story-highlight.md b/docs/_snippets/component-story-highlight.md
index 301b45c2285a..99d754c88ff1 100644
--- a/docs/_snippets/component-story-highlight.md
+++ b/docs/_snippets/component-story-highlight.md
@@ -1,11 +1,10 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { componentWrapperDecorator } from '@storybook/angular';
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, componentWrapperDecorator } from '@storybook/angular';
 
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -27,6 +26,33 @@ export const Highlighted: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator } from '@storybook/angular';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    componentWrapperDecorator((story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+      });
+      return story;
+    }),
+  ],
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
@@ -107,7 +133,7 @@ export const Highlighted: Story = {
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -158,7 +184,7 @@ export const Highlighted = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -187,7 +213,7 @@ export const Highlighted: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -212,7 +238,7 @@ export const Highlighted = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -242,7 +268,7 @@ export const Highlighted: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -263,7 +289,7 @@ export const Highlighted = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -289,12 +315,114 @@ export const Highlighted: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
 import preview from '../.storybook/preview';
 
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+      });
+      return story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+      });
+      return story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
@@ -317,10 +445,11 @@ export const Highlighted = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/component-story-sort-controls.md b/docs/_snippets/component-story-sort-controls.md
index 433952248d7d..bd9750f94a93 100644
--- a/docs/_snippets/component-story-sort-controls.md
+++ b/docs/_snippets/component-story-sort-controls.md
@@ -1,7 +1,7 @@
-```ts filename="YourComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta } from  from '@storybook/angular';
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/angular';
 
-import { YourComponent } from './YourComponent.component';
+import { YourComponent } from './your-component.component';
 
 const meta: Meta<YourComponent> = {
   component: YourComponent,
@@ -11,6 +11,17 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './your-component.component';
+
+const meta = preview.meta({
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -24,7 +35,7 @@ export default meta;
 </script>
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.svelte';
 
 export default {
@@ -55,7 +66,7 @@ export default {
 </script>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -83,14 +94,14 @@ const meta = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js" renderer="web-components" language="js"
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'your-component',
   parameters: { controls: { sort: 'requiredFirst' } },
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -101,6 +112,24 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'your-component',
+  parameters: { controls: { sort: 'requiredFirst' } },
+});
+```
+
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'your-component',
+  parameters: { controls: { sort: 'requiredFirst' } },
+});
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -116,6 +145,7 @@ const meta = preview.meta({
 
 ```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({
@@ -123,3 +153,27 @@ const meta = preview.meta({
   parameters: { controls: { sort: 'requiredFirst' } },
 });
 ```
+
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+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 22b3d6af76ea..c287b1197268 100644
--- a/docs/_snippets/component-story-static-asset-cdn.md
+++ b/docs/_snippets/component-story-static-asset-cdn.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -20,6 +20,25 @@ export const WithAnImage: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const WithAnImage = meta.story({
+  render: () => ({
+    props: {
+      src: 'https://storybook.js.org/images/placeholders/350x150.png',
+      alt: 'My CDN placeholder',
+    },
+  }),
+});
+```
+
 ```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -106,7 +125,7 @@ export const WithAnImage: Story = {
 </Story>
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -143,7 +162,7 @@ export const WithAnImage = {
 </Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -167,7 +186,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.vue';
 
 export default {
@@ -182,7 +201,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MyComponent from './MyComponent.vue';
@@ -202,7 +221,43 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const WithAnImage = meta.story({
+  render: () => ({
+    template:
+      '<img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder"/>',
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const WithAnImage = meta.story({
+  render: () => ({
+    template:
+      '<img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder"/>',
+  }),
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -218,7 +273,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -239,6 +294,42 @@ export const WithAnImage: Story = {
 };
 ```
 
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const WithAnImage = meta.story({
+  render: () =>
+    html`<img
+      src="https://storybook.js.org/images/placeholders/350x150.png"
+      alt="My CDN placeholder"
+    />`,
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const WithAnImage = meta.story({
+  render: () =>
+    html`<img
+      src="https://storybook.js.org/images/placeholders/350x150.png"
+      alt="My CDN placeholder"
+    />`,
+});
+```
+
 ```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index be6e5f3848d8..340bb95105b6 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 import imageFile from './static/image.png';
 
@@ -28,6 +28,33 @@ export const WithAnImage: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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: () => ({
+    props: {
+      src: image.src,
+      alt: image.alt,
+    },
+    template: `<img src="{{src}}" alt="{{alt}}" />`,
+  }),
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -138,7 +165,7 @@ export const WithAnImage: Story = {
 </Story>
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 import imageFile from './static/image.png';
@@ -183,7 +210,7 @@ export const WithAnImage = {
 </Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -211,7 +238,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.vue';
 
 import imageFile from './static/image.png';
@@ -228,7 +255,7 @@ const image = {
 export const WithAnImage = {
   render: () => ({
     setup() {
-      //👇 Returns the content of the image object create above.
+      //👇 Returns the content of the image object created above.
       return { image };
     },
     template: `<img v-bind="image"/>`,
@@ -236,7 +263,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MyComponent from './MyComponent.vue';
@@ -258,7 +285,7 @@ type Story = StoryObj<typeof meta>;
 export const WithAnImage: Story = {
   render: () => ({
     setup() {
-      //👇 Returns the content of the image object create above.
+      //👇 Returns the content of the image object created above.
       return { image };
     },
     template: `<img v-bind="image"/>`,
@@ -266,7 +293,63 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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: () => ({
+    setup() {
+      //👇 Returns the content of the image object created above.
+      return { image };
+    },
+    template: `<img v-bind="image"/>`,
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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: () => ({
+    setup() {
+      //👇 Returns the content of the image object created above.
+      return { image };
+    },
+    template: `<img v-bind="image"/>`,
+  }),
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 import imageFile from './static/image.png';
@@ -285,7 +368,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -309,6 +392,48 @@ export const WithAnImage: Story = {
 };
 ```
 
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+import imageFile from './static/image.png';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const WithAnImage = meta.story({
+  render: () => html`<img src=${image.src} alt=${image.alt} /> `,
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+import imageFile from './static/image.png';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const WithAnImage = meta.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';
 
diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
index 6fb9370187fd..eb5cbda6e5b6 100644
--- a/docs/_snippets/component-story-static-asset-without-import.md
+++ b/docs/_snippets/component-story-static-asset-without-import.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -21,6 +21,26 @@ export const WithAnImage: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.story({
+  render: () => ({
+    props: {
+      src: '/image.png',
+      alt: 'my image',
+    },
+  }),
+});
+```
+
 ```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -100,7 +120,7 @@ export const WithAnImage: Story = {
 </Story>
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -135,7 +155,7 @@ export const WithAnImage = {
 </Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -160,7 +180,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.vue';
 
 export default {
@@ -175,7 +195,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MyComponent from './MyComponent.vue';
@@ -194,7 +214,43 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.story({
+  render: () => ({
+    template: '<img src="image.png" alt="my image" />',
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.story({
+  render: () => ({
+    template: '<img src="image.png" alt="my image" />',
+  }),
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -207,7 +263,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -225,6 +281,36 @@ export const WithAnImage: Story = {
 };
 ```
 
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.story({
+  render: () => html`<img src="/image.png" alt="image" />`,
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.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';
 
diff --git a/docs/_snippets/component-story-with-custom-render-function.md b/docs/_snippets/component-story-with-custom-render-function.md
index 22469fcfd584..c5bce4b0fb1c 100644
--- a/docs/_snippets/component-story-with-custom-render-function.md
+++ b/docs/_snippets/component-story-with-custom-render-function.md
@@ -1,11 +1,10 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata, argsToTemplate } from '@storybook/angular';
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, moduleMetadata, argsToTemplate } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import { Layout } from './Layout.component';
-import { MyComponent } from './MyComponent.component';
+import { Layout } from './layout.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -38,6 +37,44 @@ export const Example: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { moduleMetadata, argsToTemplate } from '@storybook/angular';
+
+import { CommonModule } from '@angular/common';
+
+import preview from '../.storybook/preview';
+
+import { Layout } from './layout.component';
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [Layout],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+// This story uses a render function to fully control how the component renders.
+export const Example = meta.story({
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-layout>
+        <header>
+          <h1>Example</h1>
+        </header>
+        <article>
+          <app-my-component ${argsToTemplate(args)}></app-my-component>
+        </article>
+      </app-layout>
+    `,
+  }),
+});
+```
+
 ```jsx filename="MyComponent.stories.js|jsx" renderer="preact" language="js"
 /** @jsx h */
 import { h } from 'preact';
@@ -116,6 +153,56 @@ 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>
+  ),
+});
+```
+
+```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>
+  ),
+});
+```
+
 ```jsx filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { Layout } from './Layout';
 import { MyComponent } from './MyComponent';
@@ -168,7 +255,7 @@ export const Example: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Layout from './Layout.vue';
 import MyComponent from './MyComponent.vue';
 
@@ -194,7 +281,7 @@ export const Example = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Layout from './Layout.vue';
@@ -225,7 +312,63 @@ export const Example: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Layout from './Layout.vue';
+import MyComponent from './MyComponent.vue';
+
+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: () => ({
+    components: { Layout, MyComponent },
+    template: `
+      <Layout>
+        <header>
+          <h1>Example</h1>
+        </header>
+        <article>
+          <MyComponent />
+        </article>
+      </Layout>
+    `,
+  }),
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Layout from './Layout.vue';
+import MyComponent from './MyComponent.vue';
+
+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: () => ({
+    components: { Layout, MyComponent },
+    template: `
+      <Layout>
+        <header>
+          <h1>Example</h1>
+        </header>
+        <article>
+          <MyComponent />
+        </article>
+      </Layout>
+    `,
+  }),
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -235,19 +378,19 @@ export default {
 // This story uses a render function to fully control how the component renders.
 export const Example = {
   render: () => html`
-    <layout>
+    <my-layout>
       <header>
         <h1>Example</h1>
       </header>
       <article>
         <my-component />
       </article>
-    </layout>
+    </my-layout>
   `,
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -262,67 +405,63 @@ type Story = StoryObj;
 // This story uses a render function to fully control how the component renders.
 export const Example: Story = {
   render: () => html`
-    <layout>
+    <my-layout>
       <header>
         <h1>Example</h1>
       </header>
       <article>
         <my-component />
       </article>
-    </layout>
+    </my-layout>
   `,
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
-import preview from '../.storybook/preview';
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
 
-import { Layout } from './Layout';
-import { MyComponent } from './MyComponent';
+import preview from '../.storybook/preview';
 
 const meta = preview.meta({
-  component: MyComponent,
+  component: 'my-component',
 });
 
 // This story uses a render function to fully control how the component renders.
 export const Example = meta.story({
-  render: () => (
-    <Layout>
+  render: () => html`
+    <my-layout>
       <header>
         <h1>Example</h1>
       </header>
       <article>
-        <MyComponent />
+        <my-component />
       </article>
-    </Layout>
-  ),
+    </my-layout>
+  `,
 });
 ```
 
-<!-- JS snippets still needed while providing both CSF 3 & Next -->
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
 
-```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,
+  component: 'my-component',
 });
 
 // This story uses a render function to fully control how the component renders.
 export const Example = meta.story({
-  render: () => (
-    <Layout>
+  render: () => html`
+    <my-layout>
       <header>
         <h1>Example</h1>
       </header>
       <article>
-        <MyComponent />
+        <my-component />
       </article>
-    </Layout>
-  ),
+    </my-layout>
+  `,
 });
 ```
 
diff --git a/docs/_snippets/component-test-with-testing-library.md b/docs/_snippets/component-test-with-testing-library.md
index f9e40f70c163..c396bcb9b4c9 100644
--- a/docs/_snippets/component-test-with-testing-library.md
+++ b/docs/_snippets/component-test-with-testing-library.md
@@ -1,7 +1,7 @@
 ```ts filename="form.component.spec.ts" renderer="angular" language="ts"
 import { render, screen, fireEvent } from '@testing-library/angular';
 
-import { FormComponent } from './LoginForm.component';
+import { FormComponent } from './login-form.component';
 
 import { InvalidForm } from './Form.stories'; //👈 Our stories imported here.
 
diff --git a/docs/_snippets/configure-mock-provider-with-story-parameter.md b/docs/_snippets/configure-mock-provider-with-story-parameter.md
index aeab82d42604..37c33603ddec 100644
--- a/docs/_snippets/configure-mock-provider-with-story-parameter.md
+++ b/docs/_snippets/configure-mock-provider-with-story-parameter.md
@@ -6,7 +6,7 @@ export default {
 };
 
 // Wrapped in light theme
-export const Default = {};
+export const Basic = {};
 
 // Wrapped in dark theme
 export const Dark = {
@@ -30,7 +30,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Wrapped in light theme
-export const Default: Story = {};
+export const Basic: Story = {};
 
 // Wrapped in dark theme
 export const Dark: Story = {
@@ -50,7 +50,7 @@ const meta = preview.meta({
 });
 
 // Wrapped in light theme
-export const Default = meta.story();
+export const Basic = meta.story();
 
 // Wrapped in dark theme
 export const Dark = meta.story({
@@ -64,6 +64,7 @@ export const Dark = meta.story({
 
 ```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({
@@ -71,7 +72,7 @@ const meta = preview.meta({
 });
 
 // Wrapped in light theme
-export const Default = meta.story();
+export const Basic = meta.story();
 
 // Wrapped in dark theme
 export const Dark = meta.story({
diff --git a/docs/_snippets/csf-2-example-story.md b/docs/_snippets/csf-2-example-story.md
index 6152f2b18d4b..37834df86da6 100644
--- a/docs/_snippets/csf-2-example-story.md
+++ b/docs/_snippets/csf-2-example-story.md
@@ -1,33 +1,33 @@
 ```ts filename="CSF 2 - Button.stories.ts" renderer="angular" language="ts"
 // Other imports and story implementation
-export const Default: Story = (args) => ({
+export const Basic: Story = (args) => ({
   props: args,
 });
 ```
 
 ```js filename="CSF 2 - Button.stories.js|jsx" renderer="react" language="js"
 // Other imports and story implementation
-export const Default = (args) => <Button {...args} />;
+export const Basic = (args) => <Button {...args} />;
 ```
 
 ```ts filename="CSF 2 - Button.stories.ts|tsx" renderer="react" language="ts"
 // Other imports and story implementation
-export const Default: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+export const Basic: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 ```
 
 ```js filename="CSF 2 - Button.stories.js|jsx" renderer="solid" language="js"
 // Other imports and story implementation
-export const Default = (args) => <Button {...args} />;
+export const Basic = (args) => <Button {...args} />;
 ```
 
 ```ts filename="CSF 2 - Button.stories.ts|tsx" renderer="solid" language="ts"
 // Other imports and story implementation
-export const Default: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+export const Basic: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 ```
 
 ```js filename="CSF 2 - Button.stories.js" renderer="svelte" language="js"
 // Other imports and story implementation
-export const Default = (args) => ({
+export const Basic = (args) => ({
   Component: Button,
   props: args,
 });
@@ -35,7 +35,7 @@ export const Default = (args) => ({
 
 ```ts filename="CSF 2 - Button.stories.ts" renderer="svelte" language="ts"
 // Other imports and story implementation
-export const Default: StoryFn<typeof Button> = (args) => ({
+export const Basic: StoryFn<typeof Button> = (args) => ({
   Component: Button,
   props: args,
 });
@@ -43,7 +43,7 @@ export const Default: StoryFn<typeof Button> = (args) => ({
 
 ```js filename="CSF 2 - Button.stories.js" renderer="vue" language="js"
 // Other imports and story implementation
-export const Default = (args) => ({
+export const Basic = (args) => ({
   components: { Button },
   setup() {
     return { args };
@@ -54,7 +54,7 @@ export const Default = (args) => ({
 
 ```ts filename="CSF 2 - Button.stories.ts" renderer="vue" language="ts"
 // Other imports and story implementation
-export const Default: StoryFn<typeof Button> = (args) => ({
+export const Basic: StoryFn<typeof Button> = (args) => ({
   components: { Button },
   setup() {
     return { args };
@@ -66,13 +66,13 @@ export const Default: StoryFn<typeof Button> = (args) => ({
 ```js filename="CSF 2 - Button.stories.js" renderer="web-components" language="js"
 // Other imports and story implementation
 
-export const Default = ({ primary, size, label }) =>
+export const Basic = ({ primary, size, label }) =>
   html`<custom-button ?primary=${primary} size=${size} label=${label}></custom-button>`;
 ```
 
 ```ts filename="CSF 2 - Button.stories.ts" renderer="web-components" language="ts"
 // Other imports and story implementation
 
-export const Default: Story = ({ primary, backgroundColor, size, label }) =>
+export const Basic: Story = ({ primary, backgroundColor, size, label }) =>
   html`<custom-button ?primary=${primary} size=${size} label=${label}></custom-button>`;
 ```
diff --git a/docs/_snippets/csf-3-example-default-render.md b/docs/_snippets/csf-3-example-default-render.md
index 87fb0d060c3d..c4da9feb1aeb 100644
--- a/docs/_snippets/csf-3-example-default-render.md
+++ b/docs/_snippets/csf-3-example-default-render.md
@@ -1,3 +1,3 @@
 ```js filename="CSF 3 - Button.stories.js|jsx|ts|tsx" renderer="common" language="js"
-export const Default = {};
+export const Basic = {};
 ```
diff --git a/docs/_snippets/csf-3-example-render.md b/docs/_snippets/csf-3-example-render.md
index 0eba075462f4..0ef06ff4e4ab 100644
--- a/docs/_snippets/csf-3-example-render.md
+++ b/docs/_snippets/csf-3-example-render.md
@@ -1,6 +1,6 @@
 ```ts filename="CSF 3 - Button.stories.ts" renderer="angular" language="ts"
 // Other imports and story implementation
-export const Default: Story = {
+export const Basic: Story = {
   render: (args) => ({
     props: args,
   }),
@@ -9,35 +9,35 @@ export const Default: Story = {
 
 ```js filename="CSF 3 - Button.stories.js|jsx" renderer="react" language="js"
 // Other imports and story implementation
-export const Default = {
+export const Basic = {
   render: (args) => <Button {...args} />,
 };
 ```
 
 ```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="react" language="ts"
 // Other imports and story implementation
-export const Default: Story = {
+export const Basic: Story = {
   render: (args) => <Button {...args} />,
 };
 ```
 
 ```js filename="CSF 3 - Button.stories.js|jsx" renderer="solid" language="js"
 // Other imports and story implementation
-export const Default = {
+export const Basic = {
   render: (args) => <Button {...args} />,
 };
 ```
 
 ```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="solid" language="ts"
 // Other imports and story implementation
-export const Default: Story = {
+export const Basic: Story = {
   render: (args) => <Button {...args} />,
 };
 ```
 
 ```js filename="CSF 3 - Button.stories.js" renderer="svelte" language="js"
 // Other imports and story implementation
-export const Default = {
+export const Basic = {
   render: (args) => ({
     Component: Button,
     props: args,
@@ -47,7 +47,7 @@ export const Default = {
 
 ```ts filename="CSF 3 - Button.stories.ts" renderer="svelte" language="ts"
 // Other imports and story implementation
-export const Default: Story = {
+export const Basic: Story = {
   render: (args) => ({
     Component: Button,
     props: args,
@@ -57,7 +57,7 @@ export const Default: Story = {
 
 ```js filename="CSF 3 - Button.stories.js" renderer="vue" language="js"
 // Other imports and story implementation
-export const Default = {
+export const Basic = {
   render: (args) => ({
     components: { Button },
     setup() {
@@ -70,7 +70,7 @@ export const Default = {
 
 ```ts filename="CSF 3 - Button.stories.ts" renderer="vue" language="ts"
 // Other imports and story implementation
-export const Default: Story = {
+export const Basic: Story = {
   render: (args) => ({
     components: { Button },
     setup() {
@@ -84,15 +84,15 @@ export const Default: Story = {
 ```js filename="CSF 3 - Button.stories.js" renderer="web-components" language="js"
 // Other imports and story implementation
 
-export const Default = {
+export const Basic = {
   render: (args) => html`<demo-button label="Hello" @click=${action('clicked')}></demo-button>`,
 };
 ```
 
-```js filename="CSF 3 - Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="web-components" language="ts"
 // Other imports and story implementation
 
-export const Default: Story = {
-  render: (args) => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
+export const Basic: Story = {
+  render: (args) => html`<demo-button label="Hello" @click=${action('clicked')}></demo-button>`,
 };
 ```
diff --git a/docs/_snippets/decorator-parameterized-in-preview.md b/docs/_snippets/decorator-parameterized-in-preview.md
index e904a61d6428..eaae6d39922b 100644
--- a/docs/_snippets/decorator-parameterized-in-preview.md
+++ b/docs/_snippets/decorator-parameterized-in-preview.md
@@ -1,6 +1,5 @@
-```ts filename=".storybook/preview.ts" renderer="angular" language="ts"
-import type { Preview } from '@storybook/angular';
-import { componentWrapperDecorator } from '@storybook/angular';
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Preview, componentWrapperDecorator } from '@storybook/angular';
 
 const preview: Preview = {
   decorators: [
@@ -158,7 +157,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="vue" language="js"
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF 3"
 export default {
   decorators: [
     // 👇 Defining the decorator in the preview file applies it to all stories
@@ -180,7 +179,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts"
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Preview } from '@storybook/vue3-vite';
 
 const preview: Preview = {
@@ -282,7 +281,7 @@ export default preview;
 </div>
 ```
 
-```ts filename=".storybook/preview.ts" renderer="web-components" language="ts"
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Preview } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -310,7 +309,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="Preview"
+```js filename=".storybook/preview.js" renderer="web-components" language="js"  tabTitle="CSF 3"
 import { html } from 'lit';
 
 const preview = {
@@ -407,3 +406,131 @@ export default definePreview({
   ],
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (_, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case 'page':
+          // Your page layout is probably a little more complex than this
+          return { template: '<div class="page-layout"><story/></div>' };
+        case 'page-mobile':
+          return { template: '<div class="page-mobile-layout"><story/></div>' };
+        default:
+          // In the default case, don't apply a layout
+          return { template: '<story/>' };
+      }
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (_, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case 'page':
+          // Your page layout is probably a little more complex than this
+          return { template: '<div class="page-layout"><story/></div>' };
+        case 'page-mobile':
+          return { template: '<div class="page-mobile-layout"><story/></div>' };
+        default:
+          // In the default case, don't apply a layout
+          return { template: '<story/>' };
+      }
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview, componentWrapperDecorator } from '@storybook/angular';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    componentWrapperDecorator((story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case 'page':
+          //  Your page layout is probably a little more complex than this
+          return `<div class="page-layout">${story}</div>`;
+        case 'page-mobile':
+          return `<div class="page-mobile-layout">${story}</div>`;
+        default:
+          // In the default case, don't apply a layout
+          return story;
+      }
+    }),
+  ],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import { definePreview } from '@storybook/web-components-vite';
+
+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':
+          // Your page layout is probably a little more complex than this
+          return html`<div class="page-layout">${story()}</div>`;
+        case 'page-mobile':
+          return html`<div class="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.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import { definePreview } from '@storybook/web-components-vite';
+
+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':
+          // Your page layout is probably a little more complex than this
+          return html`<div class="page-layout">${story()}</div>`;
+        case 'page-mobile':
+          return html`<div class="page-mobile-layout">${story()}</div>`;
+        default:
+          // In the default case, don't apply a layout
+          return story();
+      }
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/document-screen-fetch.md b/docs/_snippets/document-screen-fetch.md
index 8c49340ffacb..5390a611bc12 100644
--- a/docs/_snippets/document-screen-fetch.md
+++ b/docs/_snippets/document-screen-fetch.md
@@ -1,4 +1,4 @@
-```ts filename="YourPage.component.ts" renderer="angular" language="ts"
+```ts filename="your-page.component.ts" renderer="angular" language="ts"
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
@@ -35,7 +35,7 @@ export class DocumentScreen implements OnInit {
         this.loading = false;
         this.user = data.user;
         this.document = data.document;
-        this.documents.data.subdocuments;
+        this.subdocuments = data.subdocuments;
       },
       error: (error) => {
         this.error = true;
@@ -370,7 +370,7 @@ export function DocumentScreen() {
   import DocumentList from './DocumentList';
 
   export default defineComponent({
-    name: 'SampleRestComponent',
+    name: 'DocumentScreen',
     components: {
       PageLayout,
       DocumentHeader,
@@ -434,7 +434,7 @@ class DocumentScreen extends LitElement {
         if (!response.ok) {
           throw new Error('Network response was not ok');
         }
-        response.json();
+        return response.json();
       })
       .then((data) => {
         this._status = 'success';
diff --git a/docs/_snippets/document-screen-with-graphql.md b/docs/_snippets/document-screen-with-graphql.md
index 533541b25496..c83e909ff0b8 100644
--- a/docs/_snippets/document-screen-with-graphql.md
+++ b/docs/_snippets/document-screen-with-graphql.md
@@ -1,4 +1,4 @@
-```ts filename="YourPage.component.ts" renderer="angular" language="ts"
+```ts filename="your-page.component.ts" renderer="angular" language="ts"
 import { Component, OnInit } from '@angular/core';
 import { Apollo } from 'apollo-angular';
 import gql from 'graphql-tag';
diff --git a/docs/_snippets/essential-feature-disable.md b/docs/_snippets/essential-feature-disable.md
index a6037fb78337..5f875e1c4a2a 100644
--- a/docs/_snippets/essential-feature-disable.md
+++ b/docs/_snippets/essential-feature-disable.md
@@ -52,3 +52,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    backgrounds: false, // 👈 disable the backgrounds feature
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    backgrounds: false, // 👈 disable the backgrounds feature
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 c1bcee563ff4..1403194e2c69 100644
--- a/docs/_snippets/foo-bar-baz-story.md
+++ b/docs/_snippets/foo-bar-baz-story.md
@@ -1,7 +1,7 @@
-```ts filename="FooBar.stories.ts" renderer="angular" language="ts"
+```ts filename="FooBar.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Foo } from './Foo.component';
+import { Foo } from './foo.component';
 
 const meta: Meta<Foo> = {
   /* 👇 The title prop is optional.
@@ -18,6 +18,23 @@ type Story = StoryObj<Foo>;
 export const Baz: Story = {};
 ```
 
+```ts filename="FooBar.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Foo } from './foo.component';
+
+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();
+```
+
 ```svelte filename="FooBar.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -37,7 +54,7 @@ export const Baz: Story = {};
 <Story name="Baz" />
 ```
 
-```js filename="FooBar.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="FooBar.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Foo from './Foo.svelte';
 
 export default {
@@ -86,7 +103,7 @@ export const Baz = {};
 <Story name="Baz" />
 ```
 
-```ts filename="FooBar.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="FooBar.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -162,3 +179,99 @@ const meta = preview.meta({
 
 export const Baz = meta.story();
 ```
+
+```ts filename="FooBar.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Foo from './Foo.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import Foo from './Foo.vue';
+
+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 filename="FooBar.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
+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: 'Foo/Bar',
+  component: 'demo-foo',
+};
+
+export const Baz = {};
+```
+
+```ts filename="FooBar.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+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: 'Foo/Bar',
+  component: 'demo-foo',
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Baz: Story = {};
+```
+
+```js filename="FooBar.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+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: 'demo-foo',
+});
+
+export const Baz = meta.story();
+```
+
+```ts filename="FooBar.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+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: 'demo-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 e87f4f2ad6f6..9b66d881b9d4 100644
--- a/docs/_snippets/gizmo-story-controls-customization.md
+++ b/docs/_snippets/gizmo-story-controls-customization.md
@@ -1,7 +1,7 @@
-```ts filename="Gizmo.stories.ts" renderer="angular" language="ts"
+```ts filename="Gizmo.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Gizmo } from './Gizmo.component';
+import { Gizmo } from './gizmo.component';
 
 const meta: Meta<Gizmo> = {
   component: Gizmo,
@@ -57,6 +57,63 @@ const meta: Meta<Gizmo> = {
 export default meta;
 ```
 
+```ts filename="Gizmo.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Gizmo } from './gizmo.component';
+
+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',
+    },
+  },
+});
+```
+
 ```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -116,7 +173,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Gizmo.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Gizmo.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Gizmo from './Gizmo.svelte';
 
 export default {
@@ -285,7 +342,7 @@ export default {
 </script>
 ```
 
-```ts filename="Gizmo.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Gizmo.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -405,7 +462,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Gizmo.stories.js" renderer="web-components" language="js"
+```js filename="Gizmo.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'gizmo-element',
   argTypes: {
@@ -458,7 +515,7 @@ export default {
 };
 ```
 
-```ts filename="Gizmo.stories.ts" renderer="web-components" language="ts"
+```ts filename="Gizmo.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -515,6 +572,116 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Gizmo.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'gizmo-element',
+  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',
+    },
+  },
+});
+```
+
+```ts filename="Gizmo.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'gizmo-element',
+  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',
+    },
+  },
+});
+```
+
 ```ts filename="Gizmo.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -576,6 +743,7 @@ const meta = preview.meta({
 
 ```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({
@@ -629,3 +797,119 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Gizmo.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Gizmo from './Gizmo.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Gizmo from './Gizmo.vue';
+
+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 85a8f516e19d..62690f687030 100644
--- a/docs/_snippets/highlight-custom-style.md
+++ b/docs/_snippets/highlight-custom-style.md
@@ -1,11 +1,10 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { componentWrapperDecorator } from '@storybook/angular';
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, componentWrapperDecorator } from '@storybook/angular';
 
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -44,6 +43,50 @@ export const StyledHighlight: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator } from '@storybook/angular';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    componentWrapperDecorator((story) => {
+      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 story;
+    }),
+  ],
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
@@ -175,7 +218,7 @@ export const StyledHighlight: Story = {
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -260,7 +303,7 @@ export const StyledHighlight = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -306,7 +349,7 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -348,7 +391,7 @@ export const StyledHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -395,7 +438,7 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -433,7 +476,7 @@ export const StyledHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -476,12 +519,182 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (story) => {
+      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 story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        selectors: ['h2', 'a', '.storybook-button'],
+        styles: {
+          backgroundColor: `color-mix(in srgb, hotpink, transparent 90%)`,
+          outline: '3px solid hotpink',
+          animation: 'sb-highlight-pulse 3s linear infinite',
+          transition: 'outline-offset 0.2s ease-in-out',
+        },
+        hoverStyles: {
+          outlineOffset: '3px',
+        },
+        focusStyles: {
+          backgroundColor: 'transparent',
+        },
+        keyframes: `@keyframes sb-highlight-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 story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
 import preview from '../.storybook/preview';
 
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    () => {
+      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 {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    () => {
+      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 {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
@@ -521,10 +734,11 @@ export const StyledHighlight = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/highlight-menu.md b/docs/_snippets/highlight-menu.md
index b39c38d78ae2..9629bc73aab0 100644
--- a/docs/_snippets/highlight-menu.md
+++ b/docs/_snippets/highlight-menu.md
@@ -1,11 +1,10 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { componentWrapperDecorator } from '@storybook/angular';
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, componentWrapperDecorator } from '@storybook/angular';
 
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -42,6 +41,48 @@ export const StyledHighlight: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator } from '@storybook/angular';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    componentWrapperDecorator((story) => {
+      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 story;
+    }),
+  ],
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
@@ -167,7 +208,7 @@ export const StyledHighlight: Story = {
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -248,7 +289,7 @@ export const StyledHighlight = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -292,7 +333,7 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -332,7 +373,7 @@ export const StyledHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -377,7 +418,93 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    () => {
+      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 {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    () => {
+      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 {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
@@ -413,7 +540,7 @@ export const StyledHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -454,12 +581,88 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (story) => {
+      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 story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
 import preview from '../.storybook/preview';
 
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (story) => {
+      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 story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT } from 'storybook/highlight';
 
+import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
@@ -497,10 +700,11 @@ export const StyledHighlight = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/highlight-remove.md b/docs/_snippets/highlight-remove.md
index 5c24ef2187cc..080e2d73b630 100644
--- a/docs/_snippets/highlight-remove.md
+++ b/docs/_snippets/highlight-remove.md
@@ -1,11 +1,10 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { componentWrapperDecorator } from '@storybook/angular';
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, componentWrapperDecorator } from '@storybook/angular';
 
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -29,6 +28,35 @@ export const RemoveHighlight: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator } from '@storybook/angular';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const RemoveHighlight = meta.story({
+  decorators: [
+    componentWrapperDecorator((story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        id: 'my-unique-id',
+        selectors: ['header', 'section', 'footer'],
+      });
+      emit(REMOVE_HIGHLIGHT, 'my-unique-id');
+      return story;
+    }),
+  ],
+});
+```
+
 ```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';
@@ -92,6 +120,7 @@ export const RemoveHighlight: Story = {
   import { useChannel } from 'storybook/preview-api';
   import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
+
   import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
@@ -115,7 +144,7 @@ export const RemoveHighlight: Story = {
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
@@ -147,6 +176,7 @@ export const RemoveHighlight = {
   import { useChannel } from 'storybook/preview-api';
   import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
+
   import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
@@ -170,7 +200,7 @@ export const RemoveHighlight = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -201,7 +231,7 @@ export const RemoveHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
@@ -228,7 +258,7 @@ export const RemoveHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -260,7 +290,7 @@ export const RemoveHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
@@ -283,7 +313,7 @@ export const RemoveHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -311,12 +341,122 @@ export const RemoveHighlight: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
+
 import preview from '../.storybook/preview';
 
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const RemoveHighlight = meta.story({
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        id: 'my-unique-id',
+        selectors: ['header', 'section', 'footer'],
+      });
+      emit(REMOVE_HIGHLIGHT, 'my-unique-id');
+      return story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const RemoveHighlight = meta.story({
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        id: 'my-unique-id',
+        selectors: ['header', 'section', 'footer'],
+      });
+      emit(REMOVE_HIGHLIGHT, 'my-unique-id');
+      return story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const RemoveHighlight = meta.story({
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        id: 'my-unique-id',
+        selectors: ['header', 'section', 'footer'],
+      });
+      emit(REMOVE_HIGHLIGHT, 'my-unique-id');
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const RemoveHighlight = meta.story({
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        id: 'my-unique-id',
+        selectors: ['header', 'section', 'footer'],
+      });
+      emit(REMOVE_HIGHLIGHT, 'my-unique-id');
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
@@ -341,10 +481,11 @@ export const RemoveHighlight = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/highlight-reset.md b/docs/_snippets/highlight-reset.md
index e445e0388120..202a18ed5f72 100644
--- a/docs/_snippets/highlight-reset.md
+++ b/docs/_snippets/highlight-reset.md
@@ -1,11 +1,10 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { componentWrapperDecorator } from '@storybook/angular';
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, componentWrapperDecorator } from '@storybook/angular';
 
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -28,6 +27,34 @@ export const ResetHighlight: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator } from '@storybook/angular';
+
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    componentWrapperDecorator((story) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        selectors: ['header', 'section', 'footer'],
+      });
+      return story;
+    }),
+  ],
+});
+```
+
 ```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';
@@ -111,7 +138,7 @@ export const ResetHighlight: Story = {
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
 
@@ -164,7 +191,7 @@ export const ResetHighlight = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -194,7 +221,7 @@ export const ResetHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
 
@@ -220,7 +247,7 @@ export const ResetHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -251,7 +278,7 @@ export const ResetHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
 
@@ -273,7 +300,7 @@ export const ResetHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -300,12 +327,118 @@ export const ResetHighlight: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        selectors: ['header', 'section', 'footer'],
+      });
+      return story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        selectors: ['header', 'section', 'footer'],
+      });
+      return story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
+
 import preview from '../.storybook/preview';
 
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        selectors: ['header', 'section', 'footer'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
 import { useChannel } from 'storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
 
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        selectors: ['header', 'section', 'footer'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
@@ -329,10 +462,11 @@ export const ResetHighlight = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/highlight-scroll-into-view.md b/docs/_snippets/highlight-scroll-into-view.md
index 44fb44c9577e..bde165981cd3 100644
--- a/docs/_snippets/highlight-scroll-into-view.md
+++ b/docs/_snippets/highlight-scroll-into-view.md
@@ -1,11 +1,10 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { componentWrapperDecorator } from '@storybook/angular';
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, componentWrapperDecorator } from '@storybook/angular';
 
 import { useChannel } from 'storybook/preview-api';
 import { SCROLL_INTO_VIEW } from 'storybook/highlight';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -25,6 +24,31 @@ export const ScrollIntoView: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator } from '@storybook/angular';
+
+import { useChannel } from 'storybook/preview-api';
+import { SCROLL_INTO_VIEW } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ScrollIntoView = meta.story({
+  decorators: [
+    componentWrapperDecorator((story) => {
+      const emit = useChannel({});
+      emit(SCROLL_INTO_VIEW, '#footer');
+      return story;
+    }),
+  ],
+});
+```
+
 ```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';
@@ -99,7 +123,7 @@ export const ScrollIntoView: Story = {
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { SCROLL_INTO_VIEW } from 'storybook/highlight';
 
@@ -146,7 +170,7 @@ export const ScrollIntoView = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -173,7 +197,7 @@ export const ScrollIntoView: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { SCROLL_INTO_VIEW } from 'storybook/highlight';
 
@@ -196,7 +220,7 @@ export const ScrollIntoView = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -224,7 +248,7 @@ export const ScrollIntoView: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { useChannel } from 'storybook/preview-api';
 import { SCROLL_INTO_VIEW } from 'storybook/highlight';
 
@@ -243,7 +267,7 @@ export const ScrollIntoView = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { useChannel } from 'storybook/preview-api';
@@ -267,12 +291,106 @@ export const ScrollIntoView: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { SCROLL_INTO_VIEW } from 'storybook/highlight';
+
 import preview from '../.storybook/preview';
 
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ScrollIntoView = meta.story({
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(SCROLL_INTO_VIEW, '#footer');
+      return story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { useChannel } from 'storybook/preview-api';
 import { SCROLL_INTO_VIEW } from 'storybook/highlight';
 
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ScrollIntoView = meta.story({
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(SCROLL_INTO_VIEW, '#footer');
+      return story();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { SCROLL_INTO_VIEW } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ScrollIntoView = meta.story({
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(SCROLL_INTO_VIEW, '#footer');
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { SCROLL_INTO_VIEW } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ScrollIntoView = meta.story({
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(SCROLL_INTO_VIEW, '#footer');
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { useChannel } from 'storybook/preview-api';
+import { SCROLL_INTO_VIEW } from 'storybook/highlight';
+
+import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
@@ -293,10 +411,11 @@ export const ScrollIntoView = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/histogram-story.md b/docs/_snippets/histogram-story.md
index 27ee5e03bae5..2ff15e04232a 100644
--- a/docs/_snippets/histogram-story.md
+++ b/docs/_snippets/histogram-story.md
@@ -1,4 +1,4 @@
-```ts filename="Histogram.stories.ts" renderer="angular" language="ts"
+```ts filename="Histogram.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { HistogramComponent } from './histogram.component';
@@ -10,7 +10,7 @@ const meta: Meta<HistogramComponent> = {
 export default meta;
 type Story = StoryObj<HistogramComponent>;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -20,6 +20,25 @@ export const Default: Story = {
 };
 ```
 
+```ts filename="Histogram.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { HistogramComponent } from './histogram.component';
+
+const meta = preview.meta({
+  component: HistogramComponent,
+});
+
+export const Basic = meta.story({
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+});
+```
+
 ```js filename="Histogram.stories.js" renderer="html" language="js"
 import { createHistogram } from './Histogram';
 
@@ -36,7 +55,7 @@ export default {
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const Default = {
+export const Basic = {
   render: (args) => createHistogram(args),
   args: {
     dataType: 'latency',
@@ -68,7 +87,7 @@ type Story = StoryObj<HistogramProps>;
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const Default: Story = {
+export const Basic: Story = {
   render: (args) => createHistogram(args),
   args: {
     dataType: 'latency',
@@ -94,7 +113,7 @@ export default {
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const Default = {
+export const Basic = {
   render: (args) => <Histogram {...args} />,
   args: {
     dataType: 'latency',
@@ -112,7 +131,7 @@ export default {
   component: Histogram,
 };
 
-export const Default = {
+export const Basic = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -135,7 +154,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -152,7 +171,7 @@ export default {
   component: Histogram,
 };
 
-export const Default = {
+export const Basic = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -174,7 +193,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -206,14 +225,14 @@ export const Default: Story = {
 />
 ```
 
-```js filename="Histogram.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Histogram.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Histogram from './Histogram.svelte';
 
 export default {
   component: Histogram,
 };
 
-export const Default = {
+export const Basic = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -245,7 +264,7 @@ export const Default = {
 />
 ```
 
-```ts filename="Histogram.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Histogram.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -258,7 +277,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -268,7 +287,7 @@ export const Default: Story = {
 };
 ```
 
-```js filename="Histogram.stories.js" renderer="vue" language="js"
+```js filename="Histogram.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Histogram from './Histogram.vue';
 
 export default {
@@ -280,7 +299,7 @@ export default {
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const Default = {
+export const Basic = {
   render: (args) => ({
     components: { Histogram },
     setup() {
@@ -297,7 +316,7 @@ export const Default = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="vue" language="ts"
+```ts filename="Histogram.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Histogram from './Histogram.vue';
@@ -314,7 +333,7 @@ type Story = StoryObj<typeof meta>;
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const Default: Story = {
+export const Basic: Story = {
   render: (args) => ({
     components: { Histogram },
     setup() {
@@ -331,12 +350,12 @@ export const Default: Story = {
 };
 ```
 
-```js filename="Histogram.stories.js" renderer="web-components" language="js"
+```js filename="Histogram.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'histogram-component',
 };
 
-export const Default = {
+export const Basic = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -346,7 +365,7 @@ export const Default = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="web-components" language="ts"
+```ts filename="Histogram.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -356,7 +375,7 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -366,6 +385,104 @@ export const Default: Story = {
 };
 ```
 
+```js filename="Histogram.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'histogram-component',
+});
+
+export const Basic = meta.story({
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+});
+```
+
+```ts filename="Histogram.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'histogram-component',
+});
+
+export const Basic = meta.story({
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+});
+```
+
+```ts filename="Histogram.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Histogram from './Histogram.vue';
+
+const meta = preview.meta({
+  component: Histogram,
+});
+
+/*
+ *👇 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: (args) => ({
+    components: { Histogram },
+    setup() {
+      return { args };
+    },
+    template: '<Histogram v-bind="args" />',
+  }),
+  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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Histogram from './Histogram.vue';
+
+const meta = preview.meta({
+  component: Histogram,
+});
+
+/*
+ *👇 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: (args) => ({
+    components: { Histogram },
+    setup() {
+      return { args };
+    },
+    template: '<Histogram v-bind="args" />',
+  }),
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+});
+```
+
 ```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -375,7 +492,7 @@ const meta = preview.meta({
   component: Histogram,
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -395,7 +512,7 @@ const meta = preview.meta({
   component: Histogram,
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
diff --git a/docs/_snippets/initialize-library-in-preview.md b/docs/_snippets/initialize-library-in-preview.md
new file mode 100644
index 000000000000..4d941464cac8
--- /dev/null
+++ b/docs/_snippets/initialize-library-in-preview.md
@@ -0,0 +1,86 @@
+```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 { initialize } from '../lib/your-library';
+
+initialize();
+
+const preview: Preview = {
+  // ...
+};
+
+export default preview;
+```
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+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. nextjs, nextjs-vite, react-vite, etc.
+import { definePreview } from '@storybook/your-framework';
+
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+const preview = definePreview({
+  // ...
+});
+
+export default preview;
+```
+
+<!-- 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. nextjs, nextjs-vite, react-vite, etc.
+import { definePreview } from '@storybook/your-framework';
+
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+const preview = definePreview({
+  // ...
+});
+
+export default preview;
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+const preview = definePreview({
+  // ...
+});
+
+export default preview;
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+const preview = definePreview({
+  // ...
+});
+
+export default preview;
+```
diff --git a/docs/_snippets/interaction-test-complex.md b/docs/_snippets/interaction-test-complex.md
index 499783d8128c..99747aeaa769 100644
--- a/docs/_snippets/interaction-test-complex.md
+++ b/docs/_snippets/interaction-test-complex.md
@@ -1,9 +1,9 @@
-```ts filename="EventForm.stories.ts" renderer="angular" language="ts"
+```ts filename="EventForm.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 import { fn, expect } from 'storybook/test';
 
 import { users } from '../mocks/users';
-import { EventForm } from './EventForm.component';
+import { EventForm } from './event-form.component';
 
 const meta: Meta<EventForm> = {
   component: EventForm,
@@ -30,7 +30,7 @@ export const Submits: Story = {
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -43,6 +43,49 @@ export const Submits: Story = {
 };
 ```
 
+```ts filename="EventForm.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { users } from '../mocks/users';
+import { EventForm } from './event-form.component';
+
+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', { name: '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(),
+    });
+  },
+});
+```
+
 ```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';
@@ -76,7 +119,7 @@ export const Submits: Story = {
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -117,7 +160,7 @@ export const Submits = {
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -162,7 +205,7 @@ export const Submits = {
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -175,7 +218,7 @@ export const Submits = {
 />
 ```
 
-```ts filename="EventForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="EventForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { fn, expect } from 'storybook/test';
@@ -208,7 +251,7 @@ export const Submits: Story = {
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -253,7 +296,7 @@ export const Submits: Story = {
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -266,7 +309,7 @@ export const Submits: Story = {
 />
 ```
 
-```js filename="EventForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="EventForm.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { fn, expect } from 'storybook/test';
 
 import { users } from '../mocks/users';
@@ -294,7 +337,7 @@ export const Submits = {
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -307,7 +350,7 @@ export const Submits = {
 };
 ```
 
-```ts filename="EventForm.stories.ts" renderer="web-components" language="ts"
+```ts filename="EventForm.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { fn, expect } from 'storybook/test';
 
@@ -338,7 +381,7 @@ export const Submits: Story = {
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -351,7 +394,7 @@ export const Submits: Story = {
 };
 ```
 
-```js filename="EventForm.stories.js" renderer="web-components" language="js"
+```js filename="EventForm.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { fn, expect } from 'storybook/test';
 
 import { users } from '../mocks/users';
@@ -378,7 +421,7 @@ export const Submits = {
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -391,10 +434,95 @@ export const Submits = {
 };
 ```
 
-```ts filename="EventForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="EventForm.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { users } from '../mocks/users';
+
+const meta = preview.meta({
+  component: 'demo-event-form',
+});
+
+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', { name: '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(),
+    });
+  },
+});
+```
+
+```ts filename="EventForm.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
 import preview from '../.storybook/preview';
+
+import { users } from '../mocks/users';
+
+const meta = preview.meta({
+  component: 'demo-event-form',
+});
+
+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', { name: '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(),
+    });
+  },
+});
+```
+
+```ts filename="EventForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import { fn, expect } from 'storybook/test';
 
+import preview from '../.storybook/preview';
+
 import { users } from '../mocks/users';
 import { EventForm } from './EventForm';
 
@@ -420,7 +548,7 @@ export const Submits = meta.story({
     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' });
+    const submitButton = canvas.getByRole('button', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
@@ -436,9 +564,10 @@ export const Submits = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { users } from '../mocks/users';
 import { EventForm } from './EventForm';
 
@@ -464,7 +593,95 @@ export const Submits = meta.story({
     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' });
+    const submitButton = canvas.getByRole('button', { name: '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(),
+    });
+  },
+});
+```
+
+```ts filename="EventForm.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { users } from '../mocks/users';
+import EventForm from './EventForm.vue';
+
+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', { name: '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="vue" language="js" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { users } from '../mocks/users';
+import EventForm from './EventForm.vue';
+
+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', { name: 'Plan event' });
     await userEvent.click(submitButton);
 
     // Spy on `onSubmit` to verify that it is called correctly
diff --git a/docs/_snippets/interaction-test-fn-mock-spy.md b/docs/_snippets/interaction-test-fn-mock-spy.md
index 3ce45a48dae7..948fdaf9951d 100644
--- a/docs/_snippets/interaction-test-fn-mock-spy.md
+++ b/docs/_snippets/interaction-test-fn-mock-spy.md
@@ -1,8 +1,8 @@
-```ts filename="LoginForm.stories.ts" renderer="angular" language="ts"
+```ts filename="LoginForm.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 import { fn, expect } from 'storybook/test';
 
-import { LoginForm } from './LoginForm.component';
+import { LoginForm } from './login-form.component';
 
 const meta: Meta<LoginForm> = {
   component: LoginForm,
@@ -27,6 +27,33 @@ export const FilledForm: Story = {
 };
 ```
 
+```ts filename="LoginForm.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { LoginForm } from './login-form.component';
+
+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();
+  },
+});
+```
+
 ```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';
@@ -110,7 +137,7 @@ export const FilledForm = {
 />
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { fn, expect } from 'storybook/test';
@@ -168,7 +195,7 @@ export const FilledForm: Story = {
 />
 ```
 
-```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { fn, expect } from 'storybook/test';
 
 import { LoginForm } from './LoginForm.svelte';
@@ -193,7 +220,7 @@ export const FilledForm = {
 };
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="web-components" language="ts"
+```ts filename="LoginForm.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { fn, expect } from 'storybook/test';
 
@@ -220,7 +247,7 @@ export const FilledForm: Story = {
 };
 ```
 
-```js filename="LoginForm.stories.js" renderer="web-components" language="js"
+```js filename="LoginForm.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { fn, expect } from 'storybook/test';
 
 export default {
@@ -243,10 +270,61 @@ export const FilledForm = {
 };
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="LoginForm.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
 import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-login-form',
+  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();
+  },
+});
+```
+
+```ts filename="LoginForm.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { fn, expect } from 'storybook/test';
 
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-login-form',
+  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();
+  },
+});
+```
+
+```ts filename="LoginForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
 import { LoginForm } from './LoginForm';
 
 const meta = preview.meta({
@@ -272,9 +350,10 @@ export const FilledForm = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { LoginForm } from './LoginForm';
 
 const meta = preview.meta({
@@ -296,3 +375,59 @@ export const FilledForm = meta.story({
   },
 });
 ```
+
+```ts filename="LoginForm.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import LoginForm from './LoginForm.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import LoginForm from './LoginForm.vue';
+
+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 40360b77ac88..2da522e555e1 100644
--- a/docs/_snippets/interaction-test-simple.md
+++ b/docs/_snippets/interaction-test-simple.md
@@ -1,8 +1,8 @@
-```ts filename="Dialog.stories.ts" renderer="angular" language="ts"
+```ts filename="Dialog.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 import { expect } from 'storybook/test';
 
-import { Dialog } from './Dialog.component';
+import { Dialog } from './dialog.component';
 
 const meta: Meta<Dialog> = {
   component: Dialog,
@@ -14,13 +14,34 @@ type Story = StoryObj<Dialog>;
 export const Opens: Story = {
   play: async ({ canvas, userEvent }) => {
     // Click on a button and assert that a dialog appears
-    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   },
 };
 ```
 
+```ts filename="Dialog.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { Dialog } from './dialog.component';
+
+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();
+  },
+});
+```
+
 ```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';
@@ -38,7 +59,7 @@ type Story = StoryObj<typeof meta>;
 export const Opens: Story = {
   play: async ({ canvas, userEvent }) => {
     // Click on a button and assert that a dialog appears
-    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   },
@@ -57,7 +78,7 @@ export default {
 export const Opens = {
   play: async ({ canvas, userEvent }) => {
     // Click on a button and assert that a dialog appears
-    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   },
@@ -79,14 +100,14 @@ export const Opens = {
   name="Opens"
   play={async ({ canvas, userEvent }) => {
     // Click on a button and assert that a dialog appears
-    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   }}
 />
 ```
 
-```ts filename="Dialog.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Dialog.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { expect } from 'storybook/test';
@@ -103,7 +124,7 @@ type Story = StoryObj<typeof meta>;
 export const Opens: Story = {
   play: async ({ canvas, userEvent }) => {
     // Click on a button and assert that a dialog appears
-    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   },
@@ -125,14 +146,14 @@ export const Opens: Story = {
   name="Opens"
   play={async ({ canvas, userEvent }) => {
     // Click on a button and assert that a dialog appears
-    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   }}
 />
 ```
 
-```js filename="Dialog.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Dialog.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 import { Dialog } from './Dialog.svelte';
@@ -144,14 +165,14 @@ export default {
 export const Opens = {
   play: async ({ canvas, userEvent }) => {
     // Click on a button and assert that a dialog appears
-    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   },
 };
 ```
 
-```ts filename="Dialog.stories.ts" renderer="web-components" language="ts"
+```ts filename="Dialog.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { expect } from 'storybook/test';
 
@@ -165,14 +186,14 @@ type Story = StoryObj;
 export const Opens: Story = {
   play: async ({ canvas, userEvent }) => {
     // Click on a button and assert that a dialog appears
-    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   },
 };
 ```
 
-```js filename="Dialog.stories.js" renderer="web-components" language="js"
+```js filename="Dialog.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 export default {
@@ -182,16 +203,55 @@ export default {
 export const Opens = {
   play: async ({ canvas, userEvent }) => {
     // Click on a button and assert that a dialog appears
-    const button = canvas.getByRole('button', { text: 'Open Modal' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   },
 };
 ```
 
+```js filename="Dialog.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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', { name: 'Open Modal' });
+    await userEvent.click(button);
+    await expect(canvas.getByRole('dialog')).toBeInTheDocument();
+  },
+});
+```
+
+```ts filename="Dialog.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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', { name: 'Open Modal' });
+    await userEvent.click(button);
+    await expect(canvas.getByRole('dialog')).toBeInTheDocument();
+  },
+});
+```
+
 ```ts filename="Dialog.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
 import preview from '../.storybook/preview';
-import { expect } from 'storybook/test';
 
 import { Dialog } from './Dialog';
 
@@ -202,7 +262,7 @@ const meta = preview.meta({
 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' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
     await userEvent.click(button);
     await expect(canvas.getByRole('dialog')).toBeInTheDocument();
   },
@@ -212,8 +272,9 @@ export const Opens = meta.story({
 <!-- JS snippets still needed while providing both CSF 3 & Next -->
 
 ```js filename="Dialog.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
 import preview from '../.storybook/preview';
-import { expect } from 'storybook/test';
 
 import { Dialog } from './Dialog';
 
@@ -224,7 +285,51 @@ const meta = preview.meta({
 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' });
+    const button = canvas.getByRole('button', { name: 'Open Modal' });
+    await userEvent.click(button);
+    await expect(canvas.getByRole('dialog')).toBeInTheDocument();
+  },
+});
+```
+
+```ts filename="Dialog.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import Dialog from './Dialog.vue';
+
+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', { name: '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="vue" language="js" tabTitle="CSF Next 🧪"
+import { fn, expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import Dialog from './Dialog.vue';
+
+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', { name: '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 a4f2cec47fa6..e5dd849f4ccc 100644
--- a/docs/_snippets/list-story-expanded.md
+++ b/docs/_snippets/list-story-expanded.md
@@ -1,7 +1,5 @@
-```ts filename="List.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { moduleMetadata } from '@storybook/angular';
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -53,6 +51,58 @@ export const ManyItems: Story = {
 };
 ```
 
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { CommonModule } from '@angular/common';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
+
+const meta = preview.meta({
+  component: List,
+  decorators: [
+    moduleMetadata({
+      declarations: [List, ListItem],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story({
+  render: (args) => ({
+    props: args,
+    template: '<app-list></app-list>',
+  }),
+});
+
+export const OneItem = meta.story({
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item></app-list-item>
+      </app-list>`,
+  }),
+});
+
+export const ManyItems = meta.story({
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item></app-list-item>
+        <app-list-item></app-list-item>
+        <app-list-item></app-list-item>
+      </app-list>
+    `,
+  }),
+});
+```
+
 ```js filename="List.stories.js" renderer="html" language="js"
 import { createList } from './List';
 import { createListItem } from './ListItem';
@@ -347,7 +397,7 @@ export const ManyItems: Story = {
 </Story>
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js"
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
@@ -390,7 +440,7 @@ export const ManyItems = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts"
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import List from './ListComponent.vue';
@@ -438,7 +488,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```js filename="List.stories.js" renderer="web-components" language="js"
+```js filename="List.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -468,7 +518,7 @@ export const ManyItems = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="web-components" language="ts"
+```ts filename="List.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -503,6 +553,162 @@ export const ManyItems: Story = {
 };
 ```
 
+```ts filename="List.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-list',
+});
+
+export const Empty = meta.story({
+  render: () => html`<demo-list></demo-list>`,
+});
+
+export const OneItem = meta.story({
+  render: () => html`
+    <demo-list>
+      <demo-list-item></demo-list-item>
+    </demo-list>
+  `,
+});
+
+export const ManyItems = meta.story({
+  render: () => html`
+    <demo-list>
+      <demo-list-item></demo-list-item>
+      <demo-list-item></demo-list-item>
+      <demo-list-item></demo-list-item>
+    </demo-list>
+  `,
+});
+```
+
+```js filename="List.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-list',
+});
+
+export const Empty = meta.story({
+  render: () => html`<demo-list></demo-list>`,
+});
+
+export const OneItem = meta.story({
+  render: () => html`
+    <demo-list>
+      <demo-list-item></demo-list-item>
+    </demo-list>
+  `,
+});
+
+export const ManyItems = meta.story({
+  render: () => html`
+    <demo-list>
+      <demo-list-item></demo-list-item>
+      <demo-list-item></demo-list-item>
+      <demo-list-item></demo-list-item>
+    </demo-list>
+  `,
+});
+```
+
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+const meta = preview.meta({
+  component: List,
+});
+
+/*
+ *👇 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 Empty = meta.story({
+  render: () => ({
+    components: { List },
+    template: '<List/>',
+  }),
+});
+
+export const OneItem = meta.story({
+  render: () => ({
+    components: { List, ListItem },
+    template: `
+      <List>
+        <list-item/>
+      </List>`,
+  }),
+});
+
+export const ManyItems = meta.story({
+  render: () => ({
+    components: { List, ListItem },
+    template: `
+      <List>
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+const meta = preview.meta({
+  component: List,
+});
+
+/*
+ *👇 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 Empty = meta.story({
+  render: () => ({
+    components: { List },
+    template: '<List/>',
+  }),
+});
+
+export const OneItem = meta.story({
+  render: () => ({
+    components: { List, ListItem },
+    template: `
+      <List>
+        <list-item/>
+      </List>`,
+  }),
+});
+
+export const ManyItems = meta.story({
+  render: () => ({
+    components: { List, ListItem },
+    template: `
+      <List>
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+});
+```
+
 ```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/list-story-reuse-data.md b/docs/_snippets/list-story-reuse-data.md
index bff304b6828a..f462701e7e61 100644
--- a/docs/_snippets/list-story-reuse-data.md
+++ b/docs/_snippets/list-story-reuse-data.md
@@ -1,7 +1,5 @@
-```ts filename="List.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { moduleMetadata } from '@storybook/angular';
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -42,6 +40,47 @@ export const ManyItems: Story = {
 };
 ```
 
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { CommonModule } from '@angular/common';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+  decorators: [
+    moduleMetadata({
+      declarations: [List, ListItem],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+export const ManyItems = meta.story({
+  args: {
+    Selected: Selected.input.args.isSelected,
+    Unselected: Unselected.input.args.isSelected,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item [isSelected]="Selected"></app-list-item>
+        <app-list-item [isSelected]="Unselected"></app-list-item>
+        <app-list-item [isSelected]="Unselected"></app-list-item>
+      </app-list>
+    `,
+  }),
+});
+```
+
 ```js filename="List.stories.js" renderer="html" language="js"
 import { createList } from './List';
 import { createListItem } from './ListItem';
@@ -246,7 +285,7 @@ export const ManyItems: Story = {
 </Story>
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js"
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
@@ -277,7 +316,7 @@ export const ManyItems = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts"
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import List from './ListComponent.vue';
@@ -313,49 +352,72 @@ export const ManyItems: Story = {
 };
 ```
 
-```js filename="List.stories.js" renderer="web-components" language="js"
-import { html } from 'lit';
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
 
-// 👇 We're importing the necessary stories from ListItem
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+//👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
-export default {
-  component: 'demo-list',
-};
+const meta = preview.meta({
+  component: List,
+});
 
-export const ManyItems = {
-  render: (args) => html`
-    <demo-list>
-      ${Selected({ ...args, ...Selected.args })} ${Unselected({ ...args, ...Unselected.args })}
-      ${Unselected({ ...args, ...Unselected.args })}
-    </demo-list>
-  `,
-};
+export const ManyItems = meta.story({
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.input.args.isSelected,
+    Unselected: Unselected.input.args.isSelected,
+  },
+});
 ```
 
-```ts filename="List.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
 
-import { html } from 'lit';
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
 
-// 👇 We're importing the necessary stories from ListItem
-import { Selected, Unselected } from './ListItem.stories';
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
 
-const meta: Meta = {
-  component: 'demo-list',
-};
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
 
-export default meta;
-type Story = StoryObj;
+const meta = preview.meta({
+  component: List,
+});
 
-export const ManyItems: Story = {
-  render: (args) => html`
-    <demo-list>
-      ${Selected({ ...args, ...Selected.args })} ${Unselected({ ...args, ...Unselected.args })}
-      ${Unselected({ ...args, ...Unselected.args })}
-    </demo-list>
-  `,
-};
+export const ManyItems = meta.story({
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.input.args.isSelected,
+    Unselected: Unselected.input.args.isSelected,
+  },
+});
 ```
 
 ```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
diff --git a/docs/_snippets/list-story-starter.md b/docs/_snippets/list-story-starter.md
index fba678545f06..6fdad08e400f 100644
--- a/docs/_snippets/list-story-starter.md
+++ b/docs/_snippets/list-story-starter.md
@@ -1,7 +1,5 @@
-```ts filename="List.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { moduleMetadata } from '@storybook/angular';
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -29,6 +27,34 @@ export const Empty: Story = {
 };
 ```
 
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { CommonModule } from '@angular/common';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { List } from './list.component';
+
+const meta = preview.meta({
+  component: List,
+  decorators: [
+    moduleMetadata({
+      declarations: [List],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story({
+  render: (args) => ({
+    props: args,
+    template: `<app-list></app-list>`,
+  }),
+});
+```
+
 ```js filename="List.stories.js" renderer="html" language="js"
 import { createList } from './List';
 
@@ -138,7 +164,7 @@ export const Empty: Story = {};
 <Story name="Empty" />
 ```
 
-```js filename="List.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="List.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import List from './List.svelte';
 
 export default {
@@ -164,7 +190,7 @@ export const Empty = {};
 <Story name="Empty" />
 ```
 
-```ts filename="List.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="List.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -181,7 +207,7 @@ type Story = StoryObj<typeof meta>;
 export const Empty: Story = {};
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js"
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import List from './ListComponent.vue';
 
 export default {
@@ -197,7 +223,7 @@ export const Empty = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts"
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import List from './ListComponent.vue';
@@ -218,7 +244,45 @@ export const Empty: Story = {
 };
 ```
 
-```js filename="List.stories.js" renderer="web-components" language="js"
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import List from './ListComponent.vue';
+
+const meta = preview.meta({
+  component: List,
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story({
+  render: () => ({
+    components: { List },
+    template: '<List/>',
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import List from './ListComponent.vue';
+
+const meta = preview.meta({
+  component: List,
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story({
+  render: () => ({
+    components: { List },
+    template: '<List/>',
+  }),
+});
+```
+
+```js filename="List.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -231,7 +295,7 @@ export const Empty = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="web-components" language="ts"
+```ts filename="List.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -247,6 +311,36 @@ export const Empty: Story = {
 };
 ```
 
+```ts filename="List.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-list',
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story({
+  render: () => html`<demo-list></demo-list>`,
+});
+```
+
+```js filename="List.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-list',
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.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';
 
diff --git a/docs/_snippets/list-story-template.md b/docs/_snippets/list-story-template.md
index b6d0fd8d5fdb..faa702475ea5 100644
--- a/docs/_snippets/list-story-template.md
+++ b/docs/_snippets/list-story-template.md
@@ -1,7 +1,5 @@
-```ts filename="List.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { moduleMetadata } from '@storybook/angular';
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -55,6 +53,59 @@ export const OneItem: Story = {
 };
 ```
 
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { CommonModule } from '@angular/common';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+  decorators: [
+    moduleMetadata({
+      declarations: [List, ListItem],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+/*
+ *👇 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 ListTemplate = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <div *ngFor="let item of items">
+          <app-list-item [item]="item"></app-list-item>
+        </div>
+      </app-list>
+    `,
+  }),
+};
+
+export const Empty = meta.story({
+  ...ListTemplate,
+  args: { items: [] },
+});
+
+export const OneItem = Empty.extend({
+  args: {
+    items: [{ ...Unchecked.input.args }],
+  },
+});
+```
+
 ```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -89,11 +140,7 @@ export const Empty = {
 export const OneItem = {
   ...ListTemplate,
   args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
+    items: [{ ...Unchecked.args }],
   },
 };
 ```
@@ -177,11 +224,7 @@ export const Empty = {
 export const OneItem = {
   ...ListTemplate,
   args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
+    items: [{ ...Unchecked.args }],
   },
 };
 ```
@@ -306,7 +349,7 @@ export const OneItem = {
 />
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js"
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
@@ -343,16 +386,12 @@ export const Empty = {
 export const OneItem = {
   ...ListTemplate,
   args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
+    items: [{ ...Unchecked.args }],
   },
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts"
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import List from './List.vue';
@@ -394,16 +433,92 @@ export const Empty: Story = {
 export const OneItem: Story = {
   ...ListTemplate,
   args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
+    items: [{ ...Unchecked.args }],
   },
 };
 ```
 
-```js filename="List.stories.js" renderer="web-components" language="js"
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const Empty = meta.story({
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <div v-for="item in items" :key="item.title">
+          <ListItem :item="item"/>
+        </div>
+      </List>
+    `,
+  }),
+  args: {
+    items: [],
+  },
+});
+
+export const OneItem = Empty.extend({
+  args: {
+    items: [{ ...Unchecked.input.args }],
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const Empty = meta.story({
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <div v-for="item in items" :key="item.title">
+          <ListItem :item="item"/>
+        </div>
+      </List>
+    `,
+  }),
+  args: {
+    items: [],
+  },
+});
+
+export const OneItem = Empty.extend({
+  args: {
+    items: [{ ...Unchecked.input.args }],
+  },
+});
+```
+
+```js filename="List.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -433,16 +548,12 @@ export const Empty = {
 export const OneItem = {
   ...ListTemplate,
   args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
+    items: [{ ...Unchecked.args }],
   },
 };
 ```
 
-```ts filename="List.stories.ts" renderer="web-components" language="ts"
+```ts filename="List.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -476,15 +587,75 @@ export const Empty: Story = {
 export const OneItem: Story = {
   ...ListTemplate,
   args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
+    items: [{ ...Unchecked.args }],
   },
 };
 ```
 
+```js filename="List.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import preview from '../.storybook/preview';
+
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: 'demo-list',
+});
+
+export const Empty = meta.story({
+  render: ({ items, ...args }) => {
+    return html`
+      <demo-list>
+        ${repeat(items, (item) => html`<demo-list-item>${item}</demo-list-item>`)}
+      </demo-list>
+    `;
+  },
+  args: {
+    items: [],
+  },
+});
+
+export const OneItem = Empty.extend({
+  args: {
+    items: [{ ...Unchecked.input.args }],
+  },
+});
+```
+
+```ts filename="List.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import preview from '../.storybook/preview';
+
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: 'demo-list',
+});
+
+export const Empty = meta.story({
+  render: ({ items, ...args }) => {
+    return html`
+      <demo-list>
+        ${repeat(items, (item) => html`<demo-list-item>${item}</demo-list-item>`)}
+      </demo-list>
+    `;
+  },
+  args: {
+    items: [],
+  },
+});
+
+export const OneItem = Empty.extend({
+  args: {
+    items: [{ ...Unchecked.input.args }],
+  },
+});
+```
+
 ```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -515,11 +686,7 @@ export const Empty = meta.story({
 
 export const OneItem = Empty.extend({
   args: {
-    items: [
-      {
-        ...Unchecked.input.args,
-      },
-    ],
+    items: [{ ...Unchecked.input.args }],
   },
 });
 ```
@@ -555,11 +722,7 @@ export const Empty = meta.story({
 
 export const OneItem = Empty.extend({
   args: {
-    items: [
-      {
-        ...Unchecked.input.args,
-      },
-    ],
+    items: [{ ...Unchecked.input.args }],
   },
 });
 ```
diff --git a/docs/_snippets/list-story-unchecked.md b/docs/_snippets/list-story-unchecked.md
index 2d3ca366287e..de9f24fed7ad 100644
--- a/docs/_snippets/list-story-unchecked.md
+++ b/docs/_snippets/list-story-unchecked.md
@@ -1,7 +1,5 @@
-```ts filename="List.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { moduleMetadata } from '@storybook/angular';
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -44,6 +42,49 @@ export const OneItem: Story = {
 };
 ```
 
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { CommonModule } from '@angular/common';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+  decorators: [
+    moduleMetadata({
+      declarations: [List, ListItem],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+/*
+ *👇 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) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item [item]="item"></app-list-item>
+      </app-list>
+   `,
+  }),
+  args: {
+    ...Unchecked.input.args,
+  },
+});
+```
+
 ```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 
@@ -131,7 +172,7 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js"
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
@@ -162,7 +203,7 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.js" renderer="vue" language="ts"
+```ts filename="List.stories.js" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import List from './List.vue';
@@ -198,41 +239,72 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="MyList.stories.js" renderer="web-components" language="js"
-import { html } from 'lit';
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
 
-// 👇 Import the stories of MyListItem
-import { Unchecked } from './MyListItem.stories';
+import List from './List.vue';
+import ListItem from './ListItem.vue';
 
-export default {
-  title: 'MyList',
-  component: 'demo-my-list',
-};
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
 
-export const OneItem = {
-  render: () => html` <List> ${Unchecked({ ...Unchecked.args })} </List> `,
-};
+const meta = preview.meta({
+  component: List,
+});
+
+/*
+ *👇 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) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
+  }),
+  args: {
+    ...Unchecked.input.args,
+  },
+});
 ```
 
-```ts filename="MyList.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
 
-import { html } from 'lit';
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
 
-// 👇 Import the stories of MyListItem
-import { Unchecked } from './my-list-item.stories';
+import List from './List.vue';
+import ListItem from './ListItem.vue';
 
-const meta: Meta = {
-  title: 'MyList',
-  component: 'demo-my-list',
-};
-export default meta;
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
 
-type Story = StoryObj;
+const meta = preview.meta({
+  component: List,
+});
 
-export const OneItem: Story = {
-  render: () => html` <List> ${Unchecked({ ...Unchecked.args })} </List> `,
-};
+/*
+ *👇 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) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
+  }),
+  args: {
+    ...Unchecked.input.args,
+  },
+});
 ```
 
 ```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
diff --git a/docs/_snippets/list-story-with-subcomponents.md b/docs/_snippets/list-story-with-subcomponents.md
index 863355f94def..ced79f37af90 100644
--- a/docs/_snippets/list-story-with-subcomponents.md
+++ b/docs/_snippets/list-story-with-subcomponents.md
@@ -1,7 +1,5 @@
-```ts filename="List.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { moduleMetadata } from '@storybook/angular';
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -37,6 +35,42 @@ export const OneItem: Story = {
 };
 ```
 
+```ts filename="List.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { CommonModule } from '@angular/common';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
+
+const meta = preview.meta({
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+  decorators: [
+    moduleMetadata({
+      declarations: [List, ListItem],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+export const Empty = meta.story();
+
+export const OneItem = meta.story({
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item></app-list-item>
+      </app-list>
+  `,
+  }),
+});
+```
+
 ```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import * as React from 'react';
 
@@ -191,7 +225,7 @@ export const OneItem: Story = {
 </Story>
 ```
 
-```js filename="List.stories.js" renderer="web-components" language="js"
+```js filename="List.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -211,7 +245,7 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="web-components" language="ts"
+```ts filename="List.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -236,7 +270,49 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js"
+```ts filename="List.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-list',
+  subcomponents: { ListItem: 'demo-list-item' }, // 👈 Adds the ListItem component as a subcomponent
+});
+
+export const Empty = meta.story();
+
+export const OneItem = meta.story({
+  render: () => html`
+    <demo-list>
+      <demo-list-item></demo-list-item>
+    </demo-list>
+  `,
+});
+```
+
+```js filename="List.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-list',
+  subcomponents: { ListItem: 'demo-list-item' }, // 👈 Adds the ListItem component as a subcomponent
+});
+
+export const Empty = meta.story();
+
+export const OneItem = meta.story({
+  render: () => html`
+    <demo-list>
+      <demo-list-item></demo-list-item>
+    </demo-list>
+  `,
+});
+```
+
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
@@ -256,14 +332,14 @@ export const OneItem = {
   render: (args) => ({
     components: { List, ListItem },
     setup() {
-      return { args }
-    }
+      return { args };
+    },
     template: '<List v-bind="args"><ListItem /></List>',
   }),
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts"
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import List from './List.vue';
@@ -288,13 +364,73 @@ export const OneItem: Story = {
   render: (args) => ({
     components: { List, ListItem },
     setup() {
-      return { args }
-    }
+      return { args };
+    },
     template: '<List v-bind="args"><ListItem /></List>',
   }),
 };
 ```
 
+```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+const meta = preview.meta({
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+});
+
+export const Empty = meta.story({
+  render: () => ({
+    components: { List },
+    template: '<List/>',
+  }),
+});
+
+export const OneItem = meta.story({
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="List.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+const meta = preview.meta({
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+});
+
+export const Empty = meta.story({
+  render: () => ({
+    components: { List },
+    template: '<List/>',
+  }),
+});
+
+export const OneItem = meta.story({
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+});
+```
+
 ```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import * as React from 'react';
 
diff --git a/docs/_snippets/loader-story.md b/docs/_snippets/loader-story.md
index d635522712e9..ce393e1a3ca2 100644
--- a/docs/_snippets/loader-story.md
+++ b/docs/_snippets/loader-story.md
@@ -1,7 +1,5 @@
-```ts filename="TodoItem.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { moduleMetadata } from '@storybook/angular';
+```ts filename="TodoItem.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -40,6 +38,45 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="TodoItem.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { CommonModule } from '@angular/common';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { TodoItem } from './TodoItem';
+
+const meta = preview.meta({
+  component: TodoItem,
+  decorators: [
+    moduleMetadata({
+      declarations: [TodoItem],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+/*
+ *👇 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: (args, { loaded: { todo } }) => ({
+    props: {
+      args,
+      todo,
+    },
+  }),
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+});
+```
+
 ```jsx filename="TodoItem.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { TodoItem } from './TodoItem';
 
@@ -167,7 +204,7 @@ export const Primary: Story = {
 />
 ```
 
-```js filename="TodoItem.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="TodoItem.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import TodoItem from './TodoItem.svelte';
 
 export default {
@@ -223,7 +260,7 @@ export const Primary = {
 />
 ```
 
-```ts filename="TodoItem.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="TodoItem.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -257,7 +294,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="TodoItem.stories.js" renderer="vue" language="js"
+```js filename="TodoItem.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import TodoItem from './TodoItem.vue';
 
 export default {
@@ -285,7 +322,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="TodoItem.stories.ts" renderer="vue" language="ts"
+```ts filename="TodoItem.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import TodoItem from './TodoItem.vue';
@@ -318,7 +355,69 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="TodoItem.stories.js" renderer="web-components" language="js"
+```ts filename="TodoItem.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import TodoItem from './TodoItem.vue';
+
+const meta = preview.meta({
+  component: 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.
+ */
+export const Primary = meta.story({
+  render: (args, { loaded: { todo } }) => ({
+    components: { TodoItem },
+    setup() {
+      return { args, todo: todo };
+    },
+    template: '<TodoItem :todo="todo" />',
+  }),
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="TodoItem.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import TodoItem from './TodoItem.vue';
+
+const meta = preview.meta({
+  component: 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.
+ */
+export const Primary = meta.story({
+  render: (args, { loaded: { todo } }) => ({
+    components: { TodoItem },
+    setup() {
+      return { args, todo: todo };
+    },
+    template: '<TodoItem :todo="todo" />',
+  }),
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+});
+```
+
+```js filename="TodoItem.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/api/csf
@@ -338,7 +437,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="TodoItem.stories.ts" renderer="web-components" language="ts"
+```ts filename="TodoItem.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 /*
@@ -363,6 +462,50 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="TodoItem.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+/*
+ *👇 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: 'demo-todo-item',
+  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 filename="TodoItem.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+/*
+ *👇 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: 'demo-todo-item',
+  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(),
+    }),
+  ],
+});
+```
+
 ```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/login-form-with-play-function.md b/docs/_snippets/login-form-with-play-function.md
index 1614a140698f..9a3ce9760838 100644
--- a/docs/_snippets/login-form-with-play-function.md
+++ b/docs/_snippets/login-form-with-play-function.md
@@ -1,9 +1,9 @@
-```ts filename="LoginForm.stories.ts" renderer="angular" language="ts"
+```ts filename="LoginForm.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { expect } from 'storybook/test';
 
-import { LoginForm } from './LoginForm.component';
+import { LoginForm } from './login-form.component';
 
 const meta: Meta<LoginForm> = {
   component: LoginForm,
@@ -34,6 +34,39 @@ export const FilledForm: Story = {
 };
 ```
 
+```ts filename="LoginForm.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { LoginForm } from './login-form.component';
+
+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 filename="LoginForm.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
@@ -173,7 +206,7 @@ export const FilledForm: Story = {
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import { expect, userEvent, within } from 'storybook/test';
+  import { expect, within } from 'storybook/test';
 
   import LoginForm from './LoginForm.svelte';
 
@@ -209,8 +242,8 @@ export const FilledForm: Story = {
 />
 ```
 
-```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
-import { expect, userEvent, within } from 'storybook/test';
+```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
+import { expect, within } from 'storybook/test';
 
 import LoginForm from './LoginForm.svelte';
 
@@ -244,7 +277,7 @@ export const FilledForm = {
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import { expect, userEvent, within } from 'storybook/test';
+  import { expect, within } from 'storybook/test';
 
   import LoginForm from './LoginForm.svelte';
 
@@ -280,11 +313,11 @@ export const FilledForm = {
 />
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
-import { expect, userEvent, within } from 'storybook/test';
+import { expect, within } from 'storybook/test';
 
 import LoginForm from './LoginForm.svelte';
 
@@ -317,7 +350,7 @@ export const FilledForm: Story = {
 };
 ```
 
-```js filename="LoginForm.stories.js" renderer="vue" language="js"
+```js filename="LoginForm.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 import LoginForm from './LoginForm.vue';
@@ -357,7 +390,7 @@ export const FilledForm = {
 };
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="vue" language="ts"
+```ts filename="LoginForm.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { expect } from 'storybook/test';
@@ -402,7 +435,93 @@ export const FilledForm: Story = {
 };
 ```
 
-```js filename="LoginForm.stories.js" renderer="web-components" language="js"
+```ts filename="LoginForm.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import LoginForm from './LoginForm.vue';
+
+const meta = preview.meta({
+  component: LoginForm,
+});
+
+export const EmptyForm = meta.story({
+  render: () => ({
+    components: { LoginForm },
+    template: `<LoginForm />`,
+  }),
+});
+
+export const FilledForm = meta.story({
+  render: () => ({
+    components: { LoginForm },
+    template: `<LoginForm />`,
+  }),
+  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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import LoginForm from './LoginForm.vue';
+
+const meta = preview.meta({
+  component: LoginForm,
+});
+
+export const EmptyForm = meta.story({
+  render: () => ({
+    components: { LoginForm },
+    template: `<LoginForm />`,
+  }),
+});
+
+export const FilledForm = meta.story({
+  render: () => ({
+    components: { LoginForm },
+    template: `<LoginForm />`,
+  }),
+  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 filename="LoginForm.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 export default {
@@ -431,7 +550,7 @@ export const FilledForm = {
 };
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="web-components" language="ts"
+```ts filename="LoginForm.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { expect } from 'storybook/test';
@@ -465,11 +584,73 @@ export const FilledForm: Story = {
 };
 ```
 
-```ts filename="LoginForm.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="LoginForm.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
 import preview from '../.storybook/preview';
 
+const meta = preview.meta({
+  component: 'demo-login-form',
+});
+
+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();
+  },
+});
+```
+
+```ts filename="LoginForm.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-login-form',
+});
+
+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();
+  },
+});
+```
+
+```ts filename="LoginForm.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import { expect } from 'storybook/test';
 
+import preview from '../.storybook/preview';
+
 import { LoginForm } from './LoginForm';
 
 const meta = preview.meta({
@@ -501,9 +682,10 @@ export const FilledForm = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { LoginForm } from './LoginForm';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/main-config-addons.md b/docs/_snippets/main-config-addons.md
index 58a5dd7fbd9e..2f19f538b51c 100644
--- a/docs/_snippets/main-config-addons.md
+++ b/docs/_snippets/main-config-addons.md
@@ -139,3 +139,177 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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')),
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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')),
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 dedcca4f05ff..07bfdba2d3c4 100644
--- a/docs/_snippets/main-config-babel.md
+++ b/docs/_snippets/main-config-babel.md
@@ -75,3 +75,97 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 e2f1a0838ea9..a41dd9d2a9b4 100644
--- a/docs/_snippets/main-config-builder-custom-config.md
+++ b/docs/_snippets/main-config-builder-custom-config.md
@@ -67,3 +67,75 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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',
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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 2485cfc343af..4ac696eb2f36 100644
--- a/docs/_snippets/main-config-core-builder.md
+++ b/docs/_snippets/main-config-core-builder.md
@@ -71,3 +71,75 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../../../vite.config.js',
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 d805de493506..8de538293838 100644
--- a/docs/_snippets/main-config-core-cross-origin-isolated.md
+++ b/docs/_snippets/main-config-core-cross-origin-isolated.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    crossOriginIsolated: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    crossOriginIsolated: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 ee890b0b1cf3..c3153a2f9ac3 100644
--- a/docs/_snippets/main-config-core-disable-project-json.md
+++ b/docs/_snippets/main-config-core-disable-project-json.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableProjectJson: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableProjectJson: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 6dade0254893..c523e0528f5a 100644
--- a/docs/_snippets/main-config-core-disable-telemetry.md
+++ b/docs/_snippets/main-config-core-disable-telemetry.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 729543b43fef..d958cfa34f09 100644
--- a/docs/_snippets/main-config-core-disable-update-notifications.md
+++ b/docs/_snippets/main-config-core-disable-update-notifications.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWhatsNewNotifications: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWhatsNewNotifications: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 3293a224d36a..4af631ab4739 100644
--- a/docs/_snippets/main-config-core-disable-webpack-defaults.md
+++ b/docs/_snippets/main-config-core-disable-webpack-defaults.md
@@ -51,3 +51,41 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWebpackDefaults: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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 3f0bd87705c7..dc0b8a117a07 100644
--- a/docs/_snippets/main-config-core-enable-crash-reports.md
+++ b/docs/_snippets/main-config-core-enable-crash-reports.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 80bf9457fea7..3348979f0ff7 100644
--- a/docs/_snippets/main-config-docs-default-name.md
+++ b/docs/_snippets/main-config-docs-default-name.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    defaultName: 'Documentation',
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    defaultName: 'Documentation',
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 02b60f345914..c3d3c33ecc6d 100644
--- a/docs/_snippets/main-config-docs-docs-mode.md
+++ b/docs/_snippets/main-config-docs-docs-mode.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    docsMode: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    docsMode: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 9be592a44779..0425b1f8233c 100644
--- a/docs/_snippets/main-config-env.md
+++ b/docs/_snippets/main-config-env.md
@@ -71,3 +71,92 @@ export default defineMain({
   }),
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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',
+  }),
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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',
+  }),
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 7a7fc932b0c9..3e8335a5815d 100644
--- a/docs/_snippets/main-config-features-arg-type-targets-v7.md
+++ b/docs/_snippets/main-config-features-arg-type-targets-v7.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    argTypeTargetsV7: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    argTypeTargetsV7: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 9a0f83c5c877..c17c30d26375 100644
--- a/docs/_snippets/main-config-features-development-mode-for-build.md
+++ b/docs/_snippets/main-config-features-development-mode-for-build.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    developmentModeForBuild: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    developmentModeForBuild: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    developmentModeForBuild: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-features-experimental-test-syntax.md b/docs/_snippets/main-config-features-experimental-test-syntax.md
index c0a432ce7954..1b5fc47b62be 100644
--- a/docs/_snippets/main-config-features-experimental-test-syntax.md
+++ b/docs/_snippets/main-config-features-experimental-test-syntax.md
@@ -10,3 +10,39 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.js|ts (CSF Next 🧪)" renderer="vue" language="ts"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    experimentalTestSyntax: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.js|ts (CSF Next 🧪)" renderer="angular" language="ts"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    experimentalTestSyntax: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.js|ts (CSF Next 🧪)" renderer="web-components" language="ts"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    experimentalTestSyntax: 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 af3793f558e6..dc264a6fd0f0 100644
--- a/docs/_snippets/main-config-features-legacy-decorator-file-order.md
+++ b/docs/_snippets/main-config-features-legacy-decorator-file-order.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    legacyDecoratorFileOrder: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    legacyDecoratorFileOrder: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 d1824a90d3fa..254dbee28aca 100644
--- a/docs/_snippets/main-config-framework.md
+++ b/docs/_snippets/main-config-framework.md
@@ -59,3 +59,67 @@ export default defineMain({
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  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 f3ee499fa206..d92a24fc9be7 100644
--- a/docs/_snippets/main-config-indexers-jsonstories.md
+++ b/docs/_snippets/main-config-indexers-jsonstories.md
@@ -134,3 +134,167 @@ export default defineMain({
   experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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/vue3-vite',
+  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],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/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/angular',
+  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],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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/web-components-vite',
+  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 6952d1bd8d3e..6e12e555f583 100644
--- a/docs/_snippets/main-config-indexers-title.md
+++ b/docs/_snippets/main-config-indexers-title.md
@@ -125,3 +125,157 @@ export default defineMain({
   experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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/vue3-vite',
+  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.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/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/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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/web-components-vite',
+  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.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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/web-components-vite',
+  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 2a3f4a0498be..2f7edc824297 100644
--- a/docs/_snippets/main-config-indexers.md
+++ b/docs/_snippets/main-config-indexers.md
@@ -95,3 +95,122 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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];
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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];
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 2b4003ee020e..5b5105fc490e 100644
--- a/docs/_snippets/main-config-log-level.md
+++ b/docs/_snippets/main-config-log-level.md
@@ -43,3 +43,47 @@ export default defineMain({
   logLevel: 'debug',
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  logLevel: 'debug',
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 734498d61637..24afb0330449 100644
--- a/docs/_snippets/main-config-manager-head.md
+++ b/docs/_snippets/main-config-manager-head.md
@@ -55,3 +55,72 @@ export default defineMain({
   `,
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  managerHead: (head) => `
+    ${head}
+    <link rel="preload" href="/fonts/my-custom-manager-font.woff2" />
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  managerHead: (head) => `
+    ${head}
+    <link rel="preload" href="/fonts/my-custom-manager-font.woff2" />
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 e2de4758e699..1f4474e532ba 100644
--- a/docs/_snippets/main-config-preview-body.md
+++ b/docs/_snippets/main-config-preview-body.md
@@ -63,3 +63,82 @@ export default defineMain({
   `,
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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>' : ''
+    }
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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>' : ''
+    }
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 965f84ed5e7f..2a73cd280d95 100644
--- a/docs/_snippets/main-config-preview-head.md
+++ b/docs/_snippets/main-config-preview-head.md
@@ -63,3 +63,82 @@ export default defineMain({
   `,
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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>' : ''
+    }
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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>' : ''
+    }
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 7ba3a38d8cba..0ab973eb5a83 100644
--- a/docs/_snippets/main-config-preview.md
+++ b/docs/_snippets/main-config-preview.md
@@ -119,3 +119,155 @@ export default defineMain({
  `,
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="Head (CSF Next 🧪)"
+import { defineMain } from '@storybook/vue3-vite/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="vue" language="js" tabTitle="Head (CSF Next 🧪)"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        background: #827979;
+      }
+    </style>
+ `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="Body (CSF Next 🧪)"
+import { defineMain } from '@storybook/angular/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="angular" language="js" tabTitle="Body (CSF Next 🧪)"
+import { defineMain } from '@storybook/angular/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="angular" language="ts" tabTitle="Head (CSF Next 🧪)"
+import { defineMain } from '@storybook/angular/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="angular" language="js" tabTitle="Head (CSF Next 🧪)"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        background: #827979;
+      }
+    </style>
+ `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="Body (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-vite/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="web-components" language="js" tabTitle="Body (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-vite/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="web-components" language="ts" tabTitle="Head (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-vite/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="web-components" language="js" tabTitle="Head (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-vite/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 b7f6878155a2..af0e6f7954b1 100644
--- a/docs/_snippets/main-config-refs-disable.md
+++ b/docs/_snippets/main-config-refs-disable.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'package-name': { disable: true },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'package-name': { disable: true },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 8ad2ae33bb54..48179c64768d 100644
--- a/docs/_snippets/main-config-refs-with-function.md
+++ b/docs/_snippets/main-config-refs-with-function.md
@@ -139,3 +139,175 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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 filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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',
+      },
+    };
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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',
+      },
+    };
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 c523efc4cd34..cbc89a307cc1 100644
--- a/docs/_snippets/main-config-refs.md
+++ b/docs/_snippets/main-config-refs.md
@@ -71,3 +71,90 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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 filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 a33c62a6b1a4..6253d748d280 100644
--- a/docs/_snippets/main-config-static-dirs-with-object.md
+++ b/docs/_snippets/main-config-static-dirs-with-object.md
@@ -43,3 +43,57 @@ export default defineMain({
   staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 edbfa31d99ec..12ec0bf9e995 100644
--- a/docs/_snippets/main-config-static-dirs.md
+++ b/docs/_snippets/main-config-static-dirs.md
@@ -43,3 +43,57 @@ export default defineMain({
   staticDirs: ['../public', '../static'],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../public', '../static'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../public', '../static'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../public', '../static'],
+});
+```
diff --git a/docs/_snippets/main-config-stories-only-mdx.md b/docs/_snippets/main-config-stories-only-mdx.md
new file mode 100644
index 000000000000..a9c3e70ae426
--- /dev/null
+++ b/docs/_snippets/main-config-stories-only-mdx.md
@@ -0,0 +1,157 @@
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g., nextjs-vite, vue3-vite, angular, sveltekit, etc.
+import type { Preview } from '@storybook/your-framework';
+
+const preview: Preview = {
+  // ...
+  // define at least one local story/page here
+  stories: ['../Introduction.mdx'],
+  // define composed Storybooks here
+  refs: {
+    firstProject: { title: 'First', url: 'some-url' },
+    secondProject: { title: 'Second', url: 'other-url' },
+  },
+};
+
+export default preview;
+```
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
+export default {
+  // ...
+  // define at least one local story/page here
+  stories: ['../Introduction.mdx'],
+  // define composed Storybooks here
+  refs: {
+    firstProject: { title: 'First', url: 'some-url' },
+    secondProject: { title: 'Second', url: 'other-url' },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using, e.g., nextjs, nextjs-vite, react-vite, etc.
+import { defineMain } from '@storybook/your-framework/node';
+
+const config = defineMain({
+  // ...
+  // define at least one local story/page here
+  stories: ['../Introduction.mdx'],
+  // define composed Storybooks here
+  refs: {
+    firstProject: { title: 'First', url: 'some-url' },
+    secondProject: { title: 'Second', url: 'other-url' },
+  },
+});
+
+export default 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., nextjs, nextjs-vite, react-vite, etc.
+import { defineMain } from '@storybook/your-framework/node';
+
+const config = defineMain({
+  // ...
+  // define at least one local story/page here
+  stories: ['../Introduction.mdx'],
+  // define composed Storybooks here
+  refs: {
+    firstProject: { title: 'First', url: 'some-url' },
+    secondProject: { title: 'Second', url: 'other-url' },
+  },
+});
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+const config = defineMain({
+  // ...
+  // define at least one local story/page here
+  stories: ['../Introduction.mdx'],
+  // define composed Storybooks here
+  refs: {
+    firstProject: { title: 'First', url: 'some-url' },
+    secondProject: { title: 'Second', url: 'other-url' },
+  },
+});
+
+export default config;
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+const config = defineMain({
+  // ...
+  // define at least one local story/page here
+  stories: ['../Introduction.mdx'],
+  // define composed Storybooks here
+  refs: {
+    firstProject: { title: 'First', url: 'some-url' },
+    secondProject: { title: 'Second', url: 'other-url' },
+  },
+});
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+const config = defineMain({
+  // ...
+  // define at least one local story/page here
+  stories: ['../Introduction.mdx'],
+  // define composed Storybooks here
+  refs: {
+    firstProject: { title: 'First', url: 'some-url' },
+    secondProject: { title: 'Second', url: 'other-url' },
+  },
+});
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+const config = defineMain({
+  // ...
+  // define at least one local story/page here
+  stories: ['../Introduction.mdx'],
+  // define composed Storybooks here
+  refs: {
+    firstProject: { title: 'First', url: 'some-url' },
+    secondProject: { title: 'Second', url: 'other-url' },
+  },
+});
+
+export default config;
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+const config = defineMain({
+  // ...
+  // define at least one local story/page here
+  stories: ['../Introduction.mdx'],
+  // define composed Storybooks here
+  refs: {
+    firstProject: { title: 'First', url: 'some-url' },
+    secondProject: { title: 'Second', url: 'other-url' },
+  },
+});
+
+export default config;
+```
diff --git a/docs/_snippets/main-config-stories-ordered.md b/docs/_snippets/main-config-stories-ordered.md
index e3e02cfe99df..04ce79709d39 100644
--- a/docs/_snippets/main-config-stories-ordered.md
+++ b/docs/_snippets/main-config-stories-ordered.md
@@ -51,3 +51,65 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: [
+    '../src/**/*.mdx', // 👈 These will display first in the sidebar
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', // 👈 Followed by these
+  ],
+});
+```
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: [
+    '../src/**/*.mdx', // 👈 These will display first in the sidebar
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', // 👈 Followed by these
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: [
+    '../src/**/*.mdx', // 👈 These will display first in the sidebar
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', // 👈 Followed by these
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 ae1283e3dbd4..4fb109551301 100644
--- a/docs/_snippets/main-config-stories-with-logic.md
+++ b/docs/_snippets/main-config-stories-with-logic.md
@@ -74,3 +74,92 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+import type { StoriesEntry } from 'storybook/internal/types';
+
+async function findStories(): Promise<StoriesEntry[]> {
+  // your custom logic returns a list of files
+}
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: async (list: StoriesEntry[]) => [
+    ...list,
+    // 👇 Add your found stories to the existing list of story files
+    ...(await findStories()),
+  ],
+});
+```
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+async function findStories() {
+  // your custom logic returns a list of files
+}
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: async (list) => [
+    ...list,
+    // 👇 Add your found stories to the existing list of story files
+    ...(await findStories()),
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+async function findStories() {
+  // your custom logic returns a list of files
+}
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: async (list) => [
+    ...list,
+    // 👇 Add your found stories to the existing list of story files
+    ...(await findStories()),
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+import type { StoriesEntry } from 'storybook/internal/types';
+
+async function findStories(): Promise<StoriesEntry[]> {
+  // your custom logic returns a list of files
+}
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+async function findStories() {
+  // your custom logic returns a list of files
+}
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 863a786ad555..f52c7b397927 100644
--- a/docs/_snippets/main-config-stories-with-object.md
+++ b/docs/_snippets/main-config-stories-with-object.md
@@ -75,3 +75,95 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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 filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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',
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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',
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 548b8df91e09..80ab522552a2 100644
--- a/docs/_snippets/main-config-stories.md
+++ b/docs/_snippets/main-config-stories.md
@@ -39,3 +39,52 @@ export default defineMain({
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
diff --git a/docs/_snippets/main-config-tags-test-fn-exclude.md b/docs/_snippets/main-config-tags-test-fn-exclude.md
index adc57f3f7573..b8513782ccfe 100644
--- a/docs/_snippets/main-config-tags-test-fn-exclude.md
+++ b/docs/_snippets/main-config-tags-test-fn-exclude.md
@@ -66,3 +66,80 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  tags: {
+    // 👇 Adjust the default configuration of this tag
+    _test: {
+      defaultFilterSelection: 'exclude',
+    },
+  },
+});
+```
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  tags: {
+    // 👇 Adjust the default configuration of this tag
+    _test: {
+      defaultFilterSelection: 'exclude',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  tags: {
+    // 👇 Adjust the default configuration of this tag
+    _test: {
+      defaultFilterSelection: 'exclude',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 86434ccc2791..202b6cc4bd87 100644
--- a/docs/_snippets/main-config-tags.md
+++ b/docs/_snippets/main-config-tags.md
@@ -64,3 +64,82 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  tags: {
+    // 👇 Define a custom tag named "experimental"
+    experimental: {
+      defaultFilterSelection: 'exclude', // Or 'include'
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  tags: {
+    // 👇 Define a custom tag named "experimental"
+    experimental: {
+      defaultFilterSelection: 'exclude', // Or 'include'
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 5d936de597d9..5fdeb1bcc018 100644
--- a/docs/_snippets/main-config-test-disable-autodocs.md
+++ b/docs/_snippets/main-config-test-disable-autodocs.md
@@ -59,3 +59,75 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableAutoDocs: false,
+    },
+  },
+});
+```
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableAutoDocs: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableAutoDocs: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 fc02c383f4e7..c409bd7d2654 100644
--- a/docs/_snippets/main-config-test-disable-blocks.md
+++ b/docs/_snippets/main-config-test-disable-blocks.md
@@ -59,3 +59,75 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableBlocks: false,
+    },
+  },
+});
+```
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableBlocks: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableBlocks: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 76f58bfd1ee6..3e6e8f88c9f8 100644
--- a/docs/_snippets/main-config-test-disable-disableaddons.md
+++ b/docs/_snippets/main-config-test-disable-disableaddons.md
@@ -63,3 +63,82 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-vitest'],
+  build: {
+    test: {
+      disabledAddons: ['@storybook/addon-a11y'],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-vitest'],
+  build: {
+    test: {
+      disabledAddons: ['@storybook/addon-a11y'],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 545b8438cfc4..ea2c1d8f3bc9 100644
--- a/docs/_snippets/main-config-test-disable-docgen.md
+++ b/docs/_snippets/main-config-test-disable-docgen.md
@@ -59,3 +59,75 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableDocgen: false,
+    },
+  },
+});
+```
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableDocgen: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableDocgen: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 77cfc7bc982c..8fd4a1d94837 100644
--- a/docs/_snippets/main-config-test-disable-mdx.md
+++ b/docs/_snippets/main-config-test-disable-mdx.md
@@ -59,3 +59,75 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableMDXEntries: false,
+    },
+  },
+});
+```
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableMDXEntries: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableMDXEntries: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 6d77d68fa264..8c4c0c5a269f 100644
--- a/docs/_snippets/main-config-test-disable-sourcemaps.md
+++ b/docs/_snippets/main-config-test-disable-sourcemaps.md
@@ -59,3 +59,75 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableSourcemaps: false,
+    },
+  },
+});
+```
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableSourcemaps: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableSourcemaps: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 cc3c826f34ab..92ea2621307d 100644
--- a/docs/_snippets/main-config-test-disable-treeshaking.md
+++ b/docs/_snippets/main-config-test-disable-treeshaking.md
@@ -59,3 +59,75 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableTreeShaking: false,
+    },
+  },
+});
+```
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableTreeShaking: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableTreeShaking: false,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 07cc9f88ecec..7cd585146bf8 100644
--- a/docs/_snippets/main-config-typescript-check-options.md
+++ b/docs/_snippets/main-config-typescript-check-options.md
@@ -1,5 +1,5 @@
-```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.
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, etc.
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -17,7 +17,7 @@ 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)
+// Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs, nextjs-webpack5)
 import { defineMain } from '@storybook/your-framework/node';
 
 export default defineMain({
@@ -31,3 +31,18 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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 5399472f43fb..5d6c646aed73 100644
--- a/docs/_snippets/main-config-typescript-check.md
+++ b/docs/_snippets/main-config-typescript-check.md
@@ -25,3 +25,53 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-skip-compiler.md b/docs/_snippets/main-config-typescript-skip-compiler.md
index 2f1945221bbc..58864500a234 100644
--- a/docs/_snippets/main-config-typescript-skip-compiler.md
+++ b/docs/_snippets/main-config-typescript-skip-compiler.md
@@ -25,3 +25,53 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    skipCompiler: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    skipCompiler: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    skipCompiler: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 3f4cb1ebf855..69c7bda6eb35 100644
--- a/docs/_snippets/main-config-typical.md
+++ b/docs/_snippets/main-config-typical.md
@@ -56,3 +56,72 @@ export default defineMain({
   staticDirs: ['../public'],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  // Required
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  // Required
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // Optional
+  addons: ['@storybook/addon-docs'],
+  staticDirs: ['../public'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  // Required
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // Optional
+  addons: ['@storybook/addon-docs'],
+  staticDirs: ['../public'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  // Required
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  // Required
+  framework: '@storybook/web-components-vite',
+  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 d9d950764f26..9f9b7188e272 100644
--- a/docs/_snippets/main-config-vite-final-env.md
+++ b/docs/_snippets/main-config-vite-final-env.md
@@ -3,9 +3,6 @@ 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)'],
-  core: {
-    builder: '@storybook/builder-vite',
-  },
   async viteFinal(config, { configType }) {
     const { mergeConfig } = await import('vite');
 
@@ -29,9 +26,6 @@ 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');
 
@@ -57,9 +51,6 @@ 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');
 
@@ -86,9 +77,96 @@ 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
+    });
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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 filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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
+    });
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config, { configType }) {
     const { mergeConfig } = await import('vite');
 
diff --git a/docs/_snippets/main-config-vite-final.md b/docs/_snippets/main-config-vite-final.md
index 17804155a7d4..48c0f201d82b 100644
--- a/docs/_snippets/main-config-vite-final.md
+++ b/docs/_snippets/main-config-vite-final.md
@@ -91,3 +91,95 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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
+    });
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 0265b4f22e52..ac3ffe219789 100644
--- a/docs/_snippets/main-config-webpack-final.md
+++ b/docs/_snippets/main-config-webpack-final.md
@@ -75,3 +75,21 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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/module-aliases-config.md b/docs/_snippets/module-aliases-config.md
index 7745c67d9ec3..f11c3cfdc34c 100644
--- a/docs/_snippets/module-aliases-config.md
+++ b/docs/_snippets/module-aliases-config.md
@@ -209,3 +209,159 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="Vite (CSF Next 🧪)"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="Vite (CSF Next 🧪)"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="angular" language="ts" tabTitle="Webpack (CSF Next 🧪)"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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="angular" language="js" tabTitle="Webpack (CSF Next 🧪)"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="Vite (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="Vite (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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;
+  },
+});
+```
diff --git a/docs/_snippets/mount-advanced.md b/docs/_snippets/mount-advanced.md
index 6f3adcd911a4..cb8284eae2ec 100644
--- a/docs/_snippets/mount-advanced.md
+++ b/docs/_snippets/mount-advanced.md
@@ -11,7 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   play: async ({ mount, args, userEvent }) => {
     const note = await db.note.create({
       data: { title: 'Mount inside of play' },
@@ -39,7 +39,7 @@ import { Page } from './Page';
 
 export default { component: Page };
 
-export const Default = {
+export const Basic = {
   play: async ({ mount, args, userEvent }) => {
     const note = await db.note.create({
       data: { title: 'Mount inside of play' },
@@ -60,6 +60,71 @@ export const Default = {
 };
 ```
 
+```tsx filename="Page.stories.tsx" renderer="angular" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/angular';
+
+// 👇 Automocked module resolves to '../lib/__mocks__/db'
+import db from '../lib/db';
+import { Page } from './page.component';
+
+const meta = { component: Page } satisfies Meta<typeof Page>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  play: async ({ mount, args, userEvent }) => {
+    const note = await db.note.create({
+      data: { title: 'Mount inside of play' },
+    });
+
+    const canvas = await mount(
+      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) } } },
+    );
+
+    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 } },
+  },
+};
+```
+
+```tsx filename="Page.stories.tsx" renderer="angular" 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.component';
+
+const meta = preview.meta({ component: Page });
+
+export const Basic = meta.story({
+  play: async ({ mount, args, userEvent }) => {
+    const note = await db.note.create({
+      data: { title: 'Mount inside of play' },
+    });
+
+    const canvas = await mount(
+      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) } } },
+    );
+
+    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 } },
+  },
+});
+```
+
 ```ts filename="Page.stories.ts" renderer="svelte" language="ts"
 // Replace your-framework with the framework you are using, e.g., svelte-vite, sveltekit, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -73,7 +138,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   play: async ({ mount, args, userEvent }) => {
     const note = await db.note.create({
       data: { title: 'Mount inside of play' },
@@ -102,7 +167,7 @@ import { Page } from './Page';
 
 export default { component: Page };
 
-export const Default = {
+export const Basic = {
   play: async ({ mount, args, userEvent }) => {
     const note = await db.note.create({
       data: { title: 'Mount inside of play' },
@@ -136,7 +201,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   play: async ({ mount, args, userEvent }) => {
     const note = await db.note.create({
       data: { title: 'Mount inside of play' },
@@ -165,7 +230,7 @@ import { Page } from './Page';
 
 export default { component: Page };
 
-export const Default = {
+export const Basic = {
   play: async ({ mount, args, userEvent }) => {
     const note = await db.note.create({
       data: { title: 'Mount inside of play' },
@@ -196,7 +261,7 @@ import { Page } from './Page';
 
 const meta = preview.meta({ component: Page });
 
-export const Default = meta.story({
+export const Basic = meta.story({
   play: async ({ mount, args, userEvent }) => {
     const note = await db.note.create({
       data: { title: 'Mount inside of play' },
@@ -229,7 +294,7 @@ const meta = preview.meta({
   component: Page,
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
   play: async ({ mount, args, userEvent }) => {
     const note = await db.note.create({
       data: { title: 'Mount inside of play' },
@@ -249,3 +314,67 @@ export const Default = meta.story({
   },
 });
 ```
+
+```ts filename="Page.stories.ts" renderer="vue" 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.vue';
+
+const meta = preview.meta({ component: Page });
+
+export const Basic = meta.story({
+  play: async ({ mount, args, userEvent }) => {
+    const note = await db.note.create({
+      data: { title: 'Mount inside of play' },
+    });
+
+    const canvas = await mount(
+      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) } } },
+    );
+
+    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 -->
+
+```js filename="Page.stories.js" renderer="vue" 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.vue';
+
+const meta = preview.meta({ component: Page });
+
+export const Basic = meta.story({
+  play: async ({ mount, args, userEvent }) => {
+    const note = await db.note.create({
+      data: { title: 'Mount inside of play' },
+    });
+
+    const canvas = await mount(
+      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) } } },
+    );
+
+    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 0f0e9ba51ee9..8fbcddec7e15 100644
--- a/docs/_snippets/mount-basic.md
+++ b/docs/_snippets/mount-basic.md
@@ -28,6 +28,27 @@ export const ChristmasUI: Story = {
 };
 ```
 
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';
+
+import Page from './page.component';
+
+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
+  },
+});
+```
+
 ```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -50,7 +71,7 @@ export const ChristmasUI: Story = {
 />
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 // ...rest of story file
@@ -87,7 +108,7 @@ export const ChristmasUI: Story = {
 />
 ```
 
-```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 // ...rest of story file
@@ -145,3 +166,45 @@ export const ChristmasUI = meta.story({
   },
 });
 ```
+
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+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 filename="Page.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+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 c7bf85337361..997c3ce4d9bb 100644
--- a/docs/_snippets/msw-addon-configure-handlers-graphql.md
+++ b/docs/_snippets/msw-addon-configure-handlers-graphql.md
@@ -1,15 +1,14 @@
-```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="story"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
+```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="story CSF 3"
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { graphql, HttpResponse, delay } from 'msw';
 
-import { DocumentHeader } from './DocumentHeader.component';
-import { DocumentList } from './DocumentList.component';
-import { PageLayout } from './PageLayout.component';
-import { DocumentScreen } from './YourPage.component';
+import { DocumentHeader } from './document-header.component';
+import { DocumentList } from './document-list.component';
+import { PageLayout } from './page-layout.component';
+import { DocumentScreen } from './your-page.component';
 import { MockGraphQLModule } from './mock-graphql.module';
 
 const meta: Meta<DocumentScreen> = {
@@ -89,6 +88,94 @@ export const MockedError: Story = {
 };
 ```
 
+```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="story CSF Next 🧪"
+import { moduleMetadata } from '@storybook/angular';
+
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { graphql, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import { DocumentHeader } from './document-header.component';
+import { DocumentList } from './document-list.component';
+import { PageLayout } from './page-layout.component';
+import { DocumentScreen } from './your-page.component';
+import { MockGraphQLModule } from './mock-graphql.module';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+  decorators: [
+    moduleMetadata({
+      declarations: [DocumentList, DocumentHeader, PageLayout],
+      imports: [CommonModule, HttpClientModule, MockGraphQLModule],
+    }),
+  ],
+});
+
+//👇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: [
+        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',
+              },
+            ],
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
 ```ts filename="mock-graphql.module.ts" renderer="angular" language="ts" tabTitle="mock-apollo-module"
 import { NgModule } from '@angular/core';
 import { APOLLO_OPTIONS } from 'apollo-angular';
@@ -405,7 +492,7 @@ export const MockedError: Story = {
 />
 ```
 
-```js filename="YourPage.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourPage.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { graphql, HttpResponse, delay } from 'msw';
 
 import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
@@ -583,7 +670,7 @@ export const MockedError = {
 />
 ```
 
-```ts filename="YourPage.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourPage.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -1126,3 +1213,163 @@ export const MockedError = meta.story({
   },
 });
 ```
+
+```ts filename="YourPage.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { graphql, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import WrapperComponent from './ApolloWrapperClient.vue';
+import DocumentScreen from './YourPage.vue';
+
+//👇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,
+  render: () => ({
+    components: { DocumentScreen, WrapperComponent },
+    template: '<WrapperComponent><DocumentScreen /></WrapperComponent>',
+  }),
+});
+
+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 -->
+
+```js filename="YourPage.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { graphql, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import WrapperComponent from './ApolloWrapperClient.vue';
+import DocumentScreen from './YourPage.vue';
+
+//👇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,
+  render: () => ({
+    components: { DocumentScreen, WrapperComponent },
+    template: '<WrapperComponent><DocumentScreen /></WrapperComponent>',
+  }),
+});
+
+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 350dd397c29b..2a40b3c524cf 100644
--- a/docs/_snippets/msw-addon-configure-handlers-http.md
+++ b/docs/_snippets/msw-addon-configure-handlers-http.md
@@ -1,9 +1,9 @@
-```ts filename="YourPage.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
+```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import { http, HttpResponse, delay } from 'msw';
 
-import { DocumentScreen } from './YourPage.component';
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { DocumentScreen } from './your-page.component';
 
 const meta: Meta<DocumentScreen> = {
   component: DocumentScreen,
@@ -65,6 +65,70 @@ export const MockedError: Story = {
 };
 ```
 
+```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { http, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import { DocumentScreen } from './your-page.component';
+
+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,
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
 ```svelte filename="YourPage.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -133,7 +197,7 @@ export const MockedError: Story = {
 />
 ```
 
-```js filename="YourPage.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourPage.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { http, HttpResponse, delay } from 'msw';
 
 import DocumentScreen from './YourPage.svelte';
@@ -325,7 +389,7 @@ export const MockedError = {
 />
 ```
 
-```ts filename="YourPage.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourPage.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -461,7 +525,7 @@ export const MockedError: Story = {
 };
 ```
 
-```js filename="YourPage.stories.js" renderer="web-components" language="js"
+```js filename="YourPage.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { http, HttpResponse, delay } from 'msw';
 
 export default {
@@ -521,7 +585,7 @@ export const MockedError = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="web-components" language="ts"
+```ts filename="YourPage.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { http, HttpResponse, delay } from 'msw';
@@ -586,6 +650,130 @@ export const MockedError: Story = {
 };
 ```
 
+```ts filename="YourPage.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { http, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-document-screen',
+});
+
+// 👇 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 filename="YourPage.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { http, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-document-screen',
+});
+
+// 👇 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,
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
 ```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import { http, HttpResponse, delay } from 'msw';
 
@@ -659,6 +847,134 @@ import preview from '../.storybook/preview';
 
 import { DocumentScreen } from './YourPage';
 
+// 👇 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,
+});
+
+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,
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
+```ts filename="YourPage.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { http, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import DocumentScreen from './YourPage.vue';
+
+// 👇 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,
+});
+
+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 filename="YourPage.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { http, HttpResponse, delay } from 'msw';
+
+import preview from '../.storybook/preview';
+
+import DocumentScreen from './YourPage.vue';
+
 const meta = preview.meta({
   component: DocumentScreen,
 });
diff --git a/docs/_snippets/msw-addon-initialize.md b/docs/_snippets/msw-addon-initialize.md
index 6a04e821f59e..31b68b053eb6 100644
--- a/docs/_snippets/msw-addon-initialize.md
+++ b/docs/_snippets/msw-addon-initialize.md
@@ -9,7 +9,6 @@ import { initialize, mswLoader } from 'msw-storybook-addon';
 initialize();
 
 export default {
-  // ... rest of preview configuration
   loaders: [mswLoader], // 👈 Add the MSW loader to all stories
 };
 ```
@@ -28,7 +27,6 @@ import { initialize, mswLoader } from 'msw-storybook-addon';
 initialize();
 
 const preview: Preview = {
-  // ... rest of preview configuration
   loaders: [mswLoader], // 👈 Add the MSW loader to all stories
 };
 
@@ -49,7 +47,6 @@ import { initialize, mswLoader } from 'msw-storybook-addon';
 initialize();
 
 export default definePreview({
-  // ... rest of preview configuration
   loaders: [mswLoader], // 👈 Add the MSW loader to all stories
 });
 ```
@@ -70,7 +67,93 @@ import { initialize, mswLoader } from 'msw-storybook-addon';
 initialize();
 
 export default definePreview({
-  // ... rest of preview configuration
+  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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({
+  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
+});
+```
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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({
+  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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({
+  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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({
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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({
   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 c7e6388ac45c..5f8ccd1bae05 100644
--- a/docs/_snippets/my-component-disable-toc.md
+++ b/docs/_snippets/my-component-disable-toc.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -18,6 +18,24 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -38,7 +56,7 @@ export default meta;
 </script>
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -90,7 +108,7 @@ export default {
 </script>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -132,7 +150,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-component',
   tags: ['autodocs'],
@@ -146,7 +164,7 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -164,6 +182,38 @@ const meta: Meta = {
 export default meta;
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+});
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -186,6 +236,7 @@ const meta = preview.meta({
 
 ```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({
@@ -200,3 +251,39 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 23d51f5c7061..82e7598c0f53 100644
--- a/docs/_snippets/my-component-env-var-config.md
+++ b/docs/_snippets/my-component-env-var-config.md
@@ -1,9 +1,8 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent';
 
-// To apply a set of backgrounds to all stories of Button:
 const meta: Meta<MyComponent> = {
   component: MyComponent,
 };
@@ -11,13 +10,29 @@ const meta: Meta<MyComponent> = {
 export default meta;
 type Story = StoryObj<MyComponent>;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     exampleProp: process.env.EXAMPLE_VAR,
   },
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" 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({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -25,7 +40,7 @@ export default {
   component: MyComponent,
 };
 
-export const Default = {
+export const Basic = {
   args: {
     exampleProp: process.env.EXAMPLE_VAR,
   },
@@ -45,26 +60,26 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     exampleProp: process.env.EXAMPLE_VAR,
   },
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-component',
 };
 
-export const Default = {
+export const Basic = {
   args: {
     exampleProp: process.env.EXAMPLE_VAR,
   },
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -74,13 +89,41 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     exampleProp: process.env.EXAMPLE_VAR,
   },
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const Basic = meta.story({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const Basic = meta.story({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -90,7 +133,7 @@ const meta = preview.meta({
   component: MyComponent,
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
   args: {
     exampleProp: process.env.EXAMPLE_VAR,
   },
@@ -101,13 +144,46 @@ export const Default = meta.story({
 
 ```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({
+export const Basic = meta.story({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Basic = meta.story({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Basic = 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 d4be41376309..16b016506948 100644
--- a/docs/_snippets/my-component-exclude-tags.md
+++ b/docs/_snippets/my-component-exclude-tags.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -18,6 +18,23 @@ export const ExcludeStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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 filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -89,3 +106,98 @@ export const ExcludeStory = meta.story({
   tags: ['no-tests'],
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
+export default {
+  component: 'my-component',
+  //👇 Provides the `no-tests` tag to all stories in this file
+  tags: ['no-tests'],
+};
+
+export const ExcludeStory = {
+  //👇 Adds the `no-tests` tag to this story to exclude it from the tests when enabled in the test-runner configuration
+  tags: ['no-tests'],
+};
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+const meta: Meta = {
+  component: 'my-component',
+  //👇 Provides the `no-tests` tag to all stories in this file
+  tags: ['no-tests'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const ExcludeStory: 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'],
+};
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  //👇 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 filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  //👇 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 91866513c704..6313b89728e4 100644
--- a/docs/_snippets/my-component-include-tags.md
+++ b/docs/_snippets/my-component-include-tags.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -18,6 +18,23 @@ export const IncludeStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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 filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -89,3 +106,98 @@ export const IncludeStory = meta.story({
   tags: ['test-only'],
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
+export default {
+  component: 'my-component',
+  //👇 Provides the `test-only` tag to all stories in this file
+  tags: ['test-only'],
+};
+
+export const IncludeStory = {
+  //👇 Adds the `test-only` tag to this story to be included in the tests when enabled in the test-runner configuration
+  tags: ['test-only'],
+};
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+const meta: Meta = {
+  component: 'my-component',
+  //👇 Provides the `test-only` tag to all stories in this file
+  tags: ['test-only'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const IncludeStory: 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'],
+};
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  //👇 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 filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  //👇 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 183cf19f33a6..6502e422e7e9 100644
--- a/docs/_snippets/my-component-skip-tags.md
+++ b/docs/_snippets/my-component-skip-tags.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -18,6 +18,23 @@ export const SkipStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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 filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -89,3 +106,98 @@ export const SkipStory = meta.story({
   tags: ['skip-test'],
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
+export default {
+  component: 'my-component',
+  //👇 Provides the `skip-test` tag to all stories in this file
+  tags: ['skip-test'],
+};
+
+export const SkipStory = {
+  //👇 Adds the `skip-test` tag to this story to exclude it from the tests when enabled in the test-runner configuration
+  tags: ['skip-test'],
+};
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+const meta: Meta = {
+  component: 'my-component',
+  //👇 Provides the `skip-test` tag to all stories in this file
+  tags: ['skip-test'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const SkipStory: Story = {
+  //👇 Adds the `skip-test` tag to this story to exclude it from the tests when enabled in the test-runner configuration
+  tags: ['skip-test'],
+};
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  //👇 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 exclude it from the tests when enabled in the test-runner configuration
+  tags: ['skip-test'],
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  //👇 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 exclude it from 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 d7f529992211..38294f8af1c4 100644
--- a/docs/_snippets/my-component-story-basic-and-props.md
+++ b/docs/_snippets/my-component-story-basic-and-props.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -10,7 +10,7 @@ const meta: Meta<MyComponent> = {
 export default meta;
 type Story = StoryObj<MyComponent>;
 
-export const Default: Story = {};
+export const Basic: Story = {};
 
 export const WithProp: Story = {
   render: () => ({
@@ -21,6 +21,26 @@ export const WithProp: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Basic = meta.story();
+
+export const WithProp = meta.story({
+  render: () => ({
+    props: {
+      prop: 'value',
+    },
+  }),
+});
+```
+
 ```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -55,6 +75,38 @@ export const WithProp: 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 Basic = meta.story();
+
+export const WithProp = meta.story({
+  render: () => <MyComponent prop="value" />,
+});
+```
+
+```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" />,
+});
+```
+
 ```jsx filename="MyComponent.story.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
@@ -108,7 +160,7 @@ export const WithProp: Story = {
 </Story>
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -152,7 +204,7 @@ export const WithProp = {
 </Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -182,7 +234,7 @@ export const WithProp: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.vue';
 
 export default {
@@ -204,7 +256,7 @@ export const WithProp = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MyComponent from './MyComponent.vue';
@@ -231,7 +283,55 @@ export const WithProp: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Basic = meta.story({
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+});
+
+export const WithProp = meta.story({
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent prop="value"/>',
+  }),
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Basic = meta.story({
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+});
+
+export const WithProp = meta.story({
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent prop="value"/>',
+  }),
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -246,7 +346,7 @@ export const WithProp = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -265,35 +365,34 @@ export const WithProp: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
-import preview from '../.storybook/preview';
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
 
-import { MyComponent } from './MyComponent';
+import preview from '../.storybook/preview';
 
 const meta = preview.meta({
-  component: MyComponent,
+  component: 'my-component',
 });
 
 export const Basic = meta.story();
 
 export const WithProp = meta.story({
-  render: () => <MyComponent prop="value" />,
+  render: () => html`<my-component prop="value" />`,
 });
 ```
 
-<!-- JS snippets still needed while providing both CSF 3 & Next -->
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
 
-```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,
+  component: 'my-component',
 });
 
 export const Basic = meta.story();
 
 export const WithProp = meta.story({
-  render: () => <MyComponent prop="value" />,
+  render: () => html`<my-component prop="value" />`,
 });
 ```
diff --git a/docs/_snippets/my-component-story-mandatory-export.md b/docs/_snippets/my-component-story-mandatory-export.md
index 4e8724606939..91cf467e9d4d 100644
--- a/docs/_snippets/my-component-story-mandatory-export.md
+++ b/docs/_snippets/my-component-story-mandatory-export.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
@@ -44,7 +44,7 @@ export default meta;
 </script>
 ```
 
-```js filename="MyComponent.story.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.story.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -105,7 +105,7 @@ export default {
 </script>
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts|tsx" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -129,7 +129,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+```ts filename="MyComponent.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 } from '@storybook/your-framework';
 
@@ -182,47 +182,3 @@ 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 82f280ba7d2b..a4e3b74bdbdf 100644
--- a/docs/_snippets/my-component-story-use-globaltype.md
+++ b/docs/_snippets/my-component-story-use-globaltype.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -35,6 +35,40 @@ export const StoryWithLocale: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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 {
+      template: `<p>${caption}</p>`,
+    };
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -204,7 +238,7 @@ export const StoryWithLocale = {
 </Story>
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -277,7 +311,7 @@ export const StoryWithLocale = {
 </Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -318,7 +352,7 @@ export const StoryWithLocale: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.vue';
 
 export default {
@@ -350,7 +384,7 @@ export const StoryWithLocale = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MyComponent from './MyComponent.vue';
@@ -390,7 +424,7 @@ export const MyStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -420,7 +454,7 @@ export const StoryWithLocale = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -455,6 +489,140 @@ export const StoryWithLocale: Story = {
 };
 ```
 
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+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 html`<p>${caption}</p>`;
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+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 html`<p>${caption}</p>`;
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 {
+      template: `<p>${caption}</p>`,
+    };
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 {
+      template: `<p>${caption}</p>`,
+    };
+  },
+});
+```
+
 ```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/my-component-story-with-nonstory.md b/docs/_snippets/my-component-story-with-nonstory.md
index b8166069bc92..59fb2584383e 100644
--- a/docs/_snippets/my-component-story-with-nonstory.md
+++ b/docs/_snippets/my-component-story-with-nonstory.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 import someData from './data.json';
 
@@ -31,6 +31,35 @@ export const ComplexStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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 filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -91,6 +120,64 @@ export const ComplexStory: Story = {
 };
 ```
 
+```tsx 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,
+  },
+});
+```
+
+```jsx 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,
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
@@ -174,7 +261,7 @@ export const ComplexStory: Story = {
 <Story name="ComplexStory" args={{ data: complexData }} />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 import someData from './data.json';
@@ -225,7 +312,7 @@ export const ComplexStory = {
 <Story name="ComplexStory" args={{ data: complexData }} />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -258,7 +345,7 @@ export const ComplexStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js"
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.vue';
 
 import someData from './data.json';
@@ -285,7 +372,7 @@ export const ComplexStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MyComponent from './MyComponent.vue';
@@ -317,7 +404,65 @@ export const ComplexStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+import someData from './data.json';
+
+const meta = preview.meta({
+  component: MyComponent,
+  includeStories: ['SimpleStory', 'ComplexStory'],
+  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 filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+import someData from './data.json';
+
+const meta = preview.meta({
+  component: MyComponent,
+  includeStories: ['SimpleStory', 'ComplexStory'],
+  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 filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-component',
   includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
@@ -340,7 +485,7 @@ export const ComplexStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -368,15 +513,11 @@ export const ComplexStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```ts filename="MyComponent.stories.ts" renderer="web-components" 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,
+  component: 'my-component',
   includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
 });
@@ -397,17 +538,11 @@ export const ComplexStory = meta.story({
 });
 ```
 
-<!-- JS snippets still needed while providing both CSF 3 & Next -->
-
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+```js filename="MyComponent.stories.js" renderer="web-components" 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,
+  component: 'my-component',
   includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
 });
diff --git a/docs/_snippets/my-component-story-with-storyname.md b/docs/_snippets/my-component-story-with-storyname.md
index ec7be6662ddf..6032d7800c11 100644
--- a/docs/_snippets/my-component-story-with-storyname.md
+++ b/docs/_snippets/my-component-story-with-storyname.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<Button> = {
   component: MyComponent,
@@ -16,6 +16,21 @@ export const Simple: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Simple = meta.story({
+  name: 'So simple!',
+  // ...
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -48,7 +63,67 @@ export const Simple: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```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 Simple = meta.story({
+  name: 'So simple!',
+  // ...
+});
+```
+
+```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 Simple = meta.story({
+  name: 'So simple!',
+  // ...
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Simple = meta.story({
+  name: 'So simple!',
+  // ...
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Simple = meta.story({
+  name: 'So simple!',
+  // ...
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-component',
 };
@@ -59,7 +134,7 @@ export const Simple = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -75,13 +150,11 @@ export const Simple: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { MyComponent } from './MyComponent';
-
 const meta = preview.meta({
-  component: MyComponent,
+  component: 'my-component',
 });
 
 export const Simple = meta.story({
@@ -90,14 +163,11 @@ export const Simple = meta.story({
 });
 ```
 
-<!-- JS snippets still needed while providing both CSF 3 & Next -->
-
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
-import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
-  component: MyComponent,
+  component: 'my-component',
 });
 
 export const Simple = meta.story({
diff --git a/docs/_snippets/my-component-vite-env-variables.md b/docs/_snippets/my-component-vite-env-variables.md
index 97f14255f517..109d8cc30a13 100644
--- a/docs/_snippets/my-component-vite-env-variables.md
+++ b/docs/_snippets/my-component-vite-env-variables.md
@@ -18,7 +18,7 @@
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -68,7 +68,7 @@ export const ExampleStory = {
 />
 ```
 
-```tsx filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```tsx filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -110,7 +110,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-component',
 };
@@ -123,7 +123,7 @@ export const ExampleStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -141,6 +141,36 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+});
+```
+
 ```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -162,6 +192,7 @@ export const ExampleStory = meta.story({
 
 ```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({
@@ -175,3 +206,37 @@ export const ExampleStory = meta.story({
   },
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 9a83b7ecf57c..5cca87c92386 100644
--- a/docs/_snippets/my-component-with-env-variables.md
+++ b/docs/_snippets/my-component-with-env-variables.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -17,6 +17,22 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -36,7 +52,7 @@ export const ExampleStory: Story = {
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -83,7 +99,7 @@ export const ExampleStory = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -123,7 +139,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-component',
 };
@@ -135,7 +151,7 @@ export const ExampleStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -152,6 +168,34 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -172,6 +216,7 @@ export const ExampleStory = meta.story({
 
 ```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({
@@ -184,3 +229,35 @@ export const ExampleStory = meta.story({
   },
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
+
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-cache-mock.md b/docs/_snippets/nextjs-cache-mock.md
index a8f0f81271dd..7a853ede7bfe 100644
--- a/docs/_snippets/nextjs-cache-mock.md
+++ b/docs/_snippets/nextjs-cache-mock.md
@@ -1,11 +1,8 @@
 ```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
-/*
- * Replace your-framework with nextjs or nextjs-vite
- * 👇 Must include the `.mock` portion of filename to have mocks typed correctly
- */
-import { revalidatePath } from '@storybook/your-framework/cache.mock';
+// Replace your-framework with nextjs or nextjs-vite
+import { revalidatePath } from '@storybook/your-framework/cache';
 
 import MyForm from './my-form';
 
@@ -52,13 +49,16 @@ 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
+/*
+ * Replace your-framework with nextjs or nextjs-vite
+ * 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+ */
 import { revalidatePath } from '@storybook/your-framework/cache.mock';
 
+import preview from '../.storybook/preview';
+
 import MyForm from './my-form';
 
 const meta = preview.meta({
@@ -78,11 +78,12 @@ export const Submitted = meta.story({
 <!-- 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';
+// Replace your-framework with nextjs or nextjs-vite
+import { revalidatePath } from '@storybook/your-framework/cache';
+
+import preview from '../.storybook/preview';
 
 import MyForm from './my-form';
 
diff --git a/docs/_snippets/nextjs-framework-options-next-config-path.md b/docs/_snippets/nextjs-framework-options-next-config-path.md
new file mode 100644
index 000000000000..5c81a45ede4a
--- /dev/null
+++ b/docs/_snippets/nextjs-framework-options-next-config-path.md
@@ -0,0 +1,80 @@
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
+import path from 'node:path';
+
+export default {
+  // ...
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      image: {
+        loading: 'eager',
+      },
+      nextConfigPath: path.resolve(process.cwd(), 'next.config.js'),
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import path from 'node:path';
+
+// Replace your-framework with nextjs or nextjs-vite
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  // ...
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      image: {
+        loading: 'eager',
+      },
+      nextConfigPath: path.resolve(process.cwd(), 'next.config.js'),
+    },
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import path from 'node:path';
+
+// Replace your-framework with nextjs or nextjs-vite
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      image: {
+        loading: 'eager',
+      },
+      nextConfigPath: path.resolve(process.cwd(), 'next.config.js'),
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import path from 'node:path';
+
+// Replace your-framework with nextjs or nextjs-vite
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      image: {
+        loading: 'eager',
+      },
+      nextConfigPath: path.resolve(process.cwd(), 'next.config.js'),
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-headers-mock.md b/docs/_snippets/nextjs-headers-mock.md
index 845bbcc2ce50..a21d6b337185 100644
--- a/docs/_snippets/nextjs-headers-mock.md
+++ b/docs/_snippets/nextjs-headers-mock.md
@@ -1,11 +1,8 @@
 ```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
-/*
- * Replace your-framework with nextjs or nextjs-vite
- * 👇 Must include the `.mock` portion of filename to have mocks typed correctly
- */
-import { cookies, headers } from '@storybook/your-framework/headers.mock';
+// Replace your-framework with nextjs or nextjs-vite
+import { cookies, headers } from '@storybook/your-framework/headers';
 
 import MyForm from './my-form';
 
@@ -64,13 +61,16 @@ 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
+/*
+ * Replace your-framework with nextjs or nextjs-vite
+ * 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+ */
 import { cookies, headers } from '@storybook/your-framework/headers.mock';
 
+import preview from '../.storybook/preview';
+
 import MyForm from './my-form';
 
 const meta = preview.meta({
@@ -96,11 +96,12 @@ export const LoggedInEurope = meta.story({
 <!-- 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';
+// Replace your-framework with nextjs or nextjs-vite
+import { cookies, headers } from '@storybook/your-framework/headers';
+
+import preview from '../.storybook/preview';
 
 import MyForm from './my-form';
 
diff --git a/docs/_snippets/nextjs-navigation-mock.md b/docs/_snippets/nextjs-navigation-mock.md
index 8d01c2801bca..902b7309b5b2 100644
--- a/docs/_snippets/nextjs-navigation-mock.md
+++ b/docs/_snippets/nextjs-navigation-mock.md
@@ -1,11 +1,8 @@
 ```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
-/*
- * Replace your-framework with nextjs or nextjs-vite
- * 👇 Must include the `.mock` portion of filename to have mocks typed correctly
- */
-import { redirect, getRouter } from '@storybook/your-framework/navigation.mock';
+// Replace your-framework with nextjs or nextjs-vite
+import { redirect, getRouter } from '@storybook/your-framework/navigation';
 
 import MyForm from './my-form';
 
@@ -80,13 +77,16 @@ 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
+/*
+ * Replace your-framework with nextjs or nextjs-vite
+ * 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+ */
 import { redirect, getRouter } from '@storybook/your-framework/navigation.mock';
 
+import preview from '../.storybook/preview';
+
 import MyForm from './my-form';
 
 const meta = preview.meta({
@@ -120,12 +120,13 @@ export const GoBack = meta.story({
 <!-- 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
+// Replace your-framework with nextjs or nextjs-vite
 import { redirect, getRouter } from '@storybook/your-framework/navigation.mock';
 
+import preview from '../.storybook/preview';
+
 import MyForm from './my-form';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/nextjs-navigation-override-in-preview.md b/docs/_snippets/nextjs-navigation-override-in-preview.md
new file mode 100644
index 000000000000..d9b4236c7b73
--- /dev/null
+++ b/docs/_snippets/nextjs-navigation-override-in-preview.md
@@ -0,0 +1,104 @@
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with nextjs or nextjs-vite
+import { getRouter } from '@storybook/your-framework/navigation';
+
+export default {
+  parameters: {
+    nextjs: {
+      // 👇 Override the default navigation properties
+      navigation: {
+        pathname: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default navigation method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+};
+```
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
+// Replace your-framework with nextjs or nextjs-vite
+import type { Preview } from '@storybook/your-framework';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from "@storybook/your-framework/navigation.mock";
+
+const preview: Preview = {
+  parameters: {
+    nextjs: {
+      // 👇 Override the default navigation properties
+      navigation: {
+        pathname: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default navigation method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+};
+
+export default preview;
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with nextjs or nextjs-vite
+import { definePreview } from '@storybook/your-framework';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/your-framework/navigation.mock';
+
+const preview = definePreview({
+  parameters: {
+    nextjs: {
+      // 👇 Override the default navigation properties
+      navigation: {
+        pathname: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default navigation method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+});
+
+export default preview;
+```
+
+<!-- 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 nextjs or nextjs-vite
+import { definePreview } from '@storybook/your-framework';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/your-framework/navigation.mock';
+
+const preview = definePreview({
+  parameters: {
+    nextjs: {
+      // 👇 Override the default navigation properties
+      navigation: {
+        pathname: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default navigation method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+});
+
+export default preview;
+```
diff --git a/docs/_snippets/nextjs-router-mock.md b/docs/_snippets/nextjs-router-mock.md
index 2f2011d8cc4c..25b3a26e64e7 100644
--- a/docs/_snippets/nextjs-router-mock.md
+++ b/docs/_snippets/nextjs-router-mock.md
@@ -1,11 +1,8 @@
 ```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
-/*
- * Replace your-framework with nextjs or nextjs-vite
- * 👇 Must include the `.mock` portion of filename to have mocks typed correctly
- */
-import { getRouter } from '@storybook/your-framework/router.mock';
+// Replace your-framework with nextjs or nextjs-vite
+import { getRouter } from '@storybook/your-framework/router';
 
 import MyForm from './my-form';
 
@@ -54,13 +51,16 @@ 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
+/*
+ * Replace your-framework with nextjs or nextjs-vite
+ * 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+ */
 import { getRouter } from '@storybook/your-framework/router.mock';
 
+import preview from '../.storybook/preview';
+
 import MyForm from './my-form';
 
 const meta = preview.meta({
@@ -81,11 +81,12 @@ export const GoBack = meta.story({
 <!-- 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';
+// Replace your-framework with nextjs or nextjs-vite
+import { getRouter } from '@storybook/your-framework/router';
+
+import preview from '../.storybook/preview';
 
 import MyForm from './my-form';
 
diff --git a/docs/_snippets/nextjs-router-override-in-preview.md b/docs/_snippets/nextjs-router-override-in-preview.md
new file mode 100644
index 000000000000..a3a93a25cafc
--- /dev/null
+++ b/docs/_snippets/nextjs-router-override-in-preview.md
@@ -0,0 +1,104 @@
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with nextjs or nextjs-vite
+import { getRouter } from '@storybook/your-framework/router';
+
+export default {
+  parameters: {
+    nextjs: {
+      // 👇 Override the default router properties
+      router: {
+        basePath: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default router method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+};
+```
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
+// Replace your-framework with nextjs or nextjs-vite
+import type { Preview } from '@storybook/your-framework';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from "@storybook/your-framework/router.mock";
+
+const preview: Preview = {
+  parameters: {
+    nextjs: {
+      // 👇 Override the default router properties
+      router: {
+        basePath: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default router method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+};
+
+export default preview;
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with nextjs or nextjs-vite
+import { definePreview } from '@storybook/your-framework';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/your-framework/router.mock';
+
+const preview = definePreview({
+  parameters: {
+    nextjs: {
+      // 👇 Override the default router properties
+      router: {
+        basePath: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default router method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+});
+
+export default preview;
+```
+
+<!-- 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 nextjs or nextjs-vite
+import { definePreview } from '@storybook/your-framework';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/your-framework/router.mock';
+
+const preview = definePreview({
+  parameters: {
+    nextjs: {
+      // 👇 Override the default router properties
+      router: {
+        basePath: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default router method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+});
+
+export default preview;
+```
diff --git a/docs/_snippets/other-foo-bar-story.md b/docs/_snippets/other-foo-bar-story.md
index c8e50d35d0f8..4af368fff56c 100644
--- a/docs/_snippets/other-foo-bar-story.md
+++ b/docs/_snippets/other-foo-bar-story.md
@@ -1,7 +1,7 @@
-```ts filename="FooBar.stories.ts" renderer="angular" language="ts"
+```ts filename="FooBar.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Foo } from './Foo.component';
+import { Foo } from './foo.component';
 
 const meta: Meta<Foo> = {
   /* 👇 The title prop is optional.
@@ -21,6 +21,26 @@ export const Baz: Story = {
 };
 ```
 
+```ts filename="FooBar.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Foo } from './foo.component';
+
+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 filename="FooBar.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Foo } from './Foo';
 
@@ -63,10 +83,10 @@ export const Baz: Story = {
 };
 ```
 
-```js filename="FooBar.stories.js" renderer="web-components" language="js"
+```js filename="FooBar.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'OtherFoo/Bar',
-  component: 'foo',
+  component: 'demo-foo',
   id: 'Foo/Bar', // Or 'foo-bar' if you prefer
 };
 
@@ -75,12 +95,12 @@ export const Baz = {
 };
 ```
 
-```ts filename="FooBar.stories.ts" renderer="web-components" language="ts"
+```ts filename="FooBar.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
   title: 'OtherFoo/Bar',
-  component: 'foo',
+  component: 'demo-foo',
   id: 'Foo/Bar', // Or 'foo-bar' if you prefer
 };
 
@@ -92,6 +112,34 @@ export const Baz: Story = {
 };
 ```
 
+```ts filename="FooBar.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'OtherFoo/Bar',
+  component: 'demo-foo',
+  id: 'Foo/Bar', // Or 'foo-bar' if you prefer
+});
+
+export const Baz = meta.story({
+  name: 'Insert name here',
+});
+```
+
+```js filename="FooBar.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'OtherFoo/Bar',
+  component: 'demo-foo',
+  id: 'Foo/Bar', // Or 'foo-bar' if you prefer
+});
+
+export const Baz = meta.story({
+  name: 'Insert name here',
+});
+```
+
 ```ts filename="FooBar.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -116,6 +164,7 @@ export const Baz = meta.story({
 
 ```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({
@@ -133,3 +182,46 @@ export const Baz = meta.story({
   name: 'Insert name here',
 });
 ```
+
+```ts filename="FooBar.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Foo from './Foo.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Foo from './Foo.vue';
+
+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 68858206d393..d7c8bff8d80a 100644
--- a/docs/_snippets/page-story-args-within-story.md
+++ b/docs/_snippets/page-story-args-within-story.md
@@ -66,9 +66,10 @@ export const Example = {
 ```
 
 ```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 preview from '../.storybook/preview';
+
 import { Checkbox } from './checkbox';
 
 const meta = preview.meta({
@@ -100,9 +101,10 @@ export const Example = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { Checkbox } from './checkbox';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md
index d0422e89f244..cf59752e0957 100644
--- a/docs/_snippets/page-story-slots.md
+++ b/docs/_snippets/page-story-slots.md
@@ -1,6 +1,5 @@
-```ts filename="Page.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, argsToTemplate } from '@storybook/angular';
 
 import { Page } from './page.component';
 
@@ -27,6 +26,33 @@ export const CustomFooter: Story = {
 };
 ```
 
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { argsToTemplate } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { Page } from './page.component';
+
+type PagePropsAndCustomArgs = Page & { footer?: string };
+
+const meta = preview.type<{ args: PagePropsAndCustomArgs }>().meta({
+  component: Page,
+  render: ({ footer, ...args }) => ({
+    props: args,
+    template: `
+      <storybook-page ${argsToTemplate(args)}>
+        <ng-container footer>${footer}</ng-container>
+      </storybook-page>`,
+  }),
+});
+
+export const CustomFooter = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
+
 ```jsx filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Page } from './Page';
 
@@ -160,7 +186,7 @@ export const CustomFooter = {
 </Story>
 ```
 
-```js filename="Page.stories.js" renderer="vue" language="js"
+```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Page from './Page.vue';
 
 export default {
@@ -187,7 +213,7 @@ export const CustomFooter = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts"
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { ComponentPropsAndSlots, Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Page from './Page.vue';
@@ -221,7 +247,69 @@ export const Primary = {
 } satisfies Story;
 ```
 
-```js filename="Page.stories.js" renderer="web-components" language="js"
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import type { ComponentPropsAndSlots } from '@storybook/vue3-vite';
+
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+type PagePropsAndCustomArgs = ComponentPropsAndSlots<typeof Page> & { footer?: string };
+
+const meta = preview.type<{ args: PagePropsAndCustomArgs }>().meta({
+  component: Page,
+  render: (args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: `
+      <page v-bind="args">
+        <template v-slot:footer>
+          <footer v-if="args.footer" v-html="args.footer" />
+        </template>
+      </page>
+    `,
+  }),
+});
+
+export const Primary = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
+
+```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+const meta = preview.meta({
+  component: Page,
+  render: (args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: `
+      <page v-bind="args">
+        <template v-slot:footer>
+          <footer v-if="args.footer" v-html="args.footer" />
+        </template>
+      </page>
+    `,
+  }),
+});
+
+export const CustomFooter = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
+
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -241,14 +329,12 @@ export const CustomFooter = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import { html } from 'lit';
 
-type CustomArgs = { footer?: string };
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
-const meta: Meta<CustomArgs> = {
+const meta: Meta = {
   title: 'Page',
   component: 'demo-page',
   render: ({ footer }) => html`
@@ -259,7 +345,7 @@ const meta: Meta<CustomArgs> = {
 };
 
 export default meta;
-type Story = StoryObj<CustomArgs>;
+type Story = StoryObj;
 
 export const CustomFooter: Story = {
   args: {
@@ -268,20 +354,64 @@ export const CustomFooter: Story = {
 };
 ```
 
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Page',
+  component: 'demo-page',
+  render: ({ footer }) => html`
+    <demo-page>
+      <footer>${footer}</footer>
+    </demo-page>
+  `,
+});
+
+export const CustomFooter = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+type CustomArgs = { footer?: string };
+
+const meta = preview.type<{ args: CustomArgs }>()meta({
+  title: 'Page',
+  component: 'demo-page',
+  render: ({ footer }) => html`
+    <demo-page>
+      <footer>${footer}</footer>
+    </demo-page>
+  `,
+});
+
+export const CustomFooter = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
+
 ```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
 import { Page } from './Page';
 
-// Defines a custom type that combines the component props with custom story args to prevent type errors in the render function
-// This is optional, but helps with type safety as args are inferred automatically in CSF Next
 type PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & {
   footer?: string;
 };
 
-const meta = preview.meta({
+const meta = preview.type<{ args: PagePropsAndCustomArgs }>().meta({
   component: Page,
-  render: ({ footer, ...args }: PagePropsAndCustomArgs) => (
+  render: ({ footer, ...args }) => (
     <Page {...args}>
       <footer>{footer}</footer>
     </Page>
@@ -295,8 +425,6 @@ export const CustomFooter = meta.story({
 });
 ```
 
-<!-- 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';
diff --git a/docs/_snippets/page-story-with-args-composition.md b/docs/_snippets/page-story-with-args-composition.md
index 9d2aef84f1e3..33466890eb40 100644
--- a/docs/_snippets/page-story-with-args-composition.md
+++ b/docs/_snippets/page-story-with-args-composition.md
@@ -1,7 +1,7 @@
-```ts filename="YourPage.stories.ts" renderer="angular" language="ts"
+```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { DocumentScreen } from './YourPage.component';
+import { DocumentScreen } from './your-page.component';
 
 // 👇 Imports the required stories
 import * as PageLayout from './PageLayout.stories';
@@ -24,6 +24,29 @@ export const Simple: Story = {
 };
 ```
 
+```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { DocumentScreen } from './your-page.component';
+
+// 👇 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,
+  },
+});
+```
+
 ```svelte filename="YourPage.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -50,7 +73,7 @@ export const Simple: Story = {
 />
 ```
 
-```js filename="YourPage.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourPage.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import DocumentScreen from './YourPage.svelte';
 
 // 👇 Imports the required stories
@@ -118,7 +141,7 @@ export const Simple = {
 />
 ```
 
-```ts filename="YourPage.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourPage.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -172,7 +195,7 @@ export const Simple: Story = {
 };
 ```
 
-```js filename="YourPage.stories.js" renderer="web-components" language="js"
+```js filename="YourPage.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 // 👇 Imports the required stories
 import * as PageLayout from './PageLayout.stories';
 import * as DocumentHeader from './DocumentHeader.stories';
@@ -191,7 +214,7 @@ export const Simple = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="web-components" language="ts"
+```ts filename="YourPage.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 // 👇 Imports the required stories
@@ -215,6 +238,48 @@ export const Simple: Story = {
 };
 ```
 
+```ts filename="YourPage.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// 👇 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: 'demo-document-screen',
+});
+
+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 filename="YourPage.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// 👇 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: 'demo-document-screen',
+});
+
+export const Simple = meta.story({
+  args: {
+    user: PageLayout.Simple.input.args.user,
+    document: DocumentHeader.Simple.input.args.document,
+    subdocuments: DocumentList.Simple.input.args.documents,
+  },
+});
+```
+
 ```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -242,6 +307,7 @@ export const Simple = meta.story({
 
 ```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
@@ -261,3 +327,51 @@ export const Simple = meta.story({
   },
 });
 ```
+
+```ts filename="YourPage.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import DocumentScreen from './YourPage.vue';
+
+// 👇 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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import DocumentScreen from './YourPage.vue';
+
+// 👇 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 edf465e8e449..7f4e8ce35d83 100644
--- a/docs/_snippets/page-story.md
+++ b/docs/_snippets/page-story.md
@@ -1,10 +1,8 @@
-```ts filename="Page.stories.ts" renderer="angular" language="ts"
-import { moduleMetadata } from '@storybook/angular';
-
-import type { Meta, StoryObj } from '@storybook/angular';
-
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import { CommonModule } from '@angular/common';
 
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
+
 import { Button } from './button.component';
 import { Header } from './header.component';
 import { Page } from './page.component';
@@ -32,6 +30,37 @@ export const LoggedIn: Story = {
 };
 ```
 
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { CommonModule } from '@angular/common';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+import { Header } from './header.component';
+import { Page } from './page.component';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: Page,
+  decorators: [
+    moduleMetadata({
+      declarations: [Button, Header],
+      imports: [CommonModule],
+    }),
+  ],
+});
+
+export const LoggedIn = meta.story({
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
+
 ```js filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Page } from './Page';
 
@@ -127,7 +156,7 @@ export const LoggedIn: Story = {
 <Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.args }} />
 ```
 
-```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Page from './Page.svelte';
 
 //👇 Imports all Header stories
@@ -160,7 +189,7 @@ export const LoggedIn = {
 <Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.args }} />
 ```
 
-```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -183,7 +212,7 @@ export const LoggedIn: Story = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="vue" language="js"
+```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Page from './Page.vue';
 
 //👇 Imports all Header stories
@@ -212,7 +241,7 @@ export const LoggedIn = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts"
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Page from './Page.vue';
@@ -246,7 +275,71 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="web-components" language="js"
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+/*
+ *👇 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 LoggedIn = meta.story({
+  render: (args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: '<page v-bind="args" />',
+  }),
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+/*
+ *👇 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 LoggedIn = meta.story({
+  render: (args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: '<page v-bind="args" />',
+  }),
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
+
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 // 👇 Imports all Header stories
 import * as HeaderStories from './Header.stories';
 
@@ -261,7 +354,7 @@ export const LoggedIn = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="web-components" language="ts"
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 // 👇 Imports all Header stories
@@ -281,6 +374,40 @@ export const LoggedIn: Story = {
 };
 ```
 
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// 👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: 'demo-page',
+});
+
+export const LoggedIn = meta.story({
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
+
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// 👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: 'demo-page',
+});
+
+export const LoggedIn = meta.story({
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
+
 ```ts filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/parameters-docs-source-transform-in-preview.md b/docs/_snippets/parameters-docs-source-transform-in-preview.md
new file mode 100644
index 000000000000..07ffc2d0d125
--- /dev/null
+++ b/docs/_snippets/parameters-docs-source-transform-in-preview.md
@@ -0,0 +1,229 @@
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g., nextjs-vite, vue3-vite, angular, sveltekit, etc.
+import type { Preview } from '@storybook/your-framework';
+
+const preview: Preview = {
+  parameters: {
+    docs: {
+      source: {
+        transform: async (source) => {
+          const prettier = await import('prettier/standalone');
+          const prettierPluginBabel = await import('prettier/plugins/babel');
+          const prettierPluginEstree = await import('prettier/plugins/estree');
+
+          return prettier.format(source, {
+            parser: 'babel',
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+          });
+        },
+      },
+    },
+  },
+};
+
+export default preview;
+```
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
+export default {
+  parameters: {
+    docs: {
+      source: {
+        transform: async (source) => {
+          const prettier = await import('prettier/standalone');
+          const prettierPluginBabel = await import('prettier/plugins/babel');
+          const prettierPluginEstree = await import('prettier/plugins/estree');
+
+          return prettier.format(source, {
+            parser: 'babel',
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+          });
+        },
+      },
+    },
+  },
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using, e.g., nextjs, nextjs-vite, react-vite, etc.
+import { definePreview } from '@storybook/your-framework';
+
+const preview = definePreview({
+  parameters: {
+    docs: {
+      source: {
+        transform: async (source) => {
+          const prettier = await import('prettier/standalone');
+          const prettierPluginBabel = await import('prettier/plugins/babel');
+          const prettierPluginEstree = await import('prettier/plugins/estree');
+
+          return prettier.format(source, {
+            parser: 'babel',
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+          });
+        },
+      },
+    },
+  },
+});
+
+export default preview;
+```
+
+<!-- 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., nextjs, nextjs-vite, react-vite, etc.
+import { definePreview } from '@storybook/your-framework';
+
+const preview = definePreview({
+  parameters: {
+    docs: {
+      source: {
+        transform: async (source) => {
+          const prettier = await import('prettier/standalone');
+          const prettierPluginBabel = await import('prettier/plugins/babel');
+          const prettierPluginEstree = await import('prettier/plugins/estree');
+
+          return prettier.format(source, {
+            parser: 'babel',
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+          });
+        },
+      },
+    },
+  },
+});
+
+export default preview;
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+const preview = definePreview({
+  parameters: {
+    docs: {
+      source: {
+        transform: async (source) => {
+          const prettier = await import('prettier/standalone');
+          const prettierPluginBabel = await import('prettier/plugins/babel');
+          const prettierPluginEstree = await import('prettier/plugins/estree');
+
+          return prettier.format(source, {
+            parser: 'babel',
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+          });
+        },
+      },
+    },
+  },
+});
+
+export default preview;
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+const preview = definePreview({
+  parameters: {
+    docs: {
+      source: {
+        transform: async (source) => {
+          const prettier = await import('prettier/standalone');
+          const prettierPluginBabel = await import('prettier/plugins/babel');
+          const prettierPluginEstree = await import('prettier/plugins/estree');
+
+          return prettier.format(source, {
+            parser: 'babel',
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+          });
+        },
+      },
+    },
+  },
+});
+
+export default preview;
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+const preview = definePreview({
+  parameters: {
+    docs: {
+      source: {
+        transform: async (source) => {
+          const prettier = await import('prettier/standalone');
+          const prettierPluginBabel = await import('prettier/plugins/babel');
+          const prettierPluginEstree = await import('prettier/plugins/estree');
+
+          return prettier.format(source, {
+            parser: 'babel',
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+          });
+        },
+      },
+    },
+  },
+});
+
+export default preview;
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+const preview = definePreview({
+  parameters: {
+    docs: {
+      source: {
+        transform: async (source) => {
+          const prettier = await import('prettier/standalone');
+          const prettierPluginBabel = await import('prettier/plugins/babel');
+          const prettierPluginEstree = await import('prettier/plugins/estree');
+
+          return prettier.format(source, {
+            parser: 'babel',
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+          });
+        },
+      },
+    },
+  },
+});
+
+export default preview;
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+const preview = definePreview({
+  parameters: {
+    docs: {
+      source: {
+        transform: async (source) => {
+          const prettier = await import('prettier/standalone');
+          const prettierPluginBabel = await import('prettier/plugins/babel');
+          const prettierPluginEstree = await import('prettier/plugins/estree');
+
+          return prettier.format(source, {
+            parser: 'babel',
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+          });
+        },
+      },
+    },
+  },
+});
+
+export default preview;
+```
diff --git a/docs/_snippets/parameters-in-meta.md b/docs/_snippets/parameters-in-meta.md
index b7a722667c28..15de6d4c7ec1 100644
--- a/docs/_snippets/parameters-in-meta.md
+++ b/docs/_snippets/parameters-in-meta.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -16,6 +16,22 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      options: {},
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -34,7 +50,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -80,7 +96,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -118,7 +134,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   //👇 Creates specific parameters at the component level
@@ -130,7 +146,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -146,6 +162,34 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      options: {},
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      options: {},
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -166,6 +210,7 @@ const meta = preview.meta({
 
 ```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({
@@ -178,3 +223,37 @@ const meta = preview.meta({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 76dc0b2c4468..3123255ae8f8 100644
--- a/docs/_snippets/parameters-in-preview.md
+++ b/docs/_snippets/parameters-in-preview.md
@@ -62,3 +62,82 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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 -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      options: {
+        light: { name: 'Light', value: '#fff' },
+        dark: { name: 'Dark', value: '#333' },
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      options: {
+        light: { name: 'Light', value: '#fff' },
+        dark: { name: 'Dark', value: '#333' },
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 cbfdf6f5b53c..fdf50874068b 100644
--- a/docs/_snippets/parameters-in-story.md
+++ b/docs/_snippets/parameters-in-story.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -24,6 +24,29 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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' },
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -50,7 +73,7 @@ export const Primary: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -118,7 +141,7 @@ export const Primary = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -172,7 +195,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
@@ -191,7 +214,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -215,6 +238,48 @@ export const Primary = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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' },
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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' },
+      },
+    },
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -242,6 +307,7 @@ export const Primary = meta.story({
 
 ```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({
@@ -261,3 +327,51 @@ export const Primary = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 2b27d7895ad1..ebc5362b334e 100644
--- a/docs/_snippets/play-function-composition.md
+++ b/docs/_snippets/play-function-composition.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -36,6 +36,41 @@ export const CombinedStories: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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 filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
@@ -108,7 +143,7 @@ export const CombinedStories: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-my-component',
 };
@@ -139,7 +174,7 @@ export const CombinedStories = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 const meta: Meta = {
   component: 'demo-my-component',
@@ -174,6 +209,72 @@ export const CombinedStories: Story = {
 };
 ```
 
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-my-component',
+});
+
+/*
+ * 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');
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-my-component',
+});
+
+/*
+ * 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');
+  },
+});
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -213,6 +314,7 @@ export const CombinedStories = meta.story({
 
 ```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({
@@ -244,3 +346,75 @@ export const CombinedStories = meta.story({
   },
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 fc6b4ac6b2a1..f0a1ccc4160b 100644
--- a/docs/_snippets/play-function-with-canvas.md
+++ b/docs/_snippets/play-function-with-canvas.md
@@ -1,7 +1,7 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   component: MyComponent,
@@ -19,6 +19,24 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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'));
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -39,7 +57,7 @@ export const ExampleStory: Story = {
   }} />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -91,7 +109,7 @@ export const ExampleStory = {
   }} />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -135,7 +153,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-my-component',
 };
@@ -149,7 +167,7 @@ export const ExampleStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -168,6 +186,38 @@ export const ExampleStory: Story = {
 };
 ```
 
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-my-component',
+});
+
+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'));
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-my-component',
+});
+
+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'));
+  },
+});
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -190,6 +240,7 @@ export const ExampleStory = meta.story({
 
 ```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({
@@ -204,3 +255,41 @@ export const ExampleStory = meta.story({
   },
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 c95f345beb34..b604170aa518 100644
--- a/docs/_snippets/play-function-with-screen.md
+++ b/docs/_snippets/play-function-with-screen.md
@@ -1,8 +1,8 @@
-```ts filename="Dialog.stories.ts" renderer="angular" language="ts"
+```ts filename="Dialog.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 import { screen } from 'storybook/test';
 
-import { Dialog } from './Dialog.component';
+import { Dialog } from './dialog.component';
 
 const meta: Meta<Dialog> = {
   component: Dialog,
@@ -22,6 +22,28 @@ export const Open: Story = {
 };
 ```
 
+```ts filename="Dialog.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { screen } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { Dialog } from './dialog.component';
+
+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();
+  },
+});
+```
+
 ```svelte filename="Dialog.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -45,7 +67,7 @@ export const Open: Story = {
   }} />
 ```
 
-```js filename="Dialog.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Dialog.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Dialog from './Dialog.svelte';
 
 export default {
@@ -106,7 +128,7 @@ export const Open = {
   }} />
 ```
 
-```ts filename="Dialog.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Dialog.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { screen } from 'storybook/test';
@@ -156,7 +178,7 @@ export const Open: Story = {
 };
 ```
 
-```js filename="Dialog.stories.js" renderer="web-components" language="js"
+```js filename="Dialog.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { screen } from 'storybook/test';
 
 export default {
@@ -174,7 +196,7 @@ export const Open = {
 };
 ```
 
-```ts filename="Dialog.stories.ts" renderer="web-components" language="ts"
+```ts filename="Dialog.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { screen } from 'storybook/test';
 
@@ -196,10 +218,51 @@ export const Open: Story = {
 };
 ```
 
-```ts filename="Dialog.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="Dialog.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { screen } from 'storybook/test';
+
 import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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();
+  },
+});
+```
+
+```ts filename="Dialog.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { screen } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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();
+  },
+});
+```
+
+```ts filename="Dialog.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import { screen } from 'storybook/test';
 
+import preview from '../.storybook/preview';
+
 import { Dialog } from './Dialog';
 
 const meta = preview.meta({
@@ -220,9 +283,10 @@ export const Open = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { Dialog } from './Dialog';
 
 const meta = preview.meta({
@@ -239,3 +303,49 @@ export const Open = meta.story({
   },
 });
 ```
+
+```ts filename="Dialog.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { screen } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import Dialog from './Dialog.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { screen } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import Dialog from './Dialog.vue';
+
+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 091d42d549e1..66c74735c05d 100644
--- a/docs/_snippets/play-function.md
+++ b/docs/_snippets/play-function.md
@@ -1,7 +1,7 @@
-```ts filename="RegistrationForm.stories.ts" renderer="angular" language="ts"
+```ts filename="RegistrationForm.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { RegistrationForm } from './RegistrationForm.component';
+import { RegistrationForm } from './registration-form.component';
 
 const meta: Meta<RegistrationForm> = {
   component: RegistrationForm,
@@ -38,6 +38,43 @@ export const FilledForm: Story = {
 };
 ```
 
+```ts filename="RegistrationForm.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { RegistrationForm } from './registration-form.component';
+
+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);
+  },
+});
+```
+
 ```svelte filename="RegistrationForm.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -78,7 +115,7 @@ export const FilledForm: Story = {
 />
 ```
 
-```js filename="RegistrationForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="RegistrationForm.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import RegistrationForm from './RegistrationForm.svelte';
 
 export default {
@@ -188,7 +225,7 @@ export const FilledForm = {
 />
 ```
 
-```ts filename="RegistrationForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="RegistrationForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -270,7 +307,7 @@ export const FilledForm: Story = {
 };
 ```
 
-```js filename="RegistrationForm.stories.js" renderer="web-components" language="js"
+```js filename="RegistrationForm.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-registration-form',
 };
@@ -303,7 +340,7 @@ export const FilledForm = {
 };
 ```
 
-```ts filename="RegistrationForm.stories.ts" renderer="web-components" language="ts"
+```ts filename="RegistrationForm.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -341,6 +378,76 @@ export const FilledForm: Story = {
 };
 ```
 
+```ts filename="RegistrationForm.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-registration-form',
+});
+
+/*
+ * 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 filename="RegistrationForm.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-registration-form',
+});
+
+/*
+ * 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);
+  },
+});
+```
+
 ```ts filename="RegistrationForm.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -382,6 +489,7 @@ export const FilledForm = meta.story({
 
 ```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({
@@ -415,3 +523,79 @@ export const FilledForm = meta.story({
   },
 });
 ```
+
+```ts filename="RegistrationForm.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import RegistrationForm from './RegistrationForm.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import RegistrationForm from './RegistrationForm.vue';
+
+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/react-framework-options-legacy-root-api.md b/docs/_snippets/react-framework-options-legacy-root-api.md
new file mode 100644
index 000000000000..2bdb991d6c9f
--- /dev/null
+++ b/docs/_snippets/react-framework-options-legacy-root-api.md
@@ -0,0 +1,61 @@
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., nextjs, react-webpack5)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      legacyRootApi: true,
+    },
+  },
+};
+
+export default config;
+```
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
+export default {
+  framework: {
+    // Replace your-framework with the framework you are using (e.g., nextjs, react-webpack5)
+    name: '@storybook/your-framework',
+    options: {
+      legacyRootApi: true,
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, react-webpack5)
+import { defineMain } from '@storybook/your-framework/node';
+
+const config = defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      legacyRootApi: true,
+    },
+  },
+});
+
+export default 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., nextjs, react-webpack5)
+import { defineMain } from '@storybook/your-framework/node';
+
+const config = defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      legacyRootApi: true,
+    },
+  },
+});
+
+export default config;
+```
diff --git a/docs/_snippets/render-custom-in-meta.md b/docs/_snippets/render-custom-in-meta.md
index 0b67dbbea938..26e265f8446e 100644
--- a/docs/_snippets/render-custom-in-meta.md
+++ b/docs/_snippets/render-custom-in-meta.md
@@ -1,5 +1,5 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular/';
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, argsToTemplate } from '@storybook/angular';
 
 import { Button } from './button.component';
 
@@ -33,6 +33,40 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { argsToTemplate } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  render: (args) => ({
+    props: args,
+    template: `
+      <demo-alert>
+        Alert text
+        <demo-button ${argsToTemplate(args)}></demo-button>
+      </demo-alert>
+    `,
+  }),
+});
+
+export const DefaultInAlert = meta.story({
+  args: {
+    label: 'Button',
+  },
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
 ```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Alert } from './Alert';
 import { Button } from './Button';
@@ -95,7 +129,7 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Alert from './Alert.vue';
 import Button from './Button.vue';
 
@@ -124,7 +158,7 @@ export const PrimaryInAlert = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Alert from './Alert.vue';
@@ -158,7 +192,71 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Alert from './Alert.vue';
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+  render: (args) => ({
+    components: { Alert, Button },
+    setup() {
+      return { args };
+    },
+    template: '<Alert><Button v-bind="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 -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Alert from './Alert.vue';
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+  render: (args) => ({
+    components: { Alert, Button },
+    setup() {
+      return { args };
+    },
+    template: '<Alert><Button v-bind="args" /></Alert>',
+  }),
+});
+
+export const DefaultInAlert = meta.story({
+  args: {
+    label: 'Button',
+  },
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import html from 'lit';
 
 export default {
@@ -185,7 +283,7 @@ export const PrimaryInAlert = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import html from 'lit';
 
@@ -216,6 +314,64 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import html from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  render: (args) => html`
+    <demo-alert>
+      Alert text
+      <demo-button ?primary=${args.primary} label=${args.label}></demo-button>
+    </demo-alert>
+  `,
+});
+
+export const DefaultInAlert = meta.story({
+  args: {
+    label: 'Button',
+  },
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import html from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  render: (args) => html`
+    <demo-alert>
+      Alert text
+      <demo-button ?primary=${args.primary} label=${args.label}></demo-button>
+    </demo-alert>
+  `,
+});
+
+export const DefaultInAlert = meta.story({
+  args: {
+    label: 'Button',
+  },
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
 ```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/render-custom-in-story.md b/docs/_snippets/render-custom-in-story.md
index 146be0dfdd67..4ab501c34737 100644
--- a/docs/_snippets/render-custom-in-story.md
+++ b/docs/_snippets/render-custom-in-story.md
@@ -1,5 +1,5 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular/';
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, type StoryObj, argsToTemplate } from '@storybook/angular';
 
 import { Button } from './button.component';
 
@@ -27,6 +27,34 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { argsToTemplate } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <demo-alert>
+        Alert text
+        <demo-button ${argsToTemplate(args)}></demo-button>
+      </demo-alert>
+    `,
+  }),
+});
+```
+
 ```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Alert } from './Alert';
 import { Button } from './Button';
@@ -77,7 +105,7 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Alert from './Alert.vue';
 import Button from './Button.vue';
 
@@ -100,7 +128,7 @@ export const PrimaryInAlert = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Alert from './Alert.vue';
@@ -128,7 +156,59 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Alert from './Alert.vue';
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const PrimaryInAlert = meta.story({
+  render: (args) => ({
+    components: { Alert, Button },
+    setup() {
+      return { args };
+    },
+    template: '<Alert><Button v-bind="args" /></Alert>',
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Alert from './Alert.vue';
+import Button from './Button.vue';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const PrimaryInAlert = meta.story({
+  render: (args) => ({
+    components: { Alert, Button },
+    setup() {
+      return { args };
+    },
+    template: '<Alert><Button v-bind="args" /></Alert>',
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import html from 'lit';
 
 export default {
@@ -149,7 +229,7 @@ export const PrimaryInAlert = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import html from 'lit';
 
@@ -174,6 +254,52 @@ export const PrimaryInAlert: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import html from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+  render: (args) => html`
+    <demo-alert>
+      Alert text
+      <demo-button ?primary=${args.primary} label=${args.label}></demo-button>
+    </demo-alert>
+  `,
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import html from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const PrimaryInAlert = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+  render: (args) => html`
+    <demo-alert>
+      Alert text
+      <demo-button ?primary=${args.primary} label=${args.label}></demo-button>
+    </demo-alert>
+  `,
+});
+```
+
 ```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/shadow-dom-testing-library-in-preview.md b/docs/_snippets/shadow-dom-testing-library-in-preview.md
index e8a195edf36f..d55a186b3f4e 100644
--- a/docs/_snippets/shadow-dom-testing-library-in-preview.md
+++ b/docs/_snippets/shadow-dom-testing-library-in-preview.md
@@ -1,5 +1,6 @@
-```ts filename=".storybook/preview.ts" renderer="web-components" language="ts"
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Preview } from '@storybook/web-components-vite';
+
 import { within as withinShadow } from 'shadow-dom-testing-library';
 
 const preview: Preview = {
@@ -21,7 +22,7 @@ declare module 'storybook/internal/csf' {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="web-components" language="js"
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { within as withinShadow } from 'shadow-dom-testing-library';
 
 export default {
@@ -32,3 +33,41 @@ export default {
   // ...
 };
 ```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { within as withinShadow } from 'shadow-dom-testing-library';
+
+// 👇 Extend TypeScript types for safety
+export type ShadowQueries = ReturnType<typeof withinShadow>;
+
+// Since Storybook@8.6
+declare module 'storybook/internal/csf' {
+  interface Canvas extends ShadowQueries {}
+}
+
+export default definePreview({
+  // 👇 Augment the canvas with the shadow DOM queries
+  beforeEach({ canvasElement, canvas }) {
+    Object.assign(canvas, { ...withinShadow(canvasElement) });
+  },
+  // ...
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { within as withinShadow } from 'shadow-dom-testing-library';
+
+export default definePreview({
+  // 👇 Augment the canvas with the shadow DOM queries
+  beforeEach({ canvasElement, canvas }) {
+    Object.assign(canvas, { ...withinShadow(canvasElement) });
+  },
+  // ...
+});
+```
diff --git a/docs/_snippets/shadow-dom-testing-library-in-story.md b/docs/_snippets/shadow-dom-testing-library-in-story.md
index b05cbe3afa35..c1465a7788a7 100644
--- a/docs/_snippets/shadow-dom-testing-library-in-story.md
+++ b/docs/_snippets/shadow-dom-testing-library-in-story.md
@@ -1,4 +1,4 @@
-```ts filename="Example.stories.ts" renderer="web-components" language="ts"
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 export const ShadowDOMExample: Story = {
   async play({ canvas }) {
     // 👇 Will find an element even if it's within a shadow root
@@ -7,7 +7,7 @@ export const ShadowDOMExample: Story = {
 };
 ```
 
-```js filename="Example.stories.js" renderer="web-components" language="js"
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export const ShadowDOMExample = {
   async play({ canvas }) {
     // 👇 Will find an element even if it's within a shadow root
@@ -15,3 +15,21 @@ export const ShadowDOMExample = {
   },
 };
 ```
+
+```js filename="Example.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+export const ShadowDOMExample = meta.story({
+  async play({ canvas }) {
+    // 👇 Will find an element even if it's within a shadow root
+    const button = await canvas.findByShadowRole('button', { name: /Reset/i });
+  },
+});
+```
+
+```ts filename="Example.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+export const ShadowDOMExample = meta.story({
+  async play({ canvas }) {
+    // 👇 Will find an element even if it's within a shadow root
+    const button = await canvas.findByShadowRole('button', { name: /Reset/i });
+  },
+});
+```
diff --git a/docs/_snippets/simple-page-implementation.md b/docs/_snippets/simple-page-implementation.md
index a44ac8ab1b16..e37f767f8a44 100644
--- a/docs/_snippets/simple-page-implementation.md
+++ b/docs/_snippets/simple-page-implementation.md
@@ -1,4 +1,4 @@
-```ts filename="YourPage.component.ts" renderer="angular" language="ts"
+```ts filename="your-page.component.ts" renderer="angular" language="ts"
 import { Component, Input } from '@angular/core';
 
 @Component({
diff --git a/docs/_snippets/storybook-addon-controls-custom-matchers.md b/docs/_snippets/storybook-addon-controls-custom-matchers.md
index 557afac23edf..859918e4124c 100644
--- a/docs/_snippets/storybook-addon-controls-custom-matchers.md
+++ b/docs/_snippets/storybook-addon-controls-custom-matchers.md
@@ -62,3 +62,82 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 f6033d32a50c..4ad444a2ef25 100644
--- a/docs/_snippets/storybook-addon-themes-classname-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-classname-decorator.md
@@ -45,13 +45,14 @@ export default preview;
 // 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 addonThemes from '@storybook/addon-themes';
 
 import '../src/index.css'; // Your application's global CSS file
 
 export default definePreview({
+  addons: [addonThemes()],
   decorators: [
-    withThemeByClassName<Renderer>({
+    addonThemes.withThemeByClassName<Renderer>({
       themes: {
         light: '',
         dark: 'dark',
@@ -68,13 +69,14 @@ export default definePreview({
 // 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 addonThemes from '@storybook/addon-themes';
 
 import '../src/index.css'; // Your application's global CSS file
 
 export default definePreview({
+  addons: [addonThemes()],
   decorators: [
-    withThemeByClassName({
+    addonThemes.withThemeByClassName({
       themes: {
         light: '',
         dark: 'dark',
diff --git a/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md b/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
index 548acfd3c9d6..c6f9df4f99cb 100644
--- a/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
@@ -47,13 +47,14 @@ export default preview;
 // 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 addonThemes from '@storybook/addon-themes';
 
 import '../src/index.css'; // Your application's global CSS file
 
 export default definePreview({
+  addons: [addonThemes()],
   decorators: [
-    withThemeByDataAttribute<Renderer>({
+    addonThemes.withThemeByDataAttribute<Renderer>({
       themes: {
         light: 'light',
         dark: 'dark',
@@ -71,13 +72,14 @@ export default definePreview({
 // 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 addonThemes from '@storybook/addon-themes';
 
 import '../src/index.css'; // Your application's global CSS file
 
 export default definePreview({
+  addons: [addonThemes()],
   decorators: [
-    withThemeByDataAttribute({
+    addonThemes.withThemeByDataAttribute({
       themes: {
         light: 'light',
         dark: 'dark',
diff --git a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
index 724db8249990..c9679775bb4c 100644
--- a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
@@ -63,7 +63,7 @@ export default preview;
 // 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 addonThemes from '@storybook/addon-themes';
 
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
 
@@ -76,8 +76,9 @@ const GlobalStyles = createGlobalStyle`
 `;
 
 export default definePreview({
+  addons: [addonThemes()],
   decorators: [
-    withThemeFromJSXProvider<Renderer>({
+    addonThemes.withThemeFromJSXProvider<Renderer>({
       themes: {
         light: lightTheme,
         dark: darkTheme,
@@ -96,7 +97,7 @@ export default definePreview({
 // 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 addonThemes from '@storybook/addon-themes';
 
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
 
@@ -109,8 +110,9 @@ const GlobalStyles = createGlobalStyle`
 `;
 
 export default definePreview({
+  addons: [addonThemes()],
   decorators: [
-    withThemeFromJSXProvider({
+    addonThemes.withThemeFromJSXProvider({
       themes: {
         light: lightTheme,
         dark: darkTheme,
diff --git a/docs/_snippets/storybook-addons-api-getstoryhrefs.md b/docs/_snippets/storybook-addons-api-getstoryhrefs.md
index b3388e0d9b5f..2946c1ac4c35 100644
--- a/docs/_snippets/storybook-addons-api-getstoryhrefs.md
+++ b/docs/_snippets/storybook-addons-api-getstoryhrefs.md
@@ -14,7 +14,9 @@ addons.register('my-organisation/my-addon', (api) => {
 
   // With args and globals (merged on top of inherited args/globals) as well as a custom query param
   // Note that args and globals should be serialized (see `buildArgsParam` from `storybook/internal/router`)
-  api.getStoryHrefs('button--primary', { queryParams: { args: 'label:Label', globals: 'outline:!true', custom: 'value' } });
+  api.getStoryHrefs('button--primary', {
+    queryParams: { args: 'label:Label', globals: 'outline:!true', custom: 'value' },
+  });
 
   // Link to a story from an external ref
   api.getStoryHrefs('button--primary', { refId: 'external-ref' });
diff --git a/docs/_snippets/storybook-auto-docs-full-config.md b/docs/_snippets/storybook-auto-docs-full-config.md
index 7f7f17566814..fbc9af81ff9f 100644
--- a/docs/_snippets/storybook-auto-docs-full-config.md
+++ b/docs/_snippets/storybook-auto-docs-full-config.md
@@ -63,3 +63,82 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 fcdcf17efc59..a16596008908 100644
--- a/docs/_snippets/storybook-auto-docs-main-mdx-config.md
+++ b/docs/_snippets/storybook-auto-docs-main-mdx-config.md
@@ -61,3 +61,47 @@ export default defineMain({
   addons: ['@storybook/addon-docs'],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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-auto-docs-mdx-docs-docs-only-page.md b/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
index bb58fb15c078..a15fc21f9db0 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
@@ -29,7 +29,7 @@ import * as ExampleComponentStories from './ExampleComponent.stories.svelte';
 ```
 
 <!-- prettier-ignore -->
-```mdx filename="ExampleDocumentation.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+```mdx filename="ExampleDocumentation.mdx" renderer="svelte" language="mdx" tabTitle="CSF 3"
 import { Meta } from '@storybook/addon-docs/blocks';
 
 import * as ExampleComponentStories from './ExampleComponent.stories';
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md b/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
index 0197299fe52d..348f9dfb3b77 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
@@ -13,7 +13,7 @@ import * as CheckboxStories from './Checkbox.stories.svelte';
 ```
 
 <!-- prettier-ignore -->
-```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF 3"
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md b/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
index 55699fd29fe4..d94d445b976e 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
@@ -17,7 +17,7 @@ import * as CheckboxStories from './Checkbox.stories.svelte';
 ```
 
 <!-- prettier-ignore -->
-```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF 3"
 import { Meta } from '@storybook/addon-docs/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-story.md b/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
index 44e169a19893..39845dbc8028 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
@@ -16,7 +16,7 @@ import * as CheckboxStories from './Checkbox.stories.svelte';
 ```
 
 <!-- prettier-ignore -->
-```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF 3"
 import { Canvas } from '@storybook/addon-docs/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
diff --git a/docs/_snippets/storybook-auto-docs-mdx-file.md b/docs/_snippets/storybook-auto-docs-mdx-file.md
index 64944266f67d..0f166c6851f4 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-file.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-file.md
@@ -77,7 +77,7 @@ List items are used to group related content in a list. They must be nested with
 ```
 
 <!-- prettier-ignore -->
-```mdx filename="Page.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+```mdx filename="Page.mdx" renderer="svelte" language="mdx" tabTitle="CSF 3"
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 import * as ListStories from './List.stories';
diff --git a/docs/_snippets/storybook-auto-docs-starter-example.md b/docs/_snippets/storybook-auto-docs-starter-example.md
index 45457cc59fb5..99d7920b21bd 100644
--- a/docs/_snippets/storybook-auto-docs-starter-example.md
+++ b/docs/_snippets/storybook-auto-docs-starter-example.md
@@ -41,7 +41,7 @@ Buttons are often used for form submissions and to toggle elements into view.
 ```
 
 <!-- prettier-ignore -->
-```mdx filename="Button.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+```mdx filename="Button.mdx" renderer="svelte" language="mdx" tabTitle="CSF 3"
 import { Meta, Story } from '@storybook/addon-docs/blocks';
 
 import * as ButtonStories from './Button.stories';
diff --git a/docs/_snippets/storybook-canvas-doc-block-story.md b/docs/_snippets/storybook-canvas-doc-block-story.md
index 5efdd04c564d..68894af65f40 100644
--- a/docs/_snippets/storybook-canvas-doc-block-story.md
+++ b/docs/_snippets/storybook-canvas-doc-block-story.md
@@ -107,10 +107,10 @@ 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 preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
@@ -162,9 +162,10 @@ export const Colors = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/storybook-component-layout-param.md b/docs/_snippets/storybook-component-layout-param.md
index 84df08a3ff00..de99c792412f 100644
--- a/docs/_snippets/storybook-component-layout-param.md
+++ b/docs/_snippets/storybook-component-layout-param.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -12,6 +12,20 @@ const meta: Meta<Button> = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+  // Sets the layout parameter component wide.
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -28,7 +42,7 @@ const meta: Meta<Button> = {
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -68,7 +82,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -85,7 +99,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
   // Sets the layout parameter component wide.
@@ -95,33 +109,57 @@ export default {
 };
 ```
 
-```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';
-
-import { Button } from './Button';
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/web-components-vite';
 
-const meta = {
-  component: Button,
+const meta: Meta = {
+  component: 'demo-button',
   // Sets the layout parameter component wide.
   parameters: {
     layout: 'centered',
   },
-} satisfies Meta<typeof Button>;
+};
 
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta } from '@storybook/web-components-vite';
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
 
-const meta: Meta = {
+const meta = preview.meta({
   component: 'demo-button',
   // Sets the layout parameter component wide.
   parameters: {
     layout: 'centered',
   },
-};
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  // Sets the layout parameter component wide.
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+```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';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // Sets the layout parameter component wide.
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Button>;
 
 export default meta;
 ```
diff --git a/docs/_snippets/storybook-coverage-addon-config-options.md b/docs/_snippets/storybook-coverage-addon-config-options.md
index 7c0d3b80c55c..9d863ac43d2d 100644
--- a/docs/_snippets/storybook-coverage-addon-config-options.md
+++ b/docs/_snippets/storybook-coverage-addon-config-options.md
@@ -95,3 +95,126 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+import type { AddonOptionsVite } from '@storybook/addon-coverage';
+
+const coverageConfig: AddonOptionsVite = {
+  istanbul: {
+    include: ['**/stories/**'],
+    exclude: ['**/exampleDirectory/**'],
+  },
+};
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: [],
+  addons: [
+    // Other Storybook addons
+    {
+      name: '@storybook/addon-coverage',
+      options: {
+        istanbul: {
+          include: ['**/stories/**'],
+          exclude: ['**/exampleDirectory/**'],
+        },
+      },
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/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({
+  framework: '@storybook/angular',
+  stories: [],
+  addons: [
+    // Other Storybook addons
+    {
+      name: '@storybook/addon-coverage',
+      options: coverageConfig,
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+import type { AddonOptionsVite } from '@storybook/addon-coverage';
+
+const coverageConfig: AddonOptionsVite = {
+  istanbul: {
+    include: ['**/stories/**'],
+    exclude: ['**/exampleDirectory/**'],
+  },
+};
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 fbc99b6e8761..2474f4bb2fdd 100644
--- a/docs/_snippets/storybook-coverage-addon-optimized-config.md
+++ b/docs/_snippets/storybook-coverage-addon-optimized-config.md
@@ -63,3 +63,82 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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'],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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'],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 d768b8f75ff8..bf7eb2227da9 100644
--- a/docs/_snippets/storybook-csf-3-auto-title-redundant.md
+++ b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
@@ -1,7 +1,7 @@
-```ts filename="components/MyComponent/MyComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="components/MyComponent/MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './my-component.component';
 
 const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
@@ -15,13 +15,34 @@ const meta: Meta<MyComponent> = {
 export default meta;
 type Story = StoryObj<MyComponent>;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     something: 'Something else',
   },
 };
 ```
 
+```ts filename="components/MyComponent/MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+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 Basic = meta.story({
+  args: {
+    something: 'Something else',
+  },
+});
+```
+
 ```svelte filename="components/MyComponent/MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -37,7 +58,7 @@ export const Default: Story = {
 <Story name="Default" args={{ something: 'Something else' }} />
 ```
 
-```js filename="components/MyComponent/MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="components/MyComponent/MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -45,7 +66,7 @@ export default {
   title: 'components/MyComponent/MyComponent',
 };
 
-export const Default = {
+export const Basic = {
   args: {
     something: 'Something else',
   },
@@ -60,7 +81,7 @@ export default {
   title: 'components/MyComponent/MyComponent',
 };
 
-export const Default = {
+export const Basic = {
   args: {
     something: 'Something else',
   },
@@ -82,7 +103,7 @@ export const Default = {
 <Story name="Default" args={{ something: 'Something else'}} />
 ```
 
-```ts filename="components/MyComponent/MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="components/MyComponent/MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -100,7 +121,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     something: 'Something else',
   },
@@ -125,27 +146,27 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     something: 'Something else',
   },
 };
 ```
 
-```js filename="components/MyComponent/MyComponent.stories.js" renderer="web-components" language="js"
+```js filename="components/MyComponent/MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'my-component',
   title: 'components/MyComponent/MyComponent',
 };
 
-export const Default = {
+export const Basic = {
   args: {
     something: 'Something else',
   },
 };
 ```
 
-```ts filename="components/MyComponent/MyComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="components/MyComponent/MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -156,13 +177,43 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-export const Default: Story = {
+export const Basic: Story = {
   args: {
     something: 'Something else',
   },
 };
 ```
 
+```js filename="components/MyComponent/MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  title: 'components/MyComponent/MyComponent',
+});
+
+export const Basic = meta.story({
+  args: {
+    something: 'Something else',
+  },
+});
+```
+
+```ts filename="components/MyComponent/MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+  title: 'components/MyComponent/MyComponent',
+});
+
+export const Basic = meta.story({
+  args: {
+    something: 'Something else',
+  },
+});
+```
+
 ```ts filename="components/MyComponent/MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -177,7 +228,7 @@ const meta = preview.meta({
   title: 'components/MyComponent/MyComponent',
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
   args: {
     something: 'Something else',
   },
@@ -195,7 +246,7 @@ const meta = preview.meta({
   title: 'components/MyComponent/MyComponent',
 });
 
-export const Default = meta.story({
+export const Basic = 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 80eb948b3138..b490f7a63987 100644
--- a/docs/_snippets/storybook-custom-manager-head.md
+++ b/docs/_snippets/storybook-custom-manager-head.md
@@ -46,3 +46,62 @@ export default defineMain({
   `,
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  managerHead: (head) => `
+    ${head}
+    <link rel="icon" type="image/png" href="/logo192.png" sizes="192x192" />
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  managerHead: (head) => `
+    ${head}
+    <link rel="icon" type="image/png" href="/logo192.png" sizes="192x192" />
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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 82be023939ee..3186d8d71c4f 100644
--- a/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
+++ b/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
@@ -37,6 +37,46 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/angular';
+
+// ❌ 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/my-component.component';
+
+const meta: Meta<MyComponent> = {
+  /* 👇 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,
+};
+
+export default meta;
+```
+
+```ts filename="MyComponent.stories.ts" renderer="angular" 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/my-component.component';
+
+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,
+});
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -75,3 +115,43 @@ const meta = preview.meta({
   component: MyComponent,
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" 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.vue';
+
+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" renderer="vue" 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.vue';
+
+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 948bb485eb4d..3cc6fef85468 100644
--- a/docs/_snippets/storybook-interactions-play-function.md
+++ b/docs/_snippets/storybook-interactions-play-function.md
@@ -1,9 +1,8 @@
-```ts filename="Form.stories.ts" renderer="angular" language="ts"
+```ts filename="Form.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
-
 import { expect, fn, waitFor } from 'storybook/test';
 
-import { Form } from './Form.component';
+import { Form } from './form.component';
 
 const meta: Meta<Form> = {
   component: Form,
@@ -37,6 +36,42 @@ export const Submitted: Story = {
 };
 ```
 
+```ts filename="Form.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { expect, fn, waitFor } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { Form } from './form.component';
+
+const meta = preview.meta({
+  component: Form,
+  args: {
+    // 👇 Use `fn` to spy on the submit output
+    submit: 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());
+  },
+});
+```
+
 ```svelte filename="Form.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -76,7 +111,7 @@ export const Submitted: Story = {
 />
 ```
 
-```js filename="Form.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Form.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { expect, fn, waitFor } from 'storybook/test';
 
 import Form from './Form.svelte';
@@ -185,7 +220,7 @@ export const Submitted = {
 />
 ```
 
-```ts filename="Form.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Form.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -265,7 +300,7 @@ export const Submitted: Story = {
 };
 ```
 
-```js filename="Form.stories.js" renderer="web-components" language="js"
+```js filename="Form.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { expect, fn, waitFor } from 'storybook/test';
 
 export default {
@@ -297,7 +332,7 @@ export const Submitted = {
 };
 ```
 
-```ts filename="Form.stories.ts" renderer="web-components" language="ts"
+```ts filename="Form.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { expect, fn, waitFor } from 'storybook/test';
@@ -334,11 +369,79 @@ export const Submitted: Story = {
 };
 ```
 
-```ts filename="Form.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="Form.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { expect, fn, waitFor } from 'storybook/test';
+
 import preview from '../.storybook/preview';
 
+const meta = preview.meta({
+  component: 'my-form-element',
+  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());
+  },
+});
+```
+
+```ts filename="Form.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { expect, fn, waitFor } from 'storybook/test';
 
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-form-element',
+  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());
+  },
+});
+```
+
+```ts filename="Form.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { expect, fn, waitFor } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
 import { Form } from './Form';
 
 const meta = preview.meta({
@@ -373,9 +476,10 @@ export const Submitted = meta.story({
 <!-- 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 preview from '../.storybook/preview';
+
 import { Form } from './Form';
 
 const meta = preview.meta({
@@ -407,3 +511,78 @@ export const Submitted = meta.story({
   },
 });
 ```
+
+```ts filename="Form.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { expect, fn, waitFor } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import Form from './Form.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { expect, fn, waitFor } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import Form from './Form.vue';
+
+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 6698f2a515fa..547b4c3acd4a 100644
--- a/docs/_snippets/storybook-interactions-step-function.md
+++ b/docs/_snippets/storybook-interactions-step-function.md
@@ -2,7 +2,7 @@
 // ...rest of story file
 
 export const Submitted = {
-  play: async ({ args, canvas, step }) => {
+  play: async ({ args, canvas, step, userEvent }) => {
     await step('Enter email and password', async () => {
       await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
       await userEvent.type(canvas.getByTestId('password'), 'supersecret');
@@ -19,7 +19,7 @@ export const Submitted = {
 // ...rest of story file
 
 export const Submitted: Story = {
-  play: async ({ args, canvas, step }) => {
+  play: async ({ args, canvas, step, userEvent }) => {
     await step('Enter email and password', async () => {
       await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
       await userEvent.type(canvas.getByTestId('password'), 'supersecret');
@@ -32,6 +32,29 @@ export const Submitted: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Submitted = meta.story({
+  play: async ({ args, canvas, step, userEvent }) => {
+    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'));
+    });
+  },
+});
+```
+
 ```ts filename="MyComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -79,3 +102,93 @@ export const Submitted = meta.story({
   },
 });
 ```
+
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import MyComponent from './MyComponent.vue';
+
+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 filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+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'));
+    });
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'my-component',
+});
+
+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 bf5d7921126f..e0be209f3ee4 100644
--- a/docs/_snippets/storybook-main-advanced-config-example.md
+++ b/docs/_snippets/storybook-main-advanced-config-example.md
@@ -74,3 +74,97 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/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;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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 ba7de374fb8a..7315d2525a14 100644
--- a/docs/_snippets/storybook-main-auto-title-custom.md
+++ b/docs/_snippets/storybook-main-auto-title-custom.md
@@ -59,3 +59,77 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: [
+    {
+      directory: '../src',
+      titlePrefix: 'Custom', // 👈 Configure the title prefix
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: [
+    {
+      directory: '../src',
+      titlePrefix: 'Custom', // 👈 Configure the title prefix
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 a28fb9fc5098..d4a976aef70b 100644
--- a/docs/_snippets/storybook-main-config-remark-options.md
+++ b/docs/_snippets/storybook-main-config-remark-options.md
@@ -99,3 +99,127 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+import remarkGfm from 'remark-gfm';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+import remarkGfm from 'remark-gfm';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+import remarkGfm from 'remark-gfm';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+import remarkGfm from 'remark-gfm';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+import remarkGfm from 'remark-gfm';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 44ae4892f913..cd43e81a6175 100644
--- a/docs/_snippets/storybook-main-configuration-src-dir.md
+++ b/docs/_snippets/storybook-main-configuration-src-dir.md
@@ -39,3 +39,52 @@ export default defineMain({
   stories: ['../src'],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src'],
+});
+```
diff --git a/docs/_snippets/storybook-main-disable-telemetry.md b/docs/_snippets/storybook-main-disable-telemetry.md
index b4848374e2c5..b2bc00b14444 100644
--- a/docs/_snippets/storybook-main-disable-telemetry.md
+++ b/docs/_snippets/storybook-main-disable-telemetry.md
@@ -51,3 +51,67 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 7263b83fcf38..8df6f8cbdc38 100644
--- a/docs/_snippets/storybook-main-extend-ts-config.md
+++ b/docs/_snippets/storybook-main-extend-ts-config.md
@@ -29,3 +29,41 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    skipCompiler: false,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    skipCompiler: false,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    skipCompiler: false,
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-js-md-files.md b/docs/_snippets/storybook-main-js-md-files.md
index 5023682e3cf6..0fe477965c54 100644
--- a/docs/_snippets/storybook-main-js-md-files.md
+++ b/docs/_snippets/storybook-main-js-md-files.md
@@ -39,3 +39,52 @@ export default defineMain({
   stories: ['../my-project/src/components/*.@(js|md)'],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../my-project/src/components/*.@(js|md)'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../my-project/src/components/*.@(js|md)'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../my-project/src/components/*.@(js|md)'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  stories: ['../my-project/src/components/*.@(js|md)'],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 7fca52749455..f15890d1eeab 100644
--- a/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
+++ b/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
@@ -93,3 +93,117 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/vue3-vite/node';
+
+const getAbsolutePath = (packageName: string) =>
+  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+
+export default defineMain({
+  framework: {
+    name: getAbsolutePath('@storybook/vue3-vite'),
+    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="vue" language="js" tabTitle="CSF Next 🧪"
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/vue3-vite/node';
+
+const getAbsolutePath = (packageName) =>
+  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+
+export default defineMain({
+  framework: {
+    name: getAbsolutePath('@storybook/vue3-vite'),
+    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'),
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/angular/node';
+
+const getAbsolutePath = (packageName: string) =>
+  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+
+export default defineMain({
+  framework: {
+    name: getAbsolutePath('@storybook/angular'),
+    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'),
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/web-components-vite/node';
+
+const getAbsolutePath = (packageName: string) =>
+  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+
+export default defineMain({
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-vite'),
+    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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineMain } from '@storybook/web-components-vite/node';
+
+const getAbsolutePath = (packageName) =>
+  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+
+export default defineMain({
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-vite'),
+    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-ref-local.md b/docs/_snippets/storybook-main-ref-local.md
index e981690d39bb..28e415a36bf5 100644
--- a/docs/_snippets/storybook-main-ref-local.md
+++ b/docs/_snippets/storybook-main-ref-local.md
@@ -79,3 +79,102 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 42edd0432ff0..b46d90605c5f 100644
--- a/docs/_snippets/storybook-main-register-example-addon.md
+++ b/docs/_snippets/storybook-main-register-example-addon.md
@@ -46,3 +46,62 @@ export default defineMain({
   ],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y',
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y',
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/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 e9ae4aa3d8be..d10377dbc374 100644
--- a/docs/_snippets/storybook-main-simplified-config.md
+++ b/docs/_snippets/storybook-main-simplified-config.md
@@ -27,7 +27,7 @@ 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)
+// Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, etc.
 import { defineMain } from '@storybook/your-framework/node';
 
 export default defineMain({
@@ -43,7 +43,7 @@ export default defineMain({
 <!-- 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)
+// Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, etc.
 import { defineMain } from '@storybook/your-framework/node';
 
 export default defineMain({
@@ -55,3 +55,16 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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 8d8095e5bb1f..187cf1a93364 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
@@ -40,7 +40,7 @@ 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)
+// Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, etc.
 import { defineMain } from '@storybook/your-framework/node';
 
 import path from 'path';
@@ -63,7 +63,7 @@ export default defineMain({
 <!-- 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)
+// Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, etc.
 import { defineMain } from '@storybook/your-framework/node';
 
 import path from 'path';
@@ -82,3 +82,23 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+import path from 'path';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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 22af03c10a6c..b30bd4c34664 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution.md
@@ -91,3 +91,25 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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 66cc62fa8fbd..a9c69af2f900 100644
--- a/docs/_snippets/storybook-main-using-existing-config.md
+++ b/docs/_snippets/storybook-main-using-existing-config.md
@@ -35,7 +35,7 @@ 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)
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs)
 import { defineMain } from '@storybook/your-framework/node';
 
 import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported.
@@ -55,7 +55,7 @@ export default defineMain({
 <!-- 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)
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs)
 import { defineMain } from '@storybook/your-framework/node';
 
 import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported.
@@ -71,3 +71,20 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported.
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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 5761530cf23c..fd95a54564db 100644
--- a/docs/_snippets/storybook-main-webpack-options.md
+++ b/docs/_snippets/storybook-main-webpack-options.md
@@ -75,3 +75,21 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  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 4bf0969415b2..0d2e850b054c 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 @@
-```jsx filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+```jsx filename=".storybook/preview.jsx" renderer="common" language="js" tabTitle="CSF 3"
 import * as React from 'react';
 
 import { DocsContainer } from '@storybook/addon-docs/blocks';
@@ -22,7 +22,7 @@ export default {
 };
 ```
 
-```tsx filename=".storybook/preview.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+```tsx filename=".storybook/preview.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.
@@ -50,11 +50,12 @@ const preview: Preview = {
 export default preview;
 ```
 
-```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```tsx filename=".storybook/preview.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 addonDocs from '@storybook/addon-docs';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 
 const ExampleContainer = ({ children, ...props }) => {
@@ -62,6 +63,7 @@ const ExampleContainer = ({ children, ...props }) => {
 };
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     controls: {
       matchers: {
@@ -78,11 +80,12 @@ export default definePreview({
 
 <!-- JS snippets still needed while providing both CSF 3 & Next -->
 
-```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+```jsx filename=".storybook/preview.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 addonDocs from '@storybook/addon-docs';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 
 const ExampleContainer = ({ children, ...props }) => {
@@ -90,6 +93,146 @@ const ExampleContainer = ({ children, ...props }) => {
 };
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: ExampleContainer,
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+const ExampleContainer = ({ children, ...props }) => {
+  return <DocsContainer {...props}>{children}</DocsContainer>;
+};
+
+export default definePreview({
+  addons: [addonDocs()],
+  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.jsx" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+const ExampleContainer = ({ children, ...props }) => {
+  return <DocsContainer {...props}>{children}</DocsContainer>;
+};
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: ExampleContainer,
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+const ExampleContainer = ({ children, ...props }) => {
+  return <DocsContainer {...props}>{children}</DocsContainer>;
+};
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: ExampleContainer,
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+const ExampleContainer = ({ children, ...props }) => {
+  return <DocsContainer {...props}>{children}</DocsContainer>;
+};
+
+export default definePreview({
+  addons: [addonDocs()],
+  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.jsx" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+const ExampleContainer = ({ children, ...props }) => {
+  return <DocsContainer {...props}>{children}</DocsContainer>;
+};
+
+export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     controls: {
       matchers: {
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 69f5a7117b1b..631662f2b740 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
@@ -30,10 +30,12 @@ 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 addonDocs from '@storybook/addon-docs';
 
 import DocumentationTemplate from './DocumentationTemplate.mdx';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       page: DocumentationTemplate,
@@ -47,10 +49,96 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 import DocumentationTemplate from './DocumentationTemplate.mdx';
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+export default definePreview({
+  addons: [addonDocs()],
   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 0cd048c76541..c8d7b7a2729d 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
@@ -79,6 +79,7 @@ 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 addonDocs from '@storybook/addon-docs';
 import {
   Controls,
   Description,
@@ -89,6 +90,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     controls: {
       matchers: {
@@ -119,6 +121,7 @@ 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 addonDocs from '@storybook/addon-docs';
 import {
   Controls,
   Description,
@@ -129,6 +132,206 @@ import {
 } from '@storybook/addon-docs/blocks';
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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.jsx" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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.jsx" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
+
+export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     controls: {
       matchers: {
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 259c87be0334..f53b47b55995 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
@@ -76,6 +76,7 @@ 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 addonDocs from '@storybook/addon-docs';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 
 import * as DesignSystem from 'your-design-system';
@@ -92,6 +93,7 @@ export const MyDocsContainer = (props) => (
 );
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     controls: {
       matchers: {
@@ -114,6 +116,7 @@ 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 addonDocs from '@storybook/addon-docs';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 
 import * as DesignSystem from 'your-design-system';
@@ -130,6 +133,196 @@ export const MyDocsContainer = (props) => (
 );
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: MyDocsContainer,
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+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({
+  addons: [addonDocs()],
+  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.jsx" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+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({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: MyDocsContainer,
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+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({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: MyDocsContainer,
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+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({
+  addons: [addonDocs()],
+  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.jsx" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+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({
+  addons: [addonDocs()],
   parameters: {
     controls: {
       matchers: {
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-theme.md b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
index e330bd25328f..5da80e35c4ca 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-theme.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
@@ -19,7 +19,6 @@ 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 { themes, ensure } from 'storybook/theming';
 
 const preview: Preview = {
@@ -42,10 +41,11 @@ 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 addonDocs from '@storybook/addon-docs';
 import { ensure, themes } from 'storybook/theming';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     controls: {
       matchers: {
@@ -65,10 +65,120 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
+import { ensure, themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: ensure(themes.dark), // The replacement theme to use
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+import { ensure, themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+import { ensure, themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: ensure(themes.dark), // The replacement theme to use
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+import { ensure, themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: ensure(themes.dark), // The replacement theme to use
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+import { ensure, themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
 import { ensure, themes } from 'storybook/theming';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     controls: {
       matchers: {
diff --git a/docs/_snippets/storybook-preview-configure-globaltypes.md b/docs/_snippets/storybook-preview-configure-globaltypes.md
index 06b30b0a0bae..651c5a63033a 100644
--- a/docs/_snippets/storybook-preview-configure-globaltypes.md
+++ b/docs/_snippets/storybook-preview-configure-globaltypes.md
@@ -100,3 +100,127 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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',
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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',
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 2c55bf90720b..11f5bec3ff15 100644
--- a/docs/_snippets/storybook-preview-custom-canvas.md
+++ b/docs/_snippets/storybook-preview-custom-canvas.md
@@ -34,10 +34,12 @@ 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 addonDocs from '@storybook/addon-docs';
 
 import { MyCanvas } from './MyCanvas';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       components: {
@@ -53,10 +55,106 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 import { MyCanvas } from './MyCanvas';
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        Canvas: MyCanvas,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { MyCanvas } from './MyCanvas';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        Canvas: MyCanvas,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { MyCanvas } from './MyCanvas';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        Canvas: MyCanvas,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+import { MyCanvas } from './MyCanvas';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        Canvas: MyCanvas,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { MyCanvas } from './MyCanvas';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        Canvas: MyCanvas,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { MyCanvas } from './MyCanvas';
+
+export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       components: {
diff --git a/docs/_snippets/storybook-preview-custom-code-renderer.md b/docs/_snippets/storybook-preview-custom-code-renderer.md
index b7af5a9f30c6..336c64d102af 100644
--- a/docs/_snippets/storybook-preview-custom-code-renderer.md
+++ b/docs/_snippets/storybook-preview-custom-code-renderer.md
@@ -34,10 +34,12 @@ 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 addonDocs from '@storybook/addon-docs';
 
 import { CodeBlock } from './CodeBlock';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       components: {
@@ -53,10 +55,106 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 import { CodeBlock } from './CodeBlock';
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        code: CodeBlock,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { CodeBlock } from './CodeBlock';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        code: CodeBlock,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { CodeBlock } from './CodeBlock';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        code: CodeBlock,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+import { CodeBlock } from './CodeBlock';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        code: CodeBlock,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { CodeBlock } from './CodeBlock';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      components: {
+        code: CodeBlock,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { CodeBlock } from './CodeBlock';
+
+export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       components: {
diff --git a/docs/_snippets/storybook-preview-custom-elements-config.md b/docs/_snippets/storybook-preview-custom-elements-config.md
index 4dd3f8932aa5..411bb0f10d08 100644
--- a/docs/_snippets/storybook-preview-custom-elements-config.md
+++ b/docs/_snippets/storybook-preview-custom-elements-config.md
@@ -39,3 +39,43 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview, setCustomElementsManifest } from '@storybook/web-components-vite';
+
+import customElements from '../custom-elements.json';
+
+setCustomElementsManifest(customElements);
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview, setCustomElementsManifest } from '@storybook/web-components-vite';
+
+import customElements from '../custom-elements.json';
+
+setCustomElementsManifest(customElements);
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-custom-params.md b/docs/_snippets/storybook-preview-custom-params.md
index 253c6db3ee66..6d291092d6c4 100644
--- a/docs/_snippets/storybook-preview-custom-params.md
+++ b/docs/_snippets/storybook-preview-custom-params.md
@@ -62,3 +62,82 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+      ],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+      ],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 8ed35888677c..2cd0af61d4e3 100644
--- a/docs/_snippets/storybook-preview-custom-toc.md
+++ b/docs/_snippets/storybook-preview-custom-toc.md
@@ -44,8 +44,10 @@ 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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       toc: {
@@ -68,8 +70,129 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h1, h2, h3',
+        ignoreSelector: '#primary',
+        title: 'Table of Contents',
+        disable: false,
+        unsafeTocbotOptions: {
+          orderedList: false,
+        },
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h1, h2, h3',
+        ignoreSelector: '#primary',
+        title: 'Table of Contents',
+        disable: false,
+        unsafeTocbotOptions: {
+          orderedList: false,
+        },
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h1, h2, h3',
+        ignoreSelector: '#primary',
+        title: 'Table of Contents',
+        disable: false,
+        unsafeTocbotOptions: {
+          orderedList: false,
+        },
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       toc: {
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 e58aa0dbe13a..6611e712975f 100644
--- a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
+++ b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
@@ -26,8 +26,10 @@ 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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       controls: { exclude: ['style'] },
@@ -41,8 +43,84 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
   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 a88f9dc5be97..729049a41ee5 100644
--- a/docs/_snippets/storybook-preview-docs-dark-theme.md
+++ b/docs/_snippets/storybook-preview-docs-dark-theme.md
@@ -30,10 +30,12 @@ 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 addonDocs from '@storybook/addon-docs';
 
 import { themes } from 'storybook/theming';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       theme: themes.dark,
@@ -47,10 +49,96 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 import { themes } from 'storybook/theming';
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+import { themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+import { themes } from 'storybook/theming';
+
+export default definePreview({
+  addons: [addonDocs()],
   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 5942c0a67a66..decdd0d1c0cc 100644
--- a/docs/_snippets/storybook-preview-empty-sort-object.md
+++ b/docs/_snippets/storybook-preview-empty-sort-object.md
@@ -66,3 +66,87 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        method: '',
+        order: [],
+        locales: '',
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        method: '',
+        order: [],
+        locales: '',
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 afbe7e998e80..401d383db7e3 100644
--- a/docs/_snippets/storybook-preview-enable-toc.md
+++ b/docs/_snippets/storybook-preview-enable-toc.md
@@ -26,8 +26,10 @@ 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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       toc: true, // 👈 Enables the table of contents
@@ -41,8 +43,84 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
   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 83a7bb1f7db6..3e29785d4f89 100644
--- a/docs/_snippets/storybook-preview-expanded-controls.md
+++ b/docs/_snippets/storybook-preview-expanded-controls.md
@@ -42,3 +42,57 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    controls: { expanded: true },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    controls: { expanded: true },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    controls: { expanded: true },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+export default definePreview({
+  parameters: {
+    controls: { expanded: true },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 18f0b344c9a7..da96a3c0c3c6 100644
--- a/docs/_snippets/storybook-preview-global-decorator.md
+++ b/docs/_snippets/storybook-preview-global-decorator.md
@@ -1,6 +1,5 @@
 ```ts filename=".storybook/preview.ts" renderer="angular" language="ts"
-import type { Preview } from '@storybook/angular';
-import { componentWrapperDecorator } from '@storybook/angular';
+import { type Preview, componentWrapperDecorator } from '@storybook/angular';
 
 const preview: Preview = {
   decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
@@ -91,7 +90,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="vue" language="js"
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF 3"
 export default {
   decorators: [
     (story) => ({
@@ -102,7 +101,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts"
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Preview } from '@storybook/vue3-vite';
 
 const preview: Preview = {
@@ -116,6 +115,42 @@ const preview: Preview = {
 export default preview;
 ```
 
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator, definePreview } from '@storybook/angular';
+
+export default definePreview({
+  decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
+});
+```
+
 ```js filename=".storybook/preview.js" renderer="web-components" language="js"
 import { html } from 'lit';
 
@@ -173,3 +208,25 @@ export default definePreview({
   ],
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { html } from 'lit';
+
+export default definePreview({
+  decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { html } from 'lit';
+
+export default definePreview({
+  decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
+});
+```
diff --git a/docs/_snippets/storybook-preview-global-loader.md b/docs/_snippets/storybook-preview-global-loader.md
index 57aa737b9d57..77f924da816f 100644
--- a/docs/_snippets/storybook-preview-global-loader.md
+++ b/docs/_snippets/storybook-preview-global-loader.md
@@ -50,3 +50,67 @@ export default definePreview({
   ],
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  loaders: [
+    async () => ({
+      currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
+    }),
+  ],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  loaders: [
+    async () => ({
+      currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
+    }),
+  ],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 253c6db3ee66..6d291092d6c4 100644
--- a/docs/_snippets/storybook-preview-global-parameters.md
+++ b/docs/_snippets/storybook-preview-global-parameters.md
@@ -62,3 +62,82 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+      ],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+      ],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 0bed11b13d03..22ac949133b9 100644
--- a/docs/_snippets/storybook-preview-import-global-styles.md
+++ b/docs/_snippets/storybook-preview-import-global-styles.md
@@ -42,3 +42,57 @@ export default definePreview({
   parameters: {},
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import '../src/styles/global.css';
+
+export default definePreview({
+  parameters: {},
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+import '../src/styles/global.css';
+
+export default definePreview({
+  parameters: {},
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 be20750b6db3..ae48affb7d9e 100644
--- a/docs/_snippets/storybook-preview-layout-param.md
+++ b/docs/_snippets/storybook-preview-layout-param.md
@@ -42,3 +42,57 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+export default definePreview({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 2f72584187a4..36473cad8fca 100644
--- a/docs/_snippets/storybook-preview-locales-globaltype.md
+++ b/docs/_snippets/storybook-preview-locales-globaltype.md
@@ -104,3 +104,132 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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',
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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',
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 03ba6aa5d637..b418e984d29a 100644
--- a/docs/_snippets/storybook-preview-matching-argtypes.md
+++ b/docs/_snippets/storybook-preview-matching-argtypes.md
@@ -42,3 +42,57 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+export default definePreview({
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 a33e934326a0..2bea24a3b8cb 100644
--- a/docs/_snippets/storybook-preview-optout-inline.md
+++ b/docs/_snippets/storybook-preview-optout-inline.md
@@ -28,8 +28,10 @@ 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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       // Opt-out of inline rendering
@@ -44,8 +46,89 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      // Opt-out of inline rendering
+      story: { inline: false },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      // Opt-out of inline rendering
+      story: { inline: false },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  parameters: {
+    docs: {
+      // Opt-out of inline rendering
+      story: { inline: false },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
   parameters: {
     docs: {
       // Opt-out of inline rendering
diff --git a/docs/_snippets/storybook-preview-parameters-color-swatches.md b/docs/_snippets/storybook-preview-parameters-color-swatches.md
index 31aa9f98b2e8..6b57c2c6db3c 100644
--- a/docs/_snippets/storybook-preview-parameters-color-swatches.md
+++ b/docs/_snippets/storybook-preview-parameters-color-swatches.md
@@ -50,3 +50,67 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 8a4bc9612927..e59a338f6927 100644
--- a/docs/_snippets/storybook-preview-register-language-globally.md
+++ b/docs/_snippets/storybook-preview-register-language-globally.md
@@ -86,3 +86,112 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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$/,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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$/,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 58eda77fdb54..b61fdbe3cf33 100644
--- a/docs/_snippets/storybook-preview-sort-function.md
+++ b/docs/_snippets/storybook-preview-sort-function.md
@@ -56,3 +56,75 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: (a, b) =>
+        a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+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 }),
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 d03a178280b7..e544aa1ca086 100644
--- a/docs/_snippets/storybook-preview-use-global-type.md
+++ b/docs/_snippets/storybook-preview-use-global-type.md
@@ -1,6 +1,5 @@
 ```ts filename=".storybook/preview.js" renderer="angular" language="ts"
-import type { Preview } from '@storybook/angular';
-import { componentWrapperDecorator } from '@storybook/angular';
+import { type Preview, componentWrapperDecorator } from '@storybook/angular';
 
 const preview: Preview = {
   decorators: [
@@ -16,6 +15,21 @@ const preview: Preview = {
 export default preview;
 ```
 
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator, definePreview } from '@storybook/angular';
+
+export default definePreview({
+  decorators: [
+    componentWrapperDecorator(
+      (story) => `<div [class]="myTheme">${story}</div>`,
+      ({ globals }) => {
+        return { myTheme: globals['theme'] };
+      },
+    ),
+  ],
+});
+```
+
 ```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { ThemeProvider } from 'styled-components';
 
@@ -61,7 +75,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="vue" language="js"
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { setup } from '@storybook/vue3-vite';
 
 import { VApp } from 'vuetify/components';
@@ -94,10 +108,8 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts"
-import type { Preview } from '@storybook/vue3-vite';
-
-import { setup } from '@storybook/vue3-vite';
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF 3"
+import { type Preview, setup } from '@storybook/vue3-vite';
 
 import { VApp } from 'vuetify/components';
 
@@ -129,6 +141,70 @@ const preview: Preview = {
 export default preview;
 ```
 
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview, setup } from '@storybook/vue3-vite';
+
+import { VApp } from 'vuetify/components';
+
+import { registerPlugins } from '../src/plugins';
+
+setup((app) => {
+  // Registers your app's plugins including Vuetify into Storybook
+  registerPlugins(app);
+});
+
+export default definePreview({
+  decorators: [
+    (story, context) => {
+      const theme = context.globals.theme || 'light';
+      return {
+        components: { story, VApp },
+        template: `
+          <v-app theme="${theme}">
+            <div class="d-flex">
+              <story/>
+            </div>
+          </v-app>
+      `,
+      };
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview, setup } from '@storybook/vue3-vite';
+
+import { VApp } from 'vuetify/components';
+
+import { registerPlugins } from '../src/plugins';
+
+setup((app) => {
+  // Registers your app's plugins including Vuetify into Storybook
+  registerPlugins(app);
+});
+
+export default definePreview({
+  decorators: [
+    (story, context) => {
+      const theme = context.globals.theme || 'light';
+      return {
+        components: { story, VApp },
+        template: `
+          <v-app theme="${theme}">
+            <div>
+              <story/>
+            </div>
+          </v-app>
+      `,
+      };
+    },
+  ],
+});
+```
+
 ```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';
@@ -173,3 +249,35 @@ export default definePreview({
   ],
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { html } from 'lit';
+
+export default definePreview({
+  decorators: [
+    (story, context) => {
+      const theme = context.globals.theme || 'light';
+      return html`<div class=${theme}>${story()}</div>`;
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { html } from 'lit';
+
+export default definePreview({
+  decorators: [
+    (story, context) => {
+      const theme = context.globals.theme || 'light';
+      return html`<div class=${theme}>${story()}</div>`;
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-preview-with-library-decorator.md b/docs/_snippets/storybook-preview-with-library-decorator.md
index b3a80e84cd51..ff58beebed7d 100644
--- a/docs/_snippets/storybook-preview-with-library-decorator.md
+++ b/docs/_snippets/storybook-preview-with-library-decorator.md
@@ -27,7 +27,7 @@ export default preview;
 import '@angular/localize/init';
 ```
 
-```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="library"
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="library (CSF 3)"
 import { setup } from '@storybook/vue3-vite';
 
 import { createPinia } from 'pinia';
@@ -47,12 +47,11 @@ export default {
 };
 ```
 
-```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="component"
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="component (CSF 3)"
 import { setup } from '@storybook/vue3-vite';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
-
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 setup((app) => {
@@ -71,8 +70,8 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="library"
-import { setup, Preview } from '@storybook/vue3-vite';
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="library (CSF 3)"
+import { setup, type Preview } from '@storybook/vue3-vite';
 
 import { createPinia } from 'pinia';
 
@@ -93,12 +92,11 @@ const preview: Preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="component"
-import { setup, Preview } from '@storybook/vue3-vite';
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="component (CSF 3)"
+import { setup, type Preview } from '@storybook/vue3-vite';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
-
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 setup((app) => {
@@ -118,3 +116,89 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="library (CSF Next 🧪)"
+import { definePreview, setup } from '@storybook/vue3-vite';
+
+import { createPinia } from 'pinia';
+
+setup((app) => {
+  //👇 Registers a global Pinia instance inside Storybook to be consumed by existing stories
+  app.use(createPinia());
+});
+
+export default definePreview({
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+});
+```
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="component (CSF Next 🧪)"
+import { definePreview, setup } from '@storybook/vue3-vite';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+setup((app) => {
+  //👇 Adds the icon to the library so you can use it in your story.
+  library.add(fasPlusSquare);
+  app.component('font-awesome-icon', FontAwesomeIcon);
+});
+
+export default definePreview({
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="library (CSF Next 🧪)"
+import { definePreview, setup } from '@storybook/vue3-vite';
+
+import { createPinia } from 'pinia';
+
+setup((app) => {
+  //👇 Registers a global Pinia instance inside Storybook to be consumed by existing stories
+  app.use(createPinia());
+});
+
+export default definePreview({
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="component (CSF Next 🧪)"
+import { definePreview, setup } from '@storybook/vue3-vite';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+setup((app) => {
+  //👇 Adds the icon to the library so you can use it in your story.
+  library.add(fasPlusSquare);
+  app.component('font-awesome-icon', FontAwesomeIcon);
+});
+
+export default definePreview({
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+});
+```
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 4aadd7dfa093..fb1bd36f773d 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
@@ -58,3 +58,77 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', '*', 'WIP'],
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', '*', 'WIP'],
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 dcbfec1b1463..237465479435 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages.md
@@ -58,3 +58,77 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'],
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'],
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+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 278ba3e2cf15..1f2f91cb0197 100644
--- a/docs/_snippets/storybook-preview-with-styled-components-decorator.md
+++ b/docs/_snippets/storybook-preview-with-styled-components-decorator.md
@@ -1,6 +1,5 @@
 ```ts filename=".storybook/preview.ts" renderer="angular" language="ts"
-import { componentWrapperDecorator } from '@storybook/angular';
-import type { Preview } from '@storybook/angular';
+import { type Preview, componentWrapperDecorator } from '@storybook/angular';
 
 import { ThemeProvider } from './theme-provider.component';
 
@@ -28,8 +27,7 @@ export default preview;
 ```
 
 ```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="Preview"
-import type { Preview } from '@storybook/vue3-vite';
-import { setup } from '@storybook/vue3-vite';
+import { type Preview, setup } from '@storybook/vue3-vite';
 
 import 'vuetify/styles';
 import '@mdi/font/css/materialdesignicons.css';
@@ -220,12 +218,10 @@ export default preview;
 </BitsConfig>
 ```
 
-```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="Preview"
-import type { Preview } from '@storybook/web-components-vite';
-
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="Preview (CSF 3)"
 import { html } from 'lit';
 
-import './ThemeProvider';
+import type { Preview } from '@storybook/web-components-vite';
 
 const preview: Preview = {
   decorators: [
@@ -264,11 +260,9 @@ export class ThemeProvider extends LitElement {
 }
 ```
 
-```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="Preview"
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="Preview (CSF 3)"
 import { html } from 'lit';
 
-import './ThemeProvider';
-
 const preview = {
   decorators: [
     // The theme can be accessed via the story context's globals
@@ -313,6 +307,38 @@ if (!customElements.get('theme-provider')) {
 }
 ```
 
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="Preview (CSF Next 🧪)"
+import { html } from 'lit';
+
+import { definePreview } from '@storybook/web-components-vite';
+
+export default definePreview({
+  decorators: [
+    // The theme can be accessed via the story context's globals
+    (story, { globals }) => {
+      const theme = globals.theme || 'light';
+      return html`<theme-provider theme=${theme}>${story()}</theme-provider>`;
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="Preview (CSF Next 🧪)"
+import { html } from 'lit';
+
+import { definePreview } from '@storybook/web-components-vite';
+
+export default definePreview({
+  decorators: [
+    // The theme can be accessed via the story context's globals
+    (story, { globals }) => {
+      const theme = globals.theme || 'light';
+      return html`<theme-provider theme=${theme}>${story()}</theme-provider>`;
+    },
+  ],
+});
+```
+
 ```jsx filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
@@ -435,3 +461,71 @@ export default definePreview({
   ],
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css';
+import vuetify from '../src/plugins/vuetify';
+
+import StoryWrapper from './StoryWrapper.vue';
+
+// Registers the Vuetify plugin in Storybook's Vue app instance
+export default definePreview({
+  decorators: [
+    (_, { globals }) => {
+      // The theme can be accessed via the story context's globals
+      const themeName = globals.theme || 'light';
+      return {
+        components: { StoryWrapper },
+        setup() {
+          return { themeName };
+        },
+        template: `
+          <StoryWrapper :themeName="themeName">
+            <template #story>
+              <story />
+            </template>
+          </StoryWrapper>
+        `,
+      };
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css';
+import vuetify from '../src/plugins/vuetify';
+
+import StoryWrapper from './StoryWrapper.vue';
+
+// Registers the Vuetify plugin in Storybook's Vue app instance
+export default definePreview({
+  decorators: [
+    (_, { globals }) => {
+      // The theme can be accessed via the story context's globals
+      const themeName = globals.theme || 'light';
+      return {
+        components: { StoryWrapper },
+        setup() {
+          return { themeName };
+        },
+        template: `
+          <StoryWrapper :themeName="themeName">
+            <template #story>
+              <story />
+            </template>
+          </StoryWrapper>
+        `,
+      };
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-story-layout-param.md b/docs/_snippets/storybook-story-layout-param.md
index c8655f21b942..5aae4069961a 100644
--- a/docs/_snippets/storybook-story-layout-param.md
+++ b/docs/_snippets/storybook-story-layout-param.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -17,6 +17,22 @@ export const WithLayout: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const WithLayout = meta.story({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -36,7 +52,7 @@ export const WithLayout: Story = {
 />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -83,7 +99,7 @@ export const WithLayout = {
 />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -123,7 +139,7 @@ export const WithLayout: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   component: 'demo-button',
 };
@@ -135,7 +151,7 @@ export const WithLayout = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -152,6 +168,34 @@ export const WithLayout: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const WithLayout = meta.story({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+});
+
+export const WithLayout = meta.story({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -172,6 +216,7 @@ export const WithLayout = meta.story({
 
 ```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({
@@ -184,3 +229,37 @@ export const WithLayout = meta.story({
   },
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 c717cbee77a1..6ac30ce4047e 100644
--- a/docs/_snippets/storybook-storyloading-with-directory.md
+++ b/docs/_snippets/storybook-storyloading-with-directory.md
@@ -43,3 +43,57 @@ export default defineMain({
   stories: ['../packages/MyStories'],
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  // 👇 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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  // 👇 Storybook will load all existing stories within the MyStories folder
+  stories: ['../packages/MyStories'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  // 👇 Storybook will load all existing stories within the MyStories folder
+  stories: ['../packages/MyStories'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  // 👇 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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  // 👇 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 3f0bd87705c7..7fa484975c55 100644
--- a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
+++ b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
@@ -51,3 +51,41 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/angular/node';
+
+export default defineMain({
+  framework: '@storybook/angular',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 0958dfa2eaaa..40639d75bd1d 100644
--- a/docs/_snippets/storybook-test-fn-mock-spy.md
+++ b/docs/_snippets/storybook-test-fn-mock-spy.md
@@ -1,6 +1,5 @@
-```ts filename="NoteUI.stories.ts" renderer="angular" language="ts"
+```ts filename="NoteUI.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
-
 import { expect } from 'storybook/test';
 
 // 👇 Automocked module resolves to '../app/__mocks__/actions'
@@ -31,10 +30,39 @@ export const SaveFlow: Story = {
 };
 ```
 
+```ts filename="NoteUI.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+// 👇 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();
+  },
+});
+```
+
 ```svelte filename="NoteUI.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-
   import { expect } from 'storybook/test';
 
   // 👇 Automocked module resolves to '../app/__mocks__/actions'
@@ -63,7 +91,7 @@ export const SaveFlow: Story = {
   }} />
 ```
 
-```js filename="NoteUI.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="NoteUI.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 // 👇 Automocked module resolves to '../app/__mocks__/actions'
@@ -97,7 +125,6 @@ export const SaveFlow = {
 ```svelte filename="NoteUI.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-
   import { expect } from 'storybook/test';
 
   // 👇 Automocked module resolves to '../app/__mocks__/actions'
@@ -126,10 +153,9 @@ export const SaveFlow = {
   }} />
 ```
 
-```ts filename="NoteUI.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="NoteUI.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
-
 import { expect } from 'storybook/test';
 
 // 👇 Automocked module resolves to '../app/__mocks__/actions'
@@ -166,7 +192,6 @@ export const SaveFlow: Story = {
 ```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';
-
 import { expect } from 'storybook/test';
 
 // 👇 Automocked module resolves to '../app/__mocks__/actions'
@@ -225,7 +250,7 @@ export const SaveFlow = {
 };
 ```
 
-```js filename="NoteUI.stories.js" renderer="web-components" language="js"
+```js filename="NoteUI.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
 // 👇 Automocked module resolves to '../app/__mocks__/actions'
@@ -253,9 +278,8 @@ export const SaveFlow = {
 };
 ```
 
-```ts filename="NoteUI.stories.ts" renderer="web-components" language="ts"
+```ts filename="NoteUI.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-
 import { expect } from 'storybook/test';
 
 // 👇 Automocked module resolves to '../app/__mocks__/actions'
@@ -286,11 +310,71 @@ export const SaveFlow: Story = {
 };
 ```
 
-```ts filename="NoteUI.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="NoteUI.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
 import preview from '../.storybook/preview';
 
+// 👇 Automocked module resolves to '../app/__mocks__/actions'
+import { saveNote } from '../app/actions';
+import { createNotes } from '../app/mocks/notes';
+
+const meta = preview.meta({
+  component: 'note-ui',
+});
+
+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();
+  },
+});
+```
+
+```ts filename="NoteUI.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+// 👇 Automocked module resolves to '../app/__mocks__/actions'
+import { saveNote } from '../app/actions';
+import { createNotes } from '../app/mocks/notes';
+
+const meta = preview.meta({
+  component: 'note-ui',
+});
+
+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();
+  },
+});
+```
+
+```ts filename="NoteUI.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import { expect } from 'storybook/test';
 
+import preview from '../.storybook/preview';
+
 // 👇 Automocked module resolves to '../app/__mocks__/actions'
 import { saveNote } from '../app/actions';
 import { createNotes } from '../app/mocks/notes';
@@ -319,9 +403,10 @@ export const SaveFlow = meta.story({
 <!-- 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';
 
+import preview from '../.storybook/preview';
+
 // 👇 Automocked module resolves to '../app/__mocks__/actions'
 import { saveNote } from '../app/actions';
 import { createNotes } from '../app/mocks/notes';
@@ -348,3 +433,67 @@ export const SaveFlow = meta.story({
   },
 });
 ```
+
+```ts filename="NoteUI.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+// 👇 Automocked module resolves to '../app/__mocks__/actions'
+import { saveNote } from '../app/actions';
+import { createNotes } from '../app/mocks/notes';
+
+import NoteUI from './note-ui.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import { expect } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+// 👇 Automocked module resolves to '../app/__mocks__/actions'
+import { saveNote } from '../app/actions';
+import { createNotes } from '../app/mocks/notes';
+
+import NoteUI from './note-ui.vue';
+
+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 37b0e7df2c06..b5518dffcdf8 100644
--- a/docs/_snippets/storybook-test-mock-return-value.md
+++ b/docs/_snippets/storybook-test-mock-return-value.md
@@ -1,4 +1,4 @@
-```ts filename="Page.stories.ts" renderer="angular" language="ts"
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 import { mocked } from 'storybook/test';
 
@@ -14,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<Page>;
 
-export const Default: Story = {
+export const Basic: Story = {
   async beforeEach() {
     // 👇 Set the return value for the getUserFromSession function
     mocked(getUserFromSession).mockReturnValue({ id: '1', name: 'Alice' });
@@ -22,6 +22,28 @@ export const Default: Story = {
 };
 ```
 
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { mocked } from 'storybook/test';
+
+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 Basic = meta.story({
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    mocked(getUserFromSession).mockReturnValue({ id: '1', name: 'Alice' });
+  },
+});
+```
+
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -42,7 +64,7 @@ export const Default: Story = {
 }} />
 ```
 
-```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 // 👇 Automocked module resolves to '../lib/__mocks__/session'
 import { getUserFromSession } from '../lib/session';
 
@@ -52,7 +74,7 @@ export default {
   component: Page,
 };
 
-export const Default = {
+export const Basic = {
   async beforeEach() {
     // 👇 Set the return value for the getUserFromSession function
     getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
@@ -70,7 +92,7 @@ export default {
   component: Page,
 };
 
-export const Default = {
+export const Basic = {
   async beforeEach() {
     // 👇 Set the return value for the getUserFromSession function
     getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
@@ -99,7 +121,7 @@ export const Default = {
 }} />
 ```
 
-```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { mocked } from 'storybook/test';
@@ -117,7 +139,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   async beforeEach() {
     // 👇 Set the return value for the getUserFromSession function
     mocked(getUserFromSession).mockReturnValue({ id: '1', name: 'Alice' });
@@ -143,7 +165,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Basic: Story = {
   async beforeEach() {
     // 👇 Set the return value for the getUserFromSession function
     mocked(getUserFromSession).mockReturnValue({ id: '1', name: 'Alice' });
@@ -151,7 +173,7 @@ export const Default: Story = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="web-components" language="js"
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 // 👇 Automocked module resolves to '../lib/__mocks__/session'
 import { getUserFromSession } from '../lib/session';
 
@@ -159,7 +181,7 @@ export default {
   component: 'my-page',
 };
 
-export const Default = {
+export const Basic = {
   async beforeEach() {
     // 👇 Set the return value for the getUserFromSession function
     getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
@@ -167,7 +189,7 @@ export const Default = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="web-components" language="ts"
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { mocked } from 'storybook/test';
 
@@ -181,7 +203,7 @@ export default meta;
 
 type Story = StoryObj;
 
-export const Default: Story = {
+export const Basic: Story = {
   async beforeEach() {
     // 👇 Set the return value for the getUserFromSession function
     mocked(getUserFromSession).mockReturnValue({ id: '1', name: 'Alice' });
@@ -189,10 +211,49 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
+// 👇 Automocked module resolves to '../lib/__mocks__/session'
+import { getUserFromSession } from '../lib/session';
+
+const meta = preview.meta({
+  component: 'my-page',
+});
+
+export const Basic = meta.story({
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { mocked } from 'storybook/test';
 
+import preview from '../.storybook/preview';
+
+// 👇 Automocked module resolves to '../lib/__mocks__/session'
+import { getUserFromSession } from '../lib/session';
+
+const meta = preview.meta({
+  component: 'my-page',
+});
+
+export const Basic = meta.story({
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    mocked(getUserFromSession).mockReturnValue({ id: '1', name: 'Alice' });
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { mocked } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
 // 👇 Automocked module resolves to '../lib/__mocks__/session'
 import { getUserFromSession } from '../lib/session';
 
@@ -202,7 +263,7 @@ const meta = preview.meta({
   component: Page,
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
   async beforeEach() {
     // 👇 Set the return value for the getUserFromSession function
     mocked(getUserFromSession).mockReturnValue({ id: '1', name: 'Alice' });
@@ -214,6 +275,7 @@ export const Default = meta.story({
 
 ```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';
 
@@ -223,7 +285,50 @@ const meta = preview.meta({
   component: Page,
 });
 
-export const Default = meta.story({
+export const Basic = meta.story({
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { mocked } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+// 👇 Automocked module resolves to '../lib/__mocks__/session'
+import { getUserFromSession } from '../lib/session';
+
+import Page from './Page.vue';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const Basic = 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="vue" 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.vue';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const Basic = 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 0c6d6aa6a187..e45f3c2f9476 100644
--- a/docs/_snippets/storybook-vite-builder-aliasing.md
+++ b/docs/_snippets/storybook-vite-builder-aliasing.md
@@ -1,6 +1,6 @@
 ```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.)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, etc.)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -21,7 +21,7 @@ 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.)
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, etc.)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -47,7 +47,7 @@ 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)
+// 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({
@@ -73,7 +73,7 @@ export default defineMain({
 <!-- 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)
+// 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({
@@ -95,3 +95,99 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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'],
+      },
+    });
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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-register.md b/docs/_snippets/storybook-vite-builder-register.md
index ee6c6511588b..91b38463b64c 100644
--- a/docs/_snippets/storybook-vite-builder-register.md
+++ b/docs/_snippets/storybook-vite-builder-register.md
@@ -1,6 +1,6 @@
 ```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.)
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs-vite, vue3-vite, etc.)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -10,7 +10,7 @@ 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.)
+// 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';
 
 const config: StorybookConfig = {
@@ -25,7 +25,7 @@ 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)
+// 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({
@@ -40,7 +40,7 @@ export default defineMain({
 <!-- 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)
+// 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({
@@ -51,3 +51,55 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  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="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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 90c7ea848c16..ebe3ecdd3b2f 100644
--- a/docs/_snippets/storybook-vite-builder-ts-configure.md
+++ b/docs/_snippets/storybook-vite-builder-ts-configure.md
@@ -15,7 +15,7 @@ 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)
+// 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({
@@ -27,3 +27,29 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async viteFinal(config, options) {
+    // Add your configuration here
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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/sveltekit-mock-features.md b/docs/_snippets/sveltekit-mock-features.md
index d6133ef12447..4ae9edd2bd7b 100644
--- a/docs/_snippets/sveltekit-mock-features.md
+++ b/docs/_snippets/sveltekit-mock-features.md
@@ -35,7 +35,7 @@
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -104,7 +104,7 @@ export const MyStory = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/sveltekit';
 
 import MyComponent from './MyComponent.svelte';
diff --git a/docs/_snippets/sveltekit-mock-links.md b/docs/_snippets/sveltekit-mock-links.md
index dab06cea2a63..eec31e9d9a50 100644
--- a/docs/_snippets/sveltekit-mock-links.md
+++ b/docs/_snippets/sveltekit-mock-links.md
@@ -29,7 +29,7 @@
 />
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -86,7 +86,7 @@ export const MyStory = {
 />
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/sveltekit';
 
 import MyComponent from './MyComponent.svelte';
diff --git a/docs/_snippets/tags-autodocs-in-meta.md b/docs/_snippets/tags-autodocs-in-meta.md
index f4d48ea6369c..139dd092fcaa 100644
--- a/docs/_snippets/tags-autodocs-in-meta.md
+++ b/docs/_snippets/tags-autodocs-in-meta.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './Button';
@@ -11,6 +11,18 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" 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'],
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -25,7 +37,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -59,7 +71,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -87,7 +99,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Button',
   component: 'demo-button',
@@ -96,7 +108,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -108,6 +120,26 @@ const meta: Meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+});
+```
+
 ```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -133,3 +165,29 @@ const meta = preview.meta({
   tags: ['autodocs'],
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 471224f46cae..73a4f021c289 100644
--- a/docs/_snippets/tags-autodocs-in-preview.md
+++ b/docs/_snippets/tags-autodocs-in-preview.md
@@ -1,6 +1,5 @@
 ```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // ...rest of preview
   //👇 Enables auto-generated documentation for all stories
   tags: ['autodocs'],
 };
@@ -11,7 +10,6 @@ export default {
 import type { Preview } from '@storybook/your-framework';
 
 const preview: Preview = {
-  // ...rest of preview
   //👇 Enables auto-generated documentation for all stories
   tags: ['autodocs'],
 };
@@ -22,9 +20,11 @@ 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 addonDocs from '@storybook/addon-docs';
+import addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
-  // ...rest of preview
+  addons: [addonDocs()],
   //👇 Enables auto-generated documentation for all stories
   tags: ['autodocs'],
 });
@@ -35,9 +35,69 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
-  // ...rest of preview
+  addons: [addonDocs()],
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  //👇 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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  //👇 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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
   //👇 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 8da45c98dccd..1b844b174137 100644
--- a/docs/_snippets/tags-autodocs-remove-component.md
+++ b/docs/_snippets/tags-autodocs-remove-component.md
@@ -1,4 +1,4 @@
-```ts filename="Page.stories.ts" renderer="angular" language="ts"
+```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
 import { Page } from './Page';
@@ -11,6 +11,18 @@ const meta: Meta<Page> = {
 export default meta;
 ```
 
+```ts filename="Page.stories.ts" renderer="angular" 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'],
+});
+```
+
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -25,7 +37,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Page from './Page.svelte';
 
 export default {
@@ -59,7 +71,7 @@ export default {
 </script>
 ```
 
-```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -87,7 +99,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Page.stories.js" renderer="web-components" language="js"
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Page',
   component: 'demo-page',
@@ -96,7 +108,7 @@ export default {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="web-components" language="ts"
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -108,6 +120,26 @@ const meta: Meta = {
 export default meta;
 ```
 
+```ts filename="Page.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-page',
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+});
+```
+
+```js filename="Page.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-page',
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+});
+```
+
 ```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -133,3 +165,29 @@ const meta = preview.meta({
   tags: ['!autodocs'],
 });
 ```
+
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Page from './Page.vue';
+
+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 179f7fddcebc..121a70906824 100644
--- a/docs/_snippets/tags-autodocs-remove-story.md
+++ b/docs/_snippets/tags-autodocs-remove-story.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './Button';
@@ -18,6 +18,23 @@ export const UndocumentedStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" 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'],
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -35,7 +52,7 @@ export const UndocumentedStory: Story = {
 <Story name="UndocumentedStory" tags={['!autodocs']} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -82,7 +99,7 @@ export const UndocumentedStory = {
 <Story name="UndocumentedStory" tags={['!autodocs']} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -124,7 +141,7 @@ export const UndocumentedStory: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Button',
   component: 'demo-button',
@@ -138,7 +155,7 @@ export const UndocumentedStory = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -157,6 +174,36 @@ export const UndocumentedStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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'],
+});
+```
+
 ```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -192,3 +239,39 @@ export const UndocumentedStory = meta.story({
   tags: ['!autodocs'],
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 bf9fb7e1dbf6..9a01a106fe39 100644
--- a/docs/_snippets/tags-combo-example.md
+++ b/docs/_snippets/tags-combo-example.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './Button';
@@ -36,6 +36,41 @@ export const Combo: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" 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: () => ({
+    template: `
+      <div>
+        <demo-button [variant]="1"></demo-button>
+        <demo-button [variant]="2"></demo-button>
+      </div>
+    `,
+  }),
+});
+```
+
 ```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
@@ -233,7 +268,7 @@ export const Combo: Story = {
 </Story>
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -267,7 +302,7 @@ export const Combo = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import { Button } from './Button';
@@ -306,7 +341,81 @@ export const Combo: Story = {
 };
 ```
 
-```ts filename="Button.stories.js" renderer="web-components" language="js"
+```ts filename="Button.stories.ts" renderer="vue" 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: () => ({
+    components: { Button },
+    template: `
+      <div>
+        <Button :variant="1" />
+        <Button :variant="2" />
+      </div>
+    `,
+  }),
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="vue" 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: () => ({
+    components: { Button },
+    template: `
+      <div>
+        <Button :variant="1" />
+        <Button :variant="2" />
+      </div>
+    `,
+  }),
+});
+```
+
+```ts filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -338,7 +447,7 @@ export const Combo = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -375,6 +484,74 @@ export const Combo: Story = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Button',
+  component: 'demo-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: () => html`
+    <div>
+      <demo-button variant="1" />
+      <demo-button variant="2" />
+    </div>
+  `,
+});
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  title: 'Button',
+  component: 'demo-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: () => html`
+    <div>
+      <demo-button variant="1" />
+      <demo-button variant="2" />
+    </div>
+  `,
+});
+```
+
 ```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/tags-docs-only-in-meta.md b/docs/_snippets/tags-docs-only-in-meta.md
index 4720aaf25389..bca45684fa6e 100644
--- a/docs/_snippets/tags-docs-only-in-meta.md
+++ b/docs/_snippets/tags-docs-only-in-meta.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './Button';
@@ -15,6 +15,22 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" 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'],
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -33,7 +49,7 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -79,7 +95,7 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -115,7 +131,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Button',
   component: 'demo-button',
@@ -128,7 +144,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -144,6 +160,34 @@ const meta: Meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-button',
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+});
+```
+
 ```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -164,6 +208,7 @@ const meta = preview.meta({
 
 ```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({
@@ -177,3 +222,38 @@ const meta = preview.meta({
   tags: ['autodocs', '!dev'],
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 dd80aba6002d..1578a470cc0b 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './Button';
@@ -29,6 +29,34 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" 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'],
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -57,7 +85,7 @@ export const ExperimentalFeatureStory: Story = {
 <Story name="ExperimentalFeatureStory" tags={['experimental']} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -137,7 +165,7 @@ export const ExperimentalFeatureStory = {
 <Story name="ExperimentalFeatureStory" tags={['experimental']} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -201,7 +229,7 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Button',
   component: 'demo-button',
@@ -226,7 +254,7 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -256,6 +284,58 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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'],
+});
+```
+
 ```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -288,6 +368,7 @@ export const ExperimentalFeatureStory = meta.story({
 
 ```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({
@@ -313,3 +394,62 @@ export const ExperimentalFeatureStory = meta.story({
   tags: ['experimental'],
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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 489c2d49ab84..d3e887f24709 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -1,6 +1,5 @@
 ```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // ...rest of preview
   /*
    * All stories in your project will have these tags applied:
    * - autodocs
@@ -16,7 +15,6 @@ export default {
 import type { Preview } from '@storybook/your-framework';
 
 const preview: Preview = {
-  // ...rest of preview
   /*
    * All stories in your project will have these tags applied:
    * - autodocs
@@ -32,9 +30,10 @@ 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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
-  // ...rest of preview
+  addons: [addonDocs()],
   /*
    * All stories in your project will have these tags applied:
    * - autodocs
@@ -50,9 +49,94 @@ export default definePreview({
 ```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 addonDocs from '@storybook/addon-docs';
 
 export default definePreview({
-  // ...rest of preview
+  addons: [addonDocs()],
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
+   */
+  tags: ['autodocs'],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  /*
+   * 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="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
+   */
+  tags: ['autodocs'],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
+   */
+  tags: ['autodocs'],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
+  /*
+   * 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="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+import addonDocs from '@storybook/addon-docs';
+
+export default definePreview({
+  addons: [addonDocs()],
   /*
    * All stories in your project will have these tags applied:
    * - autodocs
diff --git a/docs/_snippets/tags-remove-in-story.md b/docs/_snippets/tags-remove-in-story.md
index a4480c203712..7b4d5c28946a 100644
--- a/docs/_snippets/tags-remove-in-story.md
+++ b/docs/_snippets/tags-remove-in-story.md
@@ -1,7 +1,7 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button.component';
+import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -18,6 +18,23 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './button.component';
+
+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'],
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -35,7 +52,7 @@ export const ExperimentalFeatureStory: Story = {
 <Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import Button from './Button.svelte';
 
 export default {
@@ -67,7 +84,7 @@ export const ExperimentalFeatureStory = {
 <Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -88,7 +105,7 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="web-components" language="js"
+```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 export default {
   title: 'Button',
   component: 'demo-button',
@@ -102,7 +119,7 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
@@ -121,6 +138,36 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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 filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-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'],
+});
+```
+
 ```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, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -191,7 +238,7 @@ export const ExperimentalFeatureStory = meta.story({
 });
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts"
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
@@ -211,7 +258,7 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js"
+```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import Button from './Button.vue';
 
 export default {
@@ -225,3 +272,39 @@ export const ExperimentalFeatureStory = {
   tags: ['!stable', 'experimental'],
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import Button from './Button.vue';
+
+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/vue-vite-framework-options.md b/docs/_snippets/vue-vite-framework-options.md
index ce87365d5614..ee988e5f9b89 100644
--- a/docs/_snippets/vue-vite-framework-options.md
+++ b/docs/_snippets/vue-vite-framework-options.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="vue" language="js"
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     name: '@storybook/vue3-vite',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="vue" language="ts"
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/vue3-vite';
 
 const config: StorybookConfig = {
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: 'vue-component-meta',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: 'vue-component-meta',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/vue3-vite-add-framework.md b/docs/_snippets/vue3-vite-add-framework.md
index 9c82580d1a48..b8f89577a970 100644
--- a/docs/_snippets/vue3-vite-add-framework.md
+++ b/docs/_snippets/vue3-vite-add-framework.md
@@ -1,11 +1,11 @@
-```js filename=".storybook/main.js" renderer="vue" language="js"
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF 3"
 export default {
   // ...
   framework: '@storybook/vue3-vite', // 👈 Add this
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="vue" language="ts"
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/vue3-vite';
 
 const config: StorybookConfig = {
@@ -15,3 +15,23 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  // ...
+  framework: '@storybook/vue3-vite', // 👈 Add this
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  // ...
+  framework: '@storybook/vue3-vite', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/web-components-vite-add-framework.md b/docs/_snippets/web-components-vite-add-framework.md
index 88aec0689d13..f88352d29e0c 100644
--- a/docs/_snippets/web-components-vite-add-framework.md
+++ b/docs/_snippets/web-components-vite-add-framework.md
@@ -15,3 +15,23 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  // ...
+  framework: '@storybook/web-components-vite', // 👈 Add this
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  // ...
+  framework: '@storybook/web-components-vite', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/web-components-vite-framework-options.md b/docs/_snippets/web-components-vite-framework-options.md
index 39946561e2d8..ea3cf5e1be42 100644
--- a/docs/_snippets/web-components-vite-framework-options.md
+++ b/docs/_snippets/web-components-vite-framework-options.md
@@ -23,3 +23,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      // ...
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      // ...
+    },
+  },
+});
+```
diff --git a/docs/_snippets/webpack-final-to-vite-final.md b/docs/_snippets/webpack-final-to-vite-final.md
index 0a96a6c8e886..2c8b6038aced 100644
--- a/docs/_snippets/webpack-final-to-vite-final.md
+++ b/docs/_snippets/webpack-final-to-vite-final.md
@@ -1,6 +1,6 @@
 ```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)
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs, etc.)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async webpackFinal(config) {
@@ -26,7 +26,7 @@ export default {
 import graphql from 'vite-plugin-graphql-loader';
 
 export default {
-  // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+  // Replace your-framework with the framework you are using, e.g. react-vite, nextjs-vite, vue3-vite, etc.
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config) {
@@ -39,7 +39,7 @@ export default {
 ```
 
 ```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)
+// Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs, etc.)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -67,7 +67,7 @@ export default config;
 ```
 
 ```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.
+// 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';
 import graphql from 'vite-plugin-graphql-loader';
 
@@ -176,3 +176,91 @@ export default defineMain({
   },
 });
 ```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="With Webpack (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-webpack5/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-webpack5',
+  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="web-components" language="js" tabTitle="With Webpack (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-webpack5/node';
+
+export default defineMain({
+  framework: '@storybook/web-components-webpack5',
+  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="web-components" language="ts" tabTitle="With Vite (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+import graphql from 'vite-plugin-graphql-loader';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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="web-components" language="js" tabTitle="With Vite (CSF Next 🧪)"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+import graphql from 'vite-plugin-graphql-loader';
+
+export default defineMain({
+  framework: '@storybook/web-components-vite',
+  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-with-props.md b/docs/_snippets/your-component-with-decorator-with-props.md
index aebe0449e10f..30711e3bde90 100644
--- a/docs/_snippets/your-component-with-decorator-with-props.md
+++ b/docs/_snippets/your-component-with-decorator-with-props.md
@@ -18,7 +18,7 @@
 </script>
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
@@ -54,7 +54,7 @@ export default {
 </script>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
diff --git a/docs/_snippets/your-component-with-decorator.md b/docs/_snippets/your-component-with-decorator.md
index 601529a532cc..779aeb0c9f5c 100644
--- a/docs/_snippets/your-component-with-decorator.md
+++ b/docs/_snippets/your-component-with-decorator.md
@@ -1,7 +1,5 @@
-```ts filename="YourComponent.stories.ts" renderer="angular" language="ts"
-import { componentWrapperDecorator } from '@storybook/angular';
-
-import type { Meta } from '@storybook/angular';
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
+import { type Meta, componentWrapperDecorator } from '@storybook/angular';
 
 import { YourComponent } from './your.component';
 
@@ -13,6 +11,19 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { componentWrapperDecorator } from '@storybook/angular';
+
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './your.component';
+
+const meta = preview.meta({
+  component: YourComponent,
+  decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
+});
+```
+
 ```jsx filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
@@ -100,7 +111,7 @@ export default meta;
 </script>
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
@@ -124,7 +135,7 @@ export default {
 </script>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
@@ -139,7 +150,7 @@ const meta = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js" renderer="vue" language="js"
+```js filename="YourComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.vue';
 
 export default {
@@ -148,7 +159,7 @@ export default {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/vue3-vite';
 
 import YourComponent from './YourComponent.vue';
@@ -161,7 +172,31 @@ const meta = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js" renderer="web-components" language="js"
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+const meta = preview.meta({
+  component: YourComponent,
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story/></div>' })],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="YourComponent.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+const meta = preview.meta({
+  component: YourComponent,
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story/></div>' })],
+});
+```
+
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 export default {
@@ -170,7 +205,7 @@ export default {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/web-components-vite';
 
 import { html } from 'lit';
@@ -182,6 +217,28 @@ const meta: Meta = {
 export default meta;
 ```
 
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-your-component',
+  decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
+});
+```
+
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { html } from 'lit';
+
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
+  component: 'demo-your-component',
+  decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
+});
+```
+
 ```tsx filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md
index 956f4e4f1e90..6e304f3cd78e 100644
--- a/docs/_snippets/your-component.md
+++ b/docs/_snippets/your-component.md
@@ -1,4 +1,4 @@
-```ts filename="YourComponent.stories.ts" renderer="angular" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { YourComponent } from './your.component';
@@ -11,13 +11,30 @@ const meta: Meta<YourComponent> = {
 export default meta;
 type Story = StoryObj<YourComponent>;
 
-export const FirstStory: Story = {
+export const Basic: Story = {
   args: {
     //👇 The args you need here will depend on your component
   },
 };
 ```
 
+```ts filename="YourComponent.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { YourComponent } from './your.component';
+
+//👇 This default export determines where your story goes in the story list
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const Basic = meta.story({
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+});
+```
+
 ```js filename="YourComponent.stories.js" renderer="html" language="js"
 import { createYourComponent } from './YourComponent';
 
@@ -35,7 +52,7 @@ export default {
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const FirstStory = {
+export const Basic = {
   render: (args) => createYourComponent(args),
   args: {
     // 👇 The args you need here will depend on your component
@@ -65,7 +82,7 @@ type Story = StoryObj<ComponentProps>;
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const FirstStory: Story = {
+export const Basic: Story = {
   render: (args) => createYourComponent(args),
   args: {
     // 👇 The args you need here will depend on your component
@@ -89,7 +106,7 @@ export default {
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const FirstStory = {
+export const Basic = {
   render: (args) => <YourComponent {...args} />,
   args: {
     //👇 The args you need here will depend on your component
@@ -105,7 +122,7 @@ export default {
   component: YourComponent,
 };
 
-export const FirstStory = {
+export const Basic = {
   args: {
     //👇 The args you need here will depend on your component
   },
@@ -126,7 +143,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const FirstStory: Story = {
+export const Basic: Story = {
   args: {
     //👇 The args you need here will depend on your component
   },
@@ -141,7 +158,7 @@ export default {
   component: YourComponent,
 };
 
-export const FirstStory = {
+export const Basic = {
   args: {
     //👇 The args you need here will depend on your component
   },
@@ -161,7 +178,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const FirstStory: Story = {
+export const Basic: Story = {
   args: {
     //👇 The args you need here will depend on your component
   },
@@ -181,14 +198,14 @@ export const FirstStory: Story = {
 </script>
 
 <Story
-  name="FirstStory"
+  name="Basic"
   args={{
     /*👇 The args you need here will depend on your component */
   }}
 />
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.svelte';
 
 //👇 This default export determines where your story goes in the story list
@@ -196,7 +213,7 @@ export default {
   component: YourComponent,
 };
 
-export const FirstStory = {
+export const Basic = {
   args: {
     //👇 The args you need here will depend on your component
   },
@@ -216,14 +233,14 @@ export const FirstStory = {
 </script>
 
 <Story
-  name="FirstStory"
+  name="Basic"
   args={{
     /*👇 The args you need here will depend on your component */
   }}
 />
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -237,14 +254,14 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const FirstStory: Story = {
+export const Basic: Story = {
   args: {
     //👇 The args you need here will depend on your component
   },
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="vue" language="js"
+```js filename="YourComponent.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 import YourComponent from './YourComponent.vue';
 
 //👇 This default export determines where your story goes in the story list
@@ -257,7 +274,7 @@ export default {
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const FirstStory = {
+export const Basic = {
   render: (args) => ({
     components: { YourComponent },
     setup() {
@@ -271,7 +288,7 @@ export const FirstStory = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="vue" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import YourComponent from './YourComponent.vue';
@@ -289,7 +306,7 @@ type Story = StoryObj<typeof meta>;
  * See https://storybook.js.org/docs/api/csf
  * to learn how to use render functions.
  */
-export const Primary: Story = {
+export const Basic: Story = {
   render: (args) => ({
     components: { YourComponent },
     setup() {
@@ -303,20 +320,80 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="web-components" language="js"
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+//👇 This default export determines where your story goes in the story list
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+/*
+ *👇 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: (args) => ({
+    components: { YourComponent },
+    setup() {
+      return { args };
+    },
+    template: '<YourComponent v-bind="args" />',
+  }),
+  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" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import YourComponent from './YourComponent.vue';
+
+//👇 This default export determines where your story goes in the story list
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+/*
+ *👇 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: (args) => ({
+    components: { YourComponent },
+    setup() {
+      return { args };
+    },
+    template: '<YourComponent v-bind="args" />',
+  }),
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+});
+```
+
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 // This default export determines where your story goes in the story list
 export default {
   component: 'demo-your-component',
 };
 
-export const FirstStory = {
+export const Basic = {
   args: {
     // 👇 The args you need here will depend on your component
   },
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts"
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 // This default export determines where your story goes in the story list
@@ -327,13 +404,43 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-export const FirstStory: Story = {
+export const Basic: Story = {
   args: {
     // 👇 The args you need here will depend on your component
   },
 };
 ```
 
+```js filename="YourComponent.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// 👇 This default export determines where your story goes in the story list
+const meta = preview.meta({
+  component: 'demo-your-component',
+});
+
+export const Basic = meta.story({
+  args: {
+    // 👇 The args you need here will depend on your component
+  },
+});
+```
+
+```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+// 👇 This default export determines where your story goes in the story list
+const meta = preview.meta({
+  component: 'demo-your-component',
+});
+
+export const Basic = meta.story({
+  args: {
+    // 👇 The args you need here will depend on your component
+  },
+});
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -344,7 +451,7 @@ const meta = preview.meta({
   component: YourComponent,
 });
 
-export const FirstStory = meta.story({
+export const Basic = meta.story({
   args: {
     //👇 The args you need here will depend on your component
   },
@@ -361,7 +468,7 @@ const meta = preview.meta({
   component: YourComponent,
 });
 
-export const FirstStory = meta.story({
+export const Basic = meta.story({
   args: {
     //👇 The args you need here will depend on your component
   },
diff --git a/docs/api/arg-types.mdx b/docs/api/arg-types.mdx
index a6b56ab49134..9b3dde6cf468 100644
--- a/docs/api/arg-types.mdx
+++ b/docs/api/arg-types.mdx
@@ -15,7 +15,7 @@ The most concrete realization of argTypes is the [`ArgTypes` doc block](./doc-bl
 
 ## Automatic argType inference
 
-If you are using the Storybook [docs](../writing-docs/index.mdx) addon, then Storybook will infer a set of argTypes for each story based on the `component` specified in the [default export](../writing-stories/index.mdx#default-export) of the CSF file.
+If you are using the Storybook [docs](../writing-docs/index.mdx) addon, then Storybook will infer a set of argTypes for each story based on the `component` specified in the [meta (or default export)](../writing-stories/index.mdx#default-export) of the CSF file.
 
 To do so, Storybook uses various static analysis tools depending on your framework.
 
@@ -33,7 +33,7 @@ The data structure of `argTypes` is designed to match the output of the these to
 
 For most Storybook projects, argTypes are [automatically inferred](#automatic-argtype-inference) from your components. Any argTypes specified manually will override the inferred values.
 
-ArgTypes are most often specified at the meta (component) level, in the [default export](../writing-stories/index.mdx#default-export) of the CSF file:
+ArgTypes are most often specified at the component level, in the [meta (or default export)](../writing-stories/index.mdx#default-export) of the CSF file:
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/api/csf/csf-next.mdx b/docs/api/csf/csf-next.mdx
index b0e8f484616b..3e4331615fe8 100644
--- a/docs/api/csf/csf-next.mdx
+++ b/docs/api/csf/csf-next.mdx
@@ -6,15 +6,15 @@ tab:
   title: CSF Next (Preview)
 ---
 
-<If notRenderer="react">
+<If notRenderer={['react', 'vue', 'angular', 'web-components']}>
 
 <Callout variant="info">
-  CSF Next is currently only supported in [React](?renderer=react) projects.
+  CSF Next is currently only supported in [React](?renderer=react), [Vue](?renderer=vue), [Angular](?renderer=angular), and [Web Components](?renderer=web-components) projects.
 </Callout>
 
 </If>
 
-<If renderer="react">
+<If renderer={['react', 'vue', 'angular', 'web-components']}>
 
 <Callout variant="warning" icon="🧪">
   This is a [**preview**](../../releases/features.mdx#preview) feature and (though unlikely) the API may change in future releases. We [welcome feedback](https://github.com/storybookjs/storybook/discussions/30112) and contributions to help improve this feature.
@@ -129,6 +129,37 @@ Alternatively, you can [configure an alias in your builder](../../writing-storie
 
 </Callout>
 
+#### `preview.type.meta`
+
+By default, `preview.meta` will infer the type of your component's props automatically. However, if you need to extend or modify the inferred types, you can use the `preview.type` function to specify custom types.
+
+This example is for React, but the same API applies to all supported renderers.
+
+```tsx title="Button.stories.ts|tsx"
+import * as React from 'react';
+
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+type CustomProps = React.ComponentProps<typeof Button> & { customProp: string };
+
+const meta = preview.type<{ args: CustomProps }>().meta({
+  component: Button,
+  // 👇 Correct types
+  render: ({ customProp, ...args }) => <>{customProp} <Button {...args} /></>,
+});
+
+export const Primary = meta.story({
+  // 👇 Correct types
+  args: {
+    customProp: 'Hello, world!',
+  },
+});
+```
+
+For more information on typing your stories, refer to the [writing stories in TypeScript guide](../../writing-stories/typescript.mdx).
+
 ### `meta.story`
 
 Finally, the `story` function on the `meta` object defines the stories. This function accepts an object containing the [`name`](../../writing-stories/index.mdx#rename-stories), [`args`](../../writing-stories/args.mdx), [`parameters`](../../writing-stories/parameters.mdx), and other story properties.
@@ -362,7 +393,38 @@ import { Button } from './Button';
 - };
 ```
 
-Note that importing or manually applying any type to the meta or stories is no longer necessary. Thanks to the factory function pattern, the types are now inferred automatically.
+Note that importing or manually applying the component props type to the meta or stories is no longer necessary. Thanks to the factory function pattern, the types are now inferred automatically.
+
+<details>
+<summary>Handling complex types</summary>
+
+If you were previously using complex types for your meta or stories, such as intersection types to add custom args, you can now use the [`preview.type.meta`](#previewtypemeta) pattern to explicitly specify types.
+
+```diff title="Button.stories.js|ts"
++ import preview from '../.storybook/preview';
+- import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+type CustomProps = React.ComponentProps<typeof Button> & { customProp: string };
+
++ const meta = preview.type<{ args: CustomProps }>().meta({
+- const meta = {
+    // ...meta object is unchanged
++ });
+- } satisfies Meta<CustomProps>;
+- export default meta;
+
+- type Story = StoryObj<typeof meta>;
+
++ export const Primary = meta.story({
+- export const Primary: Story = {
+    // ...story object is unchanged
++ });
+- };
+```
+
+</details>
 
 **3.1 Reusing story properties**
 
diff --git a/docs/api/doc-blocks/doc-block-source.mdx b/docs/api/doc-blocks/doc-block-source.mdx
index 1fd665e1d055..782e26fe114d 100644
--- a/docs/api/doc-blocks/doc-block-source.mdx
+++ b/docs/api/doc-blocks/doc-block-source.mdx
@@ -131,30 +131,7 @@ Default: `parameters.docs.source.transform`
 An async function to dynamically transform the source before being rendered, based on the original source and any story context necessary. The returned string is displayed as-is.
 If both [`code`](#code) and `transform` are specified, `transform` will be ignored.
 
-{/* prettier-ignore-start */}
-
-```js title=".storybook/preview.js|ts|jsx|tsx"
-export default {
-  parameters: {
-    docs: {
-      source: {
-        transform: async (source) => {
-          const prettier = await import('prettier/standalone');
-          const prettierPluginBabel = await import('prettier/plugins/babel');
-          const prettierPluginEstree = await import('prettier/plugins/estree');
-
-          return prettier.format(source, {
-            parser: 'babel',
-            plugins: [prettierPluginBabel, prettierPluginEstree],
-          });
-        },
-      },
-    },
-  },
-};
-```
-
-{/* prettier-ignore-end */}
+<CodeSnippets path="parameters-docs-source-transform-in-preview.md" />
 
 This example shows how to use Prettier to format all source code snippets in your documentation. The transform function is applied globally through the preview configuration, ensuring consistent code formatting across all stories.
 
diff --git a/docs/api/main-config/main-config-indexers.mdx b/docs/api/main-config/main-config-indexers.mdx
index 6e6cd3dfff5d..a532d25a734e 100644
--- a/docs/api/main-config/main-config-indexers.mdx
+++ b/docs/api/main-config/main-config-indexers.mdx
@@ -177,7 +177,7 @@ Tags for filtering entries in Storybook and its tools.
 
 Type: `string`
 
-Default: Auto-generated from default export of [`importPath`](#importpath)
+Default: Auto-generated from the meta (or default export) of [`importPath`](#importpath)
 
 Determines the location of the entry in the sidebar.
 
diff --git a/docs/api/parameters.mdx b/docs/api/parameters.mdx
index 7c40ec1a7d5a..3e392b332bd7 100644
--- a/docs/api/parameters.mdx
+++ b/docs/api/parameters.mdx
@@ -23,7 +23,7 @@ Parameters specified at the story level apply to that story only. They are defin
 
 ## Meta parameters
 
-Parameter's specified in a [CSF](../writing-stories/index.mdx#component-story-format-csf) file's meta configuration apply to all stories in that file. They are defined in the `parameters` property of the `meta` (default export):
+Parameter's specified in a [CSF](../writing-stories/index.mdx#component-story-format-csf) file's meta configuration apply to all stories in that file. They are defined in the `parameters` property of the meta (or default export):
 
 {/* prettier-ignore-start */}
 
@@ -37,7 +37,7 @@ Parameter's specified in a [CSF](../writing-stories/index.mdx#component-story-fo
 
 ## Project parameters
 
-Parameters specified at the project (global) level apply to **all stories** in your Storybook. They are defined in the `parameters` property of the default export in your `.storybook/preview.js|ts` file:
+Parameters specified at the project (global) level apply to **all stories** in your Storybook. They are defined in the `parameters` property of the meta (or default export) in your `.storybook/preview.js|ts` file:
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/configure/integration/eslint-plugin.mdx b/docs/configure/integration/eslint-plugin.mdx
index fa5263e16401..32559975fc16 100644
--- a/docs/configure/integration/eslint-plugin.mdx
+++ b/docs/configure/integration/eslint-plugin.mdx
@@ -153,7 +153,7 @@ This plugin does not support MDX files.
 | [`storybook/await-interactions`](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/docs/rules/await-interactions.md)                       | Interactions should be awaited                                                                                                | ✅                    | <ul><li>addon-interactions</li><li>flat/addon-interactions</li><li>recommended</li><li>flat/recommended</li></ul>              |
 | [`storybook/context-in-play-function`](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/docs/rules/context-in-play-function.md)           | Pass a context when invoking play function of another story                                                                   |                       | <ul><li>recommended</li><li>flat/recommended</li><li>addon-interactions</li><li>flat/addon-interactions</li></ul>              |
 | [`storybook/csf-component`](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/docs/rules/csf-component.md)                                 | The component property should be set                                                                                          |                       | <ul><li>csf</li><li>flat/csf</li><li>csf-strict</li><li>flat/csf-strict</li></ul>                                              |
-| [`storybook/default-exports`](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/docs/rules/default-exports.md)                             | Story files should have a default export                                                                                      | ✅                    | <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li><li>csf-strict</li><li>flat/csf-strict</li></ul> |
+| [`storybook/default-exports`](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/docs/rules/default-exports.md)                             | Story files (unless using [CSF Next](../../api/csf/csf-next.mdx)) should have a default export                                | ✅                    | <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li><li>csf-strict</li><li>flat/csf-strict</li></ul> |
 | [`storybook/hierarchy-separator`](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/docs/rules/hierarchy-separator.md)                     | Deprecated hierarchy separator in title property                                                                              | ✅                    | <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li><li>csf-strict</li><li>flat/csf-strict</li></ul> |
 | [`storybook/meta-inline-properties`](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/docs/rules/meta-inline-properties.md)               | Meta should only have inline properties                                                                                       |                       | N/A                                                                                                                            |
 | [`storybook/meta-satisfies-type`](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/docs/rules/meta-satisfies-type.md)                     | Meta should use `satisfies Meta`                                                                                              | ✅                    | N/A                                                                                                                            |
diff --git a/docs/configure/story-rendering.mdx b/docs/configure/story-rendering.mdx
index c855c5933ed4..d7b6b9c1a486 100644
--- a/docs/configure/story-rendering.mdx
+++ b/docs/configure/story-rendering.mdx
@@ -14,20 +14,7 @@ Code executed in the preview file (`.storybook/preview.js|ts`) runs for every st
 <If notRenderer={['angular', 'vue']}>
   Here's an example of how you might use the preview file to initialize a library that must run before your components render:
 
-  ```ts title=".storybook/preview.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 { initialize } from '../lib/your-library';
-
-  initialize();
-
-  const preview: Preview = {
-    // ...
-  };
-
-  export default preview;
-  ```
+  <CodeSnippets path="initialize-library-in-preview.md" />
 </If>
 
 <If renderer={['angular', 'vue']}>
diff --git a/docs/configure/user-interface/sidebar-and-urls.mdx b/docs/configure/user-interface/sidebar-and-urls.mdx
index 8ee6ecd62f3d..67646779e5b6 100644
--- a/docs/configure/user-interface/sidebar-and-urls.mdx
+++ b/docs/configure/user-interface/sidebar-and-urls.mdx
@@ -53,7 +53,7 @@ Storybook will prioritize the `id` over the title for ID generation if provided
 
 ## CSF 3.0 auto-titles
 
-Storybook 6.4 introduced [CSF 3.0](https://storybook.js.org/blog/component-story-format-3-0/) as an experimental feature, allowing you to write stories more compactly. Suppose you're already using this format to write your stories. In that case, you can omit the `title` element from the default export and allow Storybook automatically infer it based on the file's physical location. For example, given the following configuration and story:
+Storybook 6.4 introduced [CSF 3.0](https://storybook.js.org/blog/component-story-format-3-0/) as an experimental feature, allowing you to write stories more compactly. Suppose you're already using this format to write your stories. In that case, you can omit the `title` element from the meta (or default export) and allow Storybook automatically infer it based on the file's physical location. For example, given the following configuration and story:
 
 {/* prettier-ignore-start */}
 
@@ -88,7 +88,7 @@ If you need, you can revert to the previous pattern by adding the following conf
 
 In addition to improvements to the story file name casing, a new heuristic was introduced, removing redundant names in case the filename has the same name as the directory name, or if it's called `index.stories.js|ts`. For example, before `components/MyComponent/MyComponent.stories.js` was defined as `Components/MyComponent/MyComponent` in the sidebar. Now it will be defined as `Components/MyComponent`.
 
-If you need to preserve the naming scheme, you can add the `title` element to the default export. For example:
+If you need to preserve the naming scheme, you can add the `title` element to the meta (or default export). For example:
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/essentials/controls.mdx b/docs/essentials/controls.mdx
index ab7f1db6d08b..7fbfcf638fbf 100644
--- a/docs/essentials/controls.mdx
+++ b/docs/essentials/controls.mdx
@@ -50,7 +50,7 @@ To use Controls, you need to write your stories using [args](../writing-stories/
 
   {/* prettier-ignore-end */}
 
-  When you set the `component` annotation of the default export of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component.
+  When you set the `component` annotation of the meta (or default export) of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component.
 
   {/* prettier-ignore-start */}
 
@@ -82,7 +82,7 @@ To use Controls, you need to write your stories using [args](../writing-stories/
     Enabling this feature will generate a `storybook-docgen/index.json` automatically with each build. For more information on how the metadata is generated, refer to [documentation](https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember) for the Ember framework.
   </Callout>
 
-  When you set the `component` annotation of the default export of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component.
+  When you set the `component` annotation of the meta (or default export) of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component.
 
   {/* prettier-ignore-start */}
 
@@ -92,7 +92,7 @@ To use Controls, you need to write your stories using [args](../writing-stories/
 </IfRenderer>
 
 <IfRenderer renderer="react">
-  By default, Storybook will choose a control for each arg based on its initial value. This will work well with specific arg types (e.g., `boolean` or `string`). To enable them, add the `component` annotation to the default export of your story file, and it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component using [`react-docgen`](https://github.com/reactjs/react-docgen), a documentation generator for React components that also includes first-class support for TypeScript.
+  By default, Storybook will choose a control for each arg based on its initial value. This will work well with specific arg types (e.g., `boolean` or `string`). To enable them, add the `component` annotation to the meta (or default export) of your story file, and it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component using [`react-docgen`](https://github.com/reactjs/react-docgen), a documentation generator for React components that also includes first-class support for TypeScript.
 
   {/* prettier-ignore-start */}
 
@@ -102,7 +102,7 @@ To use Controls, you need to write your stories using [args](../writing-stories/
 </IfRenderer>
 
 <IfRenderer renderer="vue">
-  By default, Storybook will choose a control for each arg based on its initial value. This will work well with specific arg types (e.g., `boolean` or `string`). To enable them, add the `component` annotation to the default export of your story file, and it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component using [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), including first-class support for Vue's `props`, `events`, and `slots`.
+  By default, Storybook will choose a control for each arg based on its initial value. This will work well with specific arg types (e.g., `boolean` or `string`). To enable them, add the `component` annotation to the meta (or default export) of your story file, and it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component using [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), including first-class support for Vue's `props`, `events`, and `slots`.
 
   {/* prettier-ignore-start */}
 
@@ -120,7 +120,7 @@ To use Controls, you need to write your stories using [args](../writing-stories/
 
   {/* prettier-ignore-end */}
 
-  When you set the `component` annotation of the default export of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component.
+  When you set the `component` annotation of the meta (or default export) of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component.
 
   {/* prettier-ignore-start */}
 
@@ -130,7 +130,7 @@ To use Controls, you need to write your stories using [args](../writing-stories/
 </IfRenderer>
 
 <IfRenderer renderer={[ 'html', 'svelte', 'preact', 'qwik', 'solid' ]}>
-  By default, Storybook will choose a control for each arg based on its initial value. This will work well with specific arg types (e.g., `boolean` or `string`). To enable them, add the `component` annotation to the default export of your story file, and it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component provided by the framework you've chosen to use.
+  By default, Storybook will choose a control for each arg based on its initial value. This will work well with specific arg types (e.g., `boolean` or `string`). To enable them, add the `component` annotation to the meta (or default export) of your story file, and it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.mdx) for your component provided by the framework you've chosen to use.
 
   {/* prettier-ignore-start */}
 
@@ -167,7 +167,7 @@ We can specify which controls get used by declaring a custom [argType](../api/ar
 
 <If notRenderer="svelte">
 
-  `ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a component property, let's put that annotation on the default export.
+  `ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a component property, let's put that annotation on the meta (or default export).
 
 </If>
 
diff --git a/docs/faq.mdx b/docs/faq.mdx
index ffd0f9f478cd..8aec0c684089 100644
--- a/docs/faq.mdx
+++ b/docs/faq.mdx
@@ -15,43 +15,13 @@ Storybook can be set up for both single-project and multi-project Angular worksp
 
 In case you are having trouble with Angular Ivy you can deactivate it in your `main.js|ts`:
 
-```js title=".storybook/main.js|ts"
-export default {
-  stories: [
-    /* ... */
-  ],
-  addons: [
-    /* ... */
-  ],
-  framework: {
-    name: '@storybook/angular',
-    options: {
-      enableIvy: false,
-    },
-  },
-};
-```
+<CodeSnippets path="angular-framework-options-enable-ivy-false.md" />
 
 ## How can I opt-out of Angular ngcc?
 
 In case you postinstall ngcc, you can disable it:
 
-```js title=".storybook/main.js|ts"
-export default {
-  stories: [
-    /* ... */
-  ],
-  addons: [
-    /* ... */
-  ],
-  framework: {
-    name: '@storybook/angular',
-    options: {
-      enableNgcc: false,
-    },
-  },
-};
-```
+<CodeSnippets path="angular-framework-options-enable-ngcc-false.md" />
 
 Please report any issues related to Ivy in our [GitHub Issue Tracker](https://github.com/storybookjs/storybook/labels/app%3A%20angular) as the support for View Engine will be dropped in a future release of Angular.
 
@@ -71,18 +41,9 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor
 
 ## How do I setup Storybook to share Webpack configuration with Next.js?
 
-You can generally reuse Webpack rules by placing them in a file that is imported from both your `next.config.js` and your `.storybook/main.js|ts` files. For example:
-
-```js title=".storybook/main.js|ts"
-export default {
-  webpackFinal: async (baseConfig) => {
-    const nextConfig = await import('/path/to/next.config.js');
+Storybook's [Next.js framework](./get-started/frameworks/nextjs.mdx) will read from your `next.config.js` file by default. If your configuration file is named or located differently, you can specify the path in your Storybook main configuration file:
 
-    // merge whatever from nextConfig into the webpack config storybook will use
-    return { ...baseConfig, ...nextConfig };
-  },
-};
-```
+<CodeSnippets path="nextjs-framework-options-next-config-path.md" />
 
 ## How do I fix module resolution in special environments?
 
@@ -140,16 +101,7 @@ If your installed React Version equals or is higher than 18.0.0, the new React R
 
 You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js|ts` file:
 
-```js title=".storybook/main.js|ts"
-export default {
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {
-      legacyRootApi: true,
-    },
-  },
-};
-```
+<CodeSnippets path="react-framework-options-legacy-root-api.md" />
 
 ## Why is there no addons channel?
 
@@ -189,19 +141,7 @@ Some description here
 
 And then refer to it in your Storybook config file:
 
-```ts title=".storybook/main.js|ts"
-const config = {
-  // define at least one local story/page here
-  stories: ['../Introduction.mdx'],
-  // define composed Storybooks here
-  refs: {
-    firstProject: { title: 'First', url: 'some-url' },
-    secondProject: { title: 'Second', url: 'other-url' },
-  },
-  // ...
-};
-export default config;
-```
+<CodeSnippets path="main-config-stories-only-mdx.md" />
 
 ## Which community addons are compatible with the latest version of Storybook?
 
@@ -398,7 +338,9 @@ See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more in
 
 ## Why are my mocked GraphQL queries failing with Storybook's MSW addon?
 
-If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
+If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable).
+
+With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
 
 ```js title="rollup.config.js"
 // Boilerplate imports
@@ -445,38 +387,6 @@ Storybook allows you to use most characters while naming your stories. Still, sp
 
 This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce.mdx) so that it can be triaged and fixed in future releases.
 
-## Why are my args no longer displaying the default values?
-
-Before version 6.3, unset args were set to the `argTypes.defaultValue` if specified or inferred from the component's properties (e.g., React's prop types, Angular inputs, Vue props). Starting with version 6.3, Storybook no longer infers default values but instead defines the arg's value as `undefined` when unset, allowing the framework to supply its default value.
-
-If you are using `argTypes.defaultValue` to fix the above, you no longer need to, and you can safely remove it from your stories.
-
-Additionally, suppose you were using `argTypes.defaultValue` or relying on inference to set a default value for an arg. In that case, you should define the arg's value at the component level instead:
-
-```js title="MyComponent.stories.js"
-export default {
-  component: MyComponent,
-  args: {
-    //👇 Defining the arg's value at the component level.
-    text: 'Something',
-  },
-};
-```
-
-For Storybook's Docs, you can manually configure the displayed value by configuring the `table.defaultValue` setting:
-
-```js title="MyComponent.stories.js"
-export default {
-  component: MyComponent,
-  argTypes: {
-    //👇 Defining the arg's display value in docs.
-    text: {
-      table: { defaultValue: { summary: 'SomeType<T>' } },
-    },
-  },
-};
-```
-
 ## Why isn't Storybook's test runner working?
 
 There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information.
diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx
index 2493f964c5b5..e1f2b411128f 100644
--- a/docs/get-started/frameworks/angular.mdx
+++ b/docs/get-started/frameworks/angular.mdx
@@ -108,60 +108,13 @@ Add the following option to your Storybook Builder:
 
 Go to your `.storybook/preview.ts` and add the following:
 
-```ts title=".storybook/preview.ts"
-import type { Preview } from '@storybook/angular';
-
-// 👇 Add these
-import { setCompodocJson } from '@storybook/addon-docs/angular';
-import docJson from '../documentation.json';
-setCompodocJson(docJson);
-
-const preview: Preview = {};
-export default preview;
-```
+<CodeSnippets path="angular-add-compodoc.md" />
 
 ### Application-wide providers
 
 If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.dev/api/platform-browser/bootstrapApplication), used to bootstrap the component in Storybook.
 
-```ts title="ChipsModule.stories.ts"
-import { Meta, applicationConfig, StoryObj } from '@storybook/angular';
-
-import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
-import { importProvidersFrom } from '@angular/core';
-
-import { ChipsModule } from './angular-src/chips.module';
-
-const meta: Meta<ChipsModule> = {
-  component: ChipsModule,
-  decorators: [
-    // Apply application config to all stories
-    applicationConfig({
-      // List of providers and environment providers that should be available to the root component and all its children.
-      providers: [
-        ...
-        // Import application-wide providers from a module
-        importProvidersFrom(BrowserAnimationsModule)
-        // Or use provide-style functions if available instead, e.g.
-        provideAnimations()
-      ],
-    }),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<ChipsModule>;
-
-export const WithCustomApplicationProvider: Story = {
-  render: () => ({
-    // Apply application config to a specific story
-    applicationConfig: {
-      // The providers will be merged with the ones defined in the applicationConfig decorator's providers array of the global meta object
-      providers: [...],
-    }
-  })
-}
-```
+<CodeSnippets path="angular-application-providers-in-meta-and-story.md" />
 
 ### Angular dependencies
 
@@ -351,18 +304,7 @@ The full list of options can be found in the Angular builder schemas:
 
 You can pass an options object for additional configuration if needed:
 
-```js title=".storybook/main.ts"
-import type { StorybookConfig } from '@storybook/angular';
-
-const config: StorybookConfig = {
-  framework: {
-    name: '@storybook/angular',
-    options: {
-      // ...
-    },
-  },
-};
-```
+<CodeSnippets path="angular-framework-options.md" />
 
 The available options are:
 
diff --git a/docs/get-started/frameworks/nextjs-vite.mdx b/docs/get-started/frameworks/nextjs-vite.mdx
index b39271a09c8e..f9e9cc8aa8a0 100644
--- a/docs/get-started/frameworks/nextjs-vite.mdx
+++ b/docs/get-started/frameworks/nextjs-vite.mdx
@@ -244,29 +244,7 @@ Additionally, the [`router` object](https://nextjs.org/docs/pages/api-reference/
 
 To override these defaults, you can use [parameters](../../writing-stories/parameters.mdx) and [`beforeEach`](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#setting-up-and-cleaning-up):
 
-```ts title=".storybook/preview.js|ts"
-import type { Preview } from '@storybook/nextjs-vite';
-
-// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { getRouter } from "@storybook/nextjs-vite/router.mock";
-
-const preview: Preview = {
-  parameters: {
-    nextjs: {
-      // 👇 Override the default router properties
-      router: {
-        basePath: '/app/',
-      },
-    },
-  },
-  async beforeEach() {
-    // 👇 Manipulate the default router method mocks
-    getRouter().push.mockImplementation(() => {
-      /* ... */
-    });
-  },
-};
-```
+<CodeSnippets path="nextjs-router-override-in-preview.md" />
 
 ### Next.js navigation
 
@@ -378,29 +356,7 @@ Additionally, the [`router` object](https://nextjs.org/docs/app/api-reference/fu
 
 To override these defaults, you can use [parameters](../../writing-stories/parameters.mdx) and [`beforeEach`](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#setting-up-and-cleaning-up):
 
-```ts title=".storybook/preview.js|ts"
-import type { Preview } from '@storybook/nextjs-vite';
-
-// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { getRouter } from '@storybook/nextjs-vite/navigation.mock';
-
-const preview: Preview = {
-  parameters: {
-    nextjs: {
-      // 👇 Override the default navigation properties
-      navigation: {
-        pathname: '/app/',
-      },
-    },
-  },
-  async beforeEach() {
-    // 👇 Manipulate the default navigation method mocks
-    getRouter().push.mockImplementation(() => {
-      /* ... */
-    });
-  },
-};
-```
+<CodeSnippets path="nextjs-navigation-override-in-preview.md" />
 
 ### Next.js Head
 
@@ -867,22 +823,7 @@ This module exports mocked implementations of the `next/router` module's exports
 
 You can pass an options object for additional configuration if needed:
 
-```js title=".storybook/main.js"
-import * as path from 'path';
-
-export default {
-  // ...
-  framework: {
-    name: '@storybook/nextjs-vite',
-    options: {
-      image: {
-        loading: 'eager',
-      },
-      nextConfigPath: path.resolve(process.cwd(), 'next.config.js'),
-    },
-  },
-};
-```
+<CodeSnippets path="nextjs-framework-options-next-config-path.md" />
 
 The available options are:
 
diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx
index c1d62f0c4f0c..25da9d0b4952 100644
--- a/docs/get-started/frameworks/nextjs.mdx
+++ b/docs/get-started/frameworks/nextjs.mdx
@@ -245,29 +245,7 @@ Additionally, the [`router` object](https://nextjs.org/docs/pages/api-reference/
 
 To override these defaults, you can use [parameters](../../writing-stories/parameters.mdx) and [`beforeEach`](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#setting-up-and-cleaning-up):
 
-```ts title=".storybook/preview.js|ts"
-import type { Preview } from '@storybook/nextjs';
-
-// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { getRouter } from "@storybook/nextjs/router.mock";
-
-const preview: Preview = {
-  parameters: {
-    nextjs: {
-      // 👇 Override the default router properties
-      router: {
-        basePath: '/app/',
-      },
-    },
-  },
-  async beforeEach() {
-    // 👇 Manipulate the default router method mocks
-    getRouter().push.mockImplementation(() => {
-      /* ... */
-    });
-  },
-};
-```
+<CodeSnippets path="nextjs-router-override-in-preview.md" />
 
 ### Next.js navigation
 
@@ -373,29 +351,7 @@ Additionally, the [`router` object](https://nextjs.org/docs/app/api-reference/fu
 
 To override these defaults, you can use [parameters](../../writing-stories/parameters.mdx) and [`beforeEach`](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#setting-up-and-cleaning-up):
 
-```ts title=".storybook/preview.js|ts"
-import type { Preview } from '@storybook/nextjs';
-
-// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { getRouter } from '@storybook/nextjs/navigation.mock';
-
-const preview: Preview = {
-  parameters: {
-    nextjs: {
-      // 👇 Override the default navigation properties
-      navigation: {
-        pathname: '/app/',
-      },
-    },
-  },
-  async beforeEach() {
-    // 👇 Manipulate the default navigation method mocks
-    getRouter().push.mockImplementation(() => {
-      /* ... */
-    });
-  },
-};
-```
+<CodeSnippets path="nextjs-navigation-override-in-preview.md" />
 
 ### Next.js Head
 
@@ -901,22 +857,7 @@ This module exports mocked implementations of the `next/router` module's exports
 
 You can pass an options object for additional configuration if needed:
 
-```js title=".storybook/main.js"
-import * as path from 'path';
-
-export default {
-  // ...
-  framework: {
-    name: '@storybook/nextjs',
-    options: {
-      image: {
-        loading: 'eager',
-      },
-      nextConfigPath: path.resolve(process.cwd(), 'next.config.js'),
-    },
-  },
-};
-```
+<CodeSnippets path="nextjs-framework-options-next-config-path.md" />
 
 The available options are:
 
diff --git a/docs/writing-docs/autodocs.mdx b/docs/writing-docs/autodocs.mdx
index 9e5cdae673a7..b122f2daf3e1 100644
--- a/docs/writing-docs/autodocs.mdx
+++ b/docs/writing-docs/autodocs.mdx
@@ -145,7 +145,7 @@ By default, the table of contents on the documentation page will only show the `
 
 #### Component-level configuration
 
-If you want to customize the table of contents for a specific story, you can include a `toc` property in the story's default export and provide the required [configuration](#configure-the-table-of-contents). For example, if you need to hide the table of contents for a specific story, adjust your story as follows:
+If you want to customize the table of contents for a specific story, you can include a `toc` property in the story's meta (or default export) and provide the required [configuration](#configure-the-table-of-contents). For example, if you need to hide the table of contents for a specific story, adjust your story as follows:
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/writing-docs/mdx.mdx b/docs/writing-docs/mdx.mdx
index ad8f89375ca2..1ca951582f51 100644
--- a/docs/writing-docs/mdx.mdx
+++ b/docs/writing-docs/mdx.mdx
@@ -77,7 +77,7 @@ Imports the components and stories that will be used in the JSX throughout the r
 {/* prettier-ignore-end */}
 
 <Callout variant="info">
-  When providing the `of` prop to the `Meta` block, make sure that you're referencing the [**default export**](../api/csf.mdx#default-export) of the story file and not the component itself to prevent render issues with the generated documentation.
+  When providing the `of` prop to the `Meta` block, make sure that you're referencing the **full set of exports** of the story file and not the component itself to prevent render issues with the generated documentation.
 </Callout>
 
 The `Meta` block defines where the document will be placed in the sidebar. In this case, it is adjacent to the Checkbox’s stories. By default, the docs sidebar node is titled `"Docs"`, but this can be customized by passing a `name` prop (e.g., `<Meta of={CheckboxStories} name="Info" />`). If you want to place a docs node at an arbitrary point in the navigation hierarchy, you can use the `title` prop (e.g., `<Meta title="path/to/node" />`).
diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx
index 5bc33bae0983..0337e06f0ff5 100644
--- a/docs/writing-stories/index.mdx
+++ b/docs/writing-stories/index.mdx
@@ -44,7 +44,7 @@ components/
 
   We define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools.
 
-  The key ingredients are the [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) that describes the component, and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) that describe the stories.
+  The key ingredients are the meta (or [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export)) that describes the component, and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) that describe the stories.
 
 </If>
 
@@ -64,7 +64,7 @@ components/
 
 <If notRenderer="svelte">
 
-  The *default* export metadata controls how Storybook lists your stories and provides information used by addons. For example, here’s the default export for a story file `Button.stories.js|ts`:
+  The *default* export metadata controls how Storybook lists your stories and provides information used by addons. For example, here’s the meta (or default export) for a story file `Button.stories.js|ts`:
 
   {/* prettier-ignore-start */}
 
@@ -175,7 +175,7 @@ Note how the template snippet or `render` function spreads `args` onto the Butto
 
 </Callout>
 
-You can re-use the same render function across stories by applying it at the meta level. For Svelte CSF, this can be done by defining the template snippet outside of the story and assigning it to the `render` property of the `defineMeta` function. For CSF, you can define a `render` function in the default export.
+You can re-use the same render function across stories by applying it at the meta level. For Svelte CSF, this can be done by defining the template snippet outside of the story and assigning it to the `render` property of the `defineMeta` function. For CSF, you can define a `render` function in the meta (or default export).
 
 ```svelte title="Button.stories.svelte"
 <script module>
@@ -208,7 +208,7 @@ Finally, `render` functions and template snippets receive a second `context` arg
 
 <If notRenderer="svelte">
 
-By default, stories will render the component defined in the meta (default export), with the `args` passed to it. If you need to render something else, you can provide a function to the `render` property that returns the desired output.
+By default, stories will render the component defined in the meta (or default export), with the `args` passed to it. If you need to render something else, you can provide a function to the `render` property that returns the desired output.
 
 For example, if you want to render a `Button` inside an `Alert`, you can define a custom render function like this:
 
diff --git a/docs/writing-stories/stories-for-multiple-components.mdx b/docs/writing-stories/stories-for-multiple-components.mdx
index a5acad9a4e6d..42e9d5bc53b6 100644
--- a/docs/writing-stories/stories-for-multiple-components.mdx
+++ b/docs/writing-stories/stories-for-multiple-components.mdx
@@ -19,7 +19,7 @@ Here's an example with `List` and `ListItem` components:
 
 {/* prettier-ignore-end */}
 
-Note that by adding a `subcomponents` property to the default export, we get an extra panel on the [ArgTypes](../writing-docs/doc-blocks.mdx#argtypes) and [Controls](../essentials/controls.mdx#) tables, listing the props of `ListItem`:
+Note that by adding a `subcomponents` property to the meta (or default export), we get an extra panel on the [ArgTypes](../writing-docs/doc-blocks.mdx#argtypes) and [Controls](../essentials/controls.mdx#) tables, listing the props of `ListItem`:
 
 ![Subcomponents in ArgTypes doc block](../_assets/writing-stories/doc-block-arg-types-subcomponents-for-list.png)
 
diff --git a/docs/writing-stories/typescript.mdx b/docs/writing-stories/typescript.mdx
index 7755a982411a..220e985c6b20 100644
--- a/docs/writing-stories/typescript.mdx
+++ b/docs/writing-stories/typescript.mdx
@@ -6,6 +6,16 @@ Writing your stories in [TypeScript](https://www.typescriptlang.org/) makes you
 
 Storybook has built-in TypeScript support, so you can get started with zero configuration required.
 
+<If renderer={['react', 'vue', 'angular', 'web-components']}>
+
+<Callout variant="positive" icon="💡">
+  [CSF Next](../api/csf/csf-next.mdx) (currently in preview) provides significantly improved TypeScript support, which infers component types automatically and requires no explicit typing for most cases. We recommend using CSF Next for all new TypeScript stories. 
+
+  You only need to add types when using [custom args](#typing-custom-args).
+</Callout>
+
+</If>
+
 ## Typing stories with `Meta` and `StoryObj`
 
 When writing stories, there are two aspects that are helpful to type. The first is the [component meta](./index.mdx#default-export), which describes and configures the component and its stories. In a [CSF file](../api/csf.mdx), this is the default export. The second is the [stories themselves](./index.mdx#defining-stories).
@@ -24,7 +34,7 @@ Storybook provides utility types for each of these, named `Meta` and `StoryObj`.
 
 The example above passes a component type. See [**Typing custom args**](#typing-custom-args) for an example of passing a props type.
 
-## Using `satisfies` for better type safety
+### Using `satisfies` for better type safety
 
 <IfRenderer renderer={['angular', 'web-components']}>
   <Callout variant="info">
@@ -59,7 +69,7 @@ Sometimes stories need to define args that aren’t included in the component's
 {/* prettier-ignore-end */}
 
 <IfRenderer renderer="vue">
-  ### Vue specific tips
+  ## Vue specific tips
 
   Vue has excellent support for TypeScript, and we have done our utmost to take advantage of that in the stories files. For example, consider the following strongly typed Vue 3 single file component (SFC):
 
@@ -88,7 +98,7 @@ Sometimes stories need to define args that aren’t included in the component's
 </IfRenderer>
 
 <IfRenderer renderer="svelte">
-  ### Svelte specific tips
+  ## Svelte specific tips
 
   Svelte offers excellent TypeScript support for .svelte files. For example, consider the following component. You can run type checks using svelte-check and add VSCode editor support with the [Svelte for VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
@@ -115,3 +125,65 @@ Sometimes stories need to define args that aren’t included in the component's
 
   The same setup works with Svelte stories files too, providing both type safety and autocompletion.
 </IfRenderer>
+
+<If renderer="angular">
+
+## Angular specific tips
+
+[CSF 3](../api/csf/index.mdx) offers basic TypeScript support for Angular components, but it does not infer component types.
+
+[CSF Next](../api/csf/csf-next.mdx) is able to infer types for Angular components, but the inferred types will be optional (i.e. `Partial<T>`). In other words, required props will not be enforced.
+
+If you wish to have required props enforced, you can explicitly provide the component's props type to `preview.type` as shown in the following example:
+
+```ts
+import preview from '../.storybook/preview';
+
+import { MyComponent } from './my-component.component';
+
+interface MyComponentProps {
+  requiredProp: string;
+  optionalProp?: number;
+}
+
+const meta = preview.type<{ args: MyComponentProps }>().meta({
+  component: 'MyComponent',
+});
+```
+
+</If>
+
+<If renderer="web-components">
+
+## Web Components specific tips
+
+[CSF 3](../api/csf/index.mdx) offers basic TypeScript support for web components, but it does not infer component types and provides no type generics for `Meta` and `StoryObj`.
+
+[CSF Next](../api/csf/csf-next.mdx) is able to infer types for web components, but only if the [custom element is declared in the global `HTMLElementTagNameMap` interface](https://lit.dev/docs/components/defining/#typescript-typings). You can do this by adding a declaration like the following to your project:
+
+```ts
+declare global {
+  interface HTMLElementTagNameMap {
+    "my-element": MyElement;
+  }
+}
+```
+
+Additionally, the inferred types will be optional (i.e. `Partial<T>`). In other words, required props will not be enforced.
+
+If you wish to have required props enforced, you can explicitly provide the component's props type to `preview.type` as shown in the following example:
+
+```ts
+import preview from '../.storybook/preview';
+
+interface MyElementProps {
+  requiredProp: string;
+  optionalProp?: number;
+}
+
+const meta = preview.type<{ args: MyElementProps }>().meta({
+  component: 'my-element',
+});
+```
+
+</If>
\ No newline at end of file
diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx
index 7facc0d422cf..ef02f82b659e 100644
--- a/docs/writing-tests/accessibility-testing.mdx
+++ b/docs/writing-tests/accessibility-testing.mdx
@@ -153,7 +153,7 @@ You can configure accessibility tests with the `parameters.a11y.test` [parameter
 | `'todo'`  | Run accessibility tests; violations return a warning in the Storybook UI                 |
 | `'error'` | Run accessibility tests; violations return a failing test in the Storybook UI and CLI/CI |
 
-Like other parameters, you can define it at the project level in `.storybook/preview.js|ts`, the component level in the default export of the story file, or the individual story level. For example, to fail on accessibility tests for all stories in a file except one:
+Like other parameters, you can define it at the project level in `.storybook/preview.js|ts`, the component level in the meta (or default export) of the story file, or the individual story level. For example, to fail on accessibility tests for all stories in a file except one:
 
 <CodeSnippets path="addon-a11y-parameter-example.md" />
 
@@ -179,13 +179,13 @@ When you disable automated accessibility checks, the addon will not run any test
 
 <If renderer="svelte">
 
-  If you are using Svelte CSF, you can turn off automated accessibility checks for stories or components by adding globals to your story or adjusting the `defineMeta` function with the required configuration. With a regular CSF story, you can add the following to your story's export or component's default export:
+  If you are using Svelte CSF, you can turn off automated accessibility checks for stories or components by adding globals to your story or adjusting the `defineMeta` function with the required configuration. With a regular CSF story, you can add the following to your stories or meta (or default export):
 
 </If>
 
 <If notRenderer={['svelte']}>
 
-  Disable automated accessibility checks for stories or components by adding the following globals to your story's export or component's default export:
+  Disable automated accessibility checks for stories or components by adding the following globals to your stories or meta (or default export):
 
 </If>