diff --git a/docs/_snippets/addon-actions-action-function.md b/docs/_snippets/addon-actions-action-function.md
index 6af337fe1ac9..f3999f326a9e 100644
--- a/docs/_snippets/addon-actions-action-function.md
+++ b/docs/_snippets/addon-actions-action-function.md
@@ -1,5 +1,6 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta } from '@storybook/angular';
+
 import { action } from '@storybook/addon-actions';
 
 import Button from './button.component';
@@ -15,7 +16,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { action } from '@storybook/addon-actions';
 
 import Button from './Button';
@@ -29,9 +30,27 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
+
 import { action } from '@storybook/addon-actions';
 
 import Button from './Button';
@@ -47,9 +66,27 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
+
 import { action } from '@storybook/addon-actions';
 
 import Button from './Button';
@@ -65,6 +102,23 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+});
+```
+
 ```ts filename="Button.stories.js" renderer="web-components" language="js"
 import { action } from '@storybook/addon-actions';
 
@@ -78,7 +132,8 @@ export default {
 ```
 
 ```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta } from '@storybook/angular';
+import type { Meta } from '@storybook/web-components';
+
 import { action } from '@storybook/addon-actions';
 
 const meta: Meta = {
diff --git a/docs/_snippets/addon-backgrounds-define-default.md b/docs/_snippets/addon-backgrounds-define-default.md
index b0b8205499f1..4b1b8e8c2114 100644
--- a/docs/_snippets/addon-backgrounds-define-default.md
+++ b/docs/_snippets/addon-backgrounds-define-default.md
@@ -26,7 +26,7 @@ export const OnDark: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -49,7 +49,33 @@ export const OnDark = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      // 👇 Set default background value for all component stories
+      default: 'Gray',
+    },
+  },
+});
+
+export const OnDark = meta.story({
+  parameters: {
+    backgrounds: {
+      // 👇 Override default background value for this story
+      default: 'Dark',
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -78,7 +104,33 @@ export const OnDark: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      // 👇 Set default background value for all component stories
+      default: 'Gray',
+    },
+  },
+});
+
+export const OnDark = meta.story({
+  parameters: {
+    backgrounds: {
+      // 👇 Override default background value for this story
+      default: 'Dark',
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -107,6 +159,32 @@ export const OnDark: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      // 👇 Set default background value for all component stories
+      default: 'Gray',
+    },
+  },
+});
+
+export const OnDark = meta.story({
+  parameters: {
+    backgrounds: {
+      // 👇 Override default background value for this story
+      default: 'Dark',
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/addon-backgrounds-define-globals.md b/docs/_snippets/addon-backgrounds-define-globals.md
index 5097231a356e..d1931c07bb4d 100644
--- a/docs/_snippets/addon-backgrounds-define-globals.md
+++ b/docs/_snippets/addon-backgrounds-define-globals.md
@@ -22,7 +22,7 @@ export const OnDark: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -41,7 +41,29 @@ export const OnDark = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set background value for all component stories
+    backgrounds: { value: 'gray', grid: false },
+  },
+});
+
+export const OnDark = meta.story({
+  globals: {
+    // 👇 Override background value for this story
+    backgrounds: { value: 'dark' },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -66,7 +88,29 @@ export const OnDark: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set background value for all component stories
+    backgrounds: { value: 'gray', grid: false },
+  },
+});
+
+export const OnDark = meta.story({
+  globals: {
+    // 👇 Override background value for this story
+    backgrounds: { value: 'dark' },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -91,6 +135,28 @@ export const OnDark: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set background value for all component stories
+    backgrounds: { value: 'gray', grid: false },
+  },
+});
+
+export const OnDark = meta.story({
+  globals: {
+    // 👇 Override background value for this story
+    backgrounds: { value: 'dark' },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/addon-backgrounds-disabled.md b/docs/_snippets/addon-backgrounds-disabled.md
index 366edee9c399..d248a5150617 100644
--- a/docs/_snippets/addon-backgrounds-disabled.md
+++ b/docs/_snippets/addon-backgrounds-disabled.md
@@ -1,4 +1,6 @@
-```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="Without globals API"
+<!-- TODO: THis example needs adjustment to avoid rendering issues  and vetted for addons -->
+
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="Without globals API (CSF 3)"
 import { Button } from './Button';
 
 export default {
@@ -12,7 +14,24 @@ export const Large = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="With globals API"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="Without globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disable: true },
+  },
+});
+```
+
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="With globals API (CSF 3)"
 import { Button } from './Button';
 
 export default {
@@ -26,7 +45,24 @@ export const Large = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="Without globals API"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="With globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disabled: true },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="Without globals API (CSF 3)"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Meta, StoryObj } from '@storybook/your-renderer';
 
@@ -46,7 +82,24 @@ export const Large: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="With globals API"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="Without globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disable: true },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="With globals API (CSF 3)"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Meta, StoryObj } from '@storybook/your-renderer';
 
@@ -66,7 +119,24 @@ export const Large: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="Without globals API"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="With globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disabled: true },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="Without globals API (CSF 3)"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Meta, StoryObj } from '@storybook/your-renderer';
 
@@ -86,7 +156,24 @@ export const Large: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="With globals API"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="Without globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disable: true },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="With globals API (CSF 3)"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Meta, StoryObj } from '@storybook/your-renderer';
 
@@ -105,3 +192,20 @@ export const Large: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="With globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Large = meta.story({
+  parameters: {
+    backgrounds: { disabled: true },
+  },
+});
+```
diff --git a/docs/_snippets/addon-backgrounds-grid.md b/docs/_snippets/addon-backgrounds-grid.md
index 266d4e39d520..c0f71b9a77f3 100644
--- a/docs/_snippets/addon-backgrounds-grid.md
+++ b/docs/_snippets/addon-backgrounds-grid.md
@@ -22,7 +22,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 // To apply a grid to all stories of Button:
@@ -42,7 +42,30 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+// To apply a set of backgrounds to all stories of Button:
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      grid: {
+        cellSize: 20,
+        opacity: 0.5,
+        cellAmount: 5,
+        offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -67,7 +90,30 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+// To apply a set of backgrounds to all stories of Button:
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      grid: {
+        cellSize: 20,
+        opacity: 0.5,
+        cellAmount: 5,
+        offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -92,6 +138,29 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+// To apply a set of backgrounds to all stories of Button:
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      grid: {
+        cellSize: 20,
+        opacity: 0.5,
+        cellAmount: 5,
+        offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+      },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 // To apply a set of backgrounds to all stories of Button:
 export default {
diff --git a/docs/_snippets/addon-backgrounds-options-in-meta.md b/docs/_snippets/addon-backgrounds-options-in-meta.md
index 2ebb1a8e6aab..dfd70f3c88f7 100644
--- a/docs/_snippets/addon-backgrounds-options-in-meta.md
+++ b/docs/_snippets/addon-backgrounds-options-in-meta.md
@@ -56,7 +56,7 @@ const meta: Meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -74,7 +74,28 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.tsx" renderer="react" language="ts"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Override the default `dark` option
+        dark: { name: 'Dark', value: '#000' },
+        // 👇 Add a new option
+        gray: { name: 'Gray', value: '#CCC' },
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -96,7 +117,28 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```ts filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Override the default `dark` option
+        dark: { name: 'Dark', value: '#000' },
+        // 👇 Add a new option
+        gray: { name: 'Gray', value: '#CCC' },
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -118,6 +160,27 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Override the default `dark` option
+        dark: { name: 'Dark', value: '#000' },
+        // 👇 Add a new option
+        gray: { name: 'Gray', value: '#CCC' },
+      },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
diff --git a/docs/_snippets/addon-backgrounds-options-in-preview.md b/docs/_snippets/addon-backgrounds-options-in-preview.md
index 0a82d664430d..2a2fc54c9413 100644
--- a/docs/_snippets/addon-backgrounds-options-in-preview.md
+++ b/docs/_snippets/addon-backgrounds-options-in-preview.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     backgrounds: {
@@ -18,7 +20,30 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Default options
+        dark: { name: 'Dark', value: '#333' },
+        light: { name: 'Light', value: '#F7F9F2' },
+        // 👇 Add your own
+        maroon: { name: 'Maroon', value: '#400' },
+      },
+    },
+  },
+  initialGlobals: {
+    // 👇 Set the initial background color
+    backgrounds: { value: 'light' },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Preview } from '@storybook/your-renderer';
 
@@ -42,3 +67,26 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      options: {
+        // 👇 Default options
+        dark: { name: 'Dark', value: '#333' },
+        light: { name: 'Light', value: '#F7F9F2' },
+        // 👇 Add your own
+        maroon: { name: 'Maroon', value: '#400' },
+      },
+    },
+  },
+  initialGlobals: {
+    // 👇 Set the initial background color
+    backgrounds: { value: 'light' },
+  },
+});
+```
diff --git a/docs/_snippets/addon-backgrounds-values-in-meta.md b/docs/_snippets/addon-backgrounds-values-in-meta.md
index aa621c8d0200..3bb273f285e6 100644
--- a/docs/_snippets/addon-backgrounds-values-in-meta.md
+++ b/docs/_snippets/addon-backgrounds-values-in-meta.md
@@ -53,7 +53,7 @@ const meta: Meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -70,7 +70,27 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.tsx" renderer="react" language="ts"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      default: 'Light',
+      values: [
+        // 👇 Add a new value
+        { name: 'Gray', value: '#CCC' },
+      ],
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -91,7 +111,27 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```ts filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      default: 'Light',
+      values: [
+        // 👇 Add a new value
+        { name: 'Gray', value: '#CCC' },
+      ],
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -112,6 +152,26 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    backgrounds: {
+      default: 'Light',
+      values: [
+        // 👇 Add a new value
+        { name: 'Gray', value: '#CCC' },
+      ],
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
diff --git a/docs/_snippets/addon-backgrounds-values-in-preview.md b/docs/_snippets/addon-backgrounds-values-in-preview.md
index 0044b069fec3..974b1a4696b0 100644
--- a/docs/_snippets/addon-backgrounds-values-in-preview.md
+++ b/docs/_snippets/addon-backgrounds-values-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     backgrounds: {
@@ -16,7 +16,28 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        // 👇 Default values
+        { name: 'Dark', value: '#333' },
+        { name: 'Light', value: '#F7F9F2' },
+        // 👇 Add your own
+        { name: 'Maroon', value: '#400' },
+      ],
+      // 👇 Specify which background is shown by default
+      default: 'Light',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Preview } from '@storybook/your-renderer';
 
@@ -38,3 +59,24 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        // 👇 Default values
+        { name: 'Dark', value: '#333' },
+        { name: 'Light', value: '#F7F9F2' },
+        // 👇 Add your own
+        { name: 'Maroon', value: '#400' },
+      ],
+      // 👇 Specify which background is shown by default
+      default: 'Light',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/addon-consume-and-update-globaltype.md b/docs/_snippets/addon-consume-and-update-globaltype.md
index 08eed8c3a8bd..19d1d9a07356 100644
--- a/docs/_snippets/addon-consume-and-update-globaltype.md
+++ b/docs/_snippets/addon-consume-and-update-globaltype.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next -->
+
 ```js filename="your-addon-register-file.js" renderer="common" language="js"
 import React, { useCallback } from 'react';
 
diff --git a/docs/_snippets/addon-consume-globaltype.md b/docs/_snippets/addon-consume-globaltype.md
index 6a53af2bdc55..3f334dcc7dba 100644
--- a/docs/_snippets/addon-consume-globaltype.md
+++ b/docs/_snippets/addon-consume-globaltype.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next -->
+
 ```js filename="your-addon-register-file.js" renderer="common" language="js"
 import React from 'react';
 
diff --git a/docs/_snippets/addon-highlight-reset.md b/docs/_snippets/addon-highlight-reset.md
index 72a5f296a996..fda8d209f2fc 100644
--- a/docs/_snippets/addon-highlight-reset.md
+++ b/docs/_snippets/addon-highlight-reset.md
@@ -1,5 +1,6 @@
 ```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { componentWrapperDecorator } from '@storybook/angular';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
@@ -27,7 +28,7 @@ export const ResetHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -51,8 +52,36 @@ export const ResetHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -79,8 +108,36 @@ export const ResetHighlight: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -107,6 +164,33 @@ export const ResetHighlight: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ResetHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="vue" language="js"
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
@@ -135,6 +219,7 @@ export const ResetHighlight = {
 
 ```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -165,6 +250,7 @@ export const ResetHighlight: Story = {
 
 ```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -217,6 +303,7 @@ export const ResetHighlight = {
 
 ```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
 
diff --git a/docs/_snippets/addon-viewport-add-viewport-in-preview.md b/docs/_snippets/addon-viewport-add-viewport-in-preview.md
index 990f952e2ef2..18715a38f9e3 100644
--- a/docs/_snippets/addon-viewport-add-viewport-in-preview.md
+++ b/docs/_snippets/addon-viewport-add-viewport-in-preview.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="Without globals API"
+<!-- TODO: THis example needs adjustment to avoid rendering issues  and vetted for addons -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="Without globals API (CSF 3)"
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const kindleViewports = {
@@ -30,9 +32,45 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="Without globals API"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="Without globals API (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-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: {
+      viewports: {
+        ...MINIMAL_VIEWPORTS,
+        ...kindleViewports,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="Without globals API (CSF 3)"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Preview } from '@storybook/your-renderer';
+
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const kindleViewports = {
@@ -66,7 +104,42 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="With globals API"
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="Without globals API (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-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: {
+      viewports: {
+        ...MINIMAL_VIEWPORTS,
+        ...kindleViewports,
+      },
+    },
+  },
+});
+```
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="With globals API (CSF 3)"
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const kindleViewports = {
@@ -98,9 +171,45 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="With globals API"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="With globals API (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-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="common" language="ts" tabTitle="With globals API (CSF 3)"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Preview } from '@storybook/your-renderer';
+
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const kindleViewports = {
@@ -133,3 +242,38 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="With globals API (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-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 4eca0f715ef5..483a82a7212f 100644
--- a/docs/_snippets/addon-viewport-configuration-in-meta.md
+++ b/docs/_snippets/addon-viewport-configuration-in-meta.md
@@ -1,5 +1,8 @@
+<!-- TODO: THis example needs adjustment to avoid rendering issues  and vetted for addons -->
+
 ```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="Without globals API"
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent.component';
@@ -17,29 +20,32 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="Without globals API"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="With globals API"
+import type { Meta, StoryObj } from '@storybook/angular';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import { MyComponent } from './MyComponent';
+import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
 };
+
+export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/react';
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="Without globals API (CSF 3)"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent';
 
-const meta = {
+export default {
   component: MyComponent,
   parameters: {
     viewport: {
@@ -47,18 +53,18 @@ const meta = {
       viewports: INITIAL_VIEWPORTS,
     },
   },
-} satisfies Meta<typeof MyComponent>;
-
-export default meta;
+};
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/react';
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="Without globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent';
 
-const meta: Meta<typeof MyComponent> = {
+const meta = preview.meta({
   component: MyComponent,
   parameters: {
     viewport: {
@@ -66,12 +72,10 @@ const meta: Meta<typeof MyComponent> = {
       viewports: INITIAL_VIEWPORTS,
     },
   },
-};
-
-export default meta;
+});
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js" tabTitle="Without globals API"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="With globals API (CSF 3)"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent';
@@ -81,38 +85,39 @@ export default {
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9" tabTitle="Without globals API"
-import type { Meta, StoryObj } from 'storybook-solidjs';
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="With globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent';
 
-const meta = {
+const meta = preview.meta({
   component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
-} satisfies Meta<typeof MyComponent>;
-
-export default meta;
+});
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from 'storybook-solidjs';
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="Without globals API (CSF 3)"
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent';
 
-const meta: Meta<typeof MyComponent> = {
+const meta = {
   component: MyComponent,
   parameters: {
     viewport: {
@@ -120,17 +125,20 @@ const meta: Meta<typeof MyComponent> = {
       viewports: INITIAL_VIEWPORTS,
     },
   },
-};
+} satisfies Meta<typeof MyComponent>;
 
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="Without globals API"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="Without globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import MyComponent from './MyComponent.svelte';
+import { MyComponent } from './MyComponent';
 
-export default {
+const meta = preview.meta({
   component: MyComponent,
   parameters: {
     viewport: {
@@ -138,21 +146,22 @@ export default {
       viewports: INITIAL_VIEWPORTS,
     },
   },
-};
+});
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/svelte';
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="With globals API (CSF 3)"
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import MyComponent from './MyComponent.svelte';
+import { MyComponent } from './MyComponent';
 
 const meta = {
   component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
 } satisfies Meta<typeof MyComponent>;
@@ -160,11 +169,31 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/svelte';
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="With globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import MyComponent from './MyComponent.svelte';
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  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="Without globals API (CSF 3)"
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
@@ -179,12 +208,15 @@ const meta: Meta<typeof MyComponent> = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="Without globals API"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="Without globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import MyComponent from './MyComponent.vue';
+import { MyComponent } from './MyComponent';
 
-export default {
+const meta = preview.meta({
   component: MyComponent,
   parameters: {
     viewport: {
@@ -192,52 +224,55 @@ export default {
       viewports: INITIAL_VIEWPORTS,
     },
   },
-};
+});
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/vue3';
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="With globals API (CSF 3)"
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import MyComponent from './MyComponent.vue';
+import { MyComponent } from './MyComponent';
 
-const meta = {
+const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
-} satisfies Meta<typeof MyComponent>;
+};
 
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/vue3';
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="With globals API (CSF Next 🧪)"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import MyComponent from './MyComponent.vue';
+import { MyComponent } from './MyComponent';
 
-const meta: Meta<typeof MyComponent> = {
+const meta = preview.meta({
   component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
-};
-
-export default meta;
+});
 ```
 
-```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="Without globals API"
+```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js" tabTitle="Without globals API"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
+import { MyComponent } from './MyComponent';
+
 export default {
-  component: 'my-component',
+  component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
@@ -247,35 +282,39 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/web-components';
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9" tabTitle="Without globals API"
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-const meta: Meta = {
-  component: 'my-component',
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
       viewports: INITIAL_VIEWPORTS,
     },
   },
-};
+} satisfies Meta<typeof MyComponent>;
 
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/angular';
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" tabTitle="Without globals API"
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import { MyComponent } from './MyComponent.component';
+import { MyComponent } from './MyComponent';
 
-const meta: Meta<MyComponent> = {
+const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      options: INITIAL_VIEWPORTS,
+      viewports: INITIAL_VIEWPORTS,
     },
   },
 };
@@ -283,29 +322,28 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="With globals API"
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="Without globals API"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import { MyComponent } from './MyComponent';
+import MyComponent from './MyComponent.svelte';
 
 export default {
   component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      options: INITIAL_VIEWPORTS,
+      viewports: INITIAL_VIEWPORTS,
     },
   },
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/react';
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="With globals API"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import { MyComponent } from './MyComponent';
+import MyComponent from './MyComponent.svelte';
 
-const meta = {
+export default {
   component: MyComponent,
   parameters: {
     viewport: {
@@ -313,36 +351,37 @@ const meta = {
       options: INITIAL_VIEWPORTS,
     },
   },
-} satisfies Meta<typeof MyComponent>;
-
-export default meta;
+};
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/react';
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="Without globals API"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import { MyComponent } from './MyComponent';
+import MyComponent from './MyComponent.svelte';
 
-const meta: Meta<typeof MyComponent> = {
+const meta = {
   component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      options: INITIAL_VIEWPORTS,
+      viewports: INITIAL_VIEWPORTS,
     },
   },
-};
+} satisfies Meta<typeof MyComponent>;
 
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="With globals API"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="With globals API"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import MyComponent from './MyComponent.svelte';
 
-export default {
+const meta = {
   component: MyComponent,
   parameters: {
     viewport: {
@@ -350,30 +389,34 @@ export default {
       options: INITIAL_VIEWPORTS,
     },
   },
-};
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="With globals API"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="Without globals API"
 import type { Meta, StoryObj } from '@storybook/svelte';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import MyComponent from './MyComponent.svelte';
 
-const meta = {
+const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
   parameters: {
     viewport: {
       //👇 Set available viewports for every story in the file
-      options: INITIAL_VIEWPORTS,
+      viewports: INITIAL_VIEWPORTS,
     },
   },
-} satisfies Meta<typeof MyComponent>;
+};
 
 export default meta;
 ```
 
 ```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="With globals API"
 import type { Meta, StoryObj } from '@storybook/svelte';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import MyComponent from './MyComponent.svelte';
@@ -391,6 +434,22 @@ const meta: Meta<typeof MyComponent> = {
 export default meta;
 ```
 
+```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="Without globals API"
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+  component: MyComponent,
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="With globals API"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
@@ -407,8 +466,29 @@ export default {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9" tabTitle="Without globals API"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = {
+  component: MyComponent,
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9" tabTitle="With globals API"
 import type { Meta, StoryObj } from '@storybook/vue3';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import MyComponent from './MyComponent.vue';
@@ -426,6 +506,26 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="Without globals API"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import MyComponent from './MyComponent.vue';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="With globals API"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
@@ -446,6 +546,20 @@ const meta: Meta<typeof MyComponent> = {
 export default meta;
 ```
 
+```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="Without globals API"
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export default {
+  component: 'my-component',
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="With globals API"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
@@ -460,8 +574,27 @@ export default {
 };
 ```
 
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="Without globals API"
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+const meta: Meta = {
+  component: 'my-component',
+  parameters: {
+    viewport: {
+      //👇 Set available viewports for every story in the file
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="With globals API"
 import type { Meta, StoryObj } from '@storybook/web-components';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const meta: Meta = {
diff --git a/docs/_snippets/addon-viewport-define-default.md b/docs/_snippets/addon-viewport-define-default.md
index d3de90dd4878..53de30c8c595 100644
--- a/docs/_snippets/addon-viewport-define-default.md
+++ b/docs/_snippets/addon-viewport-define-default.md
@@ -22,7 +22,7 @@ export const OnPhone: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -41,7 +41,29 @@ export const OnPhone = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    // 👇 Set default viewport for all component stories
+    viewport: { defaultViewport: 'tablet' },
+  },
+});
+
+export const OnPhone = meta.story({
+  parameters: {
+    // 👇 Override default viewport for this story
+    viewport: { defaultViewport: 'mobile1' },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -66,7 +88,29 @@ export const OnPhone: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    // 👇 Set default viewport for all component stories
+    viewport: { defaultViewport: 'tablet' },
+  },
+});
+
+export const OnPhone = meta.story({
+  parameters: {
+    // 👇 Override default viewport for this story
+    viewport: { defaultViewport: 'mobile1' },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -91,6 +135,28 @@ export const OnPhone: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    // 👇 Set default viewport for all component stories
+    viewport: { defaultViewport: 'tablet' },
+  },
+});
+
+export const OnPhone = meta.story({
+  parameters: {
+    // 👇 Override default viewport for this story
+    viewport: { defaultViewport: 'mobile1' },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/addon-viewport-define-globals.md b/docs/_snippets/addon-viewport-define-globals.md
index f15c367fb14c..9af8514ace24 100644
--- a/docs/_snippets/addon-viewport-define-globals.md
+++ b/docs/_snippets/addon-viewport-define-globals.md
@@ -22,7 +22,7 @@ export const OnPhone: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -41,7 +41,29 @@ export const OnPhone = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set viewport for all component stories
+    viewport: { value: 'tablet', isRotated: false },
+  },
+});
+
+export const OnPhone = meta.story({
+  globals: {
+    // 👇 Override viewport for this story
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta, StoryObj } from '@storybook/your-renderer';
 
@@ -66,7 +88,29 @@ export const OnPhone: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set viewport for all component stories
+    viewport: { value: 'tablet', isRotated: false },
+  },
+});
+
+export const OnPhone = meta.story({
+  globals: {
+    // 👇 Override viewport for this story
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta, StoryObj } from '@storybook/your-renderer';
 
@@ -91,6 +135,28 @@ export const OnPhone: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  globals: {
+    // 👇 Set viewport for all component stories
+    viewport: { value: 'tablet', isRotated: false },
+  },
+});
+
+export const OnPhone = meta.story({
+  globals: {
+    // 👇 Override viewport for this story
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/addon-viewport-options-in-preview.md b/docs/_snippets/addon-viewport-options-in-preview.md
index c342682af443..8b0aa5896f32 100644
--- a/docs/_snippets/addon-viewport-options-in-preview.md
+++ b/docs/_snippets/addon-viewport-options-in-preview.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 export default {
@@ -13,7 +15,25 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+  initialGlobals: {
+    viewport: { value: 'ipad', isRotated: false },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Preview } from '@storybook/your-renderer';
 
@@ -30,3 +50,21 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      options: INITIAL_VIEWPORTS,
+    },
+  },
+  initialGlobals: {
+    viewport: { value: 'ipad', isRotated: false },
+  },
+});
+```
diff --git a/docs/_snippets/addon-viewport-viewports-in-preview.md b/docs/_snippets/addon-viewport-viewports-in-preview.md
index e4b101cde98c..c6b6db41d05d 100644
--- a/docs/_snippets/addon-viewport-viewports-in-preview.md
+++ b/docs/_snippets/addon-viewport-viewports-in-preview.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 export default {
@@ -11,9 +13,26 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'ipad',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Preview } from '@storybook/your-renderer';
+
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const preview: Preview = {
@@ -27,3 +46,19 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export default definePreview({
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'ipad',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/angular-add-framework.md b/docs/_snippets/angular-add-framework.md
index c95d6d67eb16..7d28c19b57c7 100644
--- a/docs/_snippets/angular-add-framework.md
+++ b/docs/_snippets/angular-add-framework.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next support -->
+
 ```js filename=".storybook/main.js" renderer="angular" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/api-doc-block-argtypes-parameter.md b/docs/_snippets/api-doc-block-argtypes-parameter.md
index abd54038f549..f2c530084dcb 100644
--- a/docs/_snippets/api-doc-block-argtypes-parameter.md
+++ b/docs/_snippets/api-doc-block-argtypes-parameter.md
@@ -1,65 +1,172 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
-import type { Meta } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
+};
+
+export default meta;
+type Story = StoryObj<Button>;
+
+export const Basic: Story = {
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      canvas: { sourceState: 'shown' },
     },
   },
 };
-
-export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
   component: Button,
+};
+
+export const Basic = {
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      canvas: { sourceState: 'shown' },
     },
   },
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
-// Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
 
 import { Button } from './Button';
 
-const meta = {
+const meta = preview.meta({
   component: Button,
+});
+
+export const Basic = meta.story({
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      canvas: { sourceState: 'shown' },
     },
   },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
 } satisfies Meta<typeof Button>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+};
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
   parameters: {
     docs: {
-      controls: { exclude: ['style'] },
+      canvas: { sourceState: 'shown' },
     },
   },
 };
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js"
+export default {
+  title: 'Button',
+  component: 'demo-button',
+};
+
+export const Basic = {
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+};
 
 export default meta;
+type Story = StoryObj;
+
+export const Basic: Story = {
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+};
 ```
diff --git a/docs/_snippets/api-doc-block-canvas-parameter.md b/docs/_snippets/api-doc-block-canvas-parameter.md
index 36814ee5d160..f2c530084dcb 100644
--- a/docs/_snippets/api-doc-block-canvas-parameter.md
+++ b/docs/_snippets/api-doc-block-canvas-parameter.md
@@ -19,7 +19,13 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+};
+
 export const Basic = {
   parameters: {
     docs: {
@@ -29,7 +35,26 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -51,7 +76,26 @@ export const Basic: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -73,6 +117,25 @@ export const Basic: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
diff --git a/docs/_snippets/api-doc-block-controls-parameter.md b/docs/_snippets/api-doc-block-controls-parameter.md
index 03f33b83c7ed..0dab000a86f2 100644
--- a/docs/_snippets/api-doc-block-controls-parameter.md
+++ b/docs/_snippets/api-doc-block-controls-parameter.md
@@ -15,7 +15,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -28,7 +28,23 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -46,7 +62,23 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -64,6 +96,22 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
@@ -73,7 +121,7 @@ export default {
 export const Basic = {
   parameters: {
     docs: {
-      canvas: { sourceState: 'shown' },
+      controls: { exclude: ['style'] },
     },
   },
 };
diff --git a/docs/_snippets/api-doc-block-description-example.md b/docs/_snippets/api-doc-block-description-example.md
index ce565b43f478..c208f804fa9b 100644
--- a/docs/_snippets/api-doc-block-description-example.md
+++ b/docs/_snippets/api-doc-block-description-example.md
@@ -36,7 +36,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 /**
@@ -69,7 +69,44 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+/**
+ * Button stories
+ * These stories showcase the button
+ */
+const meta = preview.meta({
+  component: Button,
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'Another description, overriding the comments',
+      },
+    },
+  },
+});
+
+/**
+ * Primary Button
+ * This is the primary button
+ */
+export const Primary = meta.story({
+  parameters: {
+    docs: {
+      description: {
+        story: 'Another description on the story, overriding the comments',
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -108,7 +145,43 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+/**
+ * Button stories
+ * These stories showcase the button
+ */
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Another description, overriding the comments',
+      },
+    },
+  },
+});
+
+/**
+ * Primary Button
+ * This is the primary button
+ */
+export const Primary = meta.story({
+  parameters: {
+    docs: {
+      description: {
+        story: 'Another description on the story, overriding the comments',
+      },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -147,6 +220,42 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+/**
+ * Button stories
+ * These stories showcase the button
+ */
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Another description, overriding the comments',
+      },
+    },
+  },
+});
+
+/**
+ * Primary Button
+ * This is the primary button
+ */
+export const Primary = meta.story({
+  parameters: {
+    docs: {
+      description: {
+        story: 'Another description on the story, overriding the comments',
+      },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 /**
  * Button stories
diff --git a/docs/_snippets/api-doc-block-source-parameter.md b/docs/_snippets/api-doc-block-source-parameter.md
index fbe842342381..293198c1ba9a 100644
--- a/docs/_snippets/api-doc-block-source-parameter.md
+++ b/docs/_snippets/api-doc-block-source-parameter.md
@@ -19,13 +19,13 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
-const meta = {
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import { Button } from './Button';
+
+export default {
   component: Button,
 };
 
-export default meta;
-
 export const Basic = {
   parameters: {
     docs: {
@@ -35,7 +35,26 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'jsx' },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -57,7 +76,26 @@ export const Basic: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'tsx' },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -79,6 +117,25 @@ export const Basic: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'tsx' },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.ts" renderer="web-components" language="js"
 export default {
   title: 'Button',
diff --git a/docs/_snippets/api-doc-block-story-parameter.md b/docs/_snippets/api-doc-block-story-parameter.md
index 3c3bd4e68278..80912bb4ccf1 100644
--- a/docs/_snippets/api-doc-block-story-parameter.md
+++ b/docs/_snippets/api-doc-block-story-parameter.md
@@ -19,11 +19,12 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
-const meta = {
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import { Button } from './Button';
+
+export default {
   component: Button,
 };
-export default meta;
 
 export const Basic = {
   parameters: {
@@ -34,7 +35,26 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      story: { autoplay: true },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -56,7 +76,26 @@ export const Basic: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      story: { autoplay: true },
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -78,6 +117,25 @@ export const Basic: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      story: { autoplay: true },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
diff --git a/docs/_snippets/arg-types-control.md b/docs/_snippets/arg-types-control.md
index 4cbca48ac3db..c8f098da47d0 100644
--- a/docs/_snippets/arg-types-control.md
+++ b/docs/_snippets/arg-types-control.md
@@ -20,7 +20,7 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -38,7 +38,28 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -61,7 +82,28 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -84,6 +126,27 @@ const meta: Meta<typeof Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+});
+```
+
 ```js filename="Example.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-example',
diff --git a/docs/_snippets/arg-types-default-value.md b/docs/_snippets/arg-types-default-value.md
index bc866a132112..0e872b13eac8 100644
--- a/docs/_snippets/arg-types-default-value.md
+++ b/docs/_snippets/arg-types-default-value.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this deprecation -->
+
 ```ts filename="Example.stories.ts" renderer="angular" language="ts"
 import type { Meta } from '@storybook/angular';
 
@@ -20,7 +22,7 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -38,7 +40,28 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      // ⛔️ Deprecated, do not use
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -61,7 +84,28 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      // ❌ Deprecated
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -84,6 +128,27 @@ const meta: Meta<typeof Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      // ⛔️ Deprecated, do not use
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+});
+```
+
 ```js filename="Example.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-example',
diff --git a/docs/_snippets/arg-types-description.md b/docs/_snippets/arg-types-description.md
index 8ba11bbdc06f..5bb0c01f0c6a 100644
--- a/docs/_snippets/arg-types-description.md
+++ b/docs/_snippets/arg-types-description.md
@@ -15,7 +15,7 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -28,7 +28,23 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -46,7 +62,23 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -64,6 +96,22 @@ const meta: Meta<typeof Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+});
+```
+
 ```js filename="Example.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-example',
diff --git a/docs/_snippets/arg-types-if.md b/docs/_snippets/arg-types-if.md
index 73979e5bc378..2d29f1e38302 100644
--- a/docs/_snippets/arg-types-if.md
+++ b/docs/_snippets/arg-types-if.md
@@ -37,42 +37,64 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
   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 } },
   },
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -82,28 +104,20 @@ const 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 } },
   },
@@ -112,7 +126,37 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -122,28 +166,20 @@ const meta: Meta<typeof Example> = {
   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 } },
   },
@@ -152,33 +188,55 @@ const meta: Meta<typeof Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+});
+```
+
 ```js filename="Example.stories.js" renderer="web-components" language="js"
 export default {
   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 } },
   },
@@ -192,28 +250,20 @@ const meta: 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 } },
   },
diff --git a/docs/_snippets/arg-types-in-meta.md b/docs/_snippets/arg-types-in-meta.md
index fe333056e15a..473204de96f4 100644
--- a/docs/_snippets/arg-types-in-meta.md
+++ b/docs/_snippets/arg-types-in-meta.md
@@ -17,7 +17,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -32,7 +32,25 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -52,7 +70,25 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -72,6 +108,24 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/arg-types-in-preview.md b/docs/_snippets/arg-types-in-preview.md
index 73c7b6bf4c5d..4d5c19ece040 100644
--- a/docs/_snippets/arg-types-in-preview.md
+++ b/docs/_snippets/arg-types-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   argTypes: {
     // 👇 All stories expect a label arg
@@ -10,7 +10,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts-4-9"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Preview } from '@storybook/your-renderer';
 
@@ -27,7 +42,22 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Preview } from '@storybook/your-renderer';
 
@@ -43,3 +73,18 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/arg-types-in-story.md b/docs/_snippets/arg-types-in-story.md
index 43ce951c112c..03c68689f517 100644
--- a/docs/_snippets/arg-types-in-story.md
+++ b/docs/_snippets/arg-types-in-story.md
@@ -22,7 +22,7 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -40,7 +40,28 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -54,7 +75,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Basic = {
+export const Basic: Story = {
   argTypes: {
     // 👇 This story expects a label arg
     label: {
@@ -65,7 +86,28 @@ export const Basic = {
 } satisfies Story;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta, StoryObj } from '@storybook/your-renderer';
 
@@ -90,6 +132,27 @@ export const Basic: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/arg-types-mapping.md b/docs/_snippets/arg-types-mapping.md
index 7993754b63d0..4affe7e2b9bb 100644
--- a/docs/_snippets/arg-types-mapping.md
+++ b/docs/_snippets/arg-types-mapping.md
@@ -1,3 +1,5 @@
+<!-- Vet this example for CSF Next -->
+
 ```ts filename="Example.stories.ts" renderer="angular" language="ts"
 import type { Meta } from '@storybook/angular';
 
@@ -19,7 +21,7 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -36,7 +38,27 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    label: {
+      options: ['Normal', 'Bold', 'Italic'],
+      mapping: {
+        Bold: <b>Bold</b>,
+        Italic: <i>Italic</i>,
+      },
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -58,7 +80,27 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    label: {
+      options: ['Normal', 'Bold', 'Italic'],
+      mapping: {
+        Bold: <b>Bold</b>,
+        Italic: <i>Italic</i>,
+      },
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -80,6 +122,26 @@ const meta: Meta<typeof Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    label: {
+      options: ['Normal', 'Bold', 'Italic'],
+      mapping: {
+        Bold: <b>Bold</b>,
+        Italic: <i>Italic</i>,
+      },
+    },
+  },
+});
+```
+
 ```js filename="Example.stories.js" renderer="web-components" language="js"
 import { html } from 'lit';
 
diff --git a/docs/_snippets/arg-types-name.md b/docs/_snippets/arg-types-name.md
index 8053c80de77c..ede9a025c3d3 100644
--- a/docs/_snippets/arg-types-name.md
+++ b/docs/_snippets/arg-types-name.md
@@ -15,7 +15,7 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -28,7 +28,23 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -46,7 +62,23 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -64,6 +96,22 @@ const meta: Meta<typeof Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+});
+```
+
 ```js filename="Example.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-example',
diff --git a/docs/_snippets/arg-types-options.md b/docs/_snippets/arg-types-options.md
index 730332d7f449..afb809c7424f 100644
--- a/docs/_snippets/arg-types-options.md
+++ b/docs/_snippets/arg-types-options.md
@@ -15,7 +15,7 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -28,7 +28,23 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -46,7 +62,23 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -64,6 +96,22 @@ const meta: Meta<typeof Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+});
+```
+
 ```js filename="Example.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-example',
diff --git a/docs/_snippets/arg-types-table.md b/docs/_snippets/arg-types-table.md
index 231a02b9fc86..b89a96723ed9 100644
--- a/docs/_snippets/arg-types-table.md
+++ b/docs/_snippets/arg-types-table.md
@@ -18,7 +18,7 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -34,7 +34,26 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -55,7 +74,26 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -76,6 +114,25 @@ const meta: Meta<typeof Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+});
+```
+
 ```js filename="Example.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-example',
diff --git a/docs/_snippets/arg-types-type.md b/docs/_snippets/arg-types-type.md
index d1950ece31d4..05eb4d7ced44 100644
--- a/docs/_snippets/arg-types-type.md
+++ b/docs/_snippets/arg-types-type.md
@@ -13,7 +13,7 @@ const meta: Meta<Example> = {
 export default meta;
 ```
 
-```js filename="Example.stories.js|jsx" renderer="common" language="js"
+```js filename="Example.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Example } from './Example';
 
 export default {
@@ -24,7 +24,21 @@ export default {
 };
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -40,7 +54,21 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Example.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+});
+```
+
+```ts filename="Example.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import type { Meta } from '@storybook/your-renderer';
 
@@ -56,6 +84,20 @@ const meta: Meta<typeof Example> = {
 export default meta;
 ```
 
+```ts filename="Example.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Example } from './Example';
+
+const meta = preview.meta({
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+});
+```
+
 ```js filename="Example.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-example',
diff --git a/docs/_snippets/args-in-preview.md b/docs/_snippets/args-in-preview.md
index d0dd6acb435f..2d314ad0f579 100644
--- a/docs/_snippets/args-in-preview.md
+++ b/docs/_snippets/args-in-preview.md
@@ -1,11 +1,21 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // The default value of the theme arg for all stories
   args: { theme: 'light' },
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts-4-9"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Preview } from '@storybook/your-renderer';
 
@@ -17,7 +27,17 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
 import { Preview } from '@storybook/your-renderer';
 
@@ -28,3 +48,13 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+});
+```
diff --git a/docs/_snippets/args-usage-with-addons.md b/docs/_snippets/args-usage-with-addons.md
index 59929a410957..eefade6e39c2 100644
--- a/docs/_snippets/args-usage-with-addons.md
+++ b/docs/_snippets/args-usage-with-addons.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example with CSF Next -->
+
 ```js filename="my-addon/src/manager.js|ts" renderer="common" language="js"
 import { useArgs } from '@storybook/manager-api';
 
diff --git a/docs/_snippets/before-each-in-meta-mock-date.md b/docs/_snippets/before-each-in-meta-mock-date.md
index 4731818ac9cb..bfdbdda4fb31 100644
--- a/docs/_snippets/before-each-in-meta-mock-date.md
+++ b/docs/_snippets/before-each-in-meta-mock-date.md
@@ -1,9 +1,12 @@
+<!-- Vet this example for async pattern and CSF Next compatibility -->
+
 ```ts filename="Page.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
-import MockDate from 'mockdate';
 
+import MockDate from 'mockdate';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 const meta: Meta<Page> = {
@@ -18,21 +21,22 @@ const meta: Meta<Page> = {
     };
   },
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<Page>;
 
 export const Default: Story = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     // ... This will run with the mocked Date
   },
 };
 ```
 
-```js filename="Page.stories.js" renderer="common" language="js"
+```js filename="Page.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import MockDate from 'mockdate';
-
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 export default {
@@ -49,19 +53,50 @@ export default {
 };
 
 export const Default = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     // ... This will run with the mocked Date
   },
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts-4-9"
+```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import MockDate from 'mockdate';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getUserFromSession } from '#api/session.mock';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Set the value of Date for every story in the file
+  async beforeEach() {
+    MockDate.set('2024-02-14');
+
+    // 👇 Reset the Date after each story
+    return () => {
+      MockDate.reset();
+    };
+  },
+});
+
+export const Default = meta.story({
+  play: async ({ canvasElement }) => {
+    // ... This will run with the mocked Date
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the name of your renderer (e.g. react, vue3)
 import type { Meta, StoryObj } from '@storybook/your-renderer';
-import MockDate from 'mockdate';
 
+import MockDate from 'mockdate';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 const meta = {
@@ -76,24 +111,55 @@ const meta = {
     };
   },
 } satisfies Meta<typeof Page>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     // ... This will run with the mocked Date
   },
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts"
+```ts filename="Page.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import MockDate from 'mockdate';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getUserFromSession } from '#api/session.mock';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Set the value of Date for every story in the file
+  async beforeEach() {
+    MockDate.set('2024-02-14');
+
+    // 👇 Reset the Date after each story
+    return () => {
+      MockDate.reset();
+    };
+  },
+});
+
+export const Default = meta.story({
+  play: async ({ canvasElement }) => {
+    // ... This will run with the mocked Date
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the name of your renderer (e.g. react, vue3)
 import type { Meta, StoryObj } from '@storybook/your-renderer';
-import MockDate from 'mockdate';
 
+import MockDate from 'mockdate';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 const meta: Meta<typeof Page> = {
@@ -108,20 +174,50 @@ const meta: Meta<typeof Page> = {
     };
   },
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Page>;
 
 export const Default: Story = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     // ... This will run with the mocked Date
   },
 };
 ```
 
-```js filename="Page.stories.js" renderer="web-components" language="js"
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
 import MockDate from 'mockdate';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getUserFromSession } from '#api/session.mock';
+
+import { Page } from './Page';
 
+const meta = preview.meta({
+  component: Page,
+  // 👇 Set the value of Date for every story in the file
+  async beforeEach() {
+    MockDate.set('2024-02-14');
+
+    // 👇 Reset the Date after each story
+    return () => {
+      MockDate.reset();
+    };
+  },
+});
+
+export const Default = meta.story({
+  play: async ({ canvasElement }) => {
+    // ... This will run with the mocked Date
+  },
+});
+```
+
+```js filename="Page.stories.js" renderer="web-components" language="js"
+import MockDate from 'mockdate';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '../../api/session.mock';
 
 export default {
@@ -138,7 +234,7 @@ export default {
 };
 
 export const Default = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     // ... This will run with the mocked Date
   },
 };
@@ -146,8 +242,8 @@ export const Default = {
 
 ```ts filename="Page.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
-import MockDate from 'mockdate';
 
+import MockDate from 'mockdate';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
 
@@ -163,12 +259,12 @@ const meta: Meta = {
     };
   },
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     // ... This will run with the mocked Date
   },
 };
diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index 9fd1b5efaa1d..33cadba9cc0d 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next composition -->
+
 ```ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -32,7 +34,7 @@ export const Pair: Story = {
 };
 ```
 
-```js filename="ButtonGroup.stories.js|jsx" renderer="react" language="js"
+```js filename="ButtonGroup.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { ButtonGroup } from '../ButtonGroup';
 
 //👇 Imports the Button stories
@@ -50,7 +52,28 @@ export const Pair = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="ButtonGroup.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: ButtonGroup,
+});
+
+export const Pair = meta.story({
+  args: {
+    buttons: [{ ...ButtonStories.Primary.input.args }, { ...ButtonStories.Secondary.input.args }],
+    orientation: 'horizontal',
+  },
+});
+```
+
+```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ButtonGroup } from '../ButtonGroup';
@@ -73,7 +96,28 @@ export const Pair: Story = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: ButtonGroup,
+});
+
+export const Pair = meta.story({
+  args: {
+    buttons: [{ ...ButtonStories.Primary.input.args }, { ...ButtonStories.Secondary.input.args }],
+    orientation: 'horizontal',
+  },
+});
+```
+
+```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ButtonGroup } from '../ButtonGroup';
@@ -96,6 +140,27 @@ export const Pair: Story = {
 };
 ```
 
+```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = preview.meta({
+  component: ButtonGroup,
+});
+
+export const Pair = meta.story({
+  args: {
+    buttons: [{ ...ButtonStories.Primary.input.args }, { ...ButtonStories.Secondary.input.args }],
+    orientation: 'horizontal',
+  },
+});
+```
+
 ```js filename="ButtonGroup.stories.js|jsx" renderer="solid" language="js"
 import { ButtonGroup } from '../ButtonGroup';
 
diff --git a/docs/_snippets/button-story-action-event-handle.md b/docs/_snippets/button-story-action-event-handle.md
index a574de6e82b6..9f1fc9ca6e99 100644
--- a/docs/_snippets/button-story-action-event-handle.md
+++ b/docs/_snippets/button-story-action-event-handle.md
@@ -18,7 +18,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 import { withActions } from '@storybook/addon-actions/decorator';
@@ -34,7 +34,28 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+import { withActions } from '@storybook/addon-actions/decorator';
+
+const meta = preview.meta({
+  component: Button,
+
+  parameters: {
+    actions: {
+      handles: ['mouseover', 'click .btn'],
+    },
+  },
+
+  decorators: [withActions],
+});
+```
+
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -55,7 +76,26 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { withActions } from '@storybook/addon-actions/decorator';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    actions: {
+      handles: ['mouseover', 'click .btn'],
+    },
+  },
+  decorators: [withActions],
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -76,6 +116,25 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { withActions } from '@storybook/addon-actions/decorator';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    actions: {
+      handles: ['mouseover', 'click .btn'],
+    },
+  },
+  decorators: [withActions],
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 import { withActions } from '@storybook/addon-actions/decorator';
 
@@ -92,6 +151,7 @@ export default {
 
 ```ts filename="Button.stories.ts" renderer="web-components" language="ts"
 import type { Meta } from '@storybook/web-components';
+
 import { withActions } from '@storybook/addon-actions/decorator';
 
 const meta: Meta = {
diff --git a/docs/_snippets/button-story-baseline.md b/docs/_snippets/button-story-baseline.md
index e6862198b815..6c155e7a8a3b 100644
--- a/docs/_snippets/button-story-baseline.md
+++ b/docs/_snippets/button-story-baseline.md
@@ -18,7 +18,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -39,6 +39,24 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+//👇 Throws a type error if the args don't match the component props
+export const Primary = meta.story({
+  args: {
+    primary: true,
+  },
+});
+```
+
 ```ts filename="Button.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
 
diff --git a/docs/_snippets/button-story-click-handler-args.md b/docs/_snippets/button-story-click-handler-args.md
index 1feaa43722d1..fb5b948bd2a6 100644
--- a/docs/_snippets/button-story-click-handler-args.md
+++ b/docs/_snippets/button-story-click-handler-args.md
@@ -1,5 +1,6 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { argsToTemplate } from '@storybook/angular';
 
 import { action } from '@storybook/addon-actions';
@@ -31,7 +32,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { action } from '@storybook/addon-actions';
 
 import { Button } from './Button';
@@ -49,7 +50,28 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
@@ -72,7 +94,28 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
@@ -95,6 +138,27 @@ export const Text = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { action } from '@storybook/addon-actions';
 
diff --git a/docs/_snippets/button-story-click-handler-simplificated.md b/docs/_snippets/button-story-click-handler-simplificated.md
index e6f31fd6c063..23b947e51615 100644
--- a/docs/_snippets/button-story-click-handler-simplificated.md
+++ b/docs/_snippets/button-story-click-handler-simplificated.md
@@ -11,11 +11,13 @@ export default meta;
 type Story = StoryObj<Button>;
 
 export const Text: Story = {
-  args: {},
+  args: {
+    /* ... */
+  },
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -23,11 +25,30 @@ export default {
 };
 
 export const Text = {
-  args: {/* ... */},
+  args: {
+    /* ... */
+  },
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {
+    /* ... */
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -40,11 +61,30 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Text: Story = {
-  args: {},
+  args: {
+    /* ... */
+  },
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  args: {
+    /* ... */
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -57,10 +97,29 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Text: Story = {
-  args: {},
+  args: {
+    /* ... */
+  },
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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';
 
@@ -69,7 +128,9 @@ export default {
 };
 
 export const Text = {
-  args: {/* ... */},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -86,7 +147,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Text: Story = {
-  args: {},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -103,7 +166,9 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Text: Story = {
-  args: {},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -115,7 +180,9 @@ export default {
 };
 
 export const Text = {
-  args: {/* ... */},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -132,7 +199,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Text: Story = {
-  args: {/* ... */},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -149,7 +218,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Text: Story = {
-  args: {/* ... */},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -164,7 +235,9 @@ export default {
 };
 
 export const Text = {
-  args: {},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -185,7 +258,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Text: Story = {
-  args: {},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -206,7 +281,9 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Text: Story = {
-  args: {},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -219,7 +296,9 @@ export default {
 };
 
 export const Text = {
-  args: {/* ... */},
+  args: {
+    /* ... */
+  },
 };
 ```
 
@@ -237,6 +316,8 @@ export default meta;
 type Story = StoryObj;
 
 export const Text: Story = {
-  args: {},
+  args: {
+    /* ... */
+  },
 };
 ```
diff --git a/docs/_snippets/button-story-click-handler.md b/docs/_snippets/button-story-click-handler.md
index 72ceb73b21c7..1b9e4d8a0d2d 100644
--- a/docs/_snippets/button-story-click-handler.md
+++ b/docs/_snippets/button-story-click-handler.md
@@ -23,7 +23,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { action } from '@storybook/addon-actions';
 
 import { Button } from './Button';
@@ -37,7 +37,24 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
@@ -51,12 +68,29 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Basic: Story = {
+export const Text: Story = {
   render: () => <Button label="Hello" onClick={action('clicked')} />,
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
@@ -70,11 +104,28 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-export const Basic: Story = {
+export const Text: Story = {
   render: () => <Button label="Hello" onClick={action('clicked')} />,
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Text = meta.story({
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { action } from '@storybook/addon-actions';
 
@@ -103,7 +154,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Basic: Story = {
+export const Text: Story = {
   render: () => <Button label="Hello" onClick={action('clicked')} />,
 };
 ```
@@ -122,7 +173,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-export const Basic: Story = {
+export const Text: Story = {
   render: () => <Button label="Hello" onClick={action('clicked')} />,
 };
 ```
diff --git a/docs/_snippets/button-story-component-args-primary.md b/docs/_snippets/button-story-component-args-primary.md
index 16519e18cd48..1f5504c47330 100644
--- a/docs/_snippets/button-story-component-args-primary.md
+++ b/docs/_snippets/button-story-component-args-primary.md
@@ -18,7 +18,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -34,7 +34,26 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -54,7 +73,26 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -75,6 +113,25 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md
index 85ef46ff097f..8c6dc57d4a6f 100644
--- a/docs/_snippets/button-story-component-decorator.md
+++ b/docs/_snippets/button-story-component-decorator.md
@@ -81,7 +81,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -97,7 +97,26 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -117,7 +136,26 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -137,6 +175,25 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
diff --git a/docs/_snippets/button-story-controls-primary-variant.md b/docs/_snippets/button-story-controls-primary-variant.md
index bec2cf1b1044..df5033fa88c3 100644
--- a/docs/_snippets/button-story-controls-primary-variant.md
+++ b/docs/_snippets/button-story-controls-primary-variant.md
@@ -45,7 +45,7 @@ export const Primary = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -59,6 +59,23 @@ export const Primary = {
 };
 ```
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    variant: 'primary',
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -92,7 +109,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -112,6 +129,23 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    variant: 'primary',
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -145,7 +179,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -165,6 +199,23 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    variant: 'primary',
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/button-story-controls-radio-group.md b/docs/_snippets/button-story-controls-radio-group.md
index 19a3386680f4..436bdfad9f6f 100644
--- a/docs/_snippets/button-story-controls-radio-group.md
+++ b/docs/_snippets/button-story-controls-radio-group.md
@@ -48,7 +48,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -62,6 +62,23 @@ export default {
 };
 ```
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -98,7 +115,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -117,6 +134,23 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -153,7 +187,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -172,6 +206,23 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/button-story-decorator.md b/docs/_snippets/button-story-decorator.md
index e53848edf6fa..6d51a44b42ec 100644
--- a/docs/_snippets/button-story-decorator.md
+++ b/docs/_snippets/button-story-decorator.md
@@ -28,7 +28,7 @@ export const InsideParent: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -47,7 +47,29 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -71,7 +93,29 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -95,6 +139,28 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
diff --git a/docs/_snippets/button-story-default-export-with-component.md b/docs/_snippets/button-story-default-export-with-component.md
index e4e58c13a619..9027d9c9e28f 100644
--- a/docs/_snippets/button-story-default-export-with-component.md
+++ b/docs/_snippets/button-story-default-export-with-component.md
@@ -24,7 +24,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -32,7 +32,18 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -44,7 +55,18 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -56,6 +78,17 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
diff --git a/docs/_snippets/button-story-default-export.md b/docs/_snippets/button-story-default-export.md
index 1cf14b769a66..3d550533b740 100644
--- a/docs/_snippets/button-story-default-export.md
+++ b/docs/_snippets/button-story-default-export.md
@@ -15,7 +15,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -28,7 +28,23 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+});
+```
+
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -46,7 +62,23 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+});
+```
+
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -64,6 +96,22 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+});
+```
+
 ```js filename="Button.stories.js" renderer="html" language="js"
 import { createButton } from './Button';
 
diff --git a/docs/_snippets/button-story-disable-addon.md b/docs/_snippets/button-story-disable-addon.md
index 41ceff477219..1bd40de28f16 100644
--- a/docs/_snippets/button-story-disable-addon.md
+++ b/docs/_snippets/button-story-disable-addon.md
@@ -13,7 +13,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -29,7 +29,7 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -50,7 +50,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -92,3 +92,57 @@ const meta: Meta = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  parameters: {
+    myAddon: { disable: true }, // Disables the addon
+  },
+});
+```
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  parameters: {
+    myAddon: { disable: true }, // Disables the addon
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  parameters: {
+    myAddon: { disable: true }, // Disables the addon
+  },
+});
+```
diff --git a/docs/_snippets/button-story-grouped.md b/docs/_snippets/button-story-grouped.md
index 0ff8b0086931..2653487946ac 100644
--- a/docs/_snippets/button-story-grouped.md
+++ b/docs/_snippets/button-story-grouped.md
@@ -15,7 +15,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -28,7 +28,23 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: Button,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -46,7 +62,23 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: Button,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -64,6 +96,22 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: Button,
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Design System/Atoms/Button',
diff --git a/docs/_snippets/button-story-hoisted.md b/docs/_snippets/button-story-hoisted.md
index 8d61bb1f0990..e54a6add1841 100644
--- a/docs/_snippets/button-story-hoisted.md
+++ b/docs/_snippets/button-story-hoisted.md
@@ -19,7 +19,7 @@ type Story = StoryObj<ButtonComponent>;
 export const Button: Story = {};
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button as ButtonComponent } from './Button';
 
 export default {
@@ -35,7 +35,26 @@ export default {
 export const Button = {};
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button as ButtonComponent } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: ButtonComponent,
+});
+
+// This is the only named export in the file, and it matches the component name
+export const Button = meta.story({});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -57,7 +76,26 @@ type Story = StoryObj<typeof meta>;
 export const Button: Story = {};
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.js|jsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button as ButtonComponent } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: ButtonComponent,
+});
+
+// This is the only named export in the file, and it matches the component name
+export const Button = meta.story({});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -79,6 +117,25 @@ type Story = StoryObj<typeof ButtonComponent>;
 export const Button: Story = {};
 ```
 
+```ts filename="Button.stories.js|jsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button as ButtonComponent } from './Button';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: ButtonComponent,
+});
+
+// This is the only named export in the file, and it matches the component name
+export const Button = meta.story({});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Design System/Atoms/Button',
diff --git a/docs/_snippets/button-story-hypothetical-example.md b/docs/_snippets/button-story-hypothetical-example.md
index ed974f40b2c4..1146fcba3e8c 100644
--- a/docs/_snippets/button-story-hypothetical-example.md
+++ b/docs/_snippets/button-story-hypothetical-example.md
@@ -1,4 +1,4 @@
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -15,7 +15,27 @@ export const Sample = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Sample = meta.story({
+  render: () => ({
+    template: '<button :label=label />',
+    data: {
+      label: 'hello button',
+    },
+  }),
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -38,7 +58,27 @@ export const Sample: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Sample = meta.story({
+  render: () => ({
+    template: '<button :label=label />',
+    data: {
+      label: 'hello button',
+    },
+  }),
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -60,3 +100,23 @@ export const Sample: Story = {
   }),
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Sample = meta.story({
+  render: () => ({
+    template: '<button :label=label />',
+    data: {
+      label: 'hello button',
+    },
+  }),
+});
+```
diff --git a/docs/_snippets/button-story-matching-argtypes.md b/docs/_snippets/button-story-matching-argtypes.md
index 080f78c84e77..18517b139edd 100644
--- a/docs/_snippets/button-story-matching-argtypes.md
+++ b/docs/_snippets/button-story-matching-argtypes.md
@@ -11,7 +11,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -20,7 +20,19 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -34,7 +46,19 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -48,6 +72,18 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/button-story-onclick-action-spy.md b/docs/_snippets/button-story-onclick-action-spy.md
index d868c21456ea..ab084fe4922e 100644
--- a/docs/_snippets/button-story-onclick-action-spy.md
+++ b/docs/_snippets/button-story-onclick-action-spy.md
@@ -13,7 +13,7 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { fn } from '@storybook/test';
 import { Button } from './Button';
 
@@ -24,7 +24,22 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { fn } from '@storybook/test';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 import { fn } from '@storybook/test';
@@ -40,7 +55,22 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { fn } from '@storybook/test';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 import { fn } from '@storybook/test';
@@ -55,3 +85,18 @@ const meta: Meta<typeof Button> = {
 
 export default meta;
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { fn } from '@storybook/test';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+});
+```
diff --git a/docs/_snippets/button-story-primary-composition.md b/docs/_snippets/button-story-primary-composition.md
index f04787b86ae4..46213223fc56 100644
--- a/docs/_snippets/button-story-primary-composition.md
+++ b/docs/_snippets/button-story-primary-composition.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for accuracy on composition  -->
+
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -68,7 +70,7 @@ export const Secondary = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -90,6 +92,31 @@ export const Secondary = {
 };
 ```
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    primary: false,
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -138,7 +165,7 @@ export const Secondary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -166,6 +193,31 @@ export const Secondary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    primary: false,
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -214,7 +266,7 @@ export const Secondary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -242,6 +294,31 @@ export const Secondary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    primary: false,
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/button-story-primary-long-name.md b/docs/_snippets/button-story-primary-long-name.md
index ae477a342a28..23b4ec3ac069 100644
--- a/docs/_snippets/button-story-primary-long-name.md
+++ b/docs/_snippets/button-story-primary-long-name.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next support (specifically the args composition) -->
+
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -72,7 +74,7 @@ export const PrimaryLongName = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -94,6 +96,31 @@ export const PrimaryLongName = {
 };
 ```
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const PrimaryLongName = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: 'Primary with a really long name',
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -146,7 +173,7 @@ export const PrimaryLongName: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -174,6 +201,31 @@ export const PrimaryLongName: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const PrimaryLongName = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: 'Primary with a really long name',
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -226,7 +278,7 @@ export const PrimaryLongName: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -254,6 +306,31 @@ export const PrimaryLongName: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+
+export const PrimaryLongName = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: 'Primary with a really long name',
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/button-story-pseudo-states-addon.md b/docs/_snippets/button-story-pseudo-states-addon.md
new file mode 100644
index 000000000000..28f9e7d26f4b
--- /dev/null
+++ b/docs/_snippets/button-story-pseudo-states-addon.md
@@ -0,0 +1,302 @@
+<!-- Vet this example for CSF Next support (pseudo states addon) -->
+
+```ts filename="Button.stories.ts" renderer="angular" language="ts"
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<Button>;
+
+export const Hover: Story = {
+  parameters: { pseudo: { hover: true } },
+  render: () => ({
+    template: `<app-button>Label</<app-button>`,
+  }),
+};
+```
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+};
+
+export const Hover = {
+  parameters: { pseudo: { hover: true } },
+  render: () => <Button>Label</Button>,
+};
+```
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Hover = meta.story({
+  parameters: { pseudo: { hover: true } },
+  render: () => <Button>Label</Button>,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Hover: Story = {
+  parameters: { pseudo: { hover: true } },
+  render: () => <Button>Label</Button>,
+};
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Hover = meta.story({
+  parameters: { pseudo: { hover: true } },
+  render: () => <Button>Label</Button>,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Hover: Story = {
+  parameters: { pseudo: { hover: true } },
+  render: () => <Button>Label</Button>,
+};
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Hover = meta.story({
+  parameters: { pseudo: { hover: true } },
+  render: () => <Button>Label</Button>,
+});
+```
+
+```js filename="Button.stories.js|jsx" renderer="solid" language="js"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+};
+
+export const Hover = {
+  parameters: { pseudo: { hover: true } },
+  render: () => <Button>Label</Button>,
+};
+```
+
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Hover: Story = {
+  parameters: { pseudo: { hover: true } },
+  render: () => <Button>Label</Button>,
+};
+```
+
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Hover: Story = {
+  parameters: { pseudo: { hover: true } },
+  render: () => <Button>Label</Button>,
+};
+```
+
+```js filename="Button.stories.js" renderer="vue" language="js"
+import Button from './Button.vue';
+
+export default {
+  component: Button,
+};
+
+export const Hover = {
+  parameters: { pseudo: { hover: true } },
+  render: () => ({
+    components: { Button },
+    template: '<Button label="Label" />',
+  }),
+};
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Hover: Story = {
+  parameters: { pseudo: { hover: true } },
+  render: () => ({
+    components: { Button },
+    template: '<Button label="Label" />',
+  }),
+};
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Hover: Story = {
+  parameters: { pseudo: { hover: true } },
+  render: () => ({
+    components: { Button },
+    template: '<Button label="Label" />',
+  }),
+};
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js"
+import { html } from 'lit';
+
+export default {
+  component: 'custom-button',
+};
+
+export const Hover = {
+  parameters: { pseudo: { hover: true } },
+  render: () => html`<custom-button label="Label"></custom-button>`,
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import { html } from 'lit';
+
+const meta: Meta = {
+  component: 'custom-button',
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Hover: Story = {
+  parameters: { pseudo: { hover: true } },
+  render: () => html`<custom-button label="Label"></custom-button>`,
+};
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const Basic = {
+  parameters: { pseudo: { hover: true } },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  parameters: { pseudo: { hover: true } },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  parameters: { pseudo: { hover: true } },
+};
+```
diff --git a/docs/_snippets/button-story-rename-story.md b/docs/_snippets/button-story-rename-story.md
index e1c114962351..caa399175202 100644
--- a/docs/_snippets/button-story-rename-story.md
+++ b/docs/_snippets/button-story-rename-story.md
@@ -59,7 +59,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -76,7 +76,27 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  // 👇 Rename this story
+  name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -98,7 +118,27 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  // 👇 Rename this story
+  name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -120,6 +160,26 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  // 👇 Rename this story
+  name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index 848448d8a6cd..55aaef51eb98 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next args composition (since this is using input for composing story args)-->
+
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -118,7 +120,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -147,7 +149,39 @@ export const Tertiary = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '😄👍😍💯',
+  },
+});
+
+export const Tertiary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '📚📕📈🤓',
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -181,7 +215,39 @@ export const Tertiary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '😄👍😍💯',
+  },
+});
+
+export const Tertiary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '📚📕📈🤓',
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -215,6 +281,38 @@ export const Tertiary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+});
+
+export const Secondary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '😄👍😍💯',
+  },
+});
+
+export const Tertiary = meta.story({
+  args: {
+    ...Primary.input.args,
+    label: '📚📕📈🤓',
+  },
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
diff --git a/docs/_snippets/button-story-with-addon-example.md b/docs/_snippets/button-story-with-addon-example.md
index 352ed0817f75..3d86f801df18 100644
--- a/docs/_snippets/button-story-with-addon-example.md
+++ b/docs/_snippets/button-story-with-addon-example.md
@@ -4,11 +4,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 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: {
@@ -21,11 +16,6 @@ const meta: Meta<Button> = {
 export default meta;
 type Story = StoryObj<Button>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Basic: Story = {
   render: () => ({
     template: `<app-button>hello</<app-button>`,
@@ -33,17 +23,10 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
-import React from 'react';
-
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -58,17 +41,33 @@ export const Basic = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'This data is passed to the addon',
+    },
+  },
+});
+
+export const Basic = meta.story({
+  render: () => <Button>Hello</Button>,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -81,27 +80,38 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Basic: Story = {
   render: () => <Button>Hello</Button>,
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'This data is passed to the addon',
+    },
+  },
+});
+
+export const Basic = meta.story({
+  render: () => <Button>Hello</Button>,
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
-  /* 👇 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: {
@@ -114,25 +124,36 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof 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 Basic: Story = {
   render: () => <Button>Hello</Button>,
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'This data is passed to the addon',
+    },
+  },
+});
+
+export const Basic = meta.story({
+  render: () => <Button>Hello</Button>,
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -153,11 +174,6 @@ import type { Meta, StoryObj } from 'storybook-solidjs';
 import { Button } from './Button';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -170,11 +186,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Basic: Story = {
   render: () => <Button>Hello</Button>,
 };
@@ -186,11 +197,6 @@ import type { Meta, StoryObj } from 'storybook-solidjs';
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
-  /* 👇 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: {
@@ -203,11 +209,6 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof 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 Basic: Story = {
   render: () => <Button>Hello</Button>,
 };
@@ -220,11 +221,6 @@ export const Basic: Story = {
   import Button from './Button.svelte';
 
   const { Story } = defineMeta({
-    /* 👇 The title prop is optional.
-     * See https://storybook.js.org/docs/configure/#configure-story-loading
-     * to learn how to generate automatic titles
-    */
-    title: 'Button',
     component: Button,
     parameters: {
       myAddon: {
@@ -241,11 +237,6 @@ export const Basic: Story = {
 import Button from './Button.svelte';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -265,11 +256,6 @@ export const Basic = {};
   import Button from './Button.svelte';
 
   const { Story } = defineMeta({
-    /* 👇 The title prop is optional.
-     * See https://storybook.js.org/docs/configure/#configure-story-loading
-     * to learn how to generate automatic titles
-    */
-    title: 'Button',
     component: Button,
     parameters: {
       myAddon: {
@@ -288,11 +274,6 @@ import type { Meta, StoryObj } from '@storybook/svelte';
 import Button from './Button.svelte';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -315,11 +296,6 @@ export const Basic: Story = {};
   import Button from './Button.svelte';
 
   const { Story } = defineMeta({
-    /* 👇 The title prop is optional.
-     * See https://storybook.js.org/docs/configure/#configure-story-loading
-     * to learn how to generate automatic titles
-    */
-    title: 'Button',
     component: Button,
     parameters: {
       myAddon: {
@@ -338,11 +314,6 @@ import type { Meta, StoryObj } from '@storybook/svelte';
 import Button from './Button.svelte';
 
 const meta: Meta<typeof Button> = {
-  /* 👇 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: {
@@ -362,11 +333,6 @@ export const Basic: Story = {};
 import Button from './Button.vue';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -390,11 +356,6 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 import Button from './Button.vue';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -407,11 +368,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Basic: Story = {
   render: () => ({
     components: { Button },
@@ -426,11 +382,6 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 import Button from './Button.vue';
 
 const meta: Meta<typeof Button> = {
-  /* 👇 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: {
@@ -443,11 +394,6 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof 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 Basic: Story = {
   render: () => ({
     components: { Button },
@@ -460,7 +406,6 @@ export const Basic: Story = {
 import { html } from 'lit';
 
 export default {
-  title: 'Button',
   component: 'custom-button',
   //👇 Creates specific parameters for the story
   parameters: {
@@ -470,11 +415,6 @@ 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 Basic = {
   render: () => html`<custom-button label="Hello"></custom-button>`,
 };
@@ -486,7 +426,6 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 const meta: Meta = {
-  title: 'Button',
   component: 'custom-button',
   //👇 Creates specific parameters for the story
   parameters: {
@@ -499,11 +438,6 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-/*
- *👇 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: Story = {
   render: () => html`<custom-button label="Hello"></custom-button>`,
 };
diff --git a/docs/_snippets/button-story-with-args.md b/docs/_snippets/button-story-with-args.md
index 3ff2014ecd91..c5021fc7a93f 100644
--- a/docs/_snippets/button-story-with-args.md
+++ b/docs/_snippets/button-story-with-args.md
@@ -114,7 +114,7 @@ export const Primary = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -123,13 +123,31 @@ export default {
 
 export const Primary = {
   args: {
-    label: 'Button',
     primary: true,
+    label: 'Button',
   },
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -149,7 +167,25 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -169,6 +205,24 @@ export const Primary: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Primary = meta.story({
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+});
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
@@ -178,8 +232,8 @@ export default {
 
 export const Primary = {
   args: {
-    label: 'Button',
     primary: true,
+    label: 'Button',
   },
 };
 ```
diff --git a/docs/_snippets/button-story-with-sample.md b/docs/_snippets/button-story-with-sample.md
index 92480d5059a9..29ff95f521da 100644
--- a/docs/_snippets/button-story-with-sample.md
+++ b/docs/_snippets/button-story-with-sample.md
@@ -1,4 +1,4 @@
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -10,6 +10,70 @@ export const Sample = {
 };
 ```
 
+```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Sample = meta.story({
+  render: () => <Button label="hello button" />,
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Sample: Story = {
+  render: () => <Button label="hello button" />,
+};
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Sample = meta.story({
+  render: () => <Button label="hello button" />,
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Sample: Story = {
+  render: () => <Button label="hello button" />,
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
@@ -21,3 +85,18 @@ export const Sample = {
   render: () => <Button label="hello button" />,
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Sample = meta.story({
+  render: () => <Button label="hello button" />,
+});
+```
diff --git a/docs/_snippets/button-story.md b/docs/_snippets/button-story.md
index fef764603915..6a8a3e75e0ad 100644
--- a/docs/_snippets/button-story.md
+++ b/docs/_snippets/button-story.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next -->
+
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -109,7 +111,9 @@ export const Primary = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
+import React, { useState } from 'react';
+
 import { Button } from './Button';
 
 export default {
@@ -117,67 +121,114 @@ 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.
+ * Example Button story with React Hooks.
+ * See note below related to this example.
  */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
+};
+
 export const Primary = {
-  render: () => <Button primary label="Button" />,
+  render: () => <ButtonWithHooks />,
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
-import type { Meta, StoryObj } from '@storybook/react';
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React, { useState } from 'react';
+
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
 
 import { Button } from './Button';
 
-const meta = {
+const meta = preview.meta({
   component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
 /*
- *👇 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.
+ * Example Button story with React Hooks.
+ * See note below related to this example.
  */
-export const Primary: Story = {
-  render: () => <Button primary label="Button" />,
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
 };
+
+export const Primary = meta.story({
+  render: () => <ButtonWithHooks />,
+});
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
-import type { Meta, StoryObj } from '@storybook/react';
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
+import React, { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-const meta: Meta<typeof Button> = {
+const meta = {
   component: Button,
-};
+} satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj<typeof meta>;
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
+ * Example Button story with React Hooks.
+ * See note below related to this example.
  */
-export const Primary: Story = {
-  render: () => <Button primary label="Button" />,
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
 };
+
+export const Primary = {
+  render: () => <ButtonWithHooks />,
+} satisfies Story;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="with-hooks"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
 import React, { useState } from 'react';
 
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
 import { Button } from './Button';
 
-export default {
+const meta = preview.meta({
   component: Button,
-};
+});
 
 /*
  * Example Button story with React Hooks.
@@ -198,24 +249,24 @@ const ButtonWithHooks = () => {
   return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
 };
 
-export const Primary = {
+export const Primary = meta.story({
   render: () => <ButtonWithHooks />,
-};
+});
 ```
 
-```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="with-hooks"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React, { useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-const meta = {
+const meta: Meta<typeof Button> = {
   component: Button,
-} satisfies Meta<typeof Button>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Button>;
 
 /*
  * Example Button story with React Hooks.
@@ -236,24 +287,22 @@ const ButtonWithHooks = () => {
   return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
 };
 
-export const Primary = {
+export const Primary: Story = {
   render: () => <ButtonWithHooks />,
-} satisfies Story;
+};
 ```
 
-```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="with-hooks"
+```tsx filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import React, { useState } from 'react';
 
-import { Meta, StoryObj } from '@storybook/react';
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
 
 import { Button } from './Button';
 
-const meta: Meta<typeof Button> = {
+const meta = preview.meta({
   component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
+});
 
 /*
  * Example Button story with React Hooks.
@@ -274,9 +323,9 @@ const ButtonWithHooks = () => {
   return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
 };
 
-export const Primary: Story = {
+export const Primary = meta.story({
   render: () => <ButtonWithHooks />,
-};
+});
 ```
 
 ```js filename="Button.stories.js|jsx" renderer="solid" language="js"
@@ -340,7 +389,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="solid" language="js" tabTitle="with-hooks"
+```js filename="Button.stories.js|jsx" renderer="solid" language="js" tabTitle="With Hooks"
 import { createSignal } from 'solid-js';
 
 import { Button } from './Button';
@@ -373,7 +422,7 @@ export const Primary = {
 };
 ```
 
-```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9" tabTitle="with-hooks"
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9" tabTitle="With Hooks"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { createSignal } from 'solid-js';
@@ -411,7 +460,7 @@ export const Primary = {
 } satisfies Story;
 ```
 
-```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" tabTitle="with-hooks"
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" tabTitle="With Hooks"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { createSignal } from 'solid-js';
diff --git a/docs/_snippets/checkbox-story-csf.md b/docs/_snippets/checkbox-story-csf.md
index b277479d0b13..52b8b4af5333 100644
--- a/docs/_snippets/checkbox-story-csf.md
+++ b/docs/_snippets/checkbox-story-csf.md
@@ -50,7 +50,7 @@ export const Unchecked = {
 };
 ```
 
-```js filename="Checkbox.stories.js|jsx" renderer="common" language="js"
+```js filename="Checkbox.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Checkbox } from './Checkbox';
 
 export default {
@@ -64,6 +64,23 @@ export const Unchecked = {
 };
 ```
 
+```js filename="Checkbox.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Checkbox } from './Checkbox';
+
+const meta = preview.meta({
+  component: Checkbox,
+});
+
+export const Unchecked = meta.story({
+  args: {
+    label: 'Unchecked',
+  },
+});
+```
+
 ```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -102,7 +119,7 @@ export const Unchecked: Story = {
 };
 ```
 
-```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -122,6 +139,23 @@ export const Unchecked: Story = {
 };
 ```
 
+```ts filename="Checkbox.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Checkbox } from './Checkbox';
+
+const meta = preview.meta({
+  component: Checkbox,
+});
+
+export const Unchecked = meta.story({
+  args: {
+    label: 'Unchecked',
+  },
+});
+```
+
 ```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -160,7 +194,7 @@ export const Unchecked: Story = {
 };
 ```
 
-```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -180,6 +214,23 @@ export const Unchecked: Story = {
 };
 ```
 
+```ts filename="Checkbox.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Checkbox } from './Checkbox';
+
+const meta = preview.meta({
+  component: Checkbox,
+});
+
+export const Unchecked = meta.story({
+  args: {
+    label: 'Unchecked',
+  },
+});
+```
+
 ```js filename="Checkbox.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Checkbox',
diff --git a/docs/_snippets/checkbox-story-grouped.md b/docs/_snippets/checkbox-story-grouped.md
index 209d25373a76..8a851da02a77 100644
--- a/docs/_snippets/checkbox-story-grouped.md
+++ b/docs/_snippets/checkbox-story-grouped.md
@@ -15,7 +15,7 @@ const meta: Meta<Checkbox> = {
 export default meta;
 ```
 
-```js filename="Checkbox.stories.js|jsx" renderer="common" language="js"
+```js filename="Checkbox.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { CheckBox } from './Checkbox';
 
 export default {
@@ -28,7 +28,23 @@ export default {
 };
 ```
 
-```ts filename="CheckBox.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Checkbox.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { CheckBox } from './Checkbox';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Checkbox',
+  component: CheckBox,
+});
+```
+
+```ts filename="CheckBox.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -46,7 +62,23 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="CheckBox.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="CheckBox.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { CheckBox } from './Checkbox';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Checkbox',
+  component: CheckBox,
+});
+```
+
+```ts filename="CheckBox.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -64,6 +96,22 @@ const meta: Meta<typeof CheckBox> = {
 export default meta;
 ```
 
+```ts filename="CheckBox.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { CheckBox } from './Checkbox';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Checkbox',
+  component: CheckBox,
+});
+```
+
 ```js filename="Checkbox.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Design System/Atoms/Checkbox',
diff --git a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
index cf09815088d7..9aeb68c62d44 100644
--- a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
+++ b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
@@ -63,7 +63,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -82,6 +82,28 @@ export default {
 };
 ```
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -128,7 +150,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -152,6 +174,28 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -198,7 +242,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -222,6 +266,28 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/component-story-conditional-controls-toggle.md b/docs/_snippets/component-story-conditional-controls-toggle.md
index 5a5f0ededa8f..9520ed045cab 100644
--- a/docs/_snippets/component-story-conditional-controls-toggle.md
+++ b/docs/_snippets/component-story-conditional-controls-toggle.md
@@ -54,7 +54,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -70,6 +70,25 @@ export default {
 };
 ```
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -110,7 +129,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -131,6 +150,25 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -171,7 +209,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -192,6 +230,25 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/component-story-custom-args-complex.md b/docs/_snippets/component-story-custom-args-complex.md
index de88849bca7e..a8264fd780f8 100644
--- a/docs/_snippets/component-story-custom-args-complex.md
+++ b/docs/_snippets/component-story-custom-args-complex.md
@@ -1,771 +1,462 @@
-```ts filename="YourComponent.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
+```ts filename="Button.stories.ts" renderer="angular" language="ts"
+import type { Meta } from '@storybook/angular';
 
-import { YourComponent } from './your-component.component';
+import { Button } from './button.component';
 
-const meta: Meta<YourComponent> = {
-  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 default meta;
-type Story = StoryObj<YourComponent>;
-
-const someFunction = (valuePropertyA: String, valuePropertyB: String) => {
-  // Do some logic here
-};
-
-export const ExampleStory: 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' },
-};
-```
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-```js filename="YourComponent.stories.js|jsx" renderer="react" language="js"
-import { YourComponent } from './your-component';
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
-export default {
-  component: YourComponent,
-  //👇 Creates specific argTypes with options
+const meta: Meta<Button> = {
+  component: Button,
   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'],
+    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',
+        },
+      },
     },
   },
 };
 
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
-
-export const ExampleStory = {
-  render: (args) => {
-    const { propertyA, propertyB } = args;
-    //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
-
-    return <YourComponent {...args} someProperty={someFunctionResult} />;
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  },
-};
-```
-
-```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { YourComponent } from './your-component';
-
-const 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'],
-    },
-  },
-} satisfies Meta<typeof YourComponent>;
-
 export default meta;
-type Story = StoryObj<typeof meta>;
-
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
-
-export const ExampleStory: Story = {
-  render: (args) => {
-    const { propertyA, propertyB } = args;
-    //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
-
-    return <YourComponent {...args} someProperty={someFunctionResult} />;
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  },
-};
 ```
 
-```tsx filename="YourComponent.stories.ts|tsx" renderer="react" language="ts"
-import type { Meta, StoryObj } from '@storybook/react';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-import { YourComponent } from './your-component';
+  import Button from './Button.svelte';
 
-const meta: Meta<typeof YourComponent> = {
-  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'],
-    },
-  },
-};
+  import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-export default meta;
-type Story = StoryObj<typeof YourComponent>;
+  const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
+  const { Story } = defineMeta({
+    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',
+          },
+        },
+      },
+    },
+  });
+</script>
+```
 
-export const ExampleStory: Story = {
-  render: (args) => {
-    const { propertyA, propertyB } = args;
-    //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
 
-    return <YourComponent {...args} someProperty={someFunctionResult} />;
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  },
-};
-```
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-```js filename="YourComponent.stories.js|jsx" renderer="solid" language="js"
-import { createSignal, createEffect } from 'solid-js';
-import { YourComponent } from './your-component';
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
 export default {
-  component: YourComponent,
-  //👇 Creates specific argTypes with options
+  component: Button,
   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'],
+    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',
+        },
+      },
     },
   },
 };
-
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
-
-export const ExampleStory = {
-  render: (args) => {
-    const [someFunctionResult, setSomeFunctionResult] = createSignal();
-
-    //👇 Assigns the function result to a signal
-    createEffect(() => {
-      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB));
-    });
-
-    return <YourComponent {...args} someProperty={someFunctionResult()} />;
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  },
-};
 ```
 
-```tsx filename="YourComponent.stories.ts|tsx" renderer="solid" language="ts-4-9"
-import { createSignal, createEffect } from 'solid-js';
-import type { Meta, StoryObj } from 'storybook-solidjs';
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import { Button } from './Button';
 
-import { YourComponent } from './your-component';
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-const meta = {
-  component: YourComponent,
-  //👇 Creates specific argTypes with options
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+export default {
+  component: Button,
   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'],
+    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',
+        },
+      },
     },
   },
-} satisfies Meta<typeof YourComponent>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
 };
+```
 
-export const ExampleStory: Story = {
-  render: (args) => {
-    const [someFunctionResult, setSomeFunctionResult] = createSignal();
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
 
-    //👇 Assigns the function result to a signal
-    createEffect(() => {
-      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB));
-    });
+import { Button } from './Button';
 
-    return <YourComponent {...args} someProperty={someFunctionResult()} />;
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  },
-};
-```
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-```tsx filename="YourComponent.stories.ts|tsx" renderer="solid" language="ts"
-import { createSignal, createEffect } from 'solid-js';
-import type { Meta, StoryObj } from 'storybook-solidjs';
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
-import { YourComponent } from './your-component';
-
-const meta: Meta<typeof YourComponent> = {
-  component: YourComponent,
-  //👇 Creates specific argTypes with options
+const meta = preview.meta({
+  component: Button,
   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'],
+    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',
+        },
+      },
     },
   },
-};
-
-export default meta;
-type Story = StoryObj<typeof YourComponent>;
-
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
-
-export const ExampleStory: Story = {
-  render: (args) => {
-    const [someFunctionResult, setSomeFunctionResult] = createSignal();
-
-    //👇 Assigns the function result to a signal
-    createEffect(() => {
-      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB));
-    });
-
-    return <YourComponent {...args} someProperty={someFunctionResult()} />;
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  },
-};
+});
 ```
 
-```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
+  import Button from './Button.svelte';
+
+  import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+  const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
   const { Story } = defineMeta({
-      component: YourComponent,
-      //👇 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'],
+    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',
+          },
         },
       },
+    },
   });
-
-  const someFunction = (valuePropertyA, valuePropertyB) => {
-    // Do some logic here
-  };
 </script>
-
-<Story
-  name="ExampleStory"
-  args={{
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  }}
->
-  {#snippet children(args)}
-    <YourComponent
-      {...args}
-      someProperty={someFunction(args.propertyA, args.propertyB)}
-    />
-  {/snippet}
-</Story>
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
-import YourComponent from './YourComponent.svelte';
-
-export default {
-  component: YourComponent,
-  //👇 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'],
-    },
-  },
-};
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
 
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
+import Button from './Button.svelte';
 
-export const ExampleStory = {
-  render: (args) => {
-    //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(args.propertyA, args.propertyB);
-    return {
-      Component: YourComponent,
-      props: {
-        ...args,
-        someProperty: someFunctionResult,
-      },
-    };
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  },
-};
-```
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
-  const { Story } = defineMeta({
-      component: YourComponent,
-      //👇 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 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',
         },
       },
-  });
-
-  const someFunction = (valuePropertyA, valuePropertyB) => {
-    // Do some logic here
-  };
-</script>
+    },
+  },
+} satisfies Meta<typeof Button>;
 
-<Story
-  name="ExampleStory"
-  args={{
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  }}
->
-  {#snippet children(args)}
-    <YourComponent
-      {...args}
-      someProperty={someFunction(args.propertyA, args.propertyB)}
-    />
-  {/snippet}
-</Story>
+export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
-import type { Meta, StoryObj } from '@storybook/svelte';
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
 
-import YourComponent from './YourComponent.svelte';
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
 const meta = {
-  component: YourComponent,
-  //👇 Creates specific argTypes
+  component: Button,
   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'],
+    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',
+        },
+      },
     },
   },
-} satisfies Meta<typeof YourComponent>;
+} satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+```
 
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
-export const ExampleStory: Story = {
-  render: (args) => {
-    //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(args.propertyA, args.propertyB);
-    return {
-      Component: YourComponent,
-      props: {
-        ...args,
-        someProperty: someFunctionResult,
+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',
+        },
       },
-    };
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
+    },
   },
-};
+});
 ```
 
-```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
+  import Button from './Button.svelte';
+
+  import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+  const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
   const { Story } = defineMeta({
-      component: YourComponent,
-      //👇 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'],
+    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',
+          },
         },
       },
+    },
   });
-
-  const someFunction = (valuePropertyA, valuePropertyB) => {
-    // Do some logic here
-  };
 </script>
-
-<Story
-  name="ExampleStory"
-  args={{
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  }}
->
-  {#snippet children(args)}
-    <YourComponent
-      {...args}
-      someProperty={someFunction(args.propertyA, args.propertyB)}
-    />
-  {/snippet}
-</Story>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
-import type { Meta, StoryObj } from '@storybook/svelte';
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-import YourComponent from './YourComponent.svelte';
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
-const meta: Meta<typeof YourComponent> = {
-  component: YourComponent,
-  //👇 Creates specific argTypes
+const meta: Meta<typeof Button> = {
+  component: Button,
   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'],
+    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',
+        },
+      },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
-
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
-
-export const ExampleStory: Story = {
-  render: (args) => {
-    //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(args.propertyA, args.propertyB);
-    return {
-      Component: YourComponent,
-      props: {
-        ...args,
-        someProperty: someFunctionResult,
-      },
-    };
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
-  },
-};
 ```
 
-```js filename="YourComponent.stories.js" renderer="vue" language="js"
-import YourComponent from './YourComponent.vue';
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
 
-export default {
-  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 = {
-  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',
-  },
-};
-```
+import { Button } from './Button';
 
-```ts filename="YourComponent.stories.ts" renderer="vue" language="ts-4-9"
-import type { Meta, StoryObj } from '@storybook/vue3';
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-import YourComponent from './YourComponent.vue';
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
-const meta = {
-  component: YourComponent,
-  //👇 Creates specific argTypes with options
+const meta: Meta<typeof Button> = {
+  component: Button,
   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'],
+    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',
+        },
+      },
     },
   },
-} satisfies Meta<typeof YourComponent>;
-
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const ExampleStory: 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',
-  },
-};
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="vue" language="ts"
-import type { Meta, StoryObj } from '@storybook/vue3';
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
 
-import YourComponent from './YourComponent.vue';
+import { Button } from './Button';
 
-const meta: Meta<typeof YourComponent> = {
-  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'],
-    },
-  },
-};
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
-export default meta;
-type Story = StoryObj<typeof YourComponent>;
-
-export const ExampleStory: 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,
-        };
+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',
+        },
       },
-      template:
-        '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
-    };
-  },
-  args: {
-    propertyA: 'Item One',
-    propertyB: 'Another Item One',
+    },
   },
-};
+});
 ```
 
 ```js filename="Button.stories.js" renderer="web-components" language="js"
-import { html } from 'lit';
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
 export default {
-  component: 'custom-component',
-  //👇 Creates specific argTypes
+  component: 'demo-button',
   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'],
+    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',
+        },
+      },
     },
   },
 };
-
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Do some logic here
-};
-
-export const ExampleStory = {
-  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"
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta } from '@storybook/web-components';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
-import { html } from 'lit';
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
 const meta: Meta = {
-  component: 'custom-component',
-  //👇 Creates specific argTypes with options
+  component: 'demo-button',
   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'],
+    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',
+        },
+      },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj;
-
-const someFunction = (valuePropertyA: any, valuePropertyB: any) => {
-  // Do some logic here
-};
-
-export const ExampleStory: 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',
-  },
-};
 ```
diff --git a/docs/_snippets/component-story-custom-args-mapping.md b/docs/_snippets/component-story-custom-args-mapping.md
index f6df7d66211b..a8264fd780f8 100644
--- a/docs/_snippets/component-story-custom-args-mapping.md
+++ b/docs/_snippets/component-story-custom-args-mapping.md
@@ -90,7 +90,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
@@ -118,6 +118,37 @@ export default {
 };
 ```
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -182,7 +213,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -215,6 +246,37 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -279,7 +341,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -312,6 +374,37 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta = preview.meta({
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 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 b4b593505bcb..be893b1dade4 100644
--- a/docs/_snippets/component-story-disable-controls-alt.md
+++ b/docs/_snippets/component-story-disable-controls-alt.md
@@ -48,7 +48,7 @@ export default {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -62,6 +62,23 @@ export default {
 };
 ```
 
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -98,7 +115,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -117,6 +134,23 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -153,7 +187,7 @@ const meta: Meta<typeof YourComponent> = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -172,6 +206,23 @@ const meta: Meta<typeof YourComponent> = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+});
+```
+
 ```js filename="YourComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'your-component',
diff --git a/docs/_snippets/component-story-disable-controls-regex.md b/docs/_snippets/component-story-disable-controls-regex.md
index 69309e6b7720..3404e8c540ba 100644
--- a/docs/_snippets/component-story-disable-controls-regex.md
+++ b/docs/_snippets/component-story-disable-controls-regex.md
@@ -107,7 +107,7 @@ export const RegexExclude = {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -139,6 +139,41 @@ export const RegexExclude = {
 };
 ```
 
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const ArrayInclude = meta.story({
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+});
+
+export const RegexInclude = meta.story({
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+});
+
+export const ArrayExclude = meta.story({
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+});
+
+export const RegexExclude = meta.story({
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -216,7 +251,7 @@ export const RegexExclude: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -254,6 +289,41 @@ export const RegexExclude: Story = {
 };
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const ArrayInclude = meta.story({
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+});
+
+export const RegexInclude = meta.story({
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+});
+
+export const ArrayExclude = meta.story({
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+});
+
+export const RegexExclude = meta.story({
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -331,7 +401,7 @@ export const RegexExclude: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -369,6 +439,41 @@ export const RegexExclude: Story = {
 };
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const ArrayInclude = meta.story({
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+});
+
+export const RegexInclude = meta.story({
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+});
+
+export const ArrayExclude = meta.story({
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+});
+
+export const RegexExclude = meta.story({
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+});
+```
+
 ```js filename="YourComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'your-component',
diff --git a/docs/_snippets/component-story-disable-controls.md b/docs/_snippets/component-story-disable-controls.md
index ba68941855f4..e3394a571a94 100644
--- a/docs/_snippets/component-story-disable-controls.md
+++ b/docs/_snippets/component-story-disable-controls.md
@@ -54,7 +54,7 @@ export default {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -70,6 +70,25 @@ export default {
 };
 ```
 
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -110,7 +129,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -131,6 +150,25 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -171,7 +209,7 @@ const meta: Meta<typeof YourComponent> = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -192,6 +230,25 @@ const meta: Meta<typeof YourComponent> = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+});
+```
+
 ```js filename="YourComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'your-component',
diff --git a/docs/_snippets/component-story-figma-integration.md b/docs/_snippets/component-story-figma-integration.md
index d417ce880537..271da65e6f79 100644
--- a/docs/_snippets/component-story-figma-integration.md
+++ b/docs/_snippets/component-story-figma-integration.md
@@ -21,7 +21,7 @@ export const Example: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 // More on default export: https://storybook.js.org/docs/writing-stories/#default-export
@@ -39,7 +39,27 @@ export const Example = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Example = meta.story({
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -62,7 +82,27 @@ export const Example: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Example = meta.story({
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -85,9 +125,30 @@ export const Example: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Example = meta.story({
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
 export default {
   component: MyComponent,
 };
@@ -107,6 +168,7 @@ import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { MyComponent } from './MyComponent';
 
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
 const meta = {
   component: MyComponent,
 } satisfies Meta<typeof MyComponent>;
@@ -129,6 +191,7 @@ import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { MyComponent } from './MyComponent';
 
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
 const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
 };
@@ -275,6 +338,7 @@ export const Example: Story = {
 ```
 
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
 export default {
   component: 'my-component',
 };
@@ -292,6 +356,7 @@ export const Example = {
 ```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
 
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
 const meta: Meta = {
   component: 'my-component',
 };
diff --git a/docs/_snippets/component-story-highlight-addon.md b/docs/_snippets/component-story-highlight-addon.md
index 03d1a8e0ba52..b122db9e4c59 100644
--- a/docs/_snippets/component-story-highlight-addon.md
+++ b/docs/_snippets/component-story-highlight-addon.md
@@ -1,5 +1,6 @@
 ```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { componentWrapperDecorator } from '@storybook/angular';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
@@ -26,7 +27,7 @@ export const Highlighted: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -49,8 +50,35 @@ export const Highlighted = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -76,8 +104,35 @@ export const Highlighted: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -103,6 +158,32 @@ export const Highlighted: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Highlighted = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="vue" language="js"
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
@@ -130,6 +211,7 @@ export const Highlighted = {
 
 ```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -159,6 +241,7 @@ export const Highlighted: Story = {
 
 ```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -209,6 +292,7 @@ export const Highlighted = {
 
 ```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
diff --git a/docs/_snippets/component-story-sort-controls.md b/docs/_snippets/component-story-sort-controls.md
index 5c152e4312a7..e5061a51139e 100644
--- a/docs/_snippets/component-story-sort-controls.md
+++ b/docs/_snippets/component-story-sort-controls.md
@@ -33,7 +33,7 @@ export default {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -42,6 +42,18 @@ export default {
 };
 ```
 
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -68,7 +80,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -82,6 +94,18 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+});
+```
+
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -108,7 +132,7 @@ const meta: Meta<typeof YourComponent> = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -122,6 +146,18 @@ const meta: Meta<typeof YourComponent> = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+});
+```
+
 ```js filename="YourComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'your-component',
diff --git a/docs/_snippets/component-story-static-asset-cdn.md b/docs/_snippets/component-story-static-asset-cdn.md
index b75ef7a9187e..b6bc9a1e58c1 100644
--- a/docs/_snippets/component-story-static-asset-cdn.md
+++ b/docs/_snippets/component-story-static-asset-cdn.md
@@ -20,7 +20,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -34,7 +34,24 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const WithAnImage = meta.story({
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -53,7 +70,24 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const WithAnImage = meta.story({
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -72,6 +106,23 @@ export const WithAnImage: Story = {
 };
 ```
 
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const WithAnImage = meta.story({
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index 3301d3b03561..fc19a2f3a981 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -28,7 +28,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 import imageFile from './static/image.png';
@@ -47,7 +47,29 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+import imageFile from './static/image.png';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const WithAnImage = meta.story({
+  render: () => <img src={image.src} alt={image.alt} />,
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import imageFile from './static/image.png';
@@ -71,7 +93,29 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+import imageFile from './static/image.png';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const WithAnImage = meta.story({
+  render: () => <img src={image.src} alt={image.alt} />,
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import imageFile from './static/image.png';
@@ -95,6 +139,28 @@ export const WithAnImage: Story = {
 };
 ```
 
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+import imageFile from './static/image.png';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const WithAnImage = meta.story({
+  render: () => <img src={image.src} alt={image.alt} />,
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import imageFile from './static/image.png';
 
diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
index 99b0e2d32734..23bffd0bbf1a 100644
--- a/docs/_snippets/component-story-static-asset-without-import.md
+++ b/docs/_snippets/component-story-static-asset-without-import.md
@@ -21,7 +21,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -34,7 +34,23 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.story({
+  render: () => <img src="/image.png" alt="my image" />,
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -52,7 +68,23 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.story({
+  render: () => <img src="/image.png" alt="my image" />,
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -70,6 +102,22 @@ export const WithAnImage: Story = {
 };
 ```
 
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = meta.story({
+  render: () => <img src="/image.png" alt="my image" />,
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
diff --git a/docs/_snippets/component-story-with-custom-render-function.md b/docs/_snippets/component-story-with-custom-render-function.md
index f09079e91e86..548d1bec5799 100644
--- a/docs/_snippets/component-story-with-custom-render-function.md
+++ b/docs/_snippets/component-story-with-custom-render-function.md
@@ -67,7 +67,7 @@ export const Example = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Layout } from './Layout';
 
 import { MyComponent } from './MyComponent';
@@ -91,7 +91,34 @@ export const Example = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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>
+  ),
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Layout } from './Layout';
@@ -120,7 +147,34 @@ export const Example: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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>
+  ),
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Layout } from './Layout';
@@ -149,6 +203,33 @@ export const Example: Story = {
 };
 ```
 
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Layout } from './Layout';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// This story uses a render function to fully control how the component renders.
+export const Example = meta.story({
+  render: () => (
+    <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  ),
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { Layout } from './Layout';
 
diff --git a/docs/_snippets/component-story-with-title.md b/docs/_snippets/component-story-with-title.md
new file mode 100644
index 000000000000..9f5f34d979b9
--- /dev/null
+++ b/docs/_snippets/component-story-with-title.md
@@ -0,0 +1,156 @@
+<!-- prettier-ignore -->
+```mdx filename="src/components/Button/Button.mdx" renderer="common" language="mdx"
+import { Meta, Story } from '@storybook/blocks';
+
+{/* 👇 Documentation-only page */}
+
+<Meta title="Documentation" />
+
+{/* 👇 Component documentation page */}
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+<Story of={ButtonStories.Primary} />
+```
+
+```js filename="src/components/Button/Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import { Button } from './Button';
+
+export default {
+  // Sets the name for the stories container
+  title: 'components/Button',
+  // The component name will be used if `title` is not set
+  component: Button,
+};
+
+// The story variable name will be used if `name` is not set
+const Primary = {
+  // Sets the name for that particular story
+  name: 'Primary',
+  args: {
+    label: 'Button',
+  },
+};
+```
+
+```js filename="src/components/Button/Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  // Sets the name for the stories container
+  title: 'components/Button',
+  // The component name will be used if `title` is not set
+  component: Button,
+});
+
+// The story variable name will be used if `name` is not set
+export const Primary = meta.story({
+  // Sets the name for that particular story
+  name: 'Primary',
+  args: {
+    label: 'Button',
+  },
+});
+```
+
+```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  // Sets the name for the stories container
+  title: 'components/Button',
+  // The component name will be used if `title` is not set
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// The story variable name will be used if `name` is not set
+const Primary: Story = {
+  // Sets the name for that particular story
+  name: 'Primary',
+  args: {
+    label: 'Button',
+  },
+};
+```
+
+```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  // Sets the name for the stories container
+  title: 'components/Button',
+  // The component name will be used if `title` is not set
+  component: Button,
+});
+
+// The story variable name will be used if `name` is not set
+export const Primary = meta.story({
+  // Sets the name for that particular story
+  name: 'Primary',
+  args: {
+    label: 'Button',
+  },
+});
+```
+
+```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  // Sets the name for the stories container
+  title: 'components/Button',
+  // The component name will be used if `title` is not set
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// The story variable name will be used if `name` is not set
+const Primary: Story = {
+  // Sets the name for that particular story
+  name: 'Primary',
+  args: {
+    label: 'Button',
+  },
+};
+```
+
+```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  // Sets the name for the stories container
+  title: 'components/Button',
+  // The component name will be used if `title` is not set
+  component: Button,
+});
+
+// The story variable name will be used if `name` is not set
+export const Primary = meta.story({
+  // Sets the name for that particular story
+  name: 'Primary',
+  args: {
+    label: 'Button',
+  },
+});
+```
diff --git a/docs/_snippets/configure-mock-provider-with-story-parameter.md b/docs/_snippets/configure-mock-provider-with-story-parameter.md
index a9b4b310b034..9b5f4e904c03 100644
--- a/docs/_snippets/configure-mock-provider-with-story-parameter.md
+++ b/docs/_snippets/configure-mock-provider-with-story-parameter.md
@@ -1,4 +1,4 @@
-```js filename="Button.stories.js" renderer="react" language="js"
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -16,7 +16,28 @@ export const Dark = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="react" language="ts-4-9"
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+// Wrapped in light theme
+export const Default = meta.story({});
+
+// Wrapped in dark theme
+export const Dark = meta.story({
+  parameters: {
+    theme: 'dark',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -39,7 +60,28 @@ export const Dark: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="react" language="ts"
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+// Wrapped in light theme
+export const Default = meta.story({});
+
+// Wrapped in dark theme
+export const Dark = meta.story({
+  parameters: {
+    theme: 'dark',
+  },
+});
+```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -61,3 +103,24 @@ export const Dark: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+// Wrapped in light theme
+export const Default = meta.story({});
+
+// Wrapped in dark theme
+export const Dark = meta.story({
+  parameters: {
+    theme: 'dark',
+  },
+});
+```
diff --git a/docs/_snippets/csf-3-example-title.md b/docs/_snippets/csf-3-example-title.md
deleted file mode 100644
index 5d20e6dfd429..000000000000
--- a/docs/_snippets/csf-3-example-title.md
+++ /dev/null
@@ -1,87 +0,0 @@
-<!-- prettier-ignore -->
-```mdx filename="src/components/Button/Button.mdx" renderer="common" language="mdx"
-import { Meta, Story } from '@storybook/blocks';
-
-{/* 👇 Documentation-only page */}
-
-<Meta title="Documentation" />
-
-{/* 👇 Component documentation page */}
-import * as ButtonStories from './Button.stories';
-
-<Meta of={ButtonStories} />
-
-<Story of={ButtonStories.Primary} />
-```
-
-```js filename="src/components/Button/Button.stories.js|jsx" renderer="common" language="js"
-import { Button } from './Button';
-
-export default {
-  // Sets the name for the stories container
-  title: 'components/Button',
-  // The component name will be used if `title` is not set
-  component: Button,
-};
-
-// The story variable name will be used if `name` is not set
-const Primary = {
-  // Sets the name for that particular story
-  name: 'Primary',
-  args: {
-    label: 'Button',
-  },
-};
-```
-
-```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="common" language="ts-4-9"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta = {
-  // Sets the name for the stories container
-  title: 'components/Button',
-  // The component name will be used if `title` is not set
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// The story variable name will be used if `name` is not set
-const Primary: Story = {
-  // Sets the name for that particular story
-  name: 'Primary',
-  args: {
-    label: 'Button',
-  },
-};
-```
-
-```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta: Meta<Button> = {
-  // Sets the name for the stories container
-  title: 'components/Button',
-  // The component name will be used if `title` is not set
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-// The story variable name will be used if `name` is not set
-const Primary: Story = {
-  // Sets the name for that particular story
-  name: 'Primary',
-  args: {
-    label: 'Button',
-  },
-};
-```
diff --git a/docs/_snippets/custom-project-level-parameters.md b/docs/_snippets/custom-project-level-parameters.md
new file mode 100644
index 000000000000..39ae8cc72477
--- /dev/null
+++ b/docs/_snippets/custom-project-level-parameters.md
@@ -0,0 +1,67 @@
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
+const preview = {
+  // 👇 Project-level parameters
+  parameters: {
+    layout: 'centered',
+    demo: {
+      demoProperty: 'a',
+      demoArray: [1, 2],
+    },
+  },
+  // ...
+};
+export default preview;
+```
+
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // 👇 Project-level parameters
+  parameters: {
+    layout: 'centered',
+    demo: {
+      demoProperty: 'a',
+      demoArray: [1, 2],
+    },
+  },
+  // ...
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-renderer';
+
+const preview: Preview = {
+  // 👇 Project-level parameters
+  parameters: {
+    layout: 'centered',
+    demo: {
+      demoProperty: 'a',
+      demoArray: [1, 2],
+    },
+  },
+  // ...
+};
+
+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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // 👇 Project-level parameters
+  parameters: {
+    layout: 'centered',
+    demo: {
+      demoProperty: 'a',
+      demoArray: [1, 2],
+    },
+  },
+  // ...
+});
+```
diff --git a/docs/_snippets/custom-story-level-parameters.md b/docs/_snippets/custom-story-level-parameters.md
new file mode 100644
index 000000000000..8cce28edb340
--- /dev/null
+++ b/docs/_snippets/custom-story-level-parameters.md
@@ -0,0 +1,286 @@
+```ts filename="Dialog.stories.ts" renderer="angular" language="ts"
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Dialog } from './dialog.component';
+
+const meta: Meta<Dialog> = {
+  component: Dialog,
+  // 👇 Meta-level parameters
+  parameters: {
+    layout: 'fullscreen',
+    demo: {
+      demoProperty: 'b',
+      anotherDemoProperty: 'b',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+// (no additional parameters specified)
+export const Basic: Story = {};
+
+export const LargeScreen: Story = {
+  // 👇 Story-level parameters
+  parameters: {
+    layout: 'padded',
+    demo: {
+      demoArray: [3, 4],
+    },
+  },
+};
+```
+
+```js filename="Dialog.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import { Dialog } from './Dialog';
+
+export default {
+  component: Dialog,
+  // 👇 Meta-level parameters
+  parameters: {
+    layout: 'fullscreen',
+    demo: {
+      demoProperty: 'b',
+      anotherDemoProperty: 'b',
+    },
+  },
+};
+
+// (no additional parameters specified)
+export const Basic = {};
+
+export const LargeScreen = {
+  // 👇 Story-level parameters
+  parameters: {
+    layout: 'padded',
+    demo: {
+      demoArray: [3, 4],
+    },
+  },
+};
+```
+
+```js filename="Dialog.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Dialog } from './Dialog';
+
+const meta = preview.meta({
+  component: Dialog,
+  // 👇 Meta-level parameters
+  parameters: {
+    layout: 'fullscreen',
+    demo: {
+      demoProperty: 'b',
+      anotherDemoProperty: 'b',
+    },
+  },
+});
+
+// (no additional parameters specified)
+export const Basic = meta.story({});
+
+export const LargeScreen = meta.story({
+  // 👇 Story-level parameters
+  parameters: {
+    layout: 'padded',
+    demo: {
+      demoArray: [3, 4],
+    },
+  },
+});
+```
+
+```ts filename="Dialog.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Dialog } from './Dialog';
+
+const meta = {
+  component: Dialog,
+  // 👇 Meta-level parameters
+  parameters: {
+    layout: 'fullscreen',
+    demo: {
+      demoProperty: 'b',
+      anotherDemoProperty: 'b',
+    },
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
+
+export const LargeScreen: Story = {
+  // 👇 Story-level parameters
+  parameters: {
+    layout: 'padded',
+    demo: {
+      demoArray: [3, 4],
+    },
+  },
+};
+```
+
+```ts filename="Dialog.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Dialog } from './Dialog';
+
+const meta = preview.meta({
+  component: Dialog,
+  // 👇 Meta-level parameters
+  parameters: {
+    layout: 'fullscreen',
+    demo: {
+      demoProperty: 'b',
+      anotherDemoProperty: 'b',
+    },
+  },
+});
+
+// (no additional parameters specified)
+export const Basic = meta.story({});
+
+export const LargeScreen = meta.story({
+  // 👇 Story-level parameters
+  parameters: {
+    layout: 'padded',
+    demo: {
+      demoArray: [3, 4],
+    },
+  },
+});
+```
+
+```ts filename="Dialog.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta, StoryObj } from '@storybook/your-renderer';
+
+import { Dialog } from './Dialog';
+
+const meta: Meta<typeof Dialog> = {
+  component: Dialog,
+  // 👇 Meta-level parameters
+  parameters: {
+    layout: 'fullscreen',
+    demo: {
+      demoProperty: 'b',
+      anotherDemoProperty: 'b',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+// (no additional parameters specified)
+export const Basic: Story = {};
+
+export const LargeScreen: Story = {
+  // 👇 Story-level parameters
+  parameters: {
+    layout: 'padded',
+    demo: {
+      demoArray: [3, 4],
+    },
+  },
+};
+```
+
+```ts filename="Dialog.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Dialog } from './Dialog';
+
+const meta = preview.meta({
+  component: Dialog,
+  // 👇 Meta-level parameters
+  parameters: {
+    layout: 'fullscreen',
+    demo: {
+      demoProperty: 'b',
+      anotherDemoProperty: 'b',
+    },
+  },
+});
+
+// (no additional parameters specified)
+export const Basic = meta.story({});
+
+export const LargeScreen = meta.story({
+  // 👇 Story-level parameters
+  parameters: {
+    layout: 'padded',
+    demo: {
+      demoArray: [3, 4],
+    },
+  },
+});
+```
+
+```js filename="Dialog.stories.js" renderer="web-components" language="js"
+export default {
+  component: 'demo-dialog',
+  // 👇 Meta-level parameters
+  parameters: {
+    layout: 'fullscreen',
+    demo: {
+      demoProperty: 'b',
+      anotherDemoProperty: 'b',
+    },
+  },
+};
+
+// (no additional parameters specified)
+export const Basic = {};
+
+export const LargeScreen = {
+  // 👇 Story-level parameters
+  parameters: {
+    layout: 'padded',
+    demo: {
+      demoArray: [3, 4],
+    },
+  },
+};
+```
+
+```ts filename="Dialog.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-dialog',
+  // 👇 Meta-level parameters
+  parameters: {
+    layout: 'fullscreen',
+    demo: {
+      demoProperty: 'b',
+      anotherDemoProperty: 'b',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+// (no additional parameters specified)
+export const Basic: Story = {};
+
+export const LargeScreen: Story = {
+  // 👇 Story-level parameters
+  parameters: {
+    layout: 'padded',
+    demo: {
+      demoArray: [3, 4],
+    },
+  },
+};
+```
diff --git a/docs/_snippets/decorator-parameterized-in-preview.md b/docs/_snippets/decorator-parameterized-in-preview.md
index 264c58243ed5..1d6c602ed90d 100644
--- a/docs/_snippets/decorator-parameterized-in-preview.md
+++ b/docs/_snippets/decorator-parameterized-in-preview.md
@@ -1,5 +1,6 @@
 ```ts filename=".storybook/preview.ts" renderer="angular" language="ts"
 import type { Preview } from '@storybook/angular';
+
 import { componentWrapperDecorator } from '@storybook/angular';
 
 const preview: Preview = {
@@ -25,7 +26,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.jsx" renderer="react" language="js"
+```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 export default {
@@ -57,7 +58,42 @@ export default {
 };
 ```
 
-```tsx filename=".storybook/preview.tsx" renderer="react" language="ts"
+```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case 'page':
+          return (
+            // Your page layout is probably a little more complex than this ;)
+            <div className="page-layout">
+              <Story />
+            </div>
+          );
+        case 'page-mobile':
+          return (
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
+          );
+        default:
+          // In the default case, don't apply a layout
+          return <Story />;
+      }
+    },
+  ],
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
 import type { Preview } from '@storybook/react';
@@ -93,6 +129,41 @@ const preview: Preview = {
 export default preview;
 ```
 
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case 'page':
+          return (
+            // Your page layout is probably a little more complex than this ;)
+            <div className="page-layout">
+              <Story />
+            </div>
+          );
+        case 'page-mobile':
+          return (
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
+          );
+        default:
+          // In the default case, don't apply a layout
+          return <Story />;
+      }
+    },
+  ],
+});
+```
+
 ```jsx filename=".storybook/preview.jsx" renderer="solid" language="js"
 export default {
   decorators: [
diff --git a/docs/_snippets/foo-bar-baz-story.md b/docs/_snippets/foo-bar-baz-story.md
index c510d93af9bf..a75bcb245dd0 100644
--- a/docs/_snippets/foo-bar-baz-story.md
+++ b/docs/_snippets/foo-bar-baz-story.md
@@ -18,7 +18,7 @@ type Story = StoryObj<Foo>;
 export const Baz: Story = {};
 ```
 
-```js filename="FooBar.stories.js|jsx" renderer="common" language="js"
+```js filename="FooBar.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Foo } from './Foo';
 
 export default {
@@ -33,7 +33,25 @@ export default {
 export const Baz = {};
 ```
 
-```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="FooBar.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Foo/Bar',
+  component: Foo,
+});
+
+export const Baz = meta.story({});
+```
+
+```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -54,7 +72,25 @@ type Story = StoryObj<typeof Foo>;
 export const Baz: Story = {};
 ```
 
-```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="FooBar.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Foo/Bar',
+  component: Foo,
+});
+
+export const Baz = meta.story({});
+```
+
+```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -74,3 +110,21 @@ type Story = StoryObj<typeof Foo>;
 
 export const Baz: Story = {};
 ```
+
+```ts filename="FooBar.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Foo/Bar',
+  component: Foo,
+});
+
+export const Baz = meta.story({});
+```
diff --git a/docs/_snippets/gizmo-story-controls-customization.md b/docs/_snippets/gizmo-story-controls-customization.md
index 62d00837517c..0f1d7b517769 100644
--- a/docs/_snippets/gizmo-story-controls-customization.md
+++ b/docs/_snippets/gizmo-story-controls-customization.md
@@ -171,7 +171,7 @@ export default {
 };
 ```
 
-```js filename="Gizmo.stories.js|jsx" renderer="common" language="js"
+```js filename="Gizmo.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Gizmo } from './Gizmo';
 
 export default {
@@ -226,6 +226,64 @@ export default {
 };
 ```
 
+```js filename="Gizmo.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Gizmo } from './Gizmo';
+
+const meta = preview.meta({
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+});
+```
+
 ```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -344,7 +402,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -404,6 +462,64 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Gizmo.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Gizmo } from './Gizmo';
+
+const meta = preview.meta({
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+});
+```
+
 ```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -522,7 +638,7 @@ const meta: Meta<typeof Gizmo> = {
 export default meta;
 ```
 
-```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -582,6 +698,64 @@ const meta: Meta<typeof Gizmo> = {
 export default meta;
 ```
 
+```ts filename="Gizmo.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Gizmo } from './Gizmo';
+
+const meta = preview.meta({
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+});
+```
+
 ```js filename="Gizmo.stories.js" renderer="web-components" language="js"
 export default {
   component: 'gizmo-element',
diff --git a/docs/_snippets/highlight-addon-custom-style.md b/docs/_snippets/highlight-addon-custom-style.md
index 05c3e9603180..82c6c35efdb3 100644
--- a/docs/_snippets/highlight-addon-custom-style.md
+++ b/docs/_snippets/highlight-addon-custom-style.md
@@ -1,5 +1,6 @@
 ```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { componentWrapperDecorator } from '@storybook/angular';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
@@ -28,7 +29,7 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -53,8 +54,37 @@ export const StyledHighlight = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -82,8 +112,37 @@ export const StyledHighlight: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -111,6 +170,34 @@ export const StyledHighlight: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const StyledHighlight = meta.story({
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return storyFn();
+    },
+  ],
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="vue" language="js"
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
@@ -140,6 +227,7 @@ export const StyledHighlight = {
 
 ```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -171,6 +259,7 @@ export const StyledHighlight: Story = {
 
 ```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
@@ -225,6 +314,7 @@ export const StyledHighlight = {
 
 ```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
+
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
diff --git a/docs/_snippets/histogram-story.md b/docs/_snippets/histogram-story.md
index fd6464be9432..dee2e5bee971 100644
--- a/docs/_snippets/histogram-story.md
+++ b/docs/_snippets/histogram-story.md
@@ -105,7 +105,7 @@ export const Default = {
 };
 ```
 
-```js filename="Histogram.stories.js|jsx" renderer="react" language="js"
+```js filename="Histogram.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Histogram } from './Histogram';
 
 export default {
@@ -122,7 +122,27 @@ export const Default = {
 };
 ```
 
-```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Histogram.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Histogram } from './Histogram';
+
+const meta = preview.meta({
+  component: Histogram,
+});
+
+export const Default = meta.story({
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+});
+```
+
+```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Histogram } from './Histogram';
@@ -144,7 +164,27 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Histogram } from './Histogram';
+
+const meta = preview.meta({
+  component: Histogram,
+});
+
+export const Default = meta.story({
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+});
+```
+
+```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Histogram } from './Histogram';
@@ -166,6 +206,26 @@ export const Default: Story = {
 };
 ```
 
+```ts filename="Histogram.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Histogram } from './Histogram';
+
+const meta = preview.meta({
+  component: Histogram,
+});
+
+export const Default = meta.story({
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+});
+```
+
 ```js filename="Histogram.stories.js|jsx" renderer="solid" language="js"
 import { Histogram } from './Histogram';
 
diff --git a/docs/_snippets/list-story-expanded.md b/docs/_snippets/list-story-expanded.md
index f1c321b828d2..fc94cdf4ad1f 100644
--- a/docs/_snippets/list-story-expanded.md
+++ b/docs/_snippets/list-story-expanded.md
@@ -134,7 +134,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 import { ListItem } from './ListItem';
 
@@ -168,7 +168,44 @@ export const ManyItems = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const Empty = meta.story({});
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+});
+```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -207,7 +244,44 @@ export const ManyItems: Story = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const Empty = meta.story({});
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+});
+```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -246,6 +320,43 @@ export const ManyItems: Story = {
 };
 ```
 
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const Empty = meta.story({});
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+});
+```
+
 ```js filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 import { ListItem } from './ListItem';
diff --git a/docs/_snippets/list-story-reuse-data.md b/docs/_snippets/list-story-reuse-data.md
index 7de27f68a2e0..828a73cfdf25 100644
--- a/docs/_snippets/list-story-reuse-data.md
+++ b/docs/_snippets/list-story-reuse-data.md
@@ -1,3 +1,5 @@
+<!-- Vet this example  for CSF Next pattern-->
+
 ```ts filename="List.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -91,7 +93,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 import { List } from './List';
@@ -115,7 +117,32 @@ export const ManyItems = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.input.args} />
+      <ListItem {...Unselected.input.args} />
+      <ListItem {...Selected.input.args} />
+    </List>
+  ),
+});
+```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -142,7 +169,32 @@ export const ManyItems: Story = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.input.args} />
+      <ListItem {...Unselected.input.args} />
+      <ListItem {...Selected.input.args} />
+    </List>
+  ),
+});
+```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -169,6 +221,31 @@ export const ManyItems: Story = {
 };
 ```
 
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+const meta = preview.meta({
+  component: List,
+});
+
+export const ManyItems = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.input.args} />
+      <ListItem {...Unselected.input.args} />
+      <ListItem {...Selected.input.args} />
+    </List>
+  ),
+});
+```
+
 ```js filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 import { ListItem } from './ListItem';
diff --git a/docs/_snippets/list-story-starter.md b/docs/_snippets/list-story-starter.md
index 09215a1d1dea..47113a2a89fb 100644
--- a/docs/_snippets/list-story-starter.md
+++ b/docs/_snippets/list-story-starter.md
@@ -68,7 +68,7 @@ export const Empty: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 
 export default {
@@ -79,7 +79,21 @@ export default {
 export const Empty = {};
 ```
 
-```ts filename="List.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+
+const meta = preview.meta({
+  component: List,
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story({});
+```
+
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -95,7 +109,21 @@ type Story = StoryObj<typeof meta>;
 export const Empty: Story = {};
 ```
 
-```ts filename="List.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+
+const meta = preview.meta({
+  component: List,
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story({});
+```
+
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -111,6 +139,20 @@ type Story = StoryObj<typeof List>;
 export const Empty: Story = {};
 ```
 
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+
+const meta = preview.meta({
+  component: List,
+});
+
+// Always an empty list, not super interesting
+export const Empty = meta.story({});
+```
+
 ```js filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 
diff --git a/docs/_snippets/list-story-template.md b/docs/_snippets/list-story-template.md
index 31c6ca75d8cc..d5bb36c2d69b 100644
--- a/docs/_snippets/list-story-template.md
+++ b/docs/_snippets/list-story-template.md
@@ -1,3 +1,5 @@
+<!--TODO: Vet his example for CSF Next (template usage) -->
+
 ```ts filename="List.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -60,7 +62,7 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 import { ListItem } from './ListItem';
 
@@ -108,7 +110,59 @@ export const OneItem = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+
+  component: List,
+});
+
+//👇 The ListTemplate construct will be spread to the existing stories.
+const ListTemplate = {
+  render: ({ items, ...args }) => {
+    return (
+      <List>
+        {items.map((item) => (
+          <ListItem {...item} />
+        ))}
+      </List>
+    );
+  },
+};
+
+export const Empty = meta.story({
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+});
+
+export const OneItem = meta.story({
+  ...ListTemplate,
+  args: {
+    items: [
+      {
+        ...Unchecked.args,
+      },
+    ],
+  },
+});
+```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -119,7 +173,7 @@ import { Unchecked } from './ListItem.stories';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -157,7 +211,54 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+});
+
+//👇 The ListTemplate construct will be spread to the existing stories.
+const ListTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <List>
+        {items.map((item) => (
+          <ListItem {...item} />
+        ))}
+      </List>
+    );
+  },
+};
+
+export const Empty = meta.story({
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+});
+
+export const OneItem = meta.story({
+  ...ListTemplate,
+  args: {
+    items: [{ ...Unchecked.args }],
+  },
+});
+```
+
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -168,7 +269,7 @@ import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-   * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -206,6 +307,53 @@ export const OneItem = {
 };
 ```
 
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+});
+
+//👇 The ListTemplate construct will be spread to the existing stories.
+const ListTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <List>
+        {items.map((item) => (
+          <ListItem {...item} />
+        ))}
+      </List>
+    );
+  },
+};
+
+export const Empty = meta.story({
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+});
+
+export const OneItem = meta.story({
+  ...ListTemplate,
+  args: {
+    items: [{ ...Unchecked.args }],
+  },
+});
+```
+
 ```js filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -265,7 +413,7 @@ import { Unchecked } from './ListItem.stories';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -314,7 +462,7 @@ import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-   * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/_snippets/list-story-with-subcomponents.md b/docs/_snippets/list-story-with-subcomponents.md
index 44a05aade665..39fa87511d10 100644
--- a/docs/_snippets/list-story-with-subcomponents.md
+++ b/docs/_snippets/list-story-with-subcomponents.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next support -->
+
 ```ts filename="List.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -18,8 +20,8 @@ const meta: Meta<List> = {
     }),
   ],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<List>;
 
 export const Empty: Story = {};
@@ -37,7 +39,7 @@ export const OneItem: Story = {
 };
 ```
 
-```jsx filename="List.stories.js|jsx" renderer="react" language="js"
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 import { List } from './List';
@@ -59,8 +61,33 @@ export const OneItem = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9"
+```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+});
+
+export const Empty = meta.story({});
+
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import React from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -70,8 +97,8 @@ const meta = {
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 } satisfies Meta<typeof List>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Empty: Story = {};
@@ -85,8 +112,33 @@ export const OneItem: Story = {
 };
 ```
 
-```tsx filename="List.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+import React from 'react';
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+});
+
+export const Empty = meta.story({});
+
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+```
+
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -96,8 +148,8 @@ const meta: Meta<typeof List> = {
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof List>;
 
 export const Empty: Story = {};
@@ -111,6 +163,30 @@ export const OneItem: Story = {
 };
 ```
 
+```tsx filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = preview.meta({
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+});
+
+export const Empty = meta.story({});
+
+export const OneItem = meta.story({
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+});
+```
+
 ```js filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -149,8 +225,7 @@ const meta = {
    */
   title: 'List',
   component: List,
-  //👈 Adds the ListItem component as a subcomponent
-  subcomponents: { ListItem },
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 } satisfies Meta<typeof List>;
 
 export default meta;
@@ -227,8 +302,8 @@ const meta: Meta = {
   component: 'demo-list',
   subcomponents: { ListItem: 'demo-list-item' }, // 👈 Adds the ListItem component as a subcomponent
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Empty: Story = {};
@@ -279,8 +354,8 @@ const meta = {
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 } satisfies Meta<typeof List>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Empty: Story = {
@@ -311,8 +386,8 @@ const meta: Meta<typeof List> = {
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof List>;
 
 export const Empty: Story = {
diff --git a/docs/_snippets/list-story-with-unchecked-children.md b/docs/_snippets/list-story-with-unchecked-children.md
index 695ec926432a..f4d9975b6e2d 100644
--- a/docs/_snippets/list-story-with-unchecked-children.md
+++ b/docs/_snippets/list-story-with-unchecked-children.md
@@ -1,4 +1,6 @@
-```js filename="List.stories.js|jsx" renderer="react" language="js"
+<!-- TODO: Vet this against CSF Next -->
+
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
@@ -20,7 +22,32 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+});
+
+export const OneItem = meta.story({
+  args: {
+    children: <Unchecked {...Unchecked.args} />,
+  },
+});
+```
+
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -47,7 +74,32 @@ export const OneItem: Story = {
 };
 ```
 
-```ts filename="List.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+});
+
+export const OneItem = meta.story({
+  args: {
+    children: <Unchecked {...Unchecked.args} />,
+  },
+});
+```
+
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
@@ -74,6 +126,31 @@ export const OneItem: Story = {
 };
 ```
 
+```ts filename="List.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { List } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+});
+
+export const OneItem = meta.story({
+  args: {
+    children: <Unchecked {...Unchecked.args} />,
+  },
+});
+```
+
 ```js filename="List.stories.js|jsx" renderer="solid" language="js"
 import { List } from './List';
 
diff --git a/docs/_snippets/loader-story.md b/docs/_snippets/loader-story.md
index a777c0e2e922..9727a0579be9 100644
--- a/docs/_snippets/loader-story.md
+++ b/docs/_snippets/loader-story.md
@@ -40,7 +40,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="TodoItem.stories.js|jsx" renderer="react" language="js"
+```js filename="TodoItem.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { TodoItem } from './TodoItem';
 
 /*
@@ -62,7 +62,32 @@ export const Primary = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="TodoItem.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { TodoItem } from './TodoItem';
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+const meta = preview.meta({
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
+});
+
+export const Primary = meta.story({
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { TodoItem } from './TodoItem';
@@ -89,7 +114,32 @@ export const Primary: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { TodoItem } from './TodoItem';
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+const meta = preview.meta({
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
+});
+
+export const Primary = meta.story({
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { TodoItem } from './TodoItem';
@@ -116,6 +166,31 @@ export const Primary: Story = {
 };
 ```
 
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { TodoItem } from './TodoItem';
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+const meta = preview.meta({
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
+});
+
+export const Primary = meta.story({
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+});
+```
+
 ```js filename="TodoItem.stories.js|jsx" renderer="solid" language="js"
 import { TodoItem } from './TodoItem';
 
diff --git a/docs/_snippets/login-form-with-play-function.md b/docs/_snippets/login-form-with-play-function.md
index 4488f94009e3..d261b014cc36 100644
--- a/docs/_snippets/login-form-with-play-function.md
+++ b/docs/_snippets/login-form-with-play-function.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for the correct construct for component tests -->
+
 ```ts filename="LoginForm.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -33,14 +35,14 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
 ```
 
-```js filename="LoginForm.stories.js|jsx" renderer="react" language="js"
+```js filename="LoginForm.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { userEvent, within, expect } from '@storybook/test';
 
 import { LoginForm } from './LoginForm';
@@ -70,14 +72,54 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
 ```
 
-```ts filename="LoginForm.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="LoginForm.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within, expect } from '@storybook/test';
+
+import { LoginForm } from './LoginForm';
+
+const meta = preview.meta({
+  component: LoginForm,
+});
+
+export const EmptyForm = meta.story({});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 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-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { userEvent, within, expect } from '@storybook/test';
@@ -112,14 +154,54 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
 ```
 
-```ts filename="LoginForm.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="LoginForm.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within, expect } from '@storybook/test';
+
+import { LoginForm } from './LoginForm';
+
+const meta = preview.meta({
+  component: LoginForm,
+});
+
+export const EmptyForm = meta.story({});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 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 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { userEvent, within, expect } from '@storybook/test';
@@ -154,13 +236,53 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
 ```
 
+```ts filename="LoginForm.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within, expect } from '@storybook/test';
+
+import { LoginForm } from './LoginForm';
+
+const meta = preview.meta({
+  component: LoginForm,
+});
+
+export const EmptyForm = meta.story({});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 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="solid" language="js"
 import { userEvent, within, expect } from '@storybook/test';
 
@@ -191,8 +313,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -235,8 +357,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -279,8 +401,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -357,8 +479,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -367,6 +489,7 @@ export const FilledForm = {
 ```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
+
   import { expect, userEvent, within } from '@storybook/test';
 
   import LoginForm from './LoginForm.svelte';
@@ -407,6 +530,7 @@ export const FilledForm = {
 
 ```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
+
 import { expect, userEvent, within } from '@storybook/test';
 
 import LoginForm from './LoginForm.svelte';
@@ -439,8 +563,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -449,6 +573,7 @@ export const FilledForm: Story = {
 ```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
+
   import { expect, userEvent, within } from '@storybook/test';
 
   import LoginForm from './LoginForm.svelte';
@@ -490,6 +615,7 @@ export const FilledForm: Story = {
 
 ```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
+
 import { expect, userEvent, within } from '@storybook/test';
 
 import LoginForm from './LoginForm.svelte';
@@ -522,8 +648,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -568,8 +694,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -619,8 +745,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -670,8 +796,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -705,8 +831,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -714,6 +840,7 @@ export const FilledForm = {
 
 ```ts filename="LoginForm.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
+
 import { userEvent, within, expect } from '@storybook/test';
 
 const meta: Meta = {
@@ -744,8 +871,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
diff --git a/docs/_snippets/main-config-addons.md b/docs/_snippets/main-config-addons.md
index 497402137c04..2d4fb034d05c 100644
--- a/docs/_snippets/main-config-addons.md
+++ b/docs/_snippets/main-config-addons.md
@@ -1,6 +1,8 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Vet this example for CSF Next support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -29,8 +31,41 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  implementation: require.resolve('postcss'),
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -63,3 +98,36 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  implementation: require.resolve('postcss'),
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/main-config-babel.md b/docs/_snippets/main-config-babel.md
index 461b07c96f80..416580740ba8 100644
--- a/docs/_snippets/main-config-babel.md
+++ b/docs/_snippets/main-config-babel.md
@@ -1,6 +1,8 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Vet this example for CSF Next support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async babel(config, { configType }) {
@@ -15,8 +17,27 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async babel(config, { configType }) {
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return config;
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -35,3 +56,22 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async babel(config, { configType }) {
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/main-config-builder-custom-config.md b/docs/_snippets/main-config-builder-custom-config.md
index 42ee9456cb46..4a50a9882a74 100644
--- a/docs/_snippets/main-config-builder-custom-config.md
+++ b/docs/_snippets/main-config-builder-custom-config.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -11,3 +11,56 @@ export default {
   },
 };
 ```
+
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../customVite.config.js',
+      },
+    },
+  },
+});
+```
+
+```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)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../customVite.config.js',
+      },
+    },
+  },
+};
+
+export default config;
+```
+
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../customVite.config.js',
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-builder.md b/docs/_snippets/main-config-core-builder.md
index 59bac17fdfe6..1f51a33882d3 100644
--- a/docs/_snippets/main-config-core-builder.md
+++ b/docs/_snippets/main-config-core-builder.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -14,13 +14,13 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts-4-9"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
 
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+export default defineMain({
   framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     builder: {
       name: '@storybook/builder-vite',
@@ -29,13 +29,11 @@ const config: StorybookConfig = {
       },
     },
   },
-};
-
-export default config;
+});
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -53,3 +51,21 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: '../../../vite.config.js',
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-cross-origin-isolated.md b/docs/_snippets/main-config-core-cross-origin-isolated.md
index 9dd3de4a0c14..4ee1af3363b5 100644
--- a/docs/_snippets/main-config-core-cross-origin-isolated.md
+++ b/docs/_snippets/main-config-core-cross-origin-isolated.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    crossOriginIsolated: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    crossOriginIsolated: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-disable-project-json.md b/docs/_snippets/main-config-core-disable-project-json.md
index a3ee05092236..7cad532c5a4d 100644
--- a/docs/_snippets/main-config-core-disable-project-json.md
+++ b/docs/_snippets/main-config-core-disable-project-json.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableProjectJson: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableProjectJson: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-disable-telemetry.md b/docs/_snippets/main-config-core-disable-telemetry.md
index 7ae7d19ce9ad..93be5c22f24d 100644
--- a/docs/_snippets/main-config-core-disable-telemetry.md
+++ b/docs/_snippets/main-config-core-disable-telemetry.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-disable-update-notifications.md b/docs/_snippets/main-config-core-disable-update-notifications.md
index 4690f91dff3b..715cf8ca2c81 100644
--- a/docs/_snippets/main-config-core-disable-update-notifications.md
+++ b/docs/_snippets/main-config-core-disable-update-notifications.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWhatsNewNotifications: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWhatsNewNotifications: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-disable-webpack-defaults.md b/docs/_snippets/main-config-core-disable-webpack-defaults.md
index 872865235bb7..853a7c26d4e2 100644
--- a/docs/_snippets/main-config-core-disable-webpack-defaults.md
+++ b/docs/_snippets/main-config-core-disable-webpack-defaults.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Vet this example for CSF Next support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -9,7 +11,20 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWebpackDefaults: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,3 +38,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableWebpackDefaults: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-core-enable-crash-reports.md b/docs/_snippets/main-config-core-enable-crash-reports.md
index 32f436b273ae..a39742545ad2 100644
--- a/docs/_snippets/main-config-core-enable-crash-reports.md
+++ b/docs/_snippets/main-config-core-enable-crash-reports.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
diff --git a/docs/_snippets/main-config-docs-autodocs.md b/docs/_snippets/main-config-docs-autodocs.md
index 7fef4184f37e..5a8e265cede4 100644
--- a/docs/_snippets/main-config-docs-autodocs.md
+++ b/docs/_snippets/main-config-docs-autodocs.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   docs: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    autodocs: 'tag',
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    autodocs: 'tag',
+  },
+});
+```
diff --git a/docs/_snippets/main-config-docs-default-name.md b/docs/_snippets/main-config-docs-default-name.md
index 181354867f7e..54a3ab0a0977 100644
--- a/docs/_snippets/main-config-docs-default-name.md
+++ b/docs/_snippets/main-config-docs-default-name.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   docs: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    defaultName: 'Documentation',
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    defaultName: 'Documentation',
+  },
+});
+```
diff --git a/docs/_snippets/main-config-docs-docs-mode.md b/docs/_snippets/main-config-docs-docs-mode.md
index 8e90c952e9b2..130d9cdf34ed 100644
--- a/docs/_snippets/main-config-docs-docs-mode.md
+++ b/docs/_snippets/main-config-docs-docs-mode.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   docs: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    docsMode: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  docs: {
+    docsMode: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-env.md b/docs/_snippets/main-config-env.md
index 677be576fa72..9327f9621e2b 100644
--- a/docs/_snippets/main-config-env.md
+++ b/docs/_snippets/main-config-env.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   /*
@@ -14,8 +14,26 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  /*
+   * 👇 The `config` argument contains all the other existing environment variables.
+   * Either configured in an `.env` file or configured on the command line.
+   */
+  env: (config) => ({
+    ...config,
+    EXAMPLE_VAR: 'An environment variable configured in Storybook',
+  }),
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -33,3 +51,21 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  /*
+   * 👇 The `config` argument contains all the other existing environment variables.
+   * Either configured in an `.env` file or configured on the command line.
+   */
+  env: (config) => ({
+    ...config,
+    EXAMPLE_VAR: 'An environment variable configured in Storybook',
+  }),
+});
+```
diff --git a/docs/_snippets/main-config-features-arg-type-targets-v7.md b/docs/_snippets/main-config-features-arg-type-targets-v7.md
index 5b03ccd0090f..4d9f3c6272d5 100644
--- a/docs/_snippets/main-config-features-arg-type-targets-v7.md
+++ b/docs/_snippets/main-config-features-arg-type-targets-v7.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    argTypeTargetsV7: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    argTypeTargetsV7: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-features-backgrounds-story-globals.md b/docs/_snippets/main-config-features-backgrounds-story-globals.md
index 0cea2e351129..3ea42d6f41bb 100644
--- a/docs/_snippets/main-config-features-backgrounds-story-globals.md
+++ b/docs/_snippets/main-config-features-backgrounds-story-globals.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    backgroundsStoryGlobals: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    backgroundsStoryGlobals: 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 2650c75c39ab..0fb309d34531 100644
--- a/docs/_snippets/main-config-features-development-mode-for-build.md
+++ b/docs/_snippets/main-config-features-development-mode-for-build.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    developmentModeForBuild: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    developmentModeForBuild: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-features-legacy-decorator-file-order.md b/docs/_snippets/main-config-features-legacy-decorator-file-order.md
index f44c53f53220..b6ab9f01b130 100644
--- a/docs/_snippets/main-config-features-legacy-decorator-file-order.md
+++ b/docs/_snippets/main-config-features-legacy-decorator-file-order.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    legacyDecoratorFileOrder: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    legacyDecoratorFileOrder: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-features-viewport-story-globals.md b/docs/_snippets/main-config-features-viewport-story-globals.md
index d3693fd068b3..b30246c87646 100644
--- a/docs/_snippets/main-config-features-viewport-story-globals.md
+++ b/docs/_snippets/main-config-features-viewport-story-globals.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    viewportStoryGlobals: true,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    viewportStoryGlobals: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-framework.md b/docs/_snippets/main-config-framework.md
index b2701eeb52a2..b7e5a6daab19 100644
--- a/docs/_snippets/main-config-framework.md
+++ b/docs/_snippets/main-config-framework.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TOOD: VET this example for the webpack-based frameworks and adjust it for other frameworks -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     // Replace react-vite with the framework you are using (e.g., react-webpack5)
@@ -11,7 +13,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/react-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      legacyRootApi: true,
+    },
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace react-vite with the framework you are using (e.g., react-webpack5)
 import type { StorybookConfig } from '@storybook/react-vite';
 
@@ -27,3 +44,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/react-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      legacyRootApi: true,
+    },
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
diff --git a/docs/_snippets/main-config-indexers-jsonstories.md b/docs/_snippets/main-config-indexers-jsonstories.md
index 5d7ab1fba17d..ce7723b59784 100644
--- a/docs/_snippets/main-config-indexers-jsonstories.md
+++ b/docs/_snippets/main-config-indexers-jsonstories.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import fs from 'fs/promises';
 
 const jsonStoriesIndexer = {
@@ -30,8 +30,41 @@ const config = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts-4-9"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import fs from 'fs/promises';
+
+const jsonStoriesIndexer = {
+  test: /stories\.json$/,
+  createIndex: async (fileName) => {
+    const content = JSON.parse(fs.readFileSync(fileName));
+
+    const stories = generateStoryIndexesFromJson(content);
+
+    return stories.map((story) => ({
+      type: 'story',
+      importPath: `virtual:jsonstories--${fileName}--${story.componentName}`,
+      exportName: story.name,
+    }));
+  },
+};
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // 👇 Make sure files to index are included in `stories`
+    '../src/**/*.stories.json',
+  ],
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 import type { Indexer } from '@storybook/types';
 
@@ -66,10 +99,10 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import type { Indexer } from '@storybook/types';
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
 
 import fs from 'fs/promises';
 
@@ -88,7 +121,7 @@ const jsonStoriesIndexer: Indexer = {
   },
 };
 
-const config: StorybookConfig = {
+export default defineMain({
   framework: '@storybook/your-framework',
   stories: [
     '../src/**/*.mdx',
@@ -97,7 +130,5 @@ const config: StorybookConfig = {
     '../src/**/*.stories.json',
   ],
   experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer],
-};
-
-export default config;
+});
 ```
diff --git a/docs/_snippets/main-config-indexers-title.md b/docs/_snippets/main-config-indexers-title.md
index 8e8fae33544d..1d09b93a9163 100644
--- a/docs/_snippets/main-config-indexers-title.md
+++ b/docs/_snippets/main-config-indexers-title.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.ts" renderer="common" language="js"
+<!-- TODO: Vet this code example -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 const combosIndexer = {
   test: /\.stories\.[tj]sx?$/,
   createIndex: async (fileName, { makeTitle }) => {
@@ -28,8 +30,39 @@ const config = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts-4-9"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+const combosIndexer = {
+  test: /\.stories\.[tj]sx?$/,
+  createIndex: async (fileName, { makeTitle }) => {
+    // 👇 Grab title from fileName
+    const title = fileName.match(/\/(.*)\.stories/)[1];
+
+    // Read file and generate entries ...
+    let entries = [];
+    // Read file and generate entries...
+
+    return entries.map((entry) => ({
+      type: 'story',
+      // 👇 Use makeTitle to format the title
+      title: `${makeTitle(title)} Custom`,
+      importPath: fileName,
+      exportName: entry.name,
+    }));
+  },
+};
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 import type { Indexer } from '@storybook/types';
 
@@ -61,10 +94,10 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import type { Indexer } from '@storybook/types';
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
 
 const combosIndexer: Indexer = {
   test: /\.stories\.[tj]sx?$/,
@@ -85,11 +118,9 @@ const combosIndexer: Indexer = {
   },
 };
 
-const config: StorybookConfig = {
+export default defineMain({
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
-};
-
-export default config;
+});
 ```
diff --git a/docs/_snippets/main-config-indexers.md b/docs/_snippets/main-config-indexers.md
index e2107958d2ea..d41715bdd476 100644
--- a/docs/_snippets/main-config-indexers.md
+++ b/docs/_snippets/main-config-indexers.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: [
     '../src/**/*.mdx',
@@ -20,11 +20,11 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts-4-9"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
 
-const config: StorybookConfig = {
+export default defineMain({
   framework: '@storybook/your-framework',
   stories: [
     '../src/**/*.mdx',
@@ -41,13 +41,11 @@ const config: StorybookConfig = {
     };
     return [...existingIndexers, customIndexer];
   },
-};
-
-export default config;
+});
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -71,3 +69,27 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // 👇 Make sure files to index are included in `stories`
+    '../src/**/*.custom-stories.@(js|jsx|ts|tsx)',
+  ],
+  experimental_indexers: async (existingIndexers) => {
+    const customIndexer = {
+      test: /\.custom-stories\.[tj]sx?$/,
+      createIndex: async (fileName) => {
+        // See API and examples below...
+      },
+    };
+    return [...existingIndexers, customIndexer];
+  },
+});
+```
diff --git a/docs/_snippets/main-config-log-level.md b/docs/_snippets/main-config-log-level.md
index 2d57e78eb994..831a0c0dd023 100644
--- a/docs/_snippets/main-config-log-level.md
+++ b/docs/_snippets/main-config-log-level.md
@@ -1,14 +1,25 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   logLevel: 'debug',
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  logLevel: 'debug',
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -19,3 +30,14 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  logLevel: 'debug',
+});
+```
diff --git a/docs/_snippets/main-config-manager-head.md b/docs/_snippets/main-config-manager-head.md
index 363e168040a8..8a7e22cf858c 100644
--- a/docs/_snippets/main-config-manager-head.md
+++ b/docs/_snippets/main-config-manager-head.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   managerHead: (head) => `
@@ -10,8 +10,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  managerHead: (head) => `
+    ${head}
+    <link rel="preload" href="/fonts/my-custom-manager-font.woff2" />
+  `,
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -25,3 +39,17 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  managerHead: (head) => `
+    ${head}
+    <link rel="preload" href="/fonts/my-custom-manager-font.woff2" />
+  `,
+});
+```
diff --git a/docs/_snippets/main-config-preview-body.md b/docs/_snippets/main-config-preview-body.md
index 0f8c36d65ebe..c53e8176e390 100644
--- a/docs/_snippets/main-config-preview-body.md
+++ b/docs/_snippets/main-config-preview-body.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   previewBody: (body) => `
@@ -12,8 +12,24 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -29,3 +45,19 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
diff --git a/docs/_snippets/main-config-preview-head.md b/docs/_snippets/main-config-preview-head.md
index c892c84164af..ce5467b26c66 100644
--- a/docs/_snippets/main-config-preview-head.md
+++ b/docs/_snippets/main-config-preview-head.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   previewHead: (head) => `
@@ -12,8 +12,24 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  previewHead: (head) => `
+    ${head}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -29,3 +45,19 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  previewHead: (head) => `
+    ${head}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
diff --git a/docs/_snippets/main-config-preview.md b/docs/_snippets/main-config-preview.md
index 2e849eabd534..110c231ace5f 100644
--- a/docs/_snippets/main-config-preview.md
+++ b/docs/_snippets/main-config-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="body"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="body (CSF 3)"
 export default {
   previewBody: (body) => `
     ${body}
@@ -9,8 +9,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="body"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="body (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="body (CSF 3)"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -25,7 +39,21 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="head"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="body (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+});
+```
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="head (CSF 3)"
 export default {
   previewHead: (head) => `
     ${head}
@@ -38,8 +66,24 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="head"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="head (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        background: #827979;
+      }
+    </style>
+ `,
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="head (CSF 3)"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -55,3 +99,19 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="head (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        background: #827979;
+      }
+    </style>
+ `,
+});
+```
diff --git a/docs/_snippets/main-config-refs-disable.md b/docs/_snippets/main-config-refs-disable.md
index 40d9830d9943..1145c737f374 100644
--- a/docs/_snippets/main-config-refs-disable.md
+++ b/docs/_snippets/main-config-refs-disable.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   refs: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'package-name': { disable: true },
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'package-name': { disable: true },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-refs-with-function.md b/docs/_snippets/main-config-refs-with-function.md
index b94608356b25..da43dde1bb28 100644
--- a/docs/_snippets/main-config-refs-with-function.md
+++ b/docs/_snippets/main-config-refs-with-function.md
@@ -1,9 +1,8 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-
   // 👇 Retrieve the current environment from the configType argument
   refs: (config, { configType }) => {
     if (configType === 'DEVELOPMENT') {
@@ -32,14 +31,48 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // 👇 Retrieve the current environment from the configType argument
+  refs: (config, { configType }) => {
+    if (configType === 'DEVELOPMENT') {
+      return {
+        react: {
+          title: 'Composed React Storybook running in development mode',
+          url: 'http://localhost:7007',
+        },
+        angular: {
+          title: 'Composed Angular Storybook running in development mode',
+          url: 'http://localhost:7008',
+        },
+      };
+    }
+    return {
+      react: {
+        title: 'Composed React Storybook running in production',
+        url: 'https://your-production-react-storybook-url',
+      },
+      angular: {
+        title: 'Composed Angular Storybook running in production',
+        url: 'https://your-production-angular-storybook-url',
+      },
+    };
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-
   // 👇 Retrieve the current environment from the configType argument
   refs: (config, { configType }) => {
     if (configType === 'DEVELOPMENT') {
@@ -69,3 +102,38 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // 👇 Retrieve the current environment from the configType argument
+  refs: (config, { configType }) => {
+    if (configType === 'DEVELOPMENT') {
+      return {
+        react: {
+          title: 'Composed React Storybook running in development mode',
+          url: 'http://localhost:7007',
+        },
+        angular: {
+          title: 'Composed Angular Storybook running in development mode',
+          url: 'http://localhost:7008',
+        },
+      };
+    }
+    return {
+      react: {
+        title: 'Composed React Storybook running in production',
+        url: 'https://your-production-react-storybook-url',
+      },
+      angular: {
+        title: 'Composed Angular Storybook running in production',
+        url: 'https://your-production-angular-storybook-url',
+      },
+    };
+  },
+});
+```
diff --git a/docs/_snippets/main-config-refs.md b/docs/_snippets/main-config-refs.md
index 2e477f4b7a43..fd9e6ce7263f 100644
--- a/docs/_snippets/main-config-refs.md
+++ b/docs/_snippets/main-config-refs.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   refs: {
@@ -14,8 +14,26 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'design-system': {
+      title: 'Storybook Design System',
+      url: 'https://master--5ccbc373887ca40020446347.chromatic.com/',
+      expanded: false, // Optional, true by default
+      sourceUrl: 'https://github.com/storybookjs/storybook', // Optional
+    },
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -33,3 +51,21 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    'design-system': {
+      title: 'Storybook Design System',
+      url: 'https://master--5ccbc373887ca40020446347.chromatic.com/',
+      expanded: false, // Optional, true by default,
+      sourceUrl: 'https://github.com/storybookjs/storybook', // Optional
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-static-dirs-with-object.md b/docs/_snippets/main-config-static-dirs-with-object.md
index ae6e78369d91..f5e838b785e4 100644
--- a/docs/_snippets/main-config-static-dirs-with-object.md
+++ b/docs/_snippets/main-config-static-dirs-with-object.md
@@ -1,14 +1,25 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -19,3 +30,14 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
+});
+```
diff --git a/docs/_snippets/main-config-static-dirs.md b/docs/_snippets/main-config-static-dirs.md
index c4537d4f0e82..215d44563f49 100644
--- a/docs/_snippets/main-config-static-dirs.md
+++ b/docs/_snippets/main-config-static-dirs.md
@@ -1,14 +1,25 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: ['../public', '../static'],
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../public', '../static'],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -19,3 +30,14 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../public', '../static'],
+});
+```
diff --git a/docs/_snippets/main-config-stories-ordered.md b/docs/_snippets/main-config-stories-ordered.md
index 972589b0ab42..9c58c04cb44f 100644
--- a/docs/_snippets/main-config-stories-ordered.md
+++ b/docs/_snippets/main-config-stories-ordered.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: [
     '../src/**/*.mdx', // 👈 These will display first in the sidebar
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    '../src/**/*.mdx', // 👈 These will display first in the sidebar
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', // 👈 Followed by these
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -20,3 +33,13 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework', // 👈 These will display first in the sidebar
+  stories: ['../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 2baa4ceb91a1..4054c9b98558 100644
--- a/docs/_snippets/main-config-stories-with-logic.md
+++ b/docs/_snippets/main-config-stories-with-logic.md
@@ -1,10 +1,10 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 async function findStories() {
   // your custom logic returns a list of files
 }
 
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: async (list) => [
     ...list,
@@ -14,8 +14,26 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+async function findStories() {
+  // your custom logic returns a list of files
+}
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: async (list) => [
+    ...list,
+    // 👇 Add your found stories to the existing list of story files
+    ...(await findStories()),
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 import type { StoriesEntry } from '@storybook/types';
 
@@ -34,3 +52,23 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import type { StoriesEntry } from '@storybook/types';
+
+import { defineMain } from '@storybook/your-framework/node';
+
+async function findStories(): Promise<StoriesEntry[]> {
+  // your custom logic returns a list of files
+}
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: async (list: StoriesEntry[]) => [
+    ...list,
+    // 👇 Add your found stories to the existing list of story files
+    ...(await findStories()),
+  ],
+});
+```
diff --git a/docs/_snippets/main-config-stories-with-object.md b/docs/_snippets/main-config-stories-with-object.md
index a08c476c79c0..140c81543993 100644
--- a/docs/_snippets/main-config-stories-with-object.md
+++ b/docs/_snippets/main-config-stories-with-object.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: [
     {
@@ -15,8 +15,27 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    {
+      // 👇 Sets the directory containing your stories
+      directory: '../packages/components',
+      // 👇 Storybook will load all files that match this glob
+      files: '*.stories.*',
+      // 👇 Used when generating automatic titles for your stories
+      titlePrefix: 'MyComponents',
+    },
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -35,3 +54,22 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    {
+      // 👇 Sets the directory containing your stories
+      directory: '../packages/components',
+      // 👇 Storybook will load all files that match this glob
+      files: '*.stories.*',
+      // 👇 Used when generating automatic titles for your stories
+      titlePrefix: 'MyComponents',
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/main-config-stories.md b/docs/_snippets/main-config-stories.md
index 2d04f3a74d6f..b45f97d06006 100644
--- a/docs/_snippets/main-config-stories.md
+++ b/docs/_snippets/main-config-stories.md
@@ -1,13 +1,23 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -17,3 +27,13 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+});
+```
diff --git a/docs/_snippets/main-config-svelte-csf-register.md b/docs/_snippets/main-config-svelte-csf-register.md
index 7676d4f05ec2..1b274438cfab 100644
--- a/docs/_snippets/main-config-svelte-csf-register.md
+++ b/docs/_snippets/main-config-svelte-csf-register.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="svelte" language="js"
 export default {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
diff --git a/docs/_snippets/main-config-swc-jsx-transform.md b/docs/_snippets/main-config-swc-jsx-transform.md
index f942eee4e7fc..c30b36a3f62d 100644
--- a/docs/_snippets/main-config-swc-jsx-transform.md
+++ b/docs/_snippets/main-config-swc-jsx-transform.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     name: '@storybook/your-framework',
@@ -16,7 +18,28 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {},
+  },
+  swc: (config, options) => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -38,3 +61,24 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {},
+  },
+  swc: (config, options) => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+});
+```
diff --git a/docs/_snippets/main-config-swc.md b/docs/_snippets/main-config-swc.md
index 670bdb51b922..d09a59c4c6e5 100644
--- a/docs/_snippets/main-config-swc.md
+++ b/docs/_snippets/main-config-swc.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     name: '@storybook/your-framework',
@@ -13,7 +15,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 import type { Options } from '@swc/core';
 // Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
 import type { StorybookConfig } from '@storybook/your-framework';
@@ -33,3 +35,41 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import type { Options } from '@swc/core';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {},
+  },
+  swc: (config: Options, options): Options => {
+    return {
+      ...config,
+      // Apply your custom SWC configuration
+    };
+  },
+});
+```
+
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {},
+  },
+  swc: (config, options) => {
+    return {
+      ...config,
+      // Apply your custom SWC configuration
+    };
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-autodocs.md b/docs/_snippets/main-config-test-disable-autodocs.md
index dab7b1ffb3cf..c023bb6bf20d 100644
--- a/docs/_snippets/main-config-test-disable-autodocs.md
+++ b/docs/_snippets/main-config-test-disable-autodocs.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   build: {
@@ -11,8 +11,8 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -27,3 +27,33 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableAutoDocs: false,
+    },
+  },
+});
+```
+
+```js 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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableAutoDocs: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-blocks.md b/docs/_snippets/main-config-test-disable-blocks.md
index d48c5e54c19a..68c2530fcb4a 100644
--- a/docs/_snippets/main-config-test-disable-blocks.md
+++ b/docs/_snippets/main-config-test-disable-blocks.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   build: {
@@ -11,8 +11,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableBlocks: false,
+    },
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -27,3 +42,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableBlocks: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-disableaddons.md b/docs/_snippets/main-config-test-disable-disableaddons.md
index 09f449b185b0..29f2e5e216fe 100644
--- a/docs/_snippets/main-config-test-disable-disableaddons.md
+++ b/docs/_snippets/main-config-test-disable-disableaddons.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'],
@@ -12,8 +12,24 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'],
+  build: {
+    test: {
+      disabledAddons: ['@storybook/addon-a11y'],
+    },
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -29,3 +45,19 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'],
+  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 029bece1e6fd..da382c1eeebc 100644
--- a/docs/_snippets/main-config-test-disable-docgen.md
+++ b/docs/_snippets/main-config-test-disable-docgen.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   build: {
@@ -11,8 +11,8 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -27,3 +27,33 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableDocgen: false,
+    },
+  },
+});
+```
+
+```js 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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableDocgen: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-mdx.md b/docs/_snippets/main-config-test-disable-mdx.md
index 013a85ee6af3..d1206d765494 100644
--- a/docs/_snippets/main-config-test-disable-mdx.md
+++ b/docs/_snippets/main-config-test-disable-mdx.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   build: {
@@ -11,8 +11,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableMDXEntries: false,
+    },
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -27,3 +42,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableMDXEntries: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-sourcemaps.md b/docs/_snippets/main-config-test-disable-sourcemaps.md
index 42da44e8fce8..74c9eca96f59 100644
--- a/docs/_snippets/main-config-test-disable-sourcemaps.md
+++ b/docs/_snippets/main-config-test-disable-sourcemaps.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   build: {
@@ -11,8 +11,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableSourcemaps: false,
+    },
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -27,3 +42,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableSourcemaps: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-test-disable-treeshaking.md b/docs/_snippets/main-config-test-disable-treeshaking.md
index a328ce28de7c..6fa50bbf6d98 100644
--- a/docs/_snippets/main-config-test-disable-treeshaking.md
+++ b/docs/_snippets/main-config-test-disable-treeshaking.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   build: {
@@ -11,8 +11,8 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -27,3 +27,33 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableTreeShaking: false,
+    },
+  },
+});
+```
+
+```js 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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  build: {
+    test: {
+      disableTreeShaking: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-check-options.md b/docs/_snippets/main-config-typescript-check-options.md
index 2850a3fb2f40..da10edf448fb 100644
--- a/docs/_snippets/main-config-typescript-check-options.md
+++ b/docs/_snippets/main-config-typescript-check-options.md
@@ -1,4 +1,6 @@
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-webpack5)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -15,3 +17,19 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: true,
+    checkOptions: {
+      eslint: true,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-check.md b/docs/_snippets/main-config-typescript-check.md
index a1ef1bcec0af..cbbf5911ade6 100644
--- a/docs/_snippets/main-config-typescript-check.md
+++ b/docs/_snippets/main-config-typescript-check.md
@@ -1,4 +1,6 @@
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-webpack5)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -12,3 +14,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md b/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
index 57310d35a370..de71d0a25c2b 100644
--- a/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
+++ b/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -17,3 +17,21 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      // 👇 Default prop filter, which excludes props from node_modules
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-react-docgen.md b/docs/_snippets/main-config-typescript-react-docgen.md
index 94a73916a1ff..b8ae0d8c710a 100644
--- a/docs/_snippets/main-config-typescript-react-docgen.md
+++ b/docs/_snippets/main-config-typescript-react-docgen.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -12,3 +12,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen',
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typescript-skip-compiler.md b/docs/_snippets/main-config-typescript-skip-compiler.md
index 57a0f21c359c..ae553684489d 100644
--- a/docs/_snippets/main-config-typescript-skip-compiler.md
+++ b/docs/_snippets/main-config-typescript-skip-compiler.md
@@ -1,4 +1,6 @@
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -12,3 +14,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    skipCompiler: true,
+  },
+});
+```
diff --git a/docs/_snippets/main-config-typical.md b/docs/_snippets/main-config-typical.md
index eb2230a71ba7..ef1936801dbf 100644
--- a/docs/_snippets/main-config-typical.md
+++ b/docs/_snippets/main-config-typical.md
@@ -1,7 +1,7 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 const config = {
   // Required
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   // Optional
@@ -14,8 +14,25 @@ const config = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Required
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // Optional
+  addons: ['@storybook/addon-essentials'],
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -32,3 +49,20 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Required
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // Optional
+  addons: ['@storybook/addon-essentials'],
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+});
+```
diff --git a/docs/_snippets/main-config-vite-final-env.md b/docs/_snippets/main-config-vite-final-env.md
index eaaed64eeef2..cb6c6498e81b 100644
--- a/docs/_snippets/main-config-vite-final-env.md
+++ b/docs/_snippets/main-config-vite-final-env.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+<!-- TODO: Vet this example for CSF Next support-->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -19,3 +21,80 @@ export default {
   },
 };
 ```
+
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  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="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return mergeConfig(config, {
+      // Your environment configuration here
+    });
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return mergeConfig(config, {
+      // Your environment configuration here
+    });
+  },
+});
+```
diff --git a/docs/_snippets/main-config-vite-final.md b/docs/_snippets/main-config-vite-final.md
index a6a1d2fd79f1..09fb608c8e4d 100644
--- a/docs/_snippets/main-config-vite-final.md
+++ b/docs/_snippets/main-config-vite-final.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
@@ -19,12 +19,11 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts-4-9"
-// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
 
-const config: StorybookConfig = {
-  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
+export default defineMain({
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config, { configType }) {
@@ -40,12 +39,10 @@ const config: StorybookConfig = {
       // Your environment configuration here
     });
   },
-};
-
-export default config;
+});
 ```
 
-```js filename=".storybook/main.ts" renderer="common" language="ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -69,3 +66,26 @@ const config = {
 
 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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return mergeConfig(config, {
+      // Your environment configuration here
+    });
+  },
+});
+```
diff --git a/docs/_snippets/main-config-webpack-final.md b/docs/_snippets/main-config-webpack-final.md
index 0d0c8b5e463c..f123ba3e470e 100644
--- a/docs/_snippets/main-config-webpack-final.md
+++ b/docs/_snippets/main-config-webpack-final.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -15,7 +17,26 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config, { configType }) => {
+    if (configType === 'DEVELOPMENT') {
+      // Modify config for development
+    }
+    if (configType === 'PRODUCTION') {
+      // Modify config for production
+    }
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -35,3 +56,22 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config, { configType }) => {
+    if (configType === 'DEVELOPMENT') {
+      // Modify config for development
+    }
+    if (configType === 'PRODUCTION') {
+      // Modify config for production
+    }
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/mock-context-container-global.md b/docs/_snippets/mock-context-container-global.md
index 447d1cd44b84..edf0baafc3d0 100644
--- a/docs/_snippets/mock-context-container-global.md
+++ b/docs/_snippets/mock-context-container-global.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="react" language="js"
+<!-- TODO: Vet this example for CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 import { normal as NavigationNormal } from '../components/Navigation.stories';
@@ -18,7 +20,30 @@ const AppDecorator = (storyFn) => {
 export default { decorators: [AppDecorator] };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="react" language="ts"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { normal as NavigationNormal } from '../components/Navigation.stories';
+import GlobalContainerContext from '../components/lib/GlobalContainerContext';
+
+const context = {
+  NavigationContainer: NavigationNormal,
+};
+
+const AppDecorator = (storyFn) => {
+  return (
+    <GlobalContainerContext.Provider value={context}>{storyFn()}</GlobalContainerContext.Provider>
+  );
+};
+
+export default definePreview({
+  decorators: [AppDecorator],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
 // Replace your-framework with the framework you are using (e.g., react, vue3)
@@ -45,6 +70,30 @@ const preview: Preview = {
 export default preview;
 ```
 
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { normal as NavigationNormal } from '../components/Navigation.stories';
+
+import GlobalContainerContext from '../components/lib/GlobalContainerContext';
+
+const context = {
+  NavigationContainer: NavigationNormal,
+};
+
+const AppDecorator = (storyFn) => {
+  return (
+    <GlobalContainerContext.Provider value={context}>{storyFn()}</GlobalContainerContext.Provider>
+  );
+};
+
+export default definePreview({
+  decorators: [AppDecorator],
+});
+```
+
 ```js filename=".storybook/preview.js" renderer="solid" language="js"
 import { normal as NavigationNormal } from '../components/Navigation.stories';
 
diff --git a/docs/_snippets/mock-provider-in-preview.md b/docs/_snippets/mock-provider-in-preview.md
index 31c0a23c9b91..609795435d7d 100644
--- a/docs/_snippets/mock-provider-in-preview.md
+++ b/docs/_snippets/mock-provider-in-preview.md
@@ -1,4 +1,4 @@
-```jsx filename=".storybook/preview.jsx" renderer="react" language="js"
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 import { ThemeProvider } from 'styled-components';
@@ -22,10 +22,38 @@ export default {
 };
 ```
 
-```tsx filename=".storybook/preview.tsx" renderer="react" language="ts"
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ThemeProvider } from 'styled-components';
+
+// themes = { light, dark }
+import * as themes from '../src/themes';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading the theme value from parameters
+      const { theme = 'light' } = parameters;
+      return (
+        <ThemeProvider theme={themes[theme]}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
 import type { Preview } from '@storybook/react';
+
 import { ThemeProvider } from 'styled-components';
 
 // themes = { light, dark }
@@ -48,3 +76,30 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ThemeProvider } from 'styled-components';
+
+// themes = { light, dark }
+import * as themes from '../src/themes';
+
+export default definePreview({
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading the theme value from parameters
+      const { theme = 'light' } = parameters;
+      return (
+        <ThemeProvider theme={themes[theme]}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/module-aliases-config.md b/docs/_snippets/module-aliases-config.md
index 097285e63efd..0d16465413c2 100644
--- a/docs/_snippets/module-aliases-config.md
+++ b/docs/_snippets/module-aliases-config.md
@@ -1,6 +1,8 @@
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="vite"
+<!-- TODO: Vet this example for CSF Next support-->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="Vite (CSF 3)"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   viteFinal: async (config) => {
@@ -16,14 +18,38 @@ export default {
         '@/lib/db': path.resolve(__dirname, './lib/db.mock.ts'),
       };
     }
-
     return config;
   },
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="vite"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="Vite (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  viteFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve?.alias,
+        // 👇 External module
+        lodash: require.resolve('./lodash.mock'),
+        // 👇 Internal modules
+        '@/api': path.resolve(__dirname, './api.mock.ts'),
+        '@/app/actions': path.resolve(__dirname, './app/actions.mock.ts'),
+        '@/lib/session': path.resolve(__dirname, './lib/session.mock.ts'),
+        '@/lib/db': path.resolve(__dirname, './lib/db.mock.ts'),
+      };
+    }
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="Vite (CSF 3)"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -42,7 +68,6 @@ const config: StorybookConfig = {
         '@/lib/db': path.resolve(__dirname, './lib/db.mock.ts'),
       };
     }
-
     return config;
   },
 };
@@ -50,9 +75,34 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="webpack"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="Vite (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  viteFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve?.alias,
+        // 👇 External module
+        lodash: require.resolve('./lodash.mock'),
+        // 👇 Internal modules
+        '@/api': path.resolve(__dirname, './api.mock.ts'),
+        '@/app/actions': path.resolve(__dirname, './app/actions.mock.ts'),
+        '@/lib/session': path.resolve(__dirname, './lib/session.mock.ts'),
+        '@/lib/db': path.resolve(__dirname, './lib/db.mock.ts'),
+      };
+    }
+    return config;
+  },
+});
+```
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="Webpack (CSF 3)"
 export default {
-  // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., nextjs, react-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   webpackFinal: async (config) => {
@@ -68,14 +118,39 @@ export default {
         '@/lib/db$': path.resolve(__dirname, './lib/db.mock.ts'),
       };
     }
-
     return config;
   },
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="webpack"
-// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="Webpack (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        // 👇 External module
+        lodash: require.resolve('./lodash.mock'),
+        // 👇 Internal modules
+        '@/api$': path.resolve(__dirname, './api.mock.ts'),
+        '@/app/actions$': path.resolve(__dirname, './app/actions.mock.ts'),
+        '@/lib/session$': path.resolve(__dirname, './lib/session.mock.ts'),
+        '@/lib/db$': path.resolve(__dirname, './lib/db.mock.ts'),
+      };
+    }
+
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="Webpack (CSF 3)"
+// Replace your-framework with the framework you are using (e.g., nextjs, react-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -94,10 +169,35 @@ const config: StorybookConfig = {
         '@/lib/db$': path.resolve(__dirname, './lib/db.mock.ts'),
       };
     }
-
     return config;
   },
 };
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="Webpack (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        // 👇 External module
+        lodash: require.resolve('./lodash.mock'),
+        // 👇 Internal modules
+        '@/api$': path.resolve(__dirname, './api.mock.ts'),
+        '@/app/actions$': path.resolve(__dirname, './app/actions.mock.ts'),
+        '@/lib/session$': path.resolve(__dirname, './lib/session.mock.ts'),
+        '@/lib/db$': path.resolve(__dirname, './lib/db.mock.ts'),
+      };
+    }
+
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/msw-addon-configure-handlers-graphql.md b/docs/_snippets/msw-addon-configure-handlers-graphql.md
index 8d41807db3f2..183660db2159 100644
--- a/docs/_snippets/msw-addon-configure-handlers-graphql.md
+++ b/docs/_snippets/msw-addon-configure-handlers-graphql.md
@@ -1,9 +1,11 @@
 ```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { 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';
@@ -128,8 +130,9 @@ export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
 export class MockGraphQLModule {}
 ```
 
-```js filename="YourPage.stories.js|jsx" renderer="react" language="js"
+```js filename="YourPage.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+
 import { graphql, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage';
@@ -223,10 +226,111 @@ export const MockedError = {
 };
 ```
 
-```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="YourPage.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+
+import { graphql, HttpResponse, delay } from 'msw';
+
+import { DocumentScreen } from './YourPage';
+
+const mockedClient = new ApolloClient({
+  uri: 'https://your-graphql-endpoint',
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+    query: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+  },
+});
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const meta = preview.meta({
+  component: DocumentScreen,
+
+  decorators: [
+    (Story) => (
+      <ApolloProvider client={mockedClient}>
+        <Story />
+      </ApolloProvider>
+    ),
+  ],
+});
+
+export const MockedSuccess = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', () => {
+          return HttpResponse.json({
+            data: {
+              allInfo: {
+                ...TestData,
+              },
+            },
+          });
+        }),
+      ],
+    },
+  },
+});
+
+export const MockedError = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', async () => {
+          await delay(800);
+          return HttpResponse.json({
+            errors: [
+              {
+                message: 'Access denied',
+              },
+            ],
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
+```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+
 import { graphql, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage';
@@ -322,10 +426,109 @@ export const MockedError: Story = {
 };
 ```
 
-```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+
+import { graphql, HttpResponse, delay } from 'msw';
+
+import { DocumentScreen } from './YourPage';
+
+const mockedClient = new ApolloClient({
+  uri: 'https://your-graphql-endpoint',
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+    query: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+  },
+});
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+const meta = preview.meta({
+  component: DocumentScreen,
+  decorators: [
+    (Story) => (
+      <ApolloProvider client={mockedClient}>
+        <Story />
+      </ApolloProvider>
+    ),
+  ],
+});
+
+export const MockedSuccess = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', () => {
+          return HttpResponse.json({
+            data: {
+              allInfo: {
+                ...TestData,
+              },
+            },
+          });
+        }),
+      ],
+    },
+  },
+});
+
+export const MockedError = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', async () => {
+          await delay(800);
+          return HttpResponse.json({
+            errors: [
+              {
+                message: 'Access denied',
+              },
+            ],
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
+```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+
 import { graphql, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage';
@@ -421,6 +624,104 @@ export const MockedError: Story = {
 };
 ```
 
+```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+
+import { graphql, HttpResponse, delay } from 'msw';
+
+import { DocumentScreen } from './YourPage';
+
+const mockedClient = new ApolloClient({
+  uri: 'https://your-graphql-endpoint',
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+    query: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+  },
+});
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+const meta = preview.meta({
+  component: DocumentScreen,
+  decorators: [
+    (Story) => (
+      <ApolloProvider client={mockedClient}>
+        <Story />
+      </ApolloProvider>
+    ),
+  ],
+});
+
+export const MockedSuccess = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', () => {
+          return HttpResponse.json({
+            data: {
+              allInfo: {
+                ...TestData,
+              },
+            },
+          });
+        }),
+      ],
+    },
+  },
+});
+
+export const MockedError = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('AllInfoQuery', async () => {
+          await delay(800);
+          return HttpResponse.json({
+            errors: [
+              {
+                message: 'Access denied',
+              },
+            ],
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
 ```js filename="YourPage.stories.js" renderer="svelte" language="js" tabTitle="story"
 import { graphql, HttpResponse, delay } from 'msw';
 
diff --git a/docs/_snippets/msw-addon-configure-handlers-http.md b/docs/_snippets/msw-addon-configure-handlers-http.md
index 9065d22fe3d6..52d40d3a6d37 100644
--- a/docs/_snippets/msw-addon-configure-handlers-http.md
+++ b/docs/_snippets/msw-addon-configure-handlers-http.md
@@ -65,7 +65,7 @@ export const MockedError: Story = {
 };
 ```
 
-```js filename="YourPage.stories.js|jsx" renderer="common" language="js"
+```js filename="YourPage.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { http, HttpResponse, delay } from 'msw';
 
 import { DocumentScreen } from './YourPage';
@@ -127,7 +127,72 @@ export const MockedError = {
 };
 ```
 
-```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="YourPage.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { http, HttpResponse, delay } from 'msw';
+
+import { DocumentScreen } from './YourPage';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+});
+
+// 👇 The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+export const MockedSuccess = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint/', () => {
+          return HttpResponse.json(TestData);
+        }),
+      ],
+    },
+  },
+});
+
+export const MockedError = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint', async () => {
+          await delay(800);
+          return new HttpResponse(null, {
+            status: 403,
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
+```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework (e.g. nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -195,7 +260,72 @@ export const MockedError: Story = {
 };
 ```
 
-```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { http, HttpResponse, delay } from 'msw';
+
+import { MyComponent } from './MyComponent';
+
+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,
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
+```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework (e.g. nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -263,6 +393,71 @@ export const MockedError: Story = {
 };
 ```
 
+```ts filename="YourPage.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { http, HttpResponse, delay } from 'msw';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+});
+
+// 👇 The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+export const MockedSuccess = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint/', () => {
+          return HttpResponse.json(TestData);
+        }),
+      ],
+    },
+  },
+});
+
+export const MockedError = meta.story({
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint', async () => {
+          await delay(800);
+          return new HttpResponse(null, {
+            status: 403,
+          });
+        }),
+      ],
+    },
+  },
+});
+```
+
 ```js filename="YourPage.stories.js" renderer="web-components" language="js"
 import { http, HttpResponse, delay } from 'msw';
 
diff --git a/docs/_snippets/msw-addon-initialize.md b/docs/_snippets/msw-addon-initialize.md
index af8abd264fd0..f2cee194d130 100644
--- a/docs/_snippets/msw-addon-initialize.md
+++ b/docs/_snippets/msw-addon-initialize.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { initialize, mswLoader } from 'msw-storybook-addon';
 
 /*
@@ -14,7 +16,26 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the name of your framework (e.g., react, nextjs, experimental-nextjs)
+import { definePreview } from '@storybook/your-framework';
+
+import { initialize, mswLoader } from 'msw-storybook-addon';
+
+/*
+ * Initializes MSW
+ * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ * to learn how to customize it
+ */
+initialize();
+
+export default definePreview({
+  // ... rest of preview configuration
+  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue, etc.)
 import { Preview } from '@storybook/your-renderer';
 
@@ -34,3 +55,22 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the name of your framework (e.g., react, nextjs, experimental-nextjs)
+import { definePreview } from '@storybook/your-framework';
+
+import { initialize, mswLoader } from 'msw-storybook-addon';
+
+/*
+ * Initializes MSW
+ * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ * to learn how to customize it
+ */
+initialize();
+
+export default definePreview({
+  // ... rest of preview configuration
+  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
+});
+```
diff --git a/docs/_snippets/my-component-disable-toc.md b/docs/_snippets/my-component-disable-toc.md
index a9f684807f7c..b0e5aac0b187 100644
--- a/docs/_snippets/my-component-disable-toc.md
+++ b/docs/_snippets/my-component-disable-toc.md
@@ -54,7 +54,7 @@ export default {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="common" language="js"
+```js filename="MyComponent.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -70,6 +70,25 @@ export default {
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -110,7 +129,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -131,6 +150,25 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -171,7 +209,7 @@ const meta: Meta<typeof MyComponent> = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -192,6 +230,25 @@ const meta: Meta<typeof MyComponent> = {
 export default meta;
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'my-component',
diff --git a/docs/_snippets/my-component-env-var-config.md b/docs/_snippets/my-component-env-var-config.md
index d5e9bcb77e11..8b03613ccca4 100644
--- a/docs/_snippets/my-component-env-var-config.md
+++ b/docs/_snippets/my-component-env-var-config.md
@@ -18,7 +18,7 @@ export const Default: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -32,7 +32,24 @@ export const Default = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Default = meta.story({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -52,7 +69,24 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Default = meta.story({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -72,6 +106,23 @@ export const Default: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Default = meta.story({
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'my-component',
diff --git a/docs/_snippets/my-component-play-function-alt-queries.md b/docs/_snippets/my-component-play-function-alt-queries.md
index 4145c3cd2acc..0fd48c79940e 100644
--- a/docs/_snippets/my-component-play-function-alt-queries.md
+++ b/docs/_snippets/my-component-play-function-alt-queries.md
@@ -75,7 +75,7 @@ export const ExampleWithRole = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { userEvent, within } from '@storybook/test';
 
 import { MyComponent } from './MyComponent';
@@ -97,6 +97,31 @@ export const ExampleWithRole = {
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleWithRole = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 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', { name: / button label/i }));
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -151,7 +176,7 @@ export const ExampleWithRole: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -179,6 +204,31 @@ export const ExampleWithRole: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleWithRole = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 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', { name: / button label/i }));
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -233,7 +283,7 @@ export const ExampleWithRole: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -261,6 +311,31 @@ export const ExampleWithRole: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleWithRole = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 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', { name: / button label/i }));
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 import { userEvent, within } from '@storybook/test';
 
diff --git a/docs/_snippets/my-component-play-function-composition.md b/docs/_snippets/my-component-play-function-composition.md
index 1a02d5dbaba4..ff095fd7a6fe 100644
--- a/docs/_snippets/my-component-play-function-composition.md
+++ b/docs/_snippets/my-component-play-function-composition.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next  -->
+
 ```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -44,7 +46,7 @@ export const CombinedStories: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { userEvent, within } from '@storybook/test';
 
 import { MyComponent } from './MyComponent';
@@ -85,7 +87,51 @@ export const CombinedStories = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FirstStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('an-element'), 'example-value');
+  },
+});
+
+export const SecondStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
+  },
+});
+
+export const CombinedStories = meta.story({
+  play: async ({ context, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 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="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -132,7 +178,51 @@ export const CombinedStories: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FirstStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('an-element'), 'example-value');
+  },
+});
+
+export const SecondStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
+  },
+});
+
+export const CombinedStories = meta.story({
+  play: async ({ context, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 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="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -179,6 +269,50 @@ export const CombinedStories: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FirstStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('an-element'), 'example-value');
+  },
+});
+
+export const SecondStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
+  },
+});
+
+export const CombinedStories = meta.story({
+  play: async ({ context, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 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" renderer="web-components" language="js"
 import { userEvent, within } from '@storybook/test';
 
diff --git a/docs/_snippets/my-component-play-function-query-findby.md b/docs/_snippets/my-component-play-function-query-findby.md
index b3835f17926e..8be519be7d15 100644
--- a/docs/_snippets/my-component-play-function-query-findby.md
+++ b/docs/_snippets/my-component-play-function-query-findby.md
@@ -81,7 +81,7 @@ export const AsyncExample = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { userEvent, within } from '@storybook/test';
 
 import { MyComponent } from './MyComponent';
@@ -105,6 +105,33 @@ export const AsyncExample = {
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const AsyncExample = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -163,7 +190,7 @@ export const AsyncExample: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -193,6 +220,33 @@ export const AsyncExample: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const AsyncExample = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -251,7 +305,7 @@ export const AsyncExample: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -281,6 +335,33 @@ export const AsyncExample: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const AsyncExample = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 import { userEvent, within } from '@storybook/test';
 
diff --git a/docs/_snippets/my-component-play-function-waitfor.md b/docs/_snippets/my-component-play-function-waitfor.md
index 195096524fba..0f27a6534210 100644
--- a/docs/_snippets/my-component-play-function-waitfor.md
+++ b/docs/_snippets/my-component-play-function-waitfor.md
@@ -114,7 +114,7 @@ export const ExampleAsyncStory = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { userEvent, waitFor, within } from '@storybook/test';
 
 import { MyComponent } from './MyComponent';
@@ -149,6 +149,44 @@ export const ExampleAsyncStory = {
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, waitFor, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleAsyncStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -229,7 +267,7 @@ export const ExampleAsyncStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -270,6 +308,44 @@ export const ExampleAsyncStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, waitFor, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleAsyncStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -350,7 +426,7 @@ export const ExampleAsyncStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -391,6 +467,44 @@ export const ExampleAsyncStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, waitFor, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleAsyncStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 import { userEvent, waitFor, within } from '@storybook/test';
 
diff --git a/docs/_snippets/my-component-play-function-with-canvas.md b/docs/_snippets/my-component-play-function-with-canvas.md
index 7d44ad477a74..fd8b6a60e193 100644
--- a/docs/_snippets/my-component-play-function-with-canvas.md
+++ b/docs/_snippets/my-component-play-function-with-canvas.md
@@ -19,7 +19,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
@@ -49,7 +49,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   }} />
 ```
 
@@ -69,12 +69,12 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { userEvent, within } from '@storybook/test';
 
 import { MyComponent } from './MyComponent';
@@ -90,11 +90,35 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // 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="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -116,7 +140,7 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   }} />
 ```
 
@@ -141,12 +165,12 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -168,14 +192,39 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // 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="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
+
   import { userEvent, within } from '@storybook/test';
 
   import MyComponent from './MyComponent.svelte';
@@ -193,7 +242,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   }} />
 ```
 
@@ -218,12 +267,12 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -245,11 +294,35 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('button'));
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -264,13 +337,14 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
 
 ```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
+
 import { userEvent, within } from '@storybook/test';
 
 const meta: Meta = {
@@ -287,7 +361,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
diff --git a/docs/_snippets/my-component-play-function-with-clickevent.md b/docs/_snippets/my-component-play-function-with-clickevent.md
index bf4b5b8c47fa..07f14c5a16d8 100644
--- a/docs/_snippets/my-component-play-function-with-clickevent.md
+++ b/docs/_snippets/my-component-play-function-with-clickevent.md
@@ -104,7 +104,7 @@ export const FireEventExample = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { fireEvent, userEvent, within } from '@storybook/test';
 
 import { MyComponent } from './MyComponent';
@@ -135,6 +135,40 @@ export const FireEventExample = {
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { fireEvent, userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ClickExample = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 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'));
+  },
+});
+
+export const FireEventExample = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -209,7 +243,7 @@ export const FireEventExample: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -246,50 +280,47 @@ export const FireEventExample: Story = {
 };
 ```
 
-```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
 
-  import { fireEvent, userEvent, within } from '@storybook/test';
+import { fireEvent, userEvent, within } from '@storybook/test';
 
-  import MyComponent from './MyComponent.svelte';
+import { MyComponent } from './MyComponent';
 
-  const { Story } = defineMeta({
-    component: MyComponent,
-  });
-</script>
+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 canvasElement to query the DOM
--->
-<Story
-  name="ClickExample"
-  play={async ({ canvasElement }) => {
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ClickExample = meta.story({
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     // 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'));
-  }}
-/>
+  },
+});
 
-<Story
-  name="FireEventExample"
-  play={async ({ canvasElement }) => {
+export const FireEventExample = meta.story({
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await fireEvent.click(canvas.getByTestId('data-testid'));
-  }}
-/>
+  },
+});
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
-import type { Meta, StoryObj } from '@storybook/svelte';
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { fireEvent, userEvent, within } from '@storybook/test';
 
-import MyComponent from './MyComponent.svelte';
+import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
@@ -320,14 +351,85 @@ export const FireEventExample: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
 
 import { fireEvent, userEvent, within } from '@storybook/test';
 
 import { MyComponent } from './MyComponent';
 
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ClickExample = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 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'));
+  },
+});
+
+export const FireEventExample = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  },
+});
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { fireEvent, userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ClickExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 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'));
+  }}
+/>
+
+<Story
+  name="FireEventExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { fireEvent, userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
 const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
 };
diff --git a/docs/_snippets/my-component-play-function-with-delay.md b/docs/_snippets/my-component-play-function-with-delay.md
index e4fd3ac06338..4d17677abe8b 100644
--- a/docs/_snippets/my-component-play-function-with-delay.md
+++ b/docs/_snippets/my-component-play-function-with-delay.md
@@ -103,7 +103,7 @@ export const DelayedStory = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { userEvent, within } from '@storybook/test';
 
 import { MyComponent } from './MyComponent';
@@ -134,6 +134,40 @@ export const DelayedStory = {
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const DelayedStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -207,7 +241,7 @@ export const DelayedStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -244,6 +278,40 @@ export const DelayedStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const DelayedStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -317,7 +385,7 @@ export const DelayedStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -354,6 +422,40 @@ export const DelayedStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const DelayedStory = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 import { userEvent, within } from '@storybook/test';
 
diff --git a/docs/_snippets/my-component-play-function-with-selectevent.md b/docs/_snippets/my-component-play-function-with-selectevent.md
index 1892f1790d47..ba843b946976 100644
--- a/docs/_snippets/my-component-play-function-with-selectevent.md
+++ b/docs/_snippets/my-component-play-function-with-selectevent.md
@@ -111,7 +111,7 @@ export const ExampleChangeEvent = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { userEvent, within } from '@storybook/test';
 
 import { MyComponent } from './MyComponent';
@@ -145,6 +145,43 @@ export const ExampleChangeEvent = {
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Function to emulate pausing between interactions
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleChangeEvent = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -223,7 +260,7 @@ export const ExampleChangeEvent: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -263,6 +300,43 @@ export const ExampleChangeEvent: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleChangeEvent = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -342,7 +416,7 @@ export const ExampleChangeEvent: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -382,6 +456,43 @@ export const ExampleChangeEvent: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleChangeEvent = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 import { userEvent, within } from '@storybook/test';
 
diff --git a/docs/_snippets/my-component-story-basic-and-props.md b/docs/_snippets/my-component-story-basic-and-props.md
index c4ad00503ea3..a15f95a84cab 100644
--- a/docs/_snippets/my-component-story-basic-and-props.md
+++ b/docs/_snippets/my-component-story-basic-and-props.md
@@ -21,7 +21,7 @@ export const WithProp: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -35,7 +35,24 @@ export const WithProp = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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" />,
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -54,7 +71,24 @@ export const WithProp: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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" />,
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -73,6 +107,23 @@ export const WithProp: Story = {
 };
 ```
 
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Basic = meta.story({});
+
+export const WithProp = meta.story({
+  render: () => <MyComponent prop="value" />,
+});
+```
+
 ```js filename="MyComponent.story.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
@@ -154,11 +205,6 @@ export default {
 
 export const Basic = {};
 
-/*
- *👇 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 WithProp = {
   render: () => ({
     Component: MyComponent,
@@ -203,11 +249,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {};
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const WithProp: Story = {
   render: () => ({
     Component: MyComponent,
@@ -252,11 +293,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {};
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const WithProp: Story = {
   render: () => ({
     Component: MyComponent,
diff --git a/docs/_snippets/my-component-story-mandatory-export.md b/docs/_snippets/my-component-story-mandatory-export.md
index 21dd007b0daa..725f26b32acf 100644
--- a/docs/_snippets/my-component-story-mandatory-export.md
+++ b/docs/_snippets/my-component-story-mandatory-export.md
@@ -10,74 +10,136 @@ const meta: Meta<MyComponent> = {
    */
   title: 'Path/To/MyComponent',
   component: MyComponent,
-  decorators: [/* ... */],
-  parameters: {/* ... */},
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
 };
 
 export default meta;
 ```
 
-```js filename="MyComponent.story.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.story.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 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: 'Path/To/MyComponent',
   component: MyComponent,
-  decorators: [/* ... */],
-  parameters: {/* ... */},
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  title: 'Path/To/MyComponent',
+  component: MyComponent,
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
 import { MyComponent } from './MyComponent';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
   title: 'Path/To/MyComponent',
   component: MyComponent,
-  decorators: [/* ... */],
-  parameters: {/* ... */},
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
 } satisfies Meta<typeof MyComponent>;
 
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  title: 'Path/To/MyComponent',
+  component: MyComponent,
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
 import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
-  /* 👇 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: {/* ... */},
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
 };
 
 export default meta;
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  title: 'Path/To/MyComponent',
+  component: MyComponent,
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Path/To/MyComponent',
   component: 'my-component',
-  decorators: [/* ... */],
-  parameters: {/* ... */},
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
 };
 ```
 
@@ -87,8 +149,12 @@ import type { Meta } from '@storybook/web-components';
 const meta: Meta = {
   title: 'Path/To/MyComponent',
   component: 'my-component',
-  decorators: [/* ... */],
-  parameters: {/* ... */},
+  decorators: [
+    /* ... */
+  ],
+  parameters: {
+    /* ... */
+  },
 };
 
 export default meta;
diff --git a/docs/_snippets/my-component-story-use-globaltype.md b/docs/_snippets/my-component-story-use-globaltype.md
index d1904249e559..75fb6908d984 100644
--- a/docs/_snippets/my-component-story-use-globaltype.md
+++ b/docs/_snippets/my-component-story-use-globaltype.md
@@ -35,7 +35,7 @@ export const StoryWithLocale: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -65,7 +65,40 @@ export const StoryWithLocale = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale = meta.story({
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <p>{caption}</p>;
+  },
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -100,7 +133,40 @@ export const StoryWithLocale = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale = meta.story({
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <p>{caption}</p>;
+  },
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -135,6 +201,39 @@ export const StoryWithLocale = {
 };
 ```
 
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale = meta.story({
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <p>{caption}</p>;
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js"
 import { MyComponent } from './MyComponent';
 
diff --git a/docs/_snippets/my-component-story-with-nonstory.md b/docs/_snippets/my-component-story-with-nonstory.md
index f581820552e4..586decb31ede 100644
--- a/docs/_snippets/my-component-story-with-nonstory.md
+++ b/docs/_snippets/my-component-story-with-nonstory.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this API for CSF Next -->
+
 ```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -31,7 +33,7 @@ export const ComplexStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 import someData from './data.json';
@@ -58,7 +60,39 @@ export const ComplexStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+import someData from './data.json';
+
+const meta = preview.meta({
+  component: MyComponent,
+  // 👈 Storybook loads these stories
+  includeStories: ['SimpleStory', 'ComplexStory'],
+  // 👈 Storybook ignores anything that contains Data
+  excludeStories: /.*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,
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -90,7 +124,37 @@ export const ComplexStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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,
+  },
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -122,6 +186,36 @@ export const ComplexStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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';
 
diff --git a/docs/_snippets/my-component-story-with-storyname.md b/docs/_snippets/my-component-story-with-storyname.md
index d0c18df08e33..2c13b4c64540 100644
--- a/docs/_snippets/my-component-story-with-storyname.md
+++ b/docs/_snippets/my-component-story-with-storyname.md
@@ -16,7 +16,7 @@ export const Simple: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -29,7 +29,23 @@ export const Simple = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -48,7 +64,23 @@ export const Simple: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -67,6 +99,22 @@ export const Simple: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const Simple = meta.story({
+  name: 'So simple!',
+  // ...
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'my-component',
diff --git a/docs/_snippets/my-component-vite-env-variables.md b/docs/_snippets/my-component-vite-env-variables.md
index d3b873cdac1d..a015c7b3234f 100644
--- a/docs/_snippets/my-component-vite-env-variables.md
+++ b/docs/_snippets/my-component-vite-env-variables.md
@@ -33,7 +33,7 @@ export const ExampleStory = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -48,6 +48,24 @@ export const ExampleStory = {
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -68,7 +86,7 @@ export const ExampleStory = {
 />
 ```
 
-```tsx filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -88,7 +106,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -109,6 +127,24 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -129,7 +165,7 @@ export const ExampleStory: Story = {
 />
 ```
 
-```tsx filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -149,7 +185,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -170,6 +206,24 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'my-component',
diff --git a/docs/_snippets/my-component-with-env-variables.md b/docs/_snippets/my-component-with-env-variables.md
index 81f0ad36f505..5637176fb5a2 100644
--- a/docs/_snippets/my-component-with-env-variables.md
+++ b/docs/_snippets/my-component-with-env-variables.md
@@ -50,7 +50,7 @@ export const ExampleStory = {
 };
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -64,6 +64,23 @@ export const ExampleStory = {
 };
 ```
 
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -102,7 +119,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -122,6 +139,23 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
+
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -160,7 +194,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -180,6 +214,23 @@ export const ExampleStory: Story = {
 };
 ```
 
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+export const ExampleStory = meta.story({
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+});
+```
+
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'my-component',
diff --git a/docs/_snippets/nextjs-add-framework.md b/docs/_snippets/nextjs-add-framework.md
index bf9bb181c85e..9e98ddda1582 100644
--- a/docs/_snippets/nextjs-add-framework.md
+++ b/docs/_snippets/nextjs-add-framework.md
@@ -1,19 +1,43 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
+  // Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
   // framework: '@storybook/react-webpack5', 👈 Remove this
-  framework: '@storybook/nextjs', // 👈 Add this
+  framework: '@storybook/your-framework', // 👈 Add this
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
-import { StorybookConfig } from '@storybook/nextjs';
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/your-framework', // 👈 Add this
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   // ...
   // framework: '@storybook/react-webpack5', 👈 Remove this
-  framework: '@storybook/nextjs', // 👈 Add this
+  framework: '@storybook/your-framework', // 👈 Add this
 };
 
 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., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/your-framework', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/nextjs-additional-options.md b/docs/_snippets/nextjs-additional-options.md
new file mode 100644
index 000000000000..be03827154ba
--- /dev/null
+++ b/docs/_snippets/nextjs-additional-options.md
@@ -0,0 +1,76 @@
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
+import * as path from 'path';
+
+export default {
+  // Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      image: {
+        loading: 'eager',
+      },
+      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
+    },
+  },
+};
+```
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import * as path from 'path';
+
+export default defineMain({
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      image: {
+        loading: 'eager',
+      },
+      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import * as path from 'path';
+
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      image: {
+        loading: 'eager',
+      },
+      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
+    },
+  },
+};
+
+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., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import * as path from 'path';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      image: {
+        loading: 'eager',
+      },
+      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-app-directory-in-meta.md b/docs/_snippets/nextjs-app-directory-in-meta.md
index 1613ce50d507..2b0df47fa422 100644
--- a/docs/_snippets/nextjs-app-directory-in-meta.md
+++ b/docs/_snippets/nextjs-app-directory-in-meta.md
@@ -1,4 +1,4 @@
-```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js"
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 export default {
@@ -11,8 +11,24 @@ export default {
 };
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9"
-import { Meta, StoryObj } from '@storybook/react';
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true, // 👈 Set this
+    },
+  },
+});
+```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import NavigationBasedComponent from './NavigationBasedComponent';
 
@@ -27,8 +43,24 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts"
-import { Meta, StoryObj } from '@storybook/react';
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true, // 👈 Set this
+    },
+  },
+});
+```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import NavigationBasedComponent from './NavigationBasedComponent';
 
@@ -42,3 +74,19 @@ const meta: Meta<typeof NavigationBasedComponent> = {
 };
 export default meta;
 ```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true, // 👈 Set this
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-app-directory-in-preview.md b/docs/_snippets/nextjs-app-directory-in-preview.md
index 44d0166b296b..d64472f8b0b9 100644
--- a/docs/_snippets/nextjs-app-directory-in-preview.md
+++ b/docs/_snippets/nextjs-app-directory-in-preview.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="react" language="js"
+<!-- Vet this example for package naming -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   parameters: {
@@ -10,8 +12,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="react" language="ts"
-import { Preview } from '@storybook/react';
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Preview } from '@storybook/react';
 
 const preview: Preview = {
   // ...
@@ -25,3 +42,18 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-cache-mock.md b/docs/_snippets/nextjs-cache-mock.md
index 8c310d086aca..176dc7f1f64b 100644
--- a/docs/_snippets/nextjs-cache-mock.md
+++ b/docs/_snippets/nextjs-cache-mock.md
@@ -1,5 +1,8 @@
-```js filename="MyForm.stories.js" renderer="react" language="js"
+<!-- TODO: Vet this example for framework support and correct construct on tests -->
+
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { revalidatePath } from '@storybook/nextjs/cache.mock';
 
 import MyForm from './my-form';
@@ -9,7 +12,7 @@ export default {
 };
 
 export const Submitted = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const submitButton = canvas.getByRole('button', { name: /submit/i });
@@ -20,8 +23,35 @@ export const Submitted = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9"
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { revalidatePath } from '@storybook/nextjs/cache.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const Submitted = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const submitButton = canvas.getByRole('button', { name: /submit/i });
+    await userEvent.click(saveButton);
+    // 👇 Use any mock assertions on the function
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+  },
+});
+```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { revalidatePath } from '@storybook/nextjs/cache.mock';
@@ -33,11 +63,10 @@ const meta = {
 } satisfies Meta<typeof MyForm>;
 
 export default meta;
-
 type Story = StoryObj<typeof meta>;
 
 export const Submitted: Story = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const submitButton = canvas.getByRole('button', { name: /submit/i });
@@ -48,8 +77,35 @@ export const Submitted: Story = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts"
+```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { revalidatePath } from '@storybook/nextjs/cache.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const Submitted = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const submitButton = canvas.getByRole('button', { name: /submit/i });
+    await userEvent.click(saveButton);
+    // 👇 Use any mock assertions on the function
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+  },
+});
+```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { revalidatePath } from '@storybook/nextjs/cache.mock';
@@ -61,11 +117,10 @@ const meta: Meta<typeof MyForm> = {
 };
 
 export default meta;
-
 type Story = StoryObj<typeof MyForm>;
 
 export const Submitted: Story = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const submitButton = canvas.getByRole('button', { name: /submit/i });
@@ -75,3 +130,29 @@ export const Submitted: Story = {
   },
 };
 ```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { revalidatePath } from '@storybook/nextjs/cache.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const Submitted = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const submitButton = canvas.getByRole('button', { name: /submit/i });
+    await userEvent.click(saveButton);
+    // 👇 Use any mock assertions on the function
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-configure-svgr.md b/docs/_snippets/nextjs-configure-svgr.md
index 18bb44b1b07a..6d65049421df 100644
--- a/docs/_snippets/nextjs-configure-svgr.md
+++ b/docs/_snippets/nextjs-configure-svgr.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+<!-- TODO: Vet this example for CSF Next support -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   webpackFinal: async (config) => {
@@ -23,8 +25,37 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
-import { StorybookConfig } from '@storybook/nextjs';
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    // This modifies the existing image rule to exclude .svg files
+    // since you want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   // ...
@@ -51,3 +82,31 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    // This modifies the existing image rule to exclude .svg files
+    // since you want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-headers-mock.md b/docs/_snippets/nextjs-headers-mock.md
index bbc0e7901d6c..441f96fb6c30 100644
--- a/docs/_snippets/nextjs-headers-mock.md
+++ b/docs/_snippets/nextjs-headers-mock.md
@@ -1,5 +1,8 @@
-```js filename="MyForm.stories.js" renderer="react" language="js"
-import { expect, userEvent, within } from '@storybook/test';
+<!-- TODO: Vet this example for framework support and correct construct on tests -->
+
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
+import { expect } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { cookies, headers } from '@storybook/nextjs/headers.mock';
 
 import MyForm from './my-form';
@@ -14,7 +17,7 @@ export const LoggedInEurope = {
     cookies().set('username', 'Sol');
     headers().set('timezone', 'Central European Summer Time');
   },
-  async play() {
+  play: async ({ canvasElement }) => {
     // 👇 Assert that your component called the mocks
     await expect(cookies().get).toHaveBeenCalledOnce();
     await expect(cookies().get).toHaveBeenCalledWith('username');
@@ -24,9 +27,40 @@ export const LoggedInEurope = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9"
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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/nextjs/headers.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const LoggedInEurope = meta.story({
+  async beforeEach() {
+    // 👇 Set mock cookies and headers ahead of rendering
+    cookies().set('username', 'Sol');
+    headers().set('timezone', 'Central European Summer Time');
+  },
+  play: async ({ canvasElement }) => {
+    // 👇 Assert that your component called the mocks
+    await expect(cookies().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('username');
+    await expect(headers().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('timezone');
+  },
+});
+```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fireEvent, userEvent, within } from '@storybook/test';
+
+import { expect } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { cookies, headers } from '@storybook/nextjs/headers.mock';
 
@@ -37,7 +71,6 @@ const meta = {
 } satisfies Meta<typeof MyForm>;
 
 export default meta;
-
 type Story = StoryObj<typeof meta>;
 
 export const LoggedInEurope: Story = {
@@ -46,7 +79,7 @@ export const LoggedInEurope: Story = {
     cookies().set('username', 'Sol');
     headers().set('timezone', 'Central European Summer Time');
   },
-  async play() {
+  play: async ({ canvasElement }) => {
     // 👇 Assert that your component called the mocks
     await expect(cookies().get).toHaveBeenCalledOnce();
     await expect(cookies().get).toHaveBeenCalledWith('username');
@@ -56,9 +89,40 @@ export const LoggedInEurope: Story = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts"
+```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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/nextjs/headers.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const LoggedInEurope = meta.story({
+  async beforeEach() {
+    // 👇 Set mock cookies and headers ahead of rendering
+    cookies().set('username', 'Sol');
+    headers().set('timezone', 'Central European Summer Time');
+  },
+  play: async ({ canvasElement }) => {
+    // 👇 Assert that your component called the mocks
+    await expect(cookies().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('username');
+    await expect(headers().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('timezone');
+  },
+});
+```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fireEvent, userEvent, within } from '@storybook/test';
+
+import { expect } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { cookies, headers } from '@storybook/nextjs/headers.mock';
 
@@ -69,7 +133,6 @@ const meta: Meta<typeof MyForm> = {
 };
 
 export default meta;
-
 type Story = StoryObj<typeof MyForm>;
 
 export const LoggedInEurope: Story = {
@@ -78,7 +141,7 @@ export const LoggedInEurope: Story = {
     cookies().set('username', 'Sol');
     headers().set('timezone', 'Central European Summer Time');
   },
-  async play() {
+  play: async ({ canvasElement }) => {
     // 👇 Assert that your component called the mocks
     await expect(cookies().get).toHaveBeenCalledOnce();
     await expect(cookies().get).toHaveBeenCalledWith('username');
@@ -87,3 +150,33 @@ export const LoggedInEurope: Story = {
   },
 };
 ```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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/nextjs/headers.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const LoggedInEurope = meta.story({
+  async beforeEach() {
+    // 👇 Set mock cookies and headers ahead of rendering
+    cookies().set('username', 'Sol');
+    headers().set('timezone', 'Central European Summer Time');
+  },
+  play: async ({ canvasElement }) => {
+    // 👇 Assert that your component called the mocks
+    await expect(cookies().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('username');
+    await expect(headers().get).toHaveBeenCalledOnce();
+    await expect(cookies().get).toHaveBeenCalledWith('timezone');
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-image-static-dirs.md b/docs/_snippets/nextjs-image-static-dirs.md
index 7485f467397d..0e40e462f1e9 100644
--- a/docs/_snippets/nextjs-image-static-dirs.md
+++ b/docs/_snippets/nextjs-image-static-dirs.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   staticDirs: [
@@ -10,8 +10,24 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
-import { StorybookConfig } from '@storybook/nextjs';
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  staticDirs: [
+    {
+      from: '../src/components/fonts',
+      to: 'src/components/fonts',
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   // ...
@@ -25,3 +41,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  staticDirs: [
+    {
+      from: '../src/components/fonts',
+      to: 'src/components/fonts',
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/nextjs-navigation-mock.md b/docs/_snippets/nextjs-navigation-mock.md
index 220454e77ebe..614363b69d4a 100644
--- a/docs/_snippets/nextjs-navigation-mock.md
+++ b/docs/_snippets/nextjs-navigation-mock.md
@@ -1,5 +1,8 @@
-```js filename="MyForm.stories.js" renderer="react" language="js"
-import { expect, fireEvent, userEvent, within } from '@storybook/test';
+<!-- TODO: Vet this example for framework support and correct construct on tests -->
+
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { redirect, getRouter } from '@storybook/nextjs/navigation.mock';
 
 import MyForm from './my-form';
@@ -15,14 +18,14 @@ export default {
 };
 
 export const Unauthenticated = {
-  async play() {
+  play: async ({ canvasElement }) => {
     // 👇 Assert that your component called redirect()
     await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
   },
 };
 
 export const GoBack = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const backBtn = await canvas.findByText('Go back');
 
@@ -33,9 +36,49 @@ export const GoBack = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9"
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { redirect, getRouter } from '@storybook/nextjs/navigation.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+  parameters: {
+    nextjs: {
+      // 👇 As in the Next.js application, next/navigation only works using App Router
+      appDirectory: true,
+    },
+  },
+});
+
+export const Unauthenticated = meta.story({
+  play: async ({ canvasElement }) => {
+    // 👇 Assert that your component called redirect()
+    await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
+  },
+});
+
+export const GoBack = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fireEvent, userEvent, within } from '@storybook/test';
+
+import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { redirect, getRouter } from '@storybook/nextjs/navigation.mock';
 
@@ -52,18 +95,17 @@ const meta = {
 } satisfies Meta<typeof MyForm>;
 
 export default meta;
-
 type Story = StoryObj<typeof meta>;
 
 export const Unauthenticated: Story = {
-  async play() {
+  play: async ({ canvasElement }) => {
     // 👇 Assert that your component called redirect()
     await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
   },
 };
 
 export const GoBack: Story = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const backBtn = await canvas.findByText('Go back');
 
@@ -74,9 +116,49 @@ export const GoBack: Story = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts"
+```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { redirect, getRouter } from '@storybook/nextjs/navigation.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+  parameters: {
+    nextjs: {
+      // 👇 As in the Next.js application, next/navigation only works using App Router
+      appDirectory: true,
+    },
+  },
+});
+
+export const Unauthenticated = meta.story({
+  play: async ({ canvasElement }) => {
+    // 👇 Assert that your component called redirect()
+    await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
+  },
+});
+
+export const GoBack = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fireEvent, userEvent, within } from '@storybook/test';
+
+import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { redirect, getRouter } from '@storybook/nextjs/navigation.mock';
 
@@ -93,11 +175,10 @@ const meta: Meta<typeof MyForm> = {
 };
 
 export default meta;
-
 type Story = StoryObj<typeof MyForm>;
 
 export const Unauthenticated: Story = {
-  async play() {
+  play: async ({ canvasElement }) => {
     // 👇 Assert that your component called redirect()
     await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
   },
@@ -114,3 +195,42 @@ export const GoBack: Story = {
   },
 };
 ```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { redirect, getRouter } from '@storybook/nextjs/navigation.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+  parameters: {
+    nextjs: {
+      // 👇 As in the Next.js application, next/navigation only works using App Router
+      appDirectory: true,
+    },
+  },
+});
+
+export const Unauthenticated = meta.story({
+  play: async ({ canvasElement }) => {
+    // 👇 Assert that your component called redirect()
+    await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
+  },
+});
+
+export const GoBack = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-navigation-override-in-story.md b/docs/_snippets/nextjs-navigation-override-in-story.md
index a2afcfbfdd36..846bf8bf580a 100644
--- a/docs/_snippets/nextjs-navigation-override-in-story.md
+++ b/docs/_snippets/nextjs-navigation-override-in-story.md
@@ -1,4 +1,4 @@
-```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js"
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 export default {
@@ -26,8 +26,39 @@ export const Example = {
 };
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9"
-import { Meta, StoryObj } from '@storybook/react';
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+});
+
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/profile',
+        query: {
+          user: '1',
+        },
+      },
+    },
+  },
+});
+```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import NavigationBasedComponent from './NavigationBasedComponent';
 
@@ -59,8 +90,39 @@ export const Example: Story = {
 };
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts"
-import { Meta, StoryObj } from '@storybook/react';
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+});
+
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/profile',
+        query: {
+          user: '1',
+        },
+      },
+    },
+  },
+});
+```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import NavigationBasedComponent from './NavigationBasedComponent';
 
@@ -91,3 +153,34 @@ export const Example: Story = {
   },
 };
 ```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+});
+
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/profile',
+        query: {
+          user: '1',
+        },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-navigation-override.md b/docs/_snippets/nextjs-navigation-override.md
new file mode 100644
index 000000000000..694ac9a4a2c6
--- /dev/null
+++ b/docs/_snippets/nextjs-navigation-override.md
@@ -0,0 +1,95 @@
+<!-- Vet this example for package naming -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/navigation.mock';
+
+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 Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/navigation.mock';
+
+export default definePreview({
+  parameters: {
+    nextjs: {
+      // 👇 Override the default navigation properties
+      navigation: {
+        pathname: '/app/',
+      },
+    },
+  },
+
+  async beforeEach() {
+    // 👇 Manipulate the default navigation method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Preview } from '@storybook/react';
+// 👇 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(() => {
+      /* ... */
+    });
+  },
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+// 👇 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(() => {
+      /* ... */
+    });
+  },
+};
+```
diff --git a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
index 194ea482b5a5..0cc4d3f75471 100644
--- a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
@@ -1,4 +1,4 @@
-```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js"
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 export default {
@@ -17,8 +17,30 @@ export default {
 };
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9"
-import { Meta, StoryObj } from '@storybook/react';
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ],
+      },
+    },
+  },
+});
+```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import NavigationBasedComponent from './NavigationBasedComponent';
 
@@ -39,8 +61,30 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts"
-import { Meta, StoryObj } from '@storybook/react';
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ],
+      },
+    },
+  },
+});
+```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import NavigationBasedComponent from './NavigationBasedComponent';
 
@@ -60,3 +104,25 @@ const meta: Meta<typeof NavigationBasedComponent> = {
 };
 export default meta;
 ```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
index 848f9530c164..b286ab88969b 100644
--- a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
@@ -1,4 +1,4 @@
-```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js"
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 export default {
@@ -14,8 +14,27 @@ export default {
 };
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9"
-import { Meta, StoryObj } from '@storybook/react';
+```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: ['dashboard', 'analytics'],
+      },
+    },
+  },
+});
+```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import NavigationBasedComponent from './NavigationBasedComponent';
 
@@ -33,8 +52,27 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts"
-import { Meta, StoryObj } from '@storybook/react';
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: ['dashboard', 'analytics'],
+      },
+    },
+  },
+});
+```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import NavigationBasedComponent from './NavigationBasedComponent';
 
@@ -51,3 +89,22 @@ const meta: Meta<typeof NavigationBasedComponent> = {
 };
 export default meta;
 ```
+
+```ts filename="NavigationBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = preview.meta({
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: ['dashboard', 'analytics'],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-remove-addons.md b/docs/_snippets/nextjs-remove-addons.md
index 007e6fe14733..eb395f92c308 100644
--- a/docs/_snippets/nextjs-remove-addons.md
+++ b/docs/_snippets/nextjs-remove-addons.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   addons: [
@@ -10,7 +10,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  addons: [
+    // ...
+    // 👇 These can both be removed
+    // 'storybook-addon-next',
+    // 'storybook-addon-next-router',
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
@@ -25,3 +40,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  addons: [
+    // ...
+    // 👇 These can both be removed
+    // 'storybook-addon-next',
+    // 'storybook-addon-next-router',
+  ],
+});
+```
diff --git a/docs/_snippets/nextjs-router-mock.md b/docs/_snippets/nextjs-router-mock.md
index 83e83aee5e02..982bd352f5ba 100644
--- a/docs/_snippets/nextjs-router-mock.md
+++ b/docs/_snippets/nextjs-router-mock.md
@@ -1,5 +1,7 @@
-```js filename="MyForm.stories.js" renderer="react" language="js"
-import { expect, fireEvent, userEvent, within } from '@storybook/test';
+<!-- TODO: Vet this example for framework support and correct construct on tests -->
+
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF 3"
+import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getRouter } from '@storybook/nextjs/router.mock';
 
@@ -10,7 +12,7 @@ export default {
 };
 
 export const GoBack = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const backBtn = await canvas.findByText('Go back');
 
@@ -21,9 +23,36 @@ export const GoBack = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9"
+```js filename="MyForm.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/router.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const GoBack = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fireEvent, userEvent, within } from '@storybook/test';
+
+import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getRouter } from '@storybook/nextjs/router.mock';
 
@@ -34,11 +63,10 @@ const meta = {
 } satisfies Meta<typeof MyForm>;
 
 export default meta;
-
 type Story = StoryObj<typeof meta>;
 
 export const GoBack: Story = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const backBtn = await canvas.findByText('Go back');
 
@@ -49,9 +77,36 @@ export const GoBack: Story = {
 };
 ```
 
-```ts filename="MyForm.stories.ts" renderer="react" language="ts"
+```ts filename="MyForm.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/router.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const GoBack = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fireEvent, userEvent, within } from '@storybook/test';
+
+import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getRouter } from '@storybook/nextjs/router.mock';
 
@@ -62,11 +117,10 @@ const meta: Meta<typeof MyForm> = {
 };
 
 export default meta;
-
 type Story = StoryObj<typeof MyForm>;
 
 export const GoBack: Story = {
-  async play({ canvasElement }) {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const backBtn = await canvas.findByText('Go back');
 
@@ -76,3 +130,29 @@ export const GoBack: Story = {
   },
 };
 ```
+
+```ts filename="MyForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/router.mock';
+
+import MyForm from './my-form';
+
+const meta = preview.meta({
+  component: MyForm,
+});
+
+export const GoBack = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const backBtn = await canvas.findByText('Go back');
+
+    await userEvent.click(backBtn);
+    // 👇 Assert that your component called back()
+    await expect(getRouter().back).toHaveBeenCalled();
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-router-override-in-story.md b/docs/_snippets/nextjs-router-override-in-story.md
index cac0babd2688..561488a27531 100644
--- a/docs/_snippets/nextjs-router-override-in-story.md
+++ b/docs/_snippets/nextjs-router-override-in-story.md
@@ -1,4 +1,4 @@
-```js filename="RouterBasedComponent.stories.js" renderer="react" language="js"
+```js filename="RouterBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import RouterBasedComponent from './RouterBasedComponent';
 
 export default {
@@ -22,16 +22,43 @@ export const Example = {
 };
 ```
 
-```ts filename="RouterBasedComponent.stories.ts" renderer="react" language="ts-4-9"
-import { Meta, StoryObj } from '@storybook/react';
+```js filename="RouterBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import RouterBasedComponent from './RouterBasedComponent';
+
+const meta = preview.meta({
+  component: RouterBasedComponent,
+});
+
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      router: {
+        pathname: '/profile/[id]',
+        asPath: '/profile/1',
+        query: {
+          id: '1',
+        },
+      },
+    },
+  },
+});
+```
+
+```ts filename="RouterBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import RouterBasedComponent from './RouterBasedComponent';
 
 const meta = {
   component: RouterBasedComponent,
 } satisfies Meta<typeof RouterBasedComponent>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 // If you have the actions addon,
@@ -51,8 +78,35 @@ export const Example: Story = {
 };
 ```
 
-```ts filename="RouterBasedComponent.stories.ts" renderer="react" language="ts"
-import { Meta, StoryObj } from '@storybook/react';
+```ts filename="RouterBasedComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import RouterBasedComponent from './RouterBasedComponent';
+
+const meta = preview.meta({
+  component: RouterBasedComponent,
+});
+
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      router: {
+        pathname: '/profile/[id]',
+        asPath: '/profile/1',
+        query: {
+          id: '1',
+        },
+      },
+    },
+  },
+});
+```
+
+```ts filename="RouterBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import RouterBasedComponent from './RouterBasedComponent';
 
@@ -79,3 +133,30 @@ export const Example: Story = {
   },
 };
 ```
+
+```ts filename="RouterBasedComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import RouterBasedComponent from './RouterBasedComponent';
+
+const meta = preview.meta({
+  component: RouterBasedComponent,
+});
+
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
+export const Example = meta.story({
+  parameters: {
+    nextjs: {
+      router: {
+        pathname: '/profile/[id]',
+        asPath: '/profile/1',
+        query: {
+          id: '1',
+        },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-router-router-override.md b/docs/_snippets/nextjs-router-router-override.md
new file mode 100644
index 000000000000..fd0dcbfed25f
--- /dev/null
+++ b/docs/_snippets/nextjs-router-router-override.md
@@ -0,0 +1,96 @@
+<!-- Vet this example for package naming -->
+
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/router.mock';
+
+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 Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/router.mock';
+
+export default definePreview({
+  parameters: {
+    nextjs: {
+      // 👇 Override the default router properties
+      router: {
+        basePath: '/app/',
+      },
+    },
+  },
+
+  async beforeEach() {
+    // 👇 Manipulate the default router method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Preview } from '@storybook/react';
+// 👇 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(() => {
+      /* ... */
+    });
+  },
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/router.mock';
+
+export default definePreview({
+  parameters: {
+    nextjs: {
+      // 👇 Override the default router properties
+      router: {
+        basePath: '/app/',
+      },
+    },
+  },
+
+  async beforeEach() {
+    // 👇 Manipulate the default router method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+});
+```
diff --git a/docs/_snippets/nextjs-sharp-install.md b/docs/_snippets/nextjs-sharp-install.md
new file mode 100644
index 000000000000..8f6c8345a356
--- /dev/null
+++ b/docs/_snippets/nextjs-sharp-install.md
@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npm install sharp
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn add sharp
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm add sharp
+```
diff --git a/docs/_snippets/nextjs-vite-add-framework.md b/docs/_snippets/nextjs-vite-add-framework.md
index ac874f278550..e36fbea882fd 100644
--- a/docs/_snippets/nextjs-vite-add-framework.md
+++ b/docs/_snippets/nextjs-vite-add-framework.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   // framework: '@storybook/react-webpack5', 👈 Remove this
@@ -6,7 +6,17 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/experimental-nextjs-vite/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/experimental-nextjs-vite', // 👈 Add this
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import { StorybookConfig } from '@storybook/experimental-nextjs-vite';
 
 const config: StorybookConfig = {
@@ -17,3 +27,13 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/experimental-nextjs-vite/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/experimental-nextjs-vite', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/nextjs-vite-remove-addons.md b/docs/_snippets/nextjs-vite-remove-addons.md
index 85a01de7df21..2439e53e3582 100644
--- a/docs/_snippets/nextjs-vite-remove-addons.md
+++ b/docs/_snippets/nextjs-vite-remove-addons.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   addons: [
@@ -10,7 +10,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/experimental-nextjs-vite/node';
+
+export default defineMain({
+  // ...
+  addons: [
+    // ...
+    // 👇 These can both be removed
+    // 'storybook-addon-next',
+    // 'storybook-addon-next-router',
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import { StorybookConfig } from '@storybook/experimental-nextjs-vite';
 
 const config: StorybookConfig = {
@@ -25,3 +39,17 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/experimental-nextjs-vite/node';
+
+export default defineMain({
+  // ...
+  addons: [
+    // ...
+    // 👇 These can both be removed
+    // 'storybook-addon-next',
+    // 'storybook-addon-next-router',
+  ],
+});
+```
diff --git a/docs/_snippets/other-foo-bar-story.md b/docs/_snippets/other-foo-bar-story.md
index eab030321c8e..58c24fbf0183 100644
--- a/docs/_snippets/other-foo-bar-story.md
+++ b/docs/_snippets/other-foo-bar-story.md
@@ -21,7 +21,7 @@ export const Baz: Story = {
 };
 ```
 
-```js filename="FooBar.stories.js|jsx" renderer="common" language="js"
+```js filename="FooBar.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Foo } from './Foo';
 
 export default {
@@ -39,7 +39,28 @@ export const Baz = {
 };
 ```
 
-```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="FooBar.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'OtherFoo/Bar',
+  component: Foo,
+  id: 'Foo/Bar', // Or 'foo-bar' if you prefer
+});
+
+export const Baz = meta.story({
+  name: 'Insert name here',
+});
+```
+
+```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -63,7 +84,28 @@ export const Baz: Story = {
 };
 ```
 
-```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="FooBar.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'OtherFoo/Bar',
+  component: Foo,
+  id: 'Foo/Bar', // Or 'foo-bar' if you prefer
+});
+
+export const Baz = meta.story({
+  name: 'Insert name here',
+});
+```
+
+```ts filename="FooBar.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -87,6 +129,27 @@ export const Baz: Story = {
 };
 ```
 
+```ts filename="FooBar.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Foo } from './Foo';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'OtherFoo/Bar',
+  component: Foo,
+  id: 'Foo/Bar', // Or 'foo-bar' if you prefer
+});
+
+export const Baz = meta.story({
+  name: 'Insert name here',
+});
+```
+
 ```js filename="FooBar.stories.js" renderer="web-components" language="js"
 export default {
   title: 'OtherFoo/Bar',
diff --git a/docs/_snippets/page-story-args-within-story.md b/docs/_snippets/page-story-args-within-story.md
index a890b871ffbc..c104c17a2bb6 100644
--- a/docs/_snippets/page-story-args-within-story.md
+++ b/docs/_snippets/page-story-args-within-story.md
@@ -1,5 +1,8 @@
-```js filename="my-component/component.stories.js|jsx" renderer="react" language="js"
+<!-- TODO: Vet this example for CSF Next composition -->
+
+```js filename="my-component/component.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { useArgs } from '@storybook/preview-api';
+
 import { Checkbox } from './checkbox';
 
 export default {
@@ -28,9 +31,45 @@ export const Example = {
 };
 ```
 
-```ts filename="my-component/component.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="my-component/component.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useArgs } from '@storybook/preview-api';
+
+import { Checkbox } from './checkbox';
+
+const meta = preview.meta({
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+});
+
+export const Example = meta.story({
+  args: {
+    isChecked: false,
+    label: 'Try Me!',
+  },
+  /**
+   * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
+   */
+  render: function Render(args) {
+    const [{ isChecked }, updateArgs] = useArgs();
+
+    function onChange() {
+      updateArgs({ isChecked: !isChecked });
+    }
+
+    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;
+  },
+});
+```
+
+```ts filename="my-component/component.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import { StoryObj, Meta } from '@storybook/react';
+
 import { useArgs } from '@storybook/preview-api';
+
 import { Checkbox } from './checkbox';
 
 const meta = {
@@ -62,9 +101,45 @@ export const Example = {
 } satisfies Story;
 ```
 
-```ts filename="my-component/component.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="my-component/component.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useArgs } from '@storybook/preview-api';
+
+import { Checkbox } from './checkbox';
+
+const meta = preview.meta({
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+});
+
+export const Example = meta.story({
+  args: {
+    isChecked: false,
+    label: 'Try Me!',
+  },
+  /**
+   * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
+   */
+  render: function Render(args) {
+    const [{ isChecked }, updateArgs] = useArgs();
+
+    function onChange() {
+      updateArgs({ isChecked: !isChecked });
+    }
+
+    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;
+  },
+});
+```
+
+```ts filename="my-component/component.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import { StoryObj, Meta } from '@storybook/react';
+
 import { useArgs } from '@storybook/preview-api';
+
 import { Checkbox } from './checkbox';
 
 const meta: Meta<typeof Checkbox> = {
@@ -95,3 +170,37 @@ export const Example: Story = {
   },
 };
 ```
+
+```ts filename="my-component/component.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { useArgs } from '@storybook/preview-api';
+
+import { Checkbox } from './checkbox';
+
+const meta = preview.meta({
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+});
+
+export const Example = meta.story({
+  args: {
+    isChecked: false,
+    label: 'Try Me!',
+  },
+  /**
+   * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
+   */
+  render: function Render(args) {
+    const [{ isChecked }, updateArgs] = useArgs();
+
+    function onChange() {
+      updateArgs({ isChecked: !isChecked });
+    }
+
+    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;
+  },
+});
+```
diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md
index c32f96c7cd8e..949c2057c13c 100644
--- a/docs/_snippets/page-story-slots.md
+++ b/docs/_snippets/page-story-slots.md
@@ -1,5 +1,8 @@
+<!-- TODO: Vet this example for CSF Next composition -->
+
 ```ts filename="Page.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { argsToTemplate } from '@storybook/angular';
 
 import { Page } from './page.component';
@@ -27,7 +30,7 @@ export const CustomFooter: Story = {
 };
 ```
 
-```js filename="Page.stories.js|jsx" renderer="react" language="js"
+```js filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Page } from './Page';
 
 export default {
@@ -46,7 +49,29 @@ export const CustomFooter = {
 };
 ```
 
-```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  render: ({ footer, ...args }) => (
+    <Page {...args}>
+      <footer>{footer}</footer>
+    </Page>
+  ),
+});
+
+export const CustomFooter = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
+
+```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
@@ -72,7 +97,29 @@ export const CustomFooter = {
 } satisfies Story;
 ```
 
-```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  render: ({ footer, ...args }) => (
+    <Page {...args}>
+      <footer>{footer}</footer>
+    </Page>
+  ),
+});
+
+export const CustomFooter = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
+
+```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
@@ -98,6 +145,28 @@ export const CustomFooter: Story = {
 };
 ```
 
+```tsx filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  render: ({ footer, ...args }) => (
+    <Page {...args}>
+      <footer>{footer}</footer>
+    </Page>
+  ),
+});
+
+export const CustomFooter = meta.story({
+  args: {
+    footer: 'Built with Storybook',
+  },
+});
+```
+
 ```js filename="Page.stories.js|jsx" renderer="solid" language="js"
 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 a12fc28740de..9c902c7afead 100644
--- a/docs/_snippets/page-story-with-args-composition.md
+++ b/docs/_snippets/page-story-with-args-composition.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next composition -->
+
 ```ts filename="YourPage.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -24,7 +26,7 @@ export const Simple: Story = {
 };
 ```
 
-```js filename="YourPage.stories.js|jsx" renderer="common" language="js"
+```js filename="YourPage.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { DocumentScreen } from './YourPage';
 
 // 👇 Imports the required stories
@@ -45,7 +47,31 @@ export const Simple = {
 };
 ```
 
-```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="YourPage.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { DocumentScreen } from './YourPage';
+
+// 👇 Imports the required stories
+import * as PageLayout from './PageLayout.stories';
+import * as DocumentHeader from './DocumentHeader.stories';
+import * as DocumentList from './DocumentList.stories';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+});
+
+export const Simple = meta.story({
+  args: {
+    user: PageLayout.Simple.input.args.user,
+    document: DocumentHeader.Simple.input.args.document,
+    subdocuments: DocumentList.Simple.input.args.documents,
+  },
+});
+```
+
+```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -72,7 +98,31 @@ export const Simple: Story = {
 };
 ```
 
-```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { DocumentScreen } from './YourPage';
+
+// 👇 Imports the required stories
+import * as PageLayout from './PageLayout.stories';
+import * as DocumentHeader from './DocumentHeader.stories';
+import * as DocumentList from './DocumentList.stories';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+});
+
+export const Simple = meta.story({
+  args: {
+    user: PageLayout.Simple.input.args.user,
+    document: DocumentHeader.Simple.input.args.document,
+    subdocuments: DocumentList.Simple.input.args.documents,
+  },
+});
+```
+
+```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -99,6 +149,30 @@ export const Simple: Story = {
 };
 ```
 
+```ts filename="YourPage.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { DocumentScreen } from './YourPage';
+
+// 👇 Imports the required stories
+import * as PageLayout from './PageLayout.stories';
+import * as DocumentHeader from './DocumentHeader.stories';
+import * as DocumentList from './DocumentList.stories';
+
+const meta = preview.meta({
+  component: DocumentScreen,
+});
+
+export const Simple = meta.story({
+  args: {
+    user: PageLayout.Simple.input.args.user,
+    document: DocumentHeader.Simple.input.args.document,
+    subdocuments: DocumentList.Simple.input.args.documents,
+  },
+});
+```
+
 ```js filename="YourPage.stories.js" renderer="web-components" language="js"
 // 👇 Imports the required stories
 import * as PageLayout from './PageLayout.stories';
diff --git a/docs/_snippets/page-story.md b/docs/_snippets/page-story.md
index 24868f858f30..83dc0f859c51 100644
--- a/docs/_snippets/page-story.md
+++ b/docs/_snippets/page-story.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next composition-->
+
 ```ts filename="Page.stories.ts" renderer="angular" language="ts"
 import { moduleMetadata } from '@storybook/angular';
 
@@ -32,7 +34,7 @@ export const LoggedIn: Story = {
 };
 ```
 
-```js filename="Page.stories.js|jsx" renderer="react" language="js"
+```js filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Page } from './Page';
 
 //👇 Imports all Header stories
@@ -49,7 +51,27 @@ export const LoggedIn = {
 };
 ```
 
-```ts filename="Page.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Page } from './Page';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const LoggedIn = meta.story({
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
+
+```ts filename="Page.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
@@ -71,7 +93,27 @@ export const LoggedIn: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="Page.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Page } from './Page';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const LoggedIn = meta.story({
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
+
+```ts filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
@@ -93,6 +135,26 @@ export const LoggedIn: Story = {
 };
 ```
 
+```ts filename="Page.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Page } from './Page';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const LoggedIn = meta.story({
+  args: {
+    ...HeaderStories.LoggedIn.input.args,
+  },
+});
+```
+
 ```js filename="Page.stories.js|jsx" renderer="solid" language="js"
 import { Page } from './Page';
 
diff --git a/docs/_snippets/parameters-in-meta.md b/docs/_snippets/parameters-in-meta.md
index 9037dc413549..bbbc6fb68617 100644
--- a/docs/_snippets/parameters-in-meta.md
+++ b/docs/_snippets/parameters-in-meta.md
@@ -1,3 +1,5 @@
+<!-- Vet this example for the inclusion of the addons in the preview  -->
+
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta } from '@storybook/angular';
 
@@ -48,7 +50,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -62,6 +64,23 @@ export default {
 };
 ```
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -98,7 +117,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
 
@@ -117,6 +136,23 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -153,7 +189,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
 
@@ -172,6 +208,23 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/parameters-in-preview.md b/docs/_snippets/parameters-in-preview.md
index b017899e0316..14e265ace4fb 100644
--- a/docs/_snippets/parameters-in-preview.md
+++ b/docs/_snippets/parameters-in-preview.md
@@ -1,4 +1,6 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     backgrounds: {
@@ -11,7 +13,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'light', value: '#fff' },
+        { name: 'dark', value: '#333' },
+      ],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-renderer';
 
@@ -28,3 +46,19 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'light', value: '#fff' },
+        { name: 'dark', value: '#333' },
+      ],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/parameters-in-story.md b/docs/_snippets/parameters-in-story.md
index 77dfdf57459c..9c412cb192ef 100644
--- a/docs/_snippets/parameters-in-story.md
+++ b/docs/_snippets/parameters-in-story.md
@@ -10,14 +10,11 @@ const meta: Meta<Button> = {
 export default meta;
 type Story = StoryObj<Button>;
 
-export const Primary: Story = {
+export const OnDark: Story = {
+  // 👇 Story-level parameters
   parameters: {
     backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
+      default: 'dark',
     },
   },
 };
@@ -60,7 +57,7 @@ export const OnDark = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -77,6 +74,26 @@ export const OnDark = {
 };
 ```
 
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const OnDark = meta.story({
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -119,7 +136,7 @@ export const OnDark: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -142,6 +159,26 @@ export const OnDark: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const OnDark = meta.story({
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -184,7 +221,7 @@ export const OnDark: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -207,23 +244,36 @@ export const OnDark: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const OnDark = meta.story({
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
 };
 
 export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
+  // 👇 Story-level parameters
   parameters: {
     backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
+      default: 'dark',
     },
   },
 };
@@ -240,17 +290,10 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
+  // 👇 Story-level parameters
   parameters: {
     backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
+      default: 'dark',
     },
   },
 };
diff --git a/docs/_snippets/react-native-web-vite-add-framework.md b/docs/_snippets/react-native-web-vite-add-framework.md
index afe03d4844a6..87479c805a0d 100644
--- a/docs/_snippets/react-native-web-vite-add-framework.md
+++ b/docs/_snippets/react-native-web-vite-add-framework.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next support -->
+
 ```js filename=".storybook/main.js" renderer="react-native-web" language="js"
 export default {
   addons: [
diff --git a/docs/_snippets/react-vite-add-framework.md b/docs/_snippets/react-vite-add-framework.md
index 239b6c661bbd..9e3450ba3bc4 100644
--- a/docs/_snippets/react-vite-add-framework.md
+++ b/docs/_snippets/react-vite-add-framework.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   // framework: '@storybook/react-webpack5', 👈 Remove this
@@ -6,7 +6,17 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/react-vite/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/react-vite', // 👈 Add this
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
@@ -17,3 +27,13 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/react-vite/node';
+
+export default defineMain({
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/react-vite', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/react-vite-framework-options.md b/docs/_snippets/react-vite-framework-options.md
index dc37a8dd5ecf..3ebde6392862 100644
--- a/docs/_snippets/react-vite-framework-options.md
+++ b/docs/_snippets/react-vite-framework-options.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     name: '@storybook/react-vite',
@@ -9,7 +9,20 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/react-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/react-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+});
+```
diff --git a/docs/_snippets/react-webpack5-add-framework.md b/docs/_snippets/react-webpack5-add-framework.md
index 9dea87af6bc6..3db4141ee4f8 100644
--- a/docs/_snippets/react-webpack5-add-framework.md
+++ b/docs/_snippets/react-webpack5-add-framework.md
@@ -1,11 +1,22 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   framework: '@storybook/react-webpack5', // 👈 Add this
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/react-webpack5/node';
+
+export default defineMain({
+  // ...
+  framework: '@storybook/react-webpack5', // 👈 Add this
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
@@ -15,3 +26,12 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/react-webpack5/node';
+
+export default defineMain({
+  // ...
+  framework: '@storybook/react-webpack5', // 👈 Add this
+});
+```
diff --git a/docs/_snippets/react-webpack5-framework-options.md b/docs/_snippets/react-webpack5-framework-options.md
index 6a251f4d19ff..f0065cc466d5 100644
--- a/docs/_snippets/react-webpack5-framework-options.md
+++ b/docs/_snippets/react-webpack5-framework-options.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   framework: {
     name: '@storybook/react-webpack5',
@@ -9,7 +11,20 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/react-webpack5/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      // ...
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
@@ -23,3 +38,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/react-webpack5/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      // ...
+    },
+  },
+});
+```
diff --git a/docs/_snippets/register-component-with-play-function.md b/docs/_snippets/register-component-with-play-function.md
index 177564a6205a..0aeb407189e4 100644
--- a/docs/_snippets/register-component-with-play-function.md
+++ b/docs/_snippets/register-component-with-play-function.md
@@ -129,7 +129,7 @@ export const FilledForm = {
 };
 ```
 
-```js filename="RegistrationForm.stories.js|jsx" renderer="common" language="js"
+```js filename="RegistrationForm.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { userEvent, within } from '@storybook/test';
 
 import { RegistrationForm } from './RegistrationForm';
@@ -169,6 +169,49 @@ export const FilledForm = {
 };
 ```
 
+```js filename="RegistrationForm.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { RegistrationForm } from './RegistrationForm';
+
+const meta = preview.meta({
+  component: RegistrationForm,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    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,
+    });
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
+});
+```
+
 ```svelte filename="RegistrationForm.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -260,7 +303,7 @@ export const FilledForm: Story = {
 };
 ```
 
-```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -306,6 +349,49 @@ export const FilledForm: Story = {
 };
 ```
 
+```ts filename="RegistrationForm.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { RegistrationForm } from './RegistrationForm';
+
+const meta = preview.meta({
+  component: RegistrationForm,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    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,
+    });
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
+});
+```
+
 ```svelte filename="RegistrationForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -397,7 +483,7 @@ export const FilledForm: Story = {
 };
 ```
 
-```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -443,6 +529,49 @@ export const FilledForm: Story = {
 };
 ```
 
+```ts filename="RegistrationForm.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, within } from '@storybook/test';
+
+import { RegistrationForm } from './RegistrationForm';
+
+const meta = preview.meta({
+  component: RegistrationForm,
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    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,
+    });
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
+});
+```
+
 ```js filename="RegistrationForm.stories.js" renderer="web-components" language="js"
 import { userEvent, within } from '@storybook/test';
 
diff --git a/docs/_snippets/rsc-feature-flag.md b/docs/_snippets/rsc-feature-flag.md
index 9a2db0873a33..dd4f7ee2f49c 100644
--- a/docs/_snippets/rsc-feature-flag.md
+++ b/docs/_snippets/rsc-feature-flag.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+<!-- TODO: Vet this example for CSF Next support -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
 export default {
   // ...
   features: {
@@ -7,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
-import { StorybookConfig } from '@storybook/nextjs';
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  features: {
+    experimentalRSC: true,
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   // ...
@@ -19,3 +34,15 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // ...
+  features: {
+    experimentalRSC: true,
+  },
+});
+```
diff --git a/docs/_snippets/rsc-parameter-in-meta.md b/docs/_snippets/rsc-parameter-in-meta.md
index 0820be0dd2ba..29106308fd00 100644
--- a/docs/_snippets/rsc-parameter-in-meta.md
+++ b/docs/_snippets/rsc-parameter-in-meta.md
@@ -1,4 +1,6 @@
-```js filename="MyServerComponent.stories.js" renderer="react" language="js"
+<!-- TODO: Vet this example for CSF Next support -->
+
+```js filename="MyServerComponent.stories.js" renderer="react" language="js" tabTitle="CSF 3"
 import MyServerComponent from './MyServerComponent';
 
 export default {
@@ -9,8 +11,22 @@ export default {
 };
 ```
 
-```ts filename="MyServerComponent.stories.ts" renderer="react" language="ts-4-9"
-import { Meta, StoryObj } from '@storybook/react';
+```js filename="MyServerComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import MyServerComponent from './MyServerComponent';
+
+const meta = preview.meta({
+  component: MyServerComponent,
+  parameters: {
+    react: { rsc: false },
+  },
+});
+```
+
+```ts filename="MyServerComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import MyServerComponent from './MyServerComponent';
 
@@ -23,8 +39,22 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyServerComponent.stories.ts" renderer="react" language="ts"
-import { Meta, StoryObj } from '@storybook/react';
+```ts filename="MyServerComponent.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import MyServerComponent from './MyServerComponent';
+
+const meta = preview.meta({
+  component: MyServerComponent,
+  parameters: {
+    react: { rsc: false },
+  },
+});
+```
+
+```ts filename="MyServerComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/react';
 
 import MyServerComponent from './MyServerComponent';
 
@@ -36,3 +66,17 @@ const meta: Meta<typeof MyServerComponent> = {
 };
 export default meta;
 ```
+
+```ts filename="MyServerComponent.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import MyServerComponent from './MyServerComponent';
+
+const meta = preview.meta({
+  component: MyServerComponent,
+  parameters: {
+    react: { rsc: false },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-a11y-register.md b/docs/_snippets/storybook-a11y-register.md
index 774d14622063..0e52c74c06a2 100644
--- a/docs/_snippets/storybook-a11y-register.md
+++ b/docs/_snippets/storybook-a11y-register.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -10,8 +10,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y', //👈 The a11y addon goes here
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -25,3 +39,17 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y', //👈 The a11y addon goes here
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-addon-a11y-global-config.md b/docs/_snippets/storybook-addon-a11y-global-config.md
index a0cad0f62760..45816bc3e747 100644
--- a/docs/_snippets/storybook-addon-a11y-global-config.md
+++ b/docs/_snippets/storybook-addon-a11y-global-config.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
 ```js filename=".storybook/preview.js" renderer="common" language="js"
 export default {
   parameters: {
diff --git a/docs/_snippets/storybook-addon-controls-custom-matchers.md b/docs/_snippets/storybook-addon-controls-custom-matchers.md
index 80b0358eedc7..b1f280d8311a 100644
--- a/docs/_snippets/storybook-addon-controls-custom-matchers.md
+++ b/docs/_snippets/storybook-addon-controls-custom-matchers.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     controls: {
@@ -11,7 +13,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -28,3 +46,19 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-addons-local-preset.md b/docs/_snippets/storybook-addons-local-preset.md
index 63f298ae2da6..058b33a6f4f4 100644
--- a/docs/_snippets/storybook-addons-local-preset.md
+++ b/docs/_snippets/storybook-addons-local-preset.md
@@ -1,3 +1,5 @@
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
 ```js filename="example-addon/src/preset.js" renderer="common" language="js"
 import { webpackFinal as webpack } from './webpack/webpackFinal';
 import { viteFinal as vite } from './vite/viteFinal';
diff --git a/docs/_snippets/storybook-addons-preset-preview.md b/docs/_snippets/storybook-addons-preset-preview.md
index 7c76b2b544de..89beffd1613c 100644
--- a/docs/_snippets/storybook-addons-preset-preview.md
+++ b/docs/_snippets/storybook-addons-preset-preview.md
@@ -1,6 +1,7 @@
-```js filename="example-addon/src/preview.js" renderer="common" language="js"
-import { PARAM_KEY } from './constants';
+<!-- TODO: Vet this code example for API changes -->
 
+```js filename="example-addon/src/preview.js" renderer="common" language="js" tabTitle="CSF 3"
+import { PARAM_KEY } from './constants';
 import { CustomDecorator } from './decorators';
 
 const preview = {
@@ -13,8 +14,24 @@ const preview = {
 export default preview;
 ```
 
-```ts filename="example-addon/src/preview.ts" renderer="common" language="ts"
-import type { Renderer, ProjectAnnotations } from '@storybook/types';
+```js filename="example-addon/src/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { PARAM_KEY } from './constants';
+import { CustomDecorator } from './decorators';
+
+export default definePreview({
+  decorators: [CustomDecorator],
+  globals: {
+    [PARAM_KEY]: false,
+  },
+});
+```
+
+```ts filename="example-addon/src/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
+import type { ProjectAnnotations, Renderer } from '@storybook/types';
+
 import { PARAM_KEY } from './constants';
 import { CustomDecorator } from './decorators';
 
@@ -27,3 +44,19 @@ const preview: ProjectAnnotations<Renderer> = {
 
 export default preview;
 ```
+
+```ts filename="example-addon/src/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import type { ProjectAnnotations, Renderer } from '@storybook/types';
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { PARAM_KEY } from './constants';
+import { CustomDecorator } from './decorators';
+
+export default definePreview({
+  decorators: [CustomDecorator],
+  globals: {
+    [PARAM_KEY]: false,
+  },
+});
+```
diff --git a/docs/_snippets/storybook-addons-preset-webpackFinal.md b/docs/_snippets/storybook-addons-preset-webpackFinal.md
index f9bc01b4cd48..ad3736d56eb6 100644
--- a/docs/_snippets/storybook-addons-preset-webpackFinal.md
+++ b/docs/_snippets/storybook-addons-preset-webpackFinal.md
@@ -1,3 +1,5 @@
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
 ```js filename="example-addon/src/webpack/webpackFinal.js" renderer="common" language="js"
 export function webpackFinal(config, options = {}) {
   const rules = [
diff --git a/docs/_snippets/storybook-auto-docs-full-config.md b/docs/_snippets/storybook-auto-docs-full-config.md
index 1a65731752cd..5d96d84d33cf 100644
--- a/docs/_snippets/storybook-auto-docs-full-config.md
+++ b/docs/_snippets/storybook-auto-docs-full-config.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
@@ -11,8 +11,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  docs: {
+    //👇 See the table below for the list of supported options
+    defaultName: 'Documentation',
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -27,3 +42,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  docs: {
+    //👇 See the table below for the list of supported options
+    defaultName: 'Documentation',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-auto-docs-main-mdx-config.md b/docs/_snippets/storybook-auto-docs-main-mdx-config.md
index 2d14f86e3f29..19d5f7d8bded 100644
--- a/docs/_snippets/storybook-auto-docs-main-mdx-config.md
+++ b/docs/_snippets/storybook-auto-docs-main-mdx-config.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: [
     //👇 Your documentation written in MDX along with your stories goes here
@@ -11,12 +11,26 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    //👇 Your documentation written in MDX along with your stories goes here
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-essentials'],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
   stories: [
     //👇 Your documentation written in MDX along with your stories goes here
@@ -28,3 +42,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    //👇 Your documentation written in MDX along with your stories goes here
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-essentials'],
+});
+```
diff --git a/docs/_snippets/storybook-backgrounds-addon-default-params.md b/docs/_snippets/storybook-backgrounds-addon-default-params.md
index 74d28417e073..adeddcdb28ae 100644
--- a/docs/_snippets/storybook-backgrounds-addon-default-params.md
+++ b/docs/_snippets/storybook-backgrounds-addon-default-params.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next (usage with addons) -->
+
 ```js filename="addons/backgrounds/src/preset/addParameter.tsx" renderer="common" language="js"
 export default {
   parameters: {
diff --git a/docs/_snippets/storybook-backgrounds-preset-config.md b/docs/_snippets/storybook-backgrounds-preset-config.md
index 0f519253b03a..5014a48db508 100644
--- a/docs/_snippets/storybook-backgrounds-preset-config.md
+++ b/docs/_snippets/storybook-backgrounds-preset-config.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next (usage with addons) -->
+
 ```js filename="preset.js" renderer="common" language="js"
 export function config(entry = []) {
   return [...entry, require.resolve('./defaultParameters')];
diff --git a/docs/_snippets/storybook-canvas-doc-block-story.md b/docs/_snippets/storybook-canvas-doc-block-story.md
index ada5f64f9fa9..684fa81591c5 100644
--- a/docs/_snippets/storybook-canvas-doc-block-story.md
+++ b/docs/_snippets/storybook-canvas-doc-block-story.md
@@ -1,4 +1,4 @@
-```jsx filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```jsx filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { ColorItem, ColorPalette } from '@storybook/blocks';
 
 import { MyComponent } from './MyComponent';
@@ -49,7 +49,7 @@ export const Colors = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -106,7 +106,7 @@ export const Colors: Story = {
 };
 ```
 
-```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -162,3 +162,165 @@ export const Colors: Story = {
   ),
 };
 ```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { ColorItem, ColorPalette } from '@storybook/blocks';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const theme = {
+  colors: {
+    primaryDark: {
+      value: '#1C1C1C',
+    },
+    primaryRegular: {
+      value: '#363636',
+    },
+    primaryLight1: {
+      value: '#4D4D4D',
+    },
+    primaryLight2: {
+      value: '#878787',
+    },
+    primaryLight3: {
+      value: '#D1D1D1',
+    },
+    primaryLight4: {
+      value: '#EDEDED',
+    },
+  },
+};
+
+// ❌ Don't use the Doc Blocks inside your stories. It will break Storybook with a cryptic error.
+export const Colors = meta.story({
+  render: () => (
+    <ColorPalette>
+      {Object.entries(theme.colors).map(([key, { value }]) => (
+        <ColorItem
+          colors={{
+            [key]: value,
+          }}
+          key={key}
+          subtitle={`theme.colors.${key}`}
+          title={key}
+        />
+      ))}
+    </ColorPalette>
+  ),
+});
+```
+
+```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { ColorItem, ColorPalette } from '@storybook/blocks';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const theme = {
+  colors: {
+    primaryDark: {
+      value: '#1C1C1C',
+    },
+    primaryRegular: {
+      value: '#363636',
+    },
+    primaryLight1: {
+      value: '#4D4D4D',
+    },
+    primaryLight2: {
+      value: '#878787',
+    },
+    primaryLight3: {
+      value: '#D1D1D1',
+    },
+    primaryLight4: {
+      value: '#EDEDED',
+    },
+  },
+};
+
+// ❌ Don't use the Doc Blocks inside your stories. It will break Storybook with a cryptic error.
+export const Colors = meta.story({
+  render: () => (
+    <ColorPalette>
+      {Object.entries(theme.colors).map(([key, { value }]) => (
+        <ColorItem
+          colors={{
+            [key]: value,
+          }}
+          key={key}
+          subtitle={`theme.colors.${key}`}
+          title={key}
+        />
+      ))}
+    </ColorPalette>
+  ),
+});
+```
+
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { ColorItem, ColorPalette } from '@storybook/blocks';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  component: MyComponent,
+});
+
+const theme = {
+  colors: {
+    primaryDark: {
+      value: '#1C1C1C',
+    },
+    primaryRegular: {
+      value: '#363636',
+    },
+    primaryLight1: {
+      value: '#4D4D4D',
+    },
+    primaryLight2: {
+      value: '#878787',
+    },
+    primaryLight3: {
+      value: '#D1D1D1',
+    },
+    primaryLight4: {
+      value: '#EDEDED',
+    },
+  },
+};
+
+// ❌ Don't use the Doc Blocks inside your stories. It will break Storybook with a cryptic error.
+export const Colors = meta.story({
+  render: () => (
+    <ColorPalette>
+      {Object.entries(theme.colors).map(([key, { value }]) => (
+        <ColorItem
+          colors={{
+            [key]: value,
+          }}
+          key={key}
+          subtitle={`theme.colors.${key}`}
+          title={key}
+        />
+      ))}
+    </ColorPalette>
+  ),
+});
+```
diff --git a/docs/_snippets/storybook-component-layout-param.md b/docs/_snippets/storybook-component-layout-param.md
index c24d0d683281..267602c2226e 100644
--- a/docs/_snippets/storybook-component-layout-param.md
+++ b/docs/_snippets/storybook-component-layout-param.md
@@ -12,7 +12,7 @@ const meta: Meta<Button> = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -24,7 +24,22 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // Sets the layout parameter component wide.
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -41,7 +56,22 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: 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 name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -58,6 +88,21 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // Sets the layout parameter component wide.
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/storybook-csf-3-auto-title-redundant.md b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
index 557977ef1af6..01bef2d077d0 100644
--- a/docs/_snippets/storybook-csf-3-auto-title-redundant.md
+++ b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
@@ -22,10 +22,14 @@ export const Default: Story = {
 };
 ```
 
-```js filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { MyComponent } from './MyComponent';
 
 export default {
+  /* 👇 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',
 };
@@ -37,7 +41,29 @@ export const Default = {
 };
 ```
 
-```ts filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="common" language="ts-4-9"
+```js filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  component: MyComponent,
+  title: 'components/MyComponent/MyComponent',
+});
+
+export const Default = meta.story({
+  args: {
+    something: 'Something else',
+  },
+});
+```
+
+```ts filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -62,7 +88,29 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="components/MyComponent/MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  component: MyComponent,
+  title: 'components/MyComponent/MyComponent',
+});
+
+export const Default = meta.story({
+  args: {
+    something: 'Something else',
+  },
+});
+```
+
+```ts filename="components/MyComponent/MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -87,6 +135,28 @@ export const Default: Story = {
 };
 ```
 
+```ts filename="components/MyComponent/MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { MyComponent } from './MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  component: MyComponent,
+  title: 'components/MyComponent/MyComponent',
+});
+
+export const Default = meta.story({
+  args: {
+    something: 'Something else',
+  },
+});
+```
+
 ```js filename="components/MyComponent/MyComponent.stories.js" renderer="web-components" language="js"
 export default {
   component: 'my-component',
diff --git a/docs/_snippets/storybook-custom-manager-head.md b/docs/_snippets/storybook-custom-manager-head.md
index 46c400359df9..2f30b8a093a8 100644
--- a/docs/_snippets/storybook-custom-manager-head.md
+++ b/docs/_snippets/storybook-custom-manager-head.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   managerHead: (head) => `
     ${head}
@@ -7,8 +7,20 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  managerHead: (head) => `
+    ${head}
+    <link rel="icon" type="image/png" href="/logo192.png" sizes="192x192" />
+  `,
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -20,3 +32,15 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  managerHead: (head) => `
+    ${head}
+    <link rel="icon" type="image/png" href="/logo192.png" sizes="192x192" />
+  `,
+});
+```
diff --git a/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md b/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
index 2cd36e749a60..db44f3efca16 100644
--- a/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
+++ b/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
@@ -1,4 +1,4 @@
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 // ❌ Don't use the package's index file to import the component.
 // import { MyComponent } from '@component-package';
 
@@ -15,7 +15,27 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+// ❌ Don't use the package's index file to import the component.
+// import { MyComponent } from '@component-package';
+
+// ✅ Use the component's export to import it directly.
+import { MyComponent } from '@component-package/src/MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -37,7 +57,27 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+// ❌ Don't use the package's index file to import the component.
+// import { MyComponent } from '@component-package';
+
+// ✅ Use the component's export to import it directly.
+import { MyComponent } from '@component-package/src/MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+});
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
@@ -58,3 +98,23 @@ const meta: Meta<typeof MyComponent> = {
 
 export default meta;
 ```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+// ❌ Don't use the package's index file to import the component.
+// import { MyComponent } from '@component-package';
+
+// ✅ Use the component's export to import it directly.
+import { MyComponent } from '@component-package/src/MyComponent';
+
+const meta = preview.meta({
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+});
+```
diff --git a/docs/_snippets/storybook-interactions-addon-registration.md b/docs/_snippets/storybook-interactions-addon-registration.md
index dae3fa856fe8..0391c0cba2cf 100644
--- a/docs/_snippets/storybook-interactions-addon-registration.md
+++ b/docs/_snippets/storybook-interactions-addon-registration.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -10,8 +10,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-interactions', // 👈 Register the addon
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -25,3 +39,17 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-interactions', // 👈 Register the addon
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-interactions-play-function.md b/docs/_snippets/storybook-interactions-play-function.md
index adb5900352b1..739ed1696a13 100644
--- a/docs/_snippets/storybook-interactions-play-function.md
+++ b/docs/_snippets/storybook-interactions-play-function.md
@@ -6,7 +6,7 @@ import { userEvent, waitFor, within, expect, fn } from '@storybook/test';
 import { Form } from './Form.component';
 
 const meta: Meta<Form> = {
-  component: MyComponent,
+  component: Form,
   args: {
     // 👇 Use `fn` to spy on the onSubmit arg
     onSubmit: fn(),
@@ -39,7 +39,7 @@ export const Submitted: Story = {
 };
 ```
 
-```js filename="Form.stories.js|jsx" renderer="common" language="js"
+```js filename="Form.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { userEvent, waitFor, within, expect, fn } from '@storybook/test';
 
 import { Form } from './Form';
@@ -76,7 +76,47 @@ export const Submitted = {
 };
 ```
 
-```ts filename="Form.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Form.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, waitFor, within, expect, fn } from '@storybook/test';
+
+import { Form } from './Form';
+
+const meta = preview.meta({
+  component: Form,
+  args: {
+    // 👇 Use `fn` to spy on the onSubmit arg
+    onSubmit: fn(),
+  },
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const Submitted = meta.story({
+  play: async ({ args, canvasElement, step }) => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
+
+    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="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -118,7 +158,46 @@ export const Submitted: Story = {
 };
 ```
 
-```ts filename="Form.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Form.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, waitFor, within, expect, fn } from '@storybook/test';
+
+import { Form } from './Form';
+
+const meta = preview.meta({
+  component: Form,
+  args: {
+    // 👇 Use `fn` to spy on the onSubmit arg
+    onSubmit: fn(),
+  },
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const Submitted = meta.story({
+  play: async ({ args, canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    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="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -160,6 +239,45 @@ export const Submitted: Story = {
 };
 ```
 
+```ts filename="Form.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { userEvent, waitFor, within, expect, fn } from '@storybook/test';
+
+import { Form } from './Form';
+
+const meta = preview.meta({
+  component: Form,
+  args: {
+    // 👇 Use `fn` to spy on the onSubmit arg
+    onSubmit: fn(),
+  },
+});
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const Submitted = meta.story({
+  play: async ({ args, canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    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 filename="Form.stories.js" renderer="web-components" language="js"
 import { userEvent, waitFor, within, expect, fn } from '@storybook/test';
 
diff --git a/docs/_snippets/storybook-main-advanced-config-example.md b/docs/_snippets/storybook-main-advanced-config-example.md
index b09dfe148cf3..28244c68c3bf 100644
--- a/docs/_snippets/storybook-main-advanced-config-example.md
+++ b/docs/_snippets/storybook-main-advanced-config-example.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Vet this for CSF Next support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   viteFinal: async (config, options) => {
     // Update config here
@@ -14,8 +16,27 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  viteFinal: async (config, options) => {
+    // Update config here
+    return config;
+  },
+  webpackFinal: async (config, options) => {
+    // Change webpack config
+    return config;
+  },
+  babel: async (config, options) => {
+    return config;
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -34,3 +55,22 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  viteFinal: async (config, options) => {
+    // Update config here
+    return config;
+  },
+  webpackFinal: async (config, options) => {
+    // Change webpack config
+    return config;
+  },
+  babel: async (config, options) => {
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-auto-title-custom.md b/docs/_snippets/storybook-main-auto-title-custom.md
index ee1abb62d8b2..631f7d10781a 100644
--- a/docs/_snippets/storybook-main-auto-title-custom.md
+++ b/docs/_snippets/storybook-main-auto-title-custom.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: [
     {
@@ -11,8 +11,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    {
+      directory: '../src',
+      titlePrefix: 'Custom', // 👈 Configure the title prefix
+    },
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -27,3 +42,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: [
+    {
+      directory: '../src',
+      titlePrefix: 'Custom', // 👈 Configure the title prefix
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-config-remark-options.md b/docs/_snippets/storybook-main-config-remark-options.md
index 2126d1c26c2c..d25105250af4 100644
--- a/docs/_snippets/storybook-main-config-remark-options.md
+++ b/docs/_snippets/storybook-main-config-remark-options.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage with CSF Next -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import remarkGfm from 'remark-gfm';
 
 export default {
@@ -21,7 +23,33 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import remarkGfm from 'remark-gfm';
+
+export default defineMain({
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 import remarkGfm from 'remark-gfm';
 
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
@@ -47,3 +75,28 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import remarkGfm from 'remark-gfm';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-configuration-src-dir.md b/docs/_snippets/storybook-main-configuration-src-dir.md
index ecc36c851e55..f6fecf8edfb5 100644
--- a/docs/_snippets/storybook-main-configuration-src-dir.md
+++ b/docs/_snippets/storybook-main-configuration-src-dir.md
@@ -1,13 +1,23 @@
-```js filename="./storybook/main.js" renderer="common" language="js"
+```js filename="./storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src'],
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src'],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -17,3 +27,13 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src'],
+});
+```
diff --git a/docs/_snippets/storybook-main-disable-addon.md b/docs/_snippets/storybook-main-disable-addon.md
index ddf6350af496..125423eb0dcd 100644
--- a/docs/_snippets/storybook-main-disable-addon.md
+++ b/docs/_snippets/storybook-main-disable-addon.md
@@ -1,6 +1,8 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- Vet and update CSF Next examples for support of the new addons configuration -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -14,8 +16,26 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false, // 👈 disable the backgrounds addon
+      },
+    },
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -33,3 +53,21 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false, // 👈 disable the backgrounds addon
+      },
+    },
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-disable-telemetry.md b/docs/_snippets/storybook-main-disable-telemetry.md
index fd28e548ce3c..645288d207fe 100644
--- a/docs/_snippets/storybook-main-disable-telemetry.md
+++ b/docs/_snippets/storybook-main-disable-telemetry.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-extend-ts-config.md b/docs/_snippets/storybook-main-extend-ts-config.md
index e8548fe59bfe..cceeff7a75f2 100644
--- a/docs/_snippets/storybook-main-extend-ts-config.md
+++ b/docs/_snippets/storybook-main-extend-ts-config.md
@@ -1,5 +1,7 @@
+<!-- TODO: Vet the following example for support of the CSF Next API -->
+
 ```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -15,8 +17,8 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite)
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, react-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -33,3 +35,20 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen',
+    reactDocgenTypescriptOptions: {}, // Available only when reactDocgen is set to 'react-docgen-typescript'
+    skipCompiler: true,
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md b/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
index fe3e0f978416..12d840f1fb00 100644
--- a/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
+++ b/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
@@ -11,8 +11,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs.
+    reactDocgen: 'react-docgen',
+    check: false,
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -27,3 +42,18 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs.
+    reactDocgen: 'react-docgen',
+    check: false,
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-full-individual-essentials-config.md b/docs/_snippets/storybook-main-full-individual-essentials-config.md
index 85e0e4612767..a94aa0518964 100644
--- a/docs/_snippets/storybook-main-full-individual-essentials-config.md
+++ b/docs/_snippets/storybook-main-full-individual-essentials-config.md
@@ -1,6 +1,8 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- Vet and update CSF Next examples for support of the new addons configuration -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -27,8 +29,39 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-actions',
+    '@storybook/addon-viewport',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        csfPluginOptions: null,
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [],
+          },
+        },
+      },
+    },
+    '@storybook/addon-controls',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-toolbars',
+    '@storybook/addon-measure',
+    '@storybook/addon-outline',
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -59,3 +92,34 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-actions',
+    '@storybook/addon-viewport',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        csfPluginOptions: null,
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [],
+          },
+        },
+      },
+    },
+    '@storybook/addon-controls',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-toolbars',
+    '@storybook/addon-measure',
+    '@storybook/addon-outline',
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-js-md-files.md b/docs/_snippets/storybook-main-js-md-files.md
index 96ec0d8622ac..7aca78d80549 100644
--- a/docs/_snippets/storybook-main-js-md-files.md
+++ b/docs/_snippets/storybook-main-js-md-files.md
@@ -1,13 +1,23 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../my-project/src/components/*.@(js|md)'],
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../my-project/src/components/*.@(js|md)'],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -17,3 +27,13 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../my-project/src/components/*.@(js|md)'],
+});
+```
diff --git a/docs/_snippets/storybook-main-pnpm-with-module-resolution.md b/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
index f022bd2f611b..342bda84303d 100644
--- a/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
+++ b/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Vet this example for CSF Next-->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import path from 'path';
 
 const getAbsolutePath = (packageName) =>
@@ -18,7 +20,31 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import path from 'path';
+
+const getAbsolutePath = (packageName) =>
+  path.dirname(require.resolve(path.join(packageName, 'package.json')));
+
+export default defineMain({
+  framework: {
+    // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+    name: getAbsolutePath('@storybook/your-framework'),
+    options: {},
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  addons: [
+    //👇 Use getAbsolutePath when referencing Storybook's addons and frameworks
+    getAbsolutePath('@storybook/addon-essentials'),
+  ],
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -42,3 +68,26 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import path from 'path';
+
+const getAbsolutePath = (packageName: string): any =>
+  path.dirname(require.resolve(path.join(packageName, 'package.json')));
+
+export default defineMain({
+  framework: {
+    // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+    name: getAbsolutePath('@storybook/your-framework'),
+    options: {},
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    //👇 Use getAbsolutePath when referencing Storybook's addons and frameworks
+    getAbsolutePath('@storybook/addon-essentials'),
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-prop-filter.md b/docs/_snippets/storybook-main-prop-filter.md
index bdb28d02e8bd..28fbb730672b 100644
--- a/docs/_snippets/storybook-main-prop-filter.md
+++ b/docs/_snippets/storybook-main-prop-filter.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -21,3 +21,25 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      // Filter out third-party props from node_modules except @mui packages.
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-react-docgen-typescript.md b/docs/_snippets/storybook-main-react-docgen-typescript.md
index 71f562f3fe1a..2acbe131c4f4 100644
--- a/docs/_snippets/storybook-main-react-docgen-typescript.md
+++ b/docs/_snippets/storybook-main-react-docgen-typescript.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -15,3 +15,19 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    // Provide your own options if necessary.
+    // See https://storybook.js.org/docs/configure/typescript for more information.
+    reactDocgenTypescriptOptions: {},
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-ref-local.md b/docs/_snippets/storybook-main-ref-local.md
index 7cdea926c5ed..d5390f7168cb 100644
--- a/docs/_snippets/storybook-main-ref-local.md
+++ b/docs/_snippets/storybook-main-ref-local.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   refs: {
@@ -16,8 +16,28 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    react: {
+      title: 'React',
+      url: 'http://localhost:7007',
+    },
+    angular: {
+      title: 'Angular',
+      url: 'http://localhost:7008',
+    },
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -37,3 +57,23 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  refs: {
+    react: {
+      title: 'React',
+      url: 'http://localhost:7007',
+    },
+    angular: {
+      title: 'Angular',
+      url: 'http://localhost:7008',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-register-addon.md b/docs/_snippets/storybook-main-register-addon.md
index 166793a4632b..cee093faf90e 100644
--- a/docs/_snippets/storybook-main-register-addon.md
+++ b/docs/_snippets/storybook-main-register-addon.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next (usage with addons) -->
+
 ```js filename=".storybook/main.js" renderer="common" language="js"
 export default {
   addons: ['path/to/manager.js'],
diff --git a/docs/_snippets/storybook-main-register-essentials-addon.md b/docs/_snippets/storybook-main-register-essentials-addon.md
index a12e9e58c48f..4aa86327870c 100644
--- a/docs/_snippets/storybook-main-register-essentials-addon.md
+++ b/docs/_snippets/storybook-main-register-essentials-addon.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- Vet and update CSF Next examples for support of the new addons configuration -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -6,8 +8,19 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -18,3 +31,14 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
+});
+```
diff --git a/docs/_snippets/storybook-main-register-example-addon.md b/docs/_snippets/storybook-main-register-example-addon.md
index ac59dd73e354..15beab1e7acc 100644
--- a/docs/_snippets/storybook-main-register-example-addon.md
+++ b/docs/_snippets/storybook-main-register-example-addon.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   addons: [
     // Other Storybook addons
@@ -7,8 +7,20 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y',
+  ],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -20,3 +32,15 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-a11y',
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-main-register-individual-actions-addon.md b/docs/_snippets/storybook-main-register-individual-actions-addon.md
index 248a85c4afb9..e2a4877ee8f5 100644
--- a/docs/_snippets/storybook-main-register-individual-actions-addon.md
+++ b/docs/_snippets/storybook-main-register-individual-actions-addon.md
@@ -1,14 +1,27 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- Vet and update CSF Next examples for support of the new addons configuration -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-actions'],
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-actions'],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -19,3 +32,14 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-actions'],
+});
+```
diff --git a/docs/_snippets/storybook-main-simplified-config.md b/docs/_snippets/storybook-main-simplified-config.md
index 161d12897a64..f135ff52900e 100644
--- a/docs/_snippets/storybook-main-simplified-config.md
+++ b/docs/_snippets/storybook-main-simplified-config.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -10,7 +12,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    config.plugins.push(/* ... */);
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -25,3 +41,17 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    config.plugins.push(/* ... */);
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md b/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
index 6149c57438be..63020b5093b0 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import path from 'path';
 
 export default {
@@ -17,7 +19,28 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import path from 'path';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+      };
+    }
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 import path from 'path';
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
@@ -38,3 +61,23 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/your-framework/node';
+
+import path from 'path';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+      };
+    }
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-ts-module-resolution.md b/docs/_snippets/storybook-main-ts-module-resolution.md
index c6932f0cc9be..295599fda048 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 export default {
@@ -19,7 +21,30 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ];
+    }
+    return config;
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -43,3 +68,26 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ];
+    }
+    return config;
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-use-manager-entries.md b/docs/_snippets/storybook-main-use-manager-entries.md
index 9f70558000bd..c91644adcbbd 100644
--- a/docs/_snippets/storybook-main-use-manager-entries.md
+++ b/docs/_snippets/storybook-main-use-manager-entries.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next (usage with addons) -->
+
 ```js filename=".storybook/main.js" renderer="common" language="js"
 export default {
   managerEntries: ['some-storybook-addon/entry-point.js'],
diff --git a/docs/_snippets/storybook-main-using-existing-config.md b/docs/_snippets/storybook-main-using-existing-config.md
index e7c60a8f8b20..ab4415bd45db 100644
--- a/docs/_snippets/storybook-main-using-existing-config.md
+++ b/docs/_snippets/storybook-main-using-existing-config.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported.
 
 export default {
@@ -14,7 +16,25 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported.
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      module: { ...config.module, rules: [...config.module.rules, ...custom.module.rules] },
+    };
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -33,3 +53,21 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported.
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      module: { ...config.module, rules: [...config.module.rules, ...custom.module.rules] },
+    };
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-webpack-options.md b/docs/_snippets/storybook-main-webpack-options.md
index bbb9728f62ff..19548b560dd0 100644
--- a/docs/_snippets/storybook-main-webpack-options.md
+++ b/docs/_snippets/storybook-main-webpack-options.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -15,7 +17,26 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true,
+        lazyCompilation: true,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -35,3 +56,22 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true,
+        lazyCompilation: true,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-main-webpack-preset-config.md b/docs/_snippets/storybook-main-webpack-preset-config.md
index 1967202f9119..2b9a5920c97a 100644
--- a/docs/_snippets/storybook-main-webpack-preset-config.md
+++ b/docs/_snippets/storybook-main-webpack-preset-config.md
@@ -1,3 +1,5 @@
+<!-- TODO: Needs vetting for Webpack-based and future framework support -->
+
 ```js filename=".storybook/main.js" renderer="common" language="js"
 export async function webpack(baseConfig, options) {
   // Modify or replace config.
diff --git a/docs/_snippets/storybook-preset-full-config-object.md b/docs/_snippets/storybook-preset-full-config-object.md
index d744586ea9f0..b16cb469fd07 100644
--- a/docs/_snippets/storybook-preset-full-config-object.md
+++ b/docs/_snippets/storybook-preset-full-config-object.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next (usage with addons & Webpack) -->
+
 ```js filename=".storybook/my-preset.js" renderer="common" language="js"
 export default {
   managerWebpack: async (config, options) => {
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 52d25e847a61..ea2b9a85f6ce 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,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import * as React from 'react';
 
 import { DocsContainer } from '@storybook/blocks';
@@ -22,9 +24,34 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import * as React from 'react';
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { DocsContainer } from '@storybook/blocks';
 
+const ExampleContainer = ({ children, ...props }) => {
+  return <DocsContainer {...props}>{children}</DocsContainer>;
+};
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: ExampleContainer,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
+import * as React from 'react';
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -50,3 +77,29 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import * as React from 'react';
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { DocsContainer } from '@storybook/blocks';
+
+const ExampleContainer = ({ children, ...props }) => {
+  return <DocsContainer {...props}>{children}</DocsContainer>;
+};
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: ExampleContainer,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md b/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
index 0e97c75f2b19..9dcba2cae6c2 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
@@ -1,4 +1,4 @@
-```jsx filename=".storybook/preview.jsx" renderer="common" language="js"
+```jsx filename=".storybook/preview.jsx" renderer="common" language="js" tabTitle="CSF 3"
 import DocumentationTemplate from './DocumentationTemplate.mdx';
 
 export default {
@@ -9,3 +9,50 @@ export default {
   },
 };
 ```
+
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-framework';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+const preview: Preview = {
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+};
+
+export default preview;
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md b/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
index b7a8a420f8eb..775c07a7cf49 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
@@ -1,4 +1,4 @@
-```jsx filename=".storybook/preview.jsx" renderer="common" language="js"
+```jsx filename=".storybook/preview.jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
 
 export default {
@@ -25,7 +25,37 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.tsx" renderer="common" language="ts"
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { Controls, Description, Primary, Stories, Subtitle, Title } from '@storybook/blocks';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -56,3 +86,33 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { Controls, Description, Primary, Stories, Subtitle, Title } from '@storybook/blocks';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md b/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
index 315429659e90..b84f9fe2d6be 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { MDXProvider } from '@mdx-js/react';
 
 import { DocsContainer } from '@storybook/blocks';
@@ -31,7 +33,43 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { DocsContainer } from '@storybook/blocks';
+
+import { MDXProvider } from '@mdx-js/react';
+
+import * as DesignSystem from 'your-design-system';
+
+export default {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: MyDocsContainer,
+    },
+  },
+
+  MyDocsContainer: (props) => (
+    <MDXProvider
+      components={{
+        h1: DesignSystem.H1,
+        h2: DesignSystem.H2,
+      }}
+    >
+      <DocsContainer {...props} />
+    </MDXProvider>
+  ),
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -68,3 +106,41 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MDXProvider } from '@mdx-js/react';
+
+import { DocsContainer } from '@storybook/blocks';
+
+import * as DesignSystem from 'your-design-system';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: MyDocsContainer,
+    },
+  },
+
+  MyDocsContainer: (props) => (
+    <MDXProvider
+      components={{
+        h1: DesignSystem.H1,
+        h2: DesignSystem.H2,
+      }}
+    >
+      <DocsContainer {...props} />
+    </MDXProvider>
+  ),
+};
+
+export default preview;
+```
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-theme.md b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
index 8639496e6d8d..454d20dff708 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-theme.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { themes, ensure } from '@storybook/theming';
 
 export default {
@@ -16,7 +18,28 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ensure, themes } from '@storybook/theming';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: ensure(themes.dark), // The replacement theme to use
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -38,3 +61,24 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ensure, themes } from '@storybook/theming';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: ensure(themes.dark), // The replacement theme to use
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-configure-globaltypes.md b/docs/_snippets/storybook-preview-configure-globaltypes.md
index bbf1c6dd7af8..32e200013795 100644
--- a/docs/_snippets/storybook-preview-configure-globaltypes.md
+++ b/docs/_snippets/storybook-preview-configure-globaltypes.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 const preview = {
   globalTypes: {
     theme: {
@@ -22,11 +22,11 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts-4-9"
-// Replace your-framework with the framework you are using (e.g., react, vue3)
-import { Preview } from '@storybook/your-framework';
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
 
-const preview: Preview = {
+export default definePreview({
   globalTypes: {
     theme: {
       description: 'Global theme for components',
@@ -44,12 +44,10 @@ const preview: Preview = {
   initialGlobals: {
     theme: 'light',
   },
-};
-
-export default preview;
+});
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -75,3 +73,28 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      toolbar: {
+        // The label to show for this toolbar item
+        title: 'Theme',
+        icon: 'circlehollow',
+        // Array of plain string values or MenuItem shape (see below)
+        items: ['light', 'dark'],
+        // Change title based on selected value
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-custom-canvas.md b/docs/_snippets/storybook-preview-custom-canvas.md
index 05fccc7d5366..92ac5feb8008 100644
--- a/docs/_snippets/storybook-preview-custom-canvas.md
+++ b/docs/_snippets/storybook-preview-custom-canvas.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example against CSF Next API -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { MyCanvas } from './MyCanvas';
 
 export default {
@@ -12,7 +14,24 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MyCanvas } from './MyCanvas';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      components: {
+        Canvas: MyCanvas,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -30,3 +49,20 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MyCanvas } from './MyCanvas';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      components: {
+        Canvas: MyCanvas,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-custom-code-renderer.md b/docs/_snippets/storybook-preview-custom-code-renderer.md
index a70653aee1cb..70d17e7adf0d 100644
--- a/docs/_snippets/storybook-preview-custom-code-renderer.md
+++ b/docs/_snippets/storybook-preview-custom-code-renderer.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example against CSF Next API -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { CodeBlock } from './CodeBlock';
 
 export default {
@@ -12,7 +14,24 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { CodeBlock } from './CodeBlock';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      components: {
+        code: CodeBlock,
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -30,3 +49,20 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { CodeBlock } from './CodeBlock';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      components: {
+        code: CodeBlock,
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-custom-library.md b/docs/_snippets/storybook-preview-custom-library.md
new file mode 100644
index 000000000000..9732bf0f14d1
--- /dev/null
+++ b/docs/_snippets/storybook-preview-custom-library.md
@@ -0,0 +1,52 @@
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+const preview = {
+  // ...
+};
+
+export default preview;
+```
+
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+export default definePreview({
+  // ...
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-renderer';
+
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+const preview: Preview = {
+  // ...
+};
+
+export default preview;
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+export default definePreview({
+  // ...
+});
+```
diff --git a/docs/_snippets/storybook-preview-custom-params.md b/docs/_snippets/storybook-preview-custom-params.md
index 862749b58ccc..18c7eac7ddf2 100644
--- a/docs/_snippets/storybook-preview-custom-params.md
+++ b/docs/_snippets/storybook-preview-custom-params.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
 ```js filename=".storybook/preview.js" renderer="common" language="js"
 export default {
   parameters: {
diff --git a/docs/_snippets/storybook-preview-custom-toc.md b/docs/_snippets/storybook-preview-custom-toc.md
index 25ea41c85db4..2c6c66ca8b87 100644
--- a/docs/_snippets/storybook-preview-custom-toc.md
+++ b/docs/_snippets/storybook-preview-custom-toc.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     docs: {
@@ -17,7 +17,29 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h1, h2, h3',
+        ignoreSelector: '#primary',
+        title: 'Table of Contents',
+        disable: false,
+        unsafeTocbotOptions: {
+          orderedList: false,
+        },
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -40,3 +62,25 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h1, h2, h3',
+        ignoreSelector: '#primary',
+        title: 'Table of Contents',
+        disable: false,
+        unsafeTocbotOptions: {
+          orderedList: false,
+        },
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
index 5a7a9535a138..5429943c3451 100644
--- a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
+++ b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     docs: {
@@ -8,7 +8,20 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -22,3 +35,16 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      controls: { exclude: ['style'] },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-docs-dark-theme.md b/docs/_snippets/storybook-preview-docs-dark-theme.md
index a356b6176019..5961dae7c2b9 100644
--- a/docs/_snippets/storybook-preview-docs-dark-theme.md
+++ b/docs/_snippets/storybook-preview-docs-dark-theme.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example against CSF Next API -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { themes } from '@storybook/theming';
 
 export default {
@@ -10,7 +12,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { themes } from '@storybook/theming';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -26,3 +43,18 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { themes } from '@storybook/theming';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-empty-sort-object.md b/docs/_snippets/storybook-preview-empty-sort-object.md
index 669f71ed8cef..6a0b83c18bd2 100644
--- a/docs/_snippets/storybook-preview-empty-sort-object.md
+++ b/docs/_snippets/storybook-preview-empty-sort-object.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     options: {
@@ -12,7 +12,24 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        method: '',
+        order: [],
+        locales: '',
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -30,3 +47,20 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        method: '',
+        order: [],
+        locales: '',
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-enable-toc.md b/docs/_snippets/storybook-preview-enable-toc.md
index a4d0c95e3203..8203d46cca15 100644
--- a/docs/_snippets/storybook-preview-enable-toc.md
+++ b/docs/_snippets/storybook-preview-enable-toc.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     docs: {
@@ -8,7 +8,20 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -22,3 +35,16 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-expanded-controls.md b/docs/_snippets/storybook-preview-expanded-controls.md
index e168a359868a..9ea628a689be 100644
--- a/docs/_snippets/storybook-preview-expanded-controls.md
+++ b/docs/_snippets/storybook-preview-expanded-controls.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     controls: { expanded: true },
@@ -6,7 +8,18 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: { expanded: true },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -18,3 +31,14 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: { expanded: true },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-global-decorator.md b/docs/_snippets/storybook-preview-global-decorator.md
index 041dd4dfd4d7..aed9dfc1615c 100644
--- a/docs/_snippets/storybook-preview-global-decorator.md
+++ b/docs/_snippets/storybook-preview-global-decorator.md
@@ -1,5 +1,6 @@
 ```ts filename=".storybook/preview.ts" renderer="angular" language="ts"
 import type { Preview } from '@storybook/angular';
+
 import { componentWrapperDecorator } from '@storybook/angular';
 
 const preview: Preview = {
@@ -9,7 +10,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```jsx filename=".storybook/preview.jsx" renderer="react" language="js"
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 export default {
@@ -24,7 +25,25 @@ export default {
 };
 ```
 
-```tsx filename=".storybook/preview.tsx" renderer="react" language="ts"
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
 import { Preview } from '@storybook/react';
@@ -43,6 +62,24 @@ const preview: Preview = {
 export default preview;
 ```
 
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
 ```jsx filename=".storybook/preview.js" renderer="solid" language="js"
 export default {
   decorators: [
diff --git a/docs/_snippets/storybook-preview-global-loader.md b/docs/_snippets/storybook-preview-global-loader.md
index d63d87dc76e7..cb6956f63369 100644
--- a/docs/_snippets/storybook-preview-global-loader.md
+++ b/docs/_snippets/storybook-preview-global-loader.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   loaders: [
     async () => ({
@@ -8,7 +8,20 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  loaders: [
+    async () => ({
+      currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
+    }),
+  ],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -22,3 +35,16 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  loaders: [
+    async () => ({
+      currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
+    }),
+  ],
+});
+```
diff --git a/docs/_snippets/storybook-preview-global-parameters.md b/docs/_snippets/storybook-preview-global-parameters.md
index 862749b58ccc..18c7eac7ddf2 100644
--- a/docs/_snippets/storybook-preview-global-parameters.md
+++ b/docs/_snippets/storybook-preview-global-parameters.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
 ```js filename=".storybook/preview.js" renderer="common" language="js"
 export default {
   parameters: {
diff --git a/docs/_snippets/storybook-preview-import-global-styles.md b/docs/_snippets/storybook-preview-import-global-styles.md
index 17219d409cda..da3dd6cc0c41 100644
--- a/docs/_snippets/storybook-preview-import-global-styles.md
+++ b/docs/_snippets/storybook-preview-import-global-styles.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import '../src/styles/global.css';
 
 export default {
@@ -6,7 +6,18 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import '../src/styles/global.css';
+
+export default definePreview({
+  parameters: {},
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -18,3 +29,14 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import '../src/styles/global.css';
+
+export default definePreview({
+  parameters: {},
+});
+```
diff --git a/docs/_snippets/storybook-preview-layout-param.md b/docs/_snippets/storybook-preview-layout-param.md
index 4b6c649d9a83..8de7110d6bb2 100644
--- a/docs/_snippets/storybook-preview-layout-param.md
+++ b/docs/_snippets/storybook-preview-layout-param.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     layout: 'centered',
@@ -6,7 +8,18 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -18,3 +31,14 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-locales-globaltype.md b/docs/_snippets/storybook-preview-locales-globaltype.md
index c0928d584a98..3f38b7c8f1d7 100644
--- a/docs/_snippets/storybook-preview-locales-globaltype.md
+++ b/docs/_snippets/storybook-preview-locales-globaltype.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 const preview = {
   globalTypes: {
     locale: {
@@ -23,7 +23,33 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts-4-9"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  globalTypes: {
+    locale: {
+      description: 'Internationalization locale',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', right: '🇺🇸', title: 'English' },
+          { value: 'fr', right: '🇫🇷', title: 'Français' },
+          { value: 'es', right: '🇪🇸', title: 'Español' },
+          { value: 'zh', right: '🇨🇳', title: '中文' },
+          { value: 'kr', right: '🇰🇷', title: '한국어' },
+        ],
+      },
+    },
+  },
+  initialGlobals: {
+    locale: 'en',
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -51,7 +77,33 @@ const preview: Preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  globalTypes: {
+    locale: {
+      description: 'Internationalization locale',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', right: '🇺🇸', title: 'English' },
+          { value: 'fr', right: '🇫🇷', title: 'Français' },
+          { value: 'es', right: '🇪🇸', title: 'Español' },
+          { value: 'zh', right: '🇨🇳', title: '中文' },
+          { value: 'kr', right: '🇰🇷', title: '한국어' },
+        ],
+      },
+    },
+  },
+  initialGlobals: {
+    locale: 'en',
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -78,3 +130,29 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  globalTypes: {
+    locale: {
+      description: 'Internationalization locale',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', right: '🇺🇸', title: 'English' },
+          { value: 'fr', right: '🇫🇷', title: 'Français' },
+          { value: 'es', right: '🇪🇸', title: 'Español' },
+          { value: 'zh', right: '🇨🇳', title: '中文' },
+          { value: 'kr', right: '🇰🇷', title: '한국어' },
+        ],
+      },
+    },
+  },
+  initialGlobals: {
+    locale: 'en',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-matching-argtypes.md b/docs/_snippets/storybook-preview-matching-argtypes.md
index 61e2beae5c28..7be5a49fa5e0 100644
--- a/docs/_snippets/storybook-preview-matching-argtypes.md
+++ b/docs/_snippets/storybook-preview-matching-argtypes.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     actions: { argTypesRegex: '^on.*' },
@@ -6,7 +8,18 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -18,3 +31,14 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-migrate-backgrounds-globals.md b/docs/_snippets/storybook-preview-migrate-backgrounds-globals.md
index 1fa8a03fe42f..a7569880eda1 100644
--- a/docs/_snippets/storybook-preview-migrate-backgrounds-globals.md
+++ b/docs/_snippets/storybook-preview-migrate-backgrounds-globals.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
 ```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="without-globals"
 export default {
   parameters: {
diff --git a/docs/_snippets/storybook-preview-parameters-color-swatches.md b/docs/_snippets/storybook-preview-parameters-color-swatches.md
index a018de4b7a09..f1503217cc06 100644
--- a/docs/_snippets/storybook-preview-parameters-color-swatches.md
+++ b/docs/_snippets/storybook-preview-parameters-color-swatches.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+<!-- TODO: Vet this example for addon usage in CSF Next -->
+
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     controls: {
@@ -8,7 +10,20 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'],
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -22,3 +37,16 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    controls: {
+      presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'],
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-sort-function.md b/docs/_snippets/storybook-preview-sort-function.md
index d55ba7643036..3e0308b405e6 100644
--- a/docs/_snippets/storybook-preview-sort-function.md
+++ b/docs/_snippets/storybook-preview-sort-function.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     options: {
@@ -9,7 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: (a, b) =>
+        a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -25,3 +39,18 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      // The `a` and `b` arguments in this function have a type of `import('@storybook/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 }),
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-use-global-type.md b/docs/_snippets/storybook-preview-use-global-type.md
index 556be7d2c729..b2587957fe71 100644
--- a/docs/_snippets/storybook-preview-use-global-type.md
+++ b/docs/_snippets/storybook-preview-use-global-type.md
@@ -33,26 +33,6 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts-4-9"
-// Replace your-framework with the framework you are using (e.g., solid, qwik)
-import { Preview } from '@storybook/your-framework';
-
-import { MyThemes } from '../my-theme-folder/my-theme-file';
-
-const preview: Preview = {
-  decorators: [
-    (story, context) => {
-      const selectedTheme = context.globals.theme || 'light';
-      const theme = MyThemes[selectedTheme];
-      // Your theme provider and other context providers goes in the return statement
-      return;
-    },
-  ],
-};
-
-export default preview;
-```
-
 ```ts filename=".storybook/preview.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., solid, qwik)
 import { Preview } from '@storybook/your-framework';
@@ -73,7 +53,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js"
+```jsx filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { ThemeProvider } from 'styled-components';
 
 import { MyThemes } from '../my-theme-folder/my-theme-file';
@@ -94,7 +74,25 @@ const preview = {
 export default preview;
 ```
 
-```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts-4-9"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MyThemes } from '../my-theme-folder/my-theme-file';
+
+export default definePreview({
+  decorators: [
+    (story, context) => {
+      const selectedTheme = context.globals.theme || 'light';
+      const theme = MyThemes[selectedTheme];
+      // Your theme provider and other context providers goes in the return statement
+      return;
+    },
+  ],
+});
+```
+
+```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Preview } from '@storybook/react';
 
 import { ThemeProvider } from 'styled-components';
@@ -117,7 +115,25 @@ const preview: Preview = {
 export default preview;
 ```
 
-```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts"
+```ts filename=".storybook/preview.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MyThemes } from '../my-theme-folder/my-theme-file';
+
+export default definePreview({
+  decorators: [
+    (story, context) => {
+      const selectedTheme = context.globals.theme || 'light';
+      const theme = MyThemes[selectedTheme];
+      // Your theme provider and other context providers goes in the return statement
+      return;
+    },
+  ],
+});
+```
+
+```tsx filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Preview } from '@storybook/react';
 
 import { ThemeProvider } from 'styled-components';
@@ -140,6 +156,24 @@ const preview: Preview = {
 export default preview;
 ```
 
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { MyThemes } from '../my-theme-folder/my-theme-file';
+
+export default definePreview({
+  decorators: [
+    (story, context) => {
+      const selectedTheme = context.globals.theme || 'light';
+      const theme = MyThemes[selectedTheme];
+      // Your theme provider and other context providers goes in the return statement
+      return;
+    },
+  ],
+});
+```
+
 ```js filename=".storybook/preview.js" renderer="vue" language="js"
 import { setup } from '@storybook/vue3';
 
diff --git a/docs/_snippets/storybook-preview-with-library-decorator.md b/docs/_snippets/storybook-preview-with-library-decorator.md
index 6c9b9219bf3e..717fcdeabda2 100644
--- a/docs/_snippets/storybook-preview-with-library-decorator.md
+++ b/docs/_snippets/storybook-preview-with-library-decorator.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="preview"
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="preview"
 import type { Preview } from '@storybook/angular';
 
 import { setCompodocJson } from '@storybook/addon-docs/angular';
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 04bf16d2d20e..0358eb969fcc 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     options: {
@@ -10,7 +10,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', '*', 'WIP'],
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -26,3 +41,18 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', '*', 'WIP'],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-with-ordered-pages.md b/docs/_snippets/storybook-preview-with-ordered-pages.md
index 72b79e145c55..5d13ff3a651f 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   parameters: {
     options: {
@@ -10,7 +10,22 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'],
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react, vue3)
 import { Preview } from '@storybook/your-framework';
 
@@ -26,3 +41,18 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'],
+      },
+    },
+  },
+});
+```
diff --git a/docs/_snippets/storybook-preview-with-styled-components-decorator.md b/docs/_snippets/storybook-preview-with-styled-components-decorator.md
index 1a5e6fc62ddd..8268c51a7604 100644
--- a/docs/_snippets/storybook-preview-with-styled-components-decorator.md
+++ b/docs/_snippets/storybook-preview-with-styled-components-decorator.md
@@ -8,7 +8,7 @@ const preview: Preview = {
   decorators: [
     moduleMetadata({ declarations: [ThemeProvider] }),
     componentWrapperDecorator(
-      (story) => `<theme-provider class="default">${story}</theme-provider>`,
+      (story) => `<theme-provider class="default">${story}</theme-provider>`
     ),
   ],
 };
@@ -20,14 +20,14 @@ const preview: Preview = {
     moduleMetadata({ declarations: [ThemeProvider] }),
     componentWrapperDecorator(
       (story) => `<theme-provider [class]="theme">${story}</theme-provider>`,
-      ({ globals }) => ({ theme: globals.theme }),
+      ({ globals }) => ({ theme: globals.theme })
     ),
   ],
 };
 export default preview;
 ```
 
-```jsx filename=".storybook/preview.js" renderer="react" language="js"
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
 import { ThemeProvider } from 'styled-components';
@@ -44,7 +44,27 @@ export default {
 };
 ```
 
-```tsx filename=".storybook/preview.tsx" renderer="react" language="ts"
+```jsx filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ThemeProvider } from 'styled-components';
+
+export default definePreview({
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme="default">
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+});
+```
+
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
 import { Preview } from '@storybook/react';
@@ -65,7 +85,27 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="solid" language="js"
+```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import React from 'react';
+
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { ThemeProvider } from 'styled-components';
+
+export default definePreview({
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme="default">
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+});
+```
+
+```js filename=".storybook/preview.jsx" renderer="solid" language="js"
 import { ThemeProvider } from 'solid-styled-components';
 
 const theme = {
diff --git a/docs/_snippets/storybook-story-layout-param.md b/docs/_snippets/storybook-story-layout-param.md
index dbc1fc4512d7..fd635c7053d7 100644
--- a/docs/_snippets/storybook-story-layout-param.md
+++ b/docs/_snippets/storybook-story-layout-param.md
@@ -17,7 +17,7 @@ export const WithLayout: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -31,7 +31,24 @@ export const WithLayout = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const WithLayout = meta.story({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -51,7 +68,24 @@ export const WithLayout: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const WithLayout = meta.story({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -71,6 +105,23 @@ export const WithLayout: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const WithLayout = meta.story({
+  parameters: {
+    layout: 'centered',
+  },
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
diff --git a/docs/_snippets/storybook-storyloading-with-directory.md b/docs/_snippets/storybook-storyloading-with-directory.md
index 1f9f22e37611..82dafb6860ed 100644
--- a/docs/_snippets/storybook-storyloading-with-directory.md
+++ b/docs/_snippets/storybook-storyloading-with-directory.md
@@ -1,14 +1,25 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   // 👇 Storybook will load all existing stories within the MyStories folder
   stories: ['../packages/MyStories'],
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  // 👇 Storybook will load all existing stories within the MyStories folder
+  stories: ['../packages/MyStories'],
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -19,3 +30,14 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  // 👇 Storybook will load all existing stories within the MyStories folder
+  stories: ['../packages/MyStories'],
+});
+```
diff --git a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
index 32f436b273ae..a39742545ad2 100644
--- a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
+++ b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
@@ -1,6 +1,6 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
@@ -9,8 +9,21 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
+
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
@@ -23,3 +36,16 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+  },
+});
+```
diff --git a/docs/_snippets/storybook-test-fn-mock-spy.md b/docs/_snippets/storybook-test-fn-mock-spy.md
index d371d0abb66f..7b2ce9920328 100644
--- a/docs/_snippets/storybook-test-fn-mock-spy.md
+++ b/docs/_snippets/storybook-test-fn-mock-spy.md
@@ -1,7 +1,7 @@
 ```ts filename="NoteUI.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
-import { expect, userEvent, within } from '@storybook/test';
 
+import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
@@ -24,7 +24,7 @@ export const SaveFlow: Story = {
     isEditing: true,
     note: notes[0],
   },
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const saveButton = canvas.getByRole('menuitem', { name: /done/i });
@@ -35,9 +35,9 @@ export const SaveFlow: Story = {
 };
 ```
 
-```js filename="NoteUI.stories.js" renderer="common" language="js"
+```js filename="NoteUI.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { expect, userEvent, within } from '@storybook/test';
-
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
 
@@ -56,7 +56,7 @@ export const SaveFlow = {
     isEditing: true,
     note: notes[0],
   },
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const saveButton = canvas.getByRole('menuitem', { name: /done/i });
@@ -67,11 +67,46 @@ export const SaveFlow = {
 };
 ```
 
-```ts filename="NoteUI.stories.ts" renderer="common" language="ts-4-9"
+```js filename="NoteUI.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { saveNote } from '#app/actions.mock';
+import { createNotes } from '#mocks/notes';
+
+import NoteUI from './note-ui';
+
+const meta = preview.meta({
+  title: 'Mocked/NoteUI',
+  component: NoteUI,
+});
+
+const notes = createNotes();
+
+export const SaveFlow = meta.story({
+  name: 'Save Flow ▶',
+  args: {
+    isEditing: true,
+    note: notes[0],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    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="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the name of your renderer (e.g. react, vue3)
 import type { Meta, StoryObj } from '@storybook/your-renderer';
-import { expect, userEvent, within } from '@storybook/test';
 
+import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
@@ -82,8 +117,8 @@ const meta = {
   title: 'Mocked/NoteUI',
   component: NoteUI,
 } satisfies Meta<typeof NoteUI>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 const notes = createNotes();
@@ -94,7 +129,7 @@ export const SaveFlow: Story = {
     isEditing: true,
     note: notes[0],
   },
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const saveButton = canvas.getByRole('menuitem', { name: /done/i });
@@ -105,22 +140,58 @@ export const SaveFlow: Story = {
 };
 ```
 
-```ts filename="NoteUI.stories.ts" renderer="common" language="ts"
+```ts filename="NoteUI.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { saveNote } from '#app/actions.mock';
+import { createNotes } from '#mocks/notes';
+
+import NoteUI from './note-ui';
+
+const meta = preview.meta({
+  title: 'Mocked/NoteUI',
+  component: NoteUI,
+});
+
+const notes = createNotes();
+
+export const SaveFlow = meta.story({
+  name: 'Save Flow ▶',
+  args: {
+    isEditing: true,
+    note: notes[0],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    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="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the name of your renderer (e.g. react, vue3)
 import type { Meta, StoryObj } from '@storybook/your-renderer';
-import { expect, userEvent, within } from '@storybook/test';
 
+import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
+
 import NoteUI from './note-ui';
 
 const meta: Meta<typeof NoteUI> = {
   title: 'Mocked/NoteUI',
   component: NoteUI,
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof NoteUI>;
 
 const notes = createNotes();
@@ -131,7 +202,7 @@ export const SaveFlow: Story = {
     isEditing: true,
     note: notes[0],
   },
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const saveButton = canvas.getByRole('menuitem', { name: /done/i });
@@ -142,6 +213,41 @@ export const SaveFlow: Story = {
 };
 ```
 
+```ts filename="NoteUI.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { expect, userEvent, within } from '@storybook/test';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { saveNote } from '#app/actions.mock';
+import { createNotes } from '#mocks/notes';
+
+import NoteUI from './note-ui';
+
+const meta = preview.meta({
+  title: 'Mocked/NoteUI',
+  component: NoteUI,
+});
+
+const notes = createNotes();
+
+export const SaveFlow = meta.story({
+  name: 'Save Flow ▶',
+  args: {
+    isEditing: true,
+    note: notes[0],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const saveButton = canvas.getByRole('menuitem', { name: /done/i });
+    await userEvent.click(saveButton);
+    // 👇 This is the mock function, so you can assert its behavior
+    await expect(saveNote).toHaveBeenCalled();
+  },
+});
+```
+
 ```js filename="NoteUI.stories.js" renderer="web-components" language="js"
 import { expect, userEvent, within } from '@storybook/test';
 
@@ -161,7 +267,7 @@ export const SaveFlow = {
     isEditing: true,
     note: notes[0],
   },
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const saveButton = canvas.getByRole('menuitem', { name: /done/i });
@@ -174,6 +280,7 @@ export const SaveFlow = {
 
 ```ts filename="NoteUI.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { expect, userEvent, within } from '@storybook/test';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
@@ -184,8 +291,8 @@ const meta: Meta = {
   title: 'Mocked/NoteUI',
   component: 'note-ui',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 const notes = createNotes();
@@ -196,7 +303,7 @@ export const SaveFlow: Story = {
     isEditing: true,
     note: notes[0],
   },
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const saveButton = canvas.getByRole('menuitem', { name: /done/i });
diff --git a/docs/_snippets/storybook-test-mock-return-value.md b/docs/_snippets/storybook-test-mock-return-value.md
index 4017f205a00b..30b66987860a 100644
--- a/docs/_snippets/storybook-test-mock-return-value.md
+++ b/docs/_snippets/storybook-test-mock-return-value.md
@@ -9,8 +9,8 @@ import { Page } from './Page';
 const meta: Meta<Page> = {
   component: Page,
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<Page>;
 
 export const Default: Story = {
@@ -21,7 +21,8 @@ export const Default: Story = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="common" language="js"
+```js filename="Page.stories.js" renderer="common" language="js" tabTitle="CSF 3"
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
 
 import { Page } from './Page';
@@ -38,7 +39,28 @@ export const Default = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts-4-9"
+```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getUserFromSession } from '#api/session.mock';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const Default = meta.story({
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-renderer with the name of your renderer (e.g. react, vue3)
 import type { Meta, StoryObj } from '@storybook/your-renderer';
 
@@ -52,7 +74,6 @@ const meta = {
 } satisfies Meta<typeof Page>;
 
 export default meta;
-
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
@@ -63,7 +84,28 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts"
+```ts filename="Page.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getUserFromSession } from '#api/session.mock';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const Default = meta.story({
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
+  },
+});
+```
+
+```ts filename="Page.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the name of your renderer (e.g. react, vue3)
 import type { Meta, StoryObj } from '@storybook/your-renderer';
 
@@ -75,8 +117,8 @@ import { Page } from './Page';
 const meta: Meta<typeof Page> = {
   component: Page,
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Page>;
 
 export const Default: Story = {
@@ -87,7 +129,29 @@ export const Default: Story = {
 };
 ```
 
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getUserFromSession } from '#api/session.mock';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const Default = meta.story({
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
+  },
+});
+```
+
 ```js filename="Page.stories.js" renderer="web-components" language="js"
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
 
 export default {
@@ -111,8 +175,8 @@ import { getUserFromSession } from '#api/session.mock';
 const meta: Meta = {
   component: 'my-page',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
diff --git a/docs/_snippets/storybook-vite-builder-aliasing.md b/docs/_snippets/storybook-vite-builder-aliasing.md
index 2c9af4f2860a..f1d9a89408f4 100644
--- a/docs/_snippets/storybook-vite-builder-aliasing.md
+++ b/docs/_snippets/storybook-vite-builder-aliasing.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
@@ -8,7 +8,52 @@ export default {
   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 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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  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="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  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: {
@@ -17,4 +62,29 @@ export default {
     });
   },
 };
+
+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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
+    return mergeConfig(config, {
+      // Add dependencies to pre-optimization
+      optimizeDeps: {
+        include: ['storybook-dark-mode'],
+      },
+    });
+  },
+});
 ```
diff --git a/docs/_snippets/storybook-vite-builder-react-docgen.md b/docs/_snippets/storybook-vite-builder-react-docgen.md
index 936bbbf99722..9399f3428e63 100644
--- a/docs/_snippets/storybook-vite-builder-react-docgen.md
+++ b/docs/_snippets/storybook-vite-builder-react-docgen.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
@@ -12,3 +12,59 @@ export default {
   },
 };
 ```
+
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  typescript: {
+    // Enables the `react-docgen-typescript` parser.
+    // See https://storybook.js.org/docs/api/main-config/main-config-typescript for more information about this option.
+    reactDocgen: 'react-docgen-typescript',
+  },
+});
+```
+
+```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)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  typescript: {
+    // Enables the `react-docgen-typescript` parser.
+    // See https://storybook.js.org/docs/api/main-config/main-config-typescript for more information about this option.
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  typescript: {
+    // Enables the `react-docgen-typescript` parser.
+    // See https://storybook.js.org/docs/api/main-config/main-config-typescript for more information about this option.
+    reactDocgen: 'react-docgen-typescript',
+  },
+});
+```
diff --git a/docs/_snippets/storybook-vite-builder-register.md b/docs/_snippets/storybook-vite-builder-register.md
index 952f747a212c..f06faf3b3eea 100644
--- a/docs/_snippets/storybook-vite-builder-register.md
+++ b/docs/_snippets/storybook-vite-builder-register.md
@@ -1,4 +1,6 @@
-```js filename=".storybook/main.js|ts" renderer="common" language="js"
+<!-- TODO: Vet this example for CSF Next support -->
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
@@ -7,3 +9,44 @@ export default {
   },
 };
 ```
+
+```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, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  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 61ec1ecce1ea..1127fbc9a26b 100644
--- a/docs/_snippets/storybook-vite-builder-ts-configure.md
+++ b/docs/_snippets/storybook-vite-builder-ts-configure.md
@@ -1,4 +1,4 @@
-```ts filename=".storybook/main.ts" renderer="common" language="ts-4-9"
+```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)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -14,18 +14,16 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
 
-const config: StorybookConfig = {
+export default defineMain({
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config, options) {
     // Add your configuration here
     return config;
   },
-};
-
-export default config;
+});
 ```
diff --git a/docs/_snippets/subpath-imports-config.md b/docs/_snippets/subpath-imports-config.md
index 7c52d59099d7..f2275eda7301 100644
--- a/docs/_snippets/subpath-imports-config.md
+++ b/docs/_snippets/subpath-imports-config.md
@@ -2,7 +2,7 @@
 {
   "imports": {
     "#api": {
-      // storybook condition applies to Storybook
+      // Storybook condition applies to Storybook
       "storybook": "./api.mock.ts",
       "default": "./api.ts",
     },
diff --git a/docs/_snippets/svelte-csf-addon-options.md b/docs/_snippets/svelte-csf-addon-options.md
index 12b4dc2f730f..a82285a1e352 100644
--- a/docs/_snippets/svelte-csf-addon-options.md
+++ b/docs/_snippets/svelte-csf-addon-options.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="svelte" language="js"
 export default {
   // Other configuration
diff --git a/docs/_snippets/svelte-vite-add-framework.md b/docs/_snippets/svelte-vite-add-framework.md
index 200d3fefe6cc..ae6ac4c20203 100644
--- a/docs/_snippets/svelte-vite-add-framework.md
+++ b/docs/_snippets/svelte-vite-add-framework.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="svelte" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/svelte-vite-framework-options.md b/docs/_snippets/svelte-vite-framework-options.md
index d023f1226d8c..049826f8566b 100644
--- a/docs/_snippets/svelte-vite-framework-options.md
+++ b/docs/_snippets/svelte-vite-framework-options.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="svelte" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/svelte-webpack-framework-options.md b/docs/_snippets/svelte-webpack-framework-options.md
index 22852dd3ab2f..befc41acdc36 100644
--- a/docs/_snippets/svelte-webpack-framework-options.md
+++ b/docs/_snippets/svelte-webpack-framework-options.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="svelte" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/svelte-webpack5-add-framework.md b/docs/_snippets/svelte-webpack5-add-framework.md
index 2ababfd97736..cf2ca47f6093 100644
--- a/docs/_snippets/svelte-webpack5-add-framework.md
+++ b/docs/_snippets/svelte-webpack5-add-framework.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="svelte" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/sveltekit-add-framework.md b/docs/_snippets/sveltekit-add-framework.md
index 986845f37c15..46ccbeda77b1 100644
--- a/docs/_snippets/sveltekit-add-framework.md
+++ b/docs/_snippets/sveltekit-add-framework.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="svelte" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/sveltekit-framework-options.md b/docs/_snippets/sveltekit-framework-options.md
index 55de473d707b..473c6fa60be0 100644
--- a/docs/_snippets/sveltekit-framework-options.md
+++ b/docs/_snippets/sveltekit-framework-options.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="svelte" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/tags-autodocs-in-meta.md b/docs/_snippets/tags-autodocs-in-meta.md
index 38c05474cf94..bc218db90a2b 100644
--- a/docs/_snippets/tags-autodocs-in-meta.md
+++ b/docs/_snippets/tags-autodocs-in-meta.md
@@ -35,7 +35,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -45,6 +45,19 @@ export default {
 };
 ```
 
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -72,7 +85,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
 
@@ -86,6 +99,19 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -113,7 +139,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
 
@@ -127,6 +153,19 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
diff --git a/docs/_snippets/tags-autodocs-in-preview.md b/docs/_snippets/tags-autodocs-in-preview.md
index 7d96acbe053d..0cd740e2a20d 100644
--- a/docs/_snippets/tags-autodocs-in-preview.md
+++ b/docs/_snippets/tags-autodocs-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // ...rest of preview
   //👇 Enables auto-generated documentation for all stories
@@ -6,7 +6,18 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```js filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...rest of preview
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3)
 import type { Preview } from '@storybook/your-renderer';
 
@@ -18,3 +29,14 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...rest of preview
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+});
+```
diff --git a/docs/_snippets/tags-autodocs-remove-component.md b/docs/_snippets/tags-autodocs-remove-component.md
index 60014c991265..a03120b7a2b6 100644
--- a/docs/_snippets/tags-autodocs-remove-component.md
+++ b/docs/_snippets/tags-autodocs-remove-component.md
@@ -35,7 +35,7 @@ export default {
 };
 ```
 
-```js filename="Page.stories.js" renderer="common" language="js"
+```js filename="Page.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Page } from './Page';
 
 export default {
@@ -45,6 +45,19 @@ export default {
 };
 ```
 
+```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -72,7 +85,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts-4-9"
+```ts filename="Page.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
 
@@ -86,6 +99,19 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Page.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -113,7 +139,7 @@ const meta: Meta<typeof Page> = {
 export default meta;
 ```
 
-```ts filename="Page.stories.ts" renderer="common" language="ts"
+```ts filename="Page.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
 
@@ -127,6 +153,19 @@ const meta: Meta<typeof Page> = {
 export default meta;
 ```
 
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+});
+```
+
 ```js filename="Page.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Page',
diff --git a/docs/_snippets/tags-autodocs-remove-story.md b/docs/_snippets/tags-autodocs-remove-story.md
index d50ed675de30..d6f0ebdfe4db 100644
--- a/docs/_snippets/tags-autodocs-remove-story.md
+++ b/docs/_snippets/tags-autodocs-remove-story.md
@@ -50,7 +50,7 @@ export const UndocumentedStory = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -65,6 +65,24 @@ export const UndocumentedStory = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -102,7 +120,7 @@ export const UndocumentedStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -123,6 +141,24 @@ export const UndocumentedStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -160,7 +196,7 @@ export const UndocumentedStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -181,6 +217,24 @@ export const UndocumentedStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+});
+
+export const UndocumentedStory = meta.story({
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
diff --git a/docs/_snippets/tags-combo-example.md b/docs/_snippets/tags-combo-example.md
index 26c529261071..9acd01551bf6 100644
--- a/docs/_snippets/tags-combo-example.md
+++ b/docs/_snippets/tags-combo-example.md
@@ -36,7 +36,7 @@ export const Combo: Story = {
 };
 ```
 
-```jsx filename="Button.stories.jsx" renderer="react" language="js"
+```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -67,7 +67,41 @@ export const Combo = {
 };
 ```
 
-```tsx filename="Button.stories.tsx" renderer="react" language="ts-4-9"
+```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Variant1 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 1 },
+});
+
+export const Variant2 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 2 },
+});
+
+export const Combo = meta.story({
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1} />
+      <Button variant={2} />
+    </>
+  ),
+});
+```
+
+```tsx filename="Button.stories.tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -103,7 +137,41 @@ export const Combo: Story = {
 };
 ```
 
-```tsx filename="Button.stories.tsx" renderer="react" language="ts"
+```tsx filename="Button.stories.tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Variant1 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 1 },
+});
+
+export const Variant2 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 2 },
+});
+
+export const Combo = meta.story({
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1} />
+      <Button variant={2} />
+    </>
+  ),
+});
+```
+
+```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -139,6 +207,40 @@ export const Combo: Story = {
 };
 ```
 
+```tsx filename="Button.stories.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+});
+
+export const Variant1 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 1 },
+});
+
+export const Variant2 = meta.story({
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!autodocs'],
+  args: { variant: 2 },
+});
+
+export const Combo = meta.story({
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1} />
+      <Button variant={2} />
+    </>
+  ),
+});
+```
+
 ```jsx filename="Button.stories.jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
diff --git a/docs/_snippets/tags-docs-only-in-meta.md b/docs/_snippets/tags-docs-only-in-meta.md
index dfadf65125c5..f3c60f7e782f 100644
--- a/docs/_snippets/tags-docs-only-in-meta.md
+++ b/docs/_snippets/tags-docs-only-in-meta.md
@@ -47,7 +47,7 @@ export default {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -61,6 +61,23 @@ export default {
 };
 ```
 
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -96,7 +113,7 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
 
@@ -114,6 +131,23 @@ const meta = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -149,7 +183,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
 
@@ -167,6 +201,23 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index d0f262f2d6f7..f2ea1b08ac46 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -83,7 +83,7 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -109,6 +109,35 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -168,7 +197,7 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -200,6 +229,35 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+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="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -259,7 +317,7 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -291,6 +349,35 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+});
+
+export const ExperimentalFeatureStory = meta.story({
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
diff --git a/docs/_snippets/tags-in-preview.md b/docs/_snippets/tags-in-preview.md
index de110347bbe0..758d88f3c8e8 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // ...rest of preview
   /*
@@ -11,7 +11,23 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```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, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...rest of preview
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
+   */
+  tags: ['autodocs'],
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3)
 import type { Preview } from '@storybook/your-renderer';
 
@@ -28,3 +44,19 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  // ...rest of preview
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
+   */
+  tags: ['autodocs'],
+});
+```
diff --git a/docs/_snippets/tags-remove-in-story.md b/docs/_snippets/tags-remove-in-story.md
index b48beba734f8..7794f128a5fc 100644
--- a/docs/_snippets/tags-remove-in-story.md
+++ b/docs/_snippets/tags-remove-in-story.md
@@ -50,7 +50,7 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -65,6 +65,24 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+});
+
+export const ExperimentalFeatureStory = meta.story({
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -102,7 +120,7 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -123,6 +141,24 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+});
+
+export const ExperimentalFeatureStory = meta.story({
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+});
+```
+
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -160,7 +196,7 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -181,6 +217,24 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+});
+
+export const ExperimentalFeatureStory = meta.story({
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+});
+```
+
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
diff --git a/docs/_snippets/vue-vite-framework-options.md b/docs/_snippets/vue-vite-framework-options.md
index ce87365d5614..fef62c8fa0df 100644
--- a/docs/_snippets/vue-vite-framework-options.md
+++ b/docs/_snippets/vue-vite-framework-options.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="vue" language="js"
 export default {
   framework: {
diff --git a/docs/_snippets/vue-webpack5-framework-options.md b/docs/_snippets/vue-webpack5-framework-options.md
index 7661567b00e9..1a7166de1fba 100644
--- a/docs/_snippets/vue-webpack5-framework-options.md
+++ b/docs/_snippets/vue-webpack5-framework-options.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="vue" language="js"
 export default {
   framework: {
diff --git a/docs/_snippets/vue3-vite-add-framework.md b/docs/_snippets/vue3-vite-add-framework.md
index 5c617faae463..9d87c36ff185 100644
--- a/docs/_snippets/vue3-vite-add-framework.md
+++ b/docs/_snippets/vue3-vite-add-framework.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="vue" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/vue3-webpack5-add-framework.md b/docs/_snippets/vue3-webpack5-add-framework.md
index 7c83b82bd090..6dbe4edd9427 100644
--- a/docs/_snippets/vue3-webpack5-add-framework.md
+++ b/docs/_snippets/vue3-webpack5-add-framework.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="vue" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/web-components-vite-add-framework.md b/docs/_snippets/web-components-vite-add-framework.md
index 140ad899ff0a..4bd54114bed3 100644
--- a/docs/_snippets/web-components-vite-add-framework.md
+++ b/docs/_snippets/web-components-vite-add-framework.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="web-components" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/web-components-vite-framework-options.md b/docs/_snippets/web-components-vite-framework-options.md
index 39946561e2d8..ffb8826a7fcb 100644
--- a/docs/_snippets/web-components-vite-framework-options.md
+++ b/docs/_snippets/web-components-vite-framework-options.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="web-components" language="js"
 export default {
   framework: {
diff --git a/docs/_snippets/web-components-webpack5-add-framework.md b/docs/_snippets/web-components-webpack5-add-framework.md
index 5fbc8b5f5abf..6318ee0f1764 100644
--- a/docs/_snippets/web-components-webpack5-add-framework.md
+++ b/docs/_snippets/web-components-webpack5-add-framework.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="web-components" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/web-components-webpack5-framework-options.md b/docs/_snippets/web-components-webpack5-framework-options.md
index e2271207d624..4da2647906e1 100644
--- a/docs/_snippets/web-components-webpack5-framework-options.md
+++ b/docs/_snippets/web-components-webpack5-framework-options.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="web-components" language="js"
 export default {
   // ...
diff --git a/docs/_snippets/web-components-webpack5-transpilation.md b/docs/_snippets/web-components-webpack5-transpilation.md
index 632f520f7f32..f1c303d5fe80 100644
--- a/docs/_snippets/web-components-webpack5-transpilation.md
+++ b/docs/_snippets/web-components-webpack5-transpilation.md
@@ -1,9 +1,11 @@
+<!-- TODO: Vet this example for CSF Next compatibility -->
+
 ```js filename=".storybook/main.js" renderer="web-components" language="js"
 export default {
   webpackFinal: async (config) => {
     // Find web-components rule for extra transpilation
     const webComponentsRule = config.module.rules.find(
-      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false,
+      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
     );
     // Add your own `my-library`
     webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
@@ -20,7 +22,7 @@ const config: StorybookConfig = {
   webpackFinal: async (config) => {
     // Find web-components rule for extra transpilation
     const webComponentsRule = config.module.rules.find(
-      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false,
+      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
     );
     // Add your own `my-library`
     webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
diff --git a/docs/_snippets/webpack-final-to-vite-final.md b/docs/_snippets/webpack-final-to-vite-final.md
index 93b63cadd977..02ea93e87362 100644
--- a/docs/_snippets/webpack-final-to-vite-final.md
+++ b/docs/_snippets/webpack-final-to-vite-final.md
@@ -1,3 +1,5 @@
+<!-- TODO: Vet Webpack based examples for support and other frameworks -->
+
 ```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="With Webpack"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs, angular)
@@ -22,7 +24,7 @@ export default {
 };
 ```
 
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="With Vite"
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="With Vite (CSF 3)"
 import graphql from 'vite-plugin-graphql-loader';
 
 export default {
@@ -38,6 +40,24 @@ export default {
 };
 ```
 
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="With Vite (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import graphql from 'vite-plugin-graphql-loader';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: [...(config.plugins ?? []), graphql()],
+    };
+  },
+});
+```
+
 ```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="With Webpack"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs, angular)
 import type { StorybookConfig } from '@storybook/your-framework';
@@ -66,9 +86,10 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="With Vite"
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="With Vite (CSF 3)"
 // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
+
 import graphql from 'vite-plugin-graphql-loader';
 
 const config: StorybookConfig = {
@@ -84,3 +105,21 @@ const config: StorybookConfig = {
 
 export default config;
 ```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="With Vite (CSF Next 🧪)"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+import graphql from 'vite-plugin-graphql-loader';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: [...(config.plugins ?? []), graphql()],
+    };
+  },
+});
+```
diff --git a/docs/_snippets/your-component-with-decorator.md b/docs/_snippets/your-component-with-decorator.md
index c06d43496724..624f118bed06 100644
--- a/docs/_snippets/your-component-with-decorator.md
+++ b/docs/_snippets/your-component-with-decorator.md
@@ -13,7 +13,7 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 export default {
@@ -29,7 +29,26 @@ export default {
 };
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
@@ -49,7 +68,26 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
@@ -69,6 +107,25 @@ const meta: Meta<typeof YourComponent> = {
 export default meta;
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+const meta = preview.meta({
+  component: YourComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+});
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="solid" language="js"
 import { YourComponent } from './YourComponent';
 
diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md
index 689566b0323d..a2b8a521deb8 100644
--- a/docs/_snippets/your-component.md
+++ b/docs/_snippets/your-component.md
@@ -21,7 +21,7 @@ export const FirstStory: Story = {
 ```js filename="YourComponent.stories.js" renderer="html" language="js"
 import { createYourComponent } from './YourComponent';
 
-// 👇 This default export determines where your story goes in the story list
+//👇 This default export determines where your story goes in the story list
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/configure/#configure-story-loading
@@ -97,7 +97,7 @@ export const FirstStory = {
 };
 ```
 
-```js filename="YourComponent.stories.js|jsx" renderer="react" language="js"
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
 import { YourComponent } from './YourComponent';
 
 //👇 This default export determines where your story goes in the story list
@@ -112,7 +112,25 @@ export const FirstStory = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This export determines where your story goes in the story list
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const FirstStory = meta.story({
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+});
+```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
@@ -132,7 +150,25 @@ export const FirstStory: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts"
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This export determines where your story goes in the story list
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const FirstStory = meta.story({
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+});
+```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
@@ -152,6 +188,24 @@ export const FirstStory: Story = {
 };
 ```
 
+```ts filename="YourComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports
+import preview from '#.storybook/preview';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This export determines where your story goes in the story list
+const meta = preview.meta({
+  component: YourComponent,
+});
+
+export const FirstStory = meta.story({
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+});
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="solid" language="js"
 import { YourComponent } from './YourComponent';
 
@@ -412,7 +466,7 @@ export const Primary: Story = {
 ```
 
 ```js filename="YourComponent.stories.js" renderer="web-components" language="js"
-// This default export determines where your story goes in the story list
+//👇 This default export determines where your story goes in the story list
 export default {
   component: 'demo-your-component',
 };
@@ -427,7 +481,7 @@ export const FirstStory = {
 ```ts filename="YourComponent.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-// This default export determines where your story goes in the story list
+//👇 This default export determines where your story goes in the story list
 const meta: Meta = {
   component: 'demo-your-component',
 };
diff --git a/docs/addons/configure-addons.mdx b/docs/addons/configure-addons.mdx
index 3647ac3ecec8..ca23d1bebef5 100644
--- a/docs/addons/configure-addons.mdx
+++ b/docs/addons/configure-addons.mdx
@@ -25,12 +25,13 @@ For example, the [Pseudo States addon](https://storybook.js.org/addons/storybook
 
 Use the [`useParameter`](./addons-api.mdx#useparameter) hook to access the parameter values within your addon.
 
-```js
-export const Hover = {
-  render: () => <Button>Label</Button>,
-  parameters: { pseudo: { hover: true } },
-};
-```
+{/* TODO: Vet this code example */}
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="button-story-pseudo-states-addon.md" />
+
+{/* prettier-ignore-end */}
 
 ## Channels
 
diff --git a/docs/api/main-config/main-config-indexers.mdx b/docs/api/main-config/main-config-indexers.mdx
index a33cd2a40853..6abc14303ab1 100644
--- a/docs/api/main-config/main-config-indexers.mdx
+++ b/docs/api/main-config/main-config-indexers.mdx
@@ -212,9 +212,7 @@ Let's look at an example of how this might work.
 
 First, here's an example of a non-CSF source file:
 
-```ts
-// Button.variants.js|ts
-
+```ts title="Button.variants.js|ts"
 import { variantsFromComponent, createStoryFromVariant } from '../utils';
 import { Button } from './Button';
 
diff --git a/docs/api/parameters.mdx b/docs/api/parameters.mdx
index 28362afe6a5a..5acc07ae28f9 100644
--- a/docs/api/parameters.mdx
+++ b/docs/api/parameters.mdx
@@ -191,48 +191,17 @@ When specifying parameters, they are merged together in order of increasing spec
 
 In other words, the following specifications of parameters:
 
-```js title=".storybook/preview.js|ts"
-const preview = {
-  // 👇 Project-level parameters
-  parameters: {
-    layout: 'centered',
-    demo: {
-      demoProperty: 'a',
-      demoArray: [1, 2],
-    },
-  },
-  // ...
-};
-export default preview;
-```
+{/* prettier-ignore-start */}
 
-```js title="Dialog.stories.js|ts"
-const meta = {
-  component: Dialog,
-  // 👇 Meta-level parameters
-  parameters: {
-    layout: 'fullscreen',
-    demo: {
-      demoProperty: 'b',
-      anotherDemoProperty: 'b',
-    },
-  },
-};
-export default meta;
-
-// (no additional parameters specified)
-export const Basic = {};
-
-export const LargeScreen = {
-  // 👇 Story-level parameters
-  parameters: {
-    layout: 'padded',
-    demo: {
-      demoArray: [3, 4],
-    },
-  },
-};
-```
+<CodeSnippets path="custom-project-level-parameters.md" />
+
+{ /* prettier-ignore-end */}
+
+{ /* prettier-ignore-start */}
+
+<CodeSnippets path="custom-story-level-parameters.md" />
+
+{/* prettier-ignore-end */}
 
 Will result in the following parameter values applied to each story:
 
diff --git a/docs/configure/story-rendering.mdx b/docs/configure/story-rendering.mdx
index 3749a925e9c8..f00349df3bf7 100644
--- a/docs/configure/story-rendering.mdx
+++ b/docs/configure/story-rendering.mdx
@@ -11,7 +11,18 @@ In Storybook, your stories render in a particular “preview” iframe (also cal
 
 Code executed in the preview file (`.storybook/preview.js|ts`) runs for every story in your Storybook. This is useful for setting up global styles, initializing libraries, or anything else required to render your components.
 
-<If notRenderer={['angular', 'vue']}>
+
+<If renderer="react">
+  Here's an example of how you might use the preview file to initialize a library that must run before your components render:
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="storybook-preview-custom-library.md" />
+
+  {/* prettier-ignore-end */}
+</If>
+
+<If notRenderer={['angular', 'vue', 'react']}>
   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"
diff --git a/docs/configure/user-interface/sidebar-and-urls.mdx b/docs/configure/user-interface/sidebar-and-urls.mdx
index 8ee6ecd62f3d..098f93741190 100644
--- a/docs/configure/user-interface/sidebar-and-urls.mdx
+++ b/docs/configure/user-interface/sidebar-and-urls.mdx
@@ -51,6 +51,11 @@ It is possible to manually set the story's id, which is helpful if you want to r
 
 Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display.
 
+
+{/* 
+ TODO: Adjust this section to be more generic about auto-titles 
+*/}
+
 ## 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:
@@ -67,7 +72,7 @@ Auto-titles work with explicit titling options like the component's `title` and
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="csf-3-example-title.md" />
+<CodeSnippets path="component-story-with-title.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx
index 62b2c5b7ff88..c66f9987f555 100644
--- a/docs/get-started/frameworks/nextjs.mdx
+++ b/docs/get-started/frameworks/nextjs.mdx
@@ -136,8 +136,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   [Local images](https://nextjs.org/docs/pages/building-your-application/optimizing/images#local-images) are supported.
 
-  ```jsx
-  // index.jsx
+  ```jsx title="index.jsx"
   import Image from 'next/image';
   import profilePic from '../public/me.png';
 
@@ -163,8 +162,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   [Remote images](https://nextjs.org/docs/pages/building-your-application/optimizing/images#remote-images) are also supported.
 
-  ```jsx
-  // index.jsx
+  ```jsx title="index.jsx"
   import Image from 'next/image';
 
   export default function Home() {
@@ -193,8 +191,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   If the following component defines your localFont like this:
 
-  ```js
-  // src/components/MyComponent.js
+  ```js title="src/components/MyComponent.js|jsx|ts|tsx"
   import localFont from 'next/font/local';
 
   const localRubikStorm = localFont({ src: './fonts/RubikStorm-Regular.ttf' });
@@ -230,9 +227,8 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   For example, using [GitHub Actions](https://www.chromatic.com/docs/github-actions):
 
-  ```yaml
-  # .github/workflows/ci.yml
-  - uses: chromaui/action@v1
+  ```yaml title=".github/workflows/ci.yml"
+  - uses: chromaui/action@latest
     env:
       #👇 the location of mocked fonts to use
       NEXT_FONT_GOOGLE_MOCKED_RESPONSES: ${{ github.workspace }}/mocked-google-fonts.js
@@ -243,8 +239,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   Your mocked fonts will look something like this:
 
-  ```js
-  // mocked-google-fonts.js
+  ```js title="mocked-google-fonts.js"
   //👇 Mocked responses of google fonts with the URL as the key
   module.exports = {
     'https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block': `
@@ -274,7 +269,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   [Next.js's router](https://nextjs.org/docs/pages/building-your-application/routing) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions panel if you have the [Storybook actions addon](../../essentials/actions.mdx).
 
-  <Callout>
+  <Callout variant="info">
     You should only use `next/router` in the `pages` directory. In the `app` directory, it is necessary to use `next/navigation`.
   </Callout>
 
@@ -288,7 +283,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   {/* prettier-ignore-end */}
 
-  <Callout>
+  <Callout variant="info">
     These overrides can also be applied to [all stories for a component](../../api/parameters.mdx#meta-parameters) or [all stories in your project](../../api/parameters.mdx#project-parameters). Standard [parameter inheritance](../../api/parameters.mdx#parameter-inheritance) rules apply.
   </Callout>
 
@@ -296,8 +291,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   The default values on the stubbed router are as follows (see [globals](../../essentials/toolbars-and-globals.mdx#globals) for more details on how globals work).
 
-  ```ts
-  // Default router
+  ```ts title="mocks/router.mock.js|ts"
   const defaultRouter = {
     // The locale should be configured globally: https://storybook.js.org/docs/essentials/toolbars-and-globals#globals
     locale: globals?.locale,
@@ -317,33 +311,15 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   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
-  // .storybook/preview.ts
-  import { Preview } from '@storybook/react';
-  // 👇 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(() => {
-        /* ... */
-      });
-    },
-  };
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="nextjs-router-router-override.md" />
+
+  {/* prettier-ignore-end */}
 
   ## Next.js navigation
 
-  <Callout>
+  <Callout variant="info">
     Please note that [`next/navigation`](https://nextjs.org/docs/app/building-your-application/routing) can only be used in components/pages in the `app` directory.
   </Callout>
 
@@ -389,8 +365,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   With the above configuration, the component rendered in the stories would receive the following values from the hooks:
 
-  ```js
-  // NavigationBasedComponent.js
+  ```js title="NavigationBasedComponent.js|jsx|ts|tsx"
   import { useSelectedLayoutSegment, useSelectedLayoutSegments, useParams } from 'next/navigation';
 
   export default function NavigationBasedComponent() {
@@ -413,8 +388,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   With the above configuration, the component rendered in the stories would receive the following values from the hooks:
 
-  ```js
-  // ParamsBasedComponent.js
+  ```js title="NavigationBasedComponent.js|jsx|ts|tsx"
   import { useSelectedLayoutSegment, useSelectedLayoutSegments, useParams } from 'next/navigation';
 
   export default function ParamsBasedComponent() {
@@ -435,8 +409,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   The default values on the stubbed navigation context are as follows:
 
-  ```ts
-  // Default navigation context
+  ```ts title="mocks/navigation.mock.js|ts"
   const defaultNavigationContext = {
     pathname: '/',
     query: {},
@@ -447,29 +420,11 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   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
-  // .storybook/preview.ts
-  import { Preview } from '@storybook/react';
-  // 👇 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(() => {
-        /* ... */
-      });
-    },
-  };
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="nextjs-navigation-override.md" />
+
+  {/* prettier-ignore-end */}
 
   ## Next.js Head
 
@@ -479,15 +434,13 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   [Global Sass/Scss stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are supported without any additional configuration as well. Just import them into [`.storybook/preview.js|ts`](../../configure/index.mdx#configure-story-rendering)
 
-  ```js
-  // .storybook/preview.js|ts
+  ```js title=".storybook/preview.js|ts"
   import '../styles/globals.scss';
   ```
 
   This will automatically include any of your [custom Sass configurations](https://nextjs.org/docs/pages/building-your-application/styling/sass#customizing-sass-options) in your `next.config.js` file.
 
-  ```js
-  // next.config.js
+  ```js title="next.config.js|ts"
   import * as path from 'path';
 
   export default {
@@ -502,8 +455,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   [CSS modules](https://nextjs.org/docs/pages/building-your-application/styling/css-modules) work as expected.
 
-  ```jsx
-  // src/components/Button.jsx
+  ```jsx title="src/components/Button.jsx|tsx"
   // This import will work in Storybook
   import styles from './Button.module.css';
   // Sass/Scss is also supported
@@ -523,8 +475,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   The built in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/pages/building-your-application/styling/css-in-js), and this framework supports that out of the box too, zero config.
 
-  ```jsx
-  // src/components/HelloWorld.jsx
+  ```jsx title="src/components/HelloWorld.jsx|tsx"
   // This will work in Storybook
   function HelloWorld() {
     return (
@@ -578,14 +529,13 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   Next.js lets you [customize PostCSS config](https://nextjs.org/docs/pages/building-your-application/configuring/post-css). Thus this framework will automatically handle your PostCSS config for you.
 
-  This allows for cool things like zero-config Tailwind! (See [Next.js' example](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss))
+  This allows for cool things like zero-config Tailwind! (See [Next.js' example](https://github.com/vercel/next.js/tree/canary/packages/create-next-app/templates/default-tw))
 
   ## Absolute imports
 
   [Absolute imports](https://nextjs.org/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases#absolute-imports) from the root directory are supported.
 
-  ```jsx
-  // index.jsx
+  ```jsx title="index.jsx"
   // All good!
   import Button from 'components/button';
   // Also good!
@@ -603,11 +553,8 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   Also OK for global styles in `.storybook/preview.js|ts`!
 
-  ```js
-  // .storybook/preview.js|ts
-
+  ```js title=".storybook/preview.js|ts"
   import 'styles/globals.scss';
-
   // ...
   ```
 
@@ -619,8 +566,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   [Module aliases](https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases#module-aliases) are also supported.
 
-  ```jsx
-  // index.jsx
+  ```jsx title="index.jsx"
   // All good!
   import Button from '@/components/button';
   // Also good!
@@ -642,8 +588,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   To configure subpath imports, you define the `imports` property in your project's `package.json` file. This property maps the subpath to the actual file path. The example below configures subpath imports for all modules in the project:
 
-  ```jsonc
-  // package.json
+  ```json title="package.json"
   {
     "imports": {
       "#*": ["./*", "./*.ts", "./*.tsx"]
@@ -657,8 +602,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   Which can then be used like this:
 
-  ```jsx
-  // index.jsx
+  ```jsx title="index.jsx|tsx"
   import Button from '#components/button';
   import styles from '#styles/HomePage.module.css';
 
@@ -731,8 +675,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   For example, consider the following Next.js config:
 
-  ```js
-  // next.config.js
+  ```js title="next.config.js"
   module.exports = {
     serverRuntimeConfig: {
       mySecret: 'secret',
@@ -781,8 +724,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   Storybook handles most [Typescript](https://www.typescriptlang.org/) configurations, but this framework adds additional support for Next.js's support for [Absolute Imports and Module path aliases](https://nextjs.org/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases). In short, it takes into account your `tsconfig.json`'s [baseUrl](https://www.typescriptlang.org/tsconfig#baseUrl) and [paths](https://www.typescriptlang.org/tsconfig#paths). Thus, a `tsconfig.json` like the one below would work out of the box.
 
-  ```jsonc
-  // tsconfig.json
+  ```jsonc title="tsconfig.json"
   {
     "compilerOptions": {
       "baseUrl": ".",
@@ -848,8 +790,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   **Before**
 
-  ```jsx
-  // app/my-page/index.jsx
+  ```jsx title="app/my-page/index.jsx"
   async function getData() {
     const res = await fetch(...);
     // ...
@@ -865,9 +806,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   **After**
 
-  ```jsx
-  // app/my-page/index.jsx
-
+  ```jsx title="app/my-page/index.jsx"
   // Use this component in your stories
   import MyPage from './components/MyPage';
 
@@ -915,17 +854,11 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   `sharp` is a dependency of Next.js's image optimization feature. If you see this error, you need to install `sharp` in your project.
 
-  ```bash
-  npm install sharp
-  ```
+  {/* prettier-ignore-start */}
 
-  ```bash
-  yarn add sharp
-  ```
+  <CodeSnippets path="nextjs-sharp-install.md" />
 
-  ```bash
-  pnpm add sharp
-  ```
+  {/* prettier-ignore-end */}
 
   You can refer to the [Install `sharp` to Use Built-In Image Optimization](https://nextjs.org/docs/messages/install-sharp) in the Next.js documentation for more information.
 
@@ -941,8 +874,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   `getPackageAliases` is a helper for generating the aliases needed to set up [portable stories](#portable-stories).
 
-  ```ts
-  // jest.config.ts
+  ```ts title="jest.config.ts"
   import type { Config } from 'jest';
   import nextJest from 'next/jest.js';
   // 👇 Import the utility function
@@ -1026,23 +958,11 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
+  {/* prettier-ignore-start */}
 
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/nextjs',
-      options: {
-        image: {
-          loading: 'eager',
-        },
-        nextConfigPath: path.resolve(__dirname, '../next.config.js'),
-      },
-    },
-  };
-  ```
+  <CodeSnippets path="nextjs-additional-options.md" />
+
+  {/* prettier-ignore-end */}
 
   The available options are:
 
diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx
index 6cf05e520c43..b86b0f13670b 100644
--- a/docs/writing-stories/index.mdx
+++ b/docs/writing-stories/index.mdx
@@ -5,6 +5,8 @@ sidebar:
   title: Stories
 ---
 
+{/* TODO: Adjust this page to account for CSF Factories */}
+
 <YouTubeCallout id="P0WHt_L0-2g" title="How to write Storybook stories | Component Story Format" />
 
 <If renderer="svelte">
diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
index 739664dd1ba7..64a1fe3e598e 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
@@ -40,8 +40,7 @@ When you use the `fn` utility to mock a module, you create full [Vitest mock fun
 
 You can't directly mock an external module like [`uuid`](https://github.com/uuidjs/uuid) or `node:fs`. Instead, you must wrap it in your own module, which you can mock like any other internal one. For example, with `uuid`, you could do the following:
 
-```ts
-// lib/uuid.ts
+```ts title="lib/uuid.ts"
 import { v4 } from 'uuid';
 
 export const uuidv4 = v4;
@@ -49,8 +48,7 @@ export const uuidv4 = v4;
 
 And create a mock for the wrapper:
 
-```ts
-// lib/uuid.mock.ts
+```ts title="lib/uuid.mock.ts"
 import { fn } from '@storybook/test';
 
 import * as actual from './uuid';
@@ -80,8 +78,7 @@ Third, note the **`storybook`, `test`, and `default` keys** in each module's ent
 
 With the package configuration in place, you can then update your component file to use the subpath import:
 
-```ts
-// AuthButton.ts
+```ts title="AuthButton.ts"
 // ➖ Remove this line
 // import { getUserFromSession } from '../../lib/session';
 // ➕ Add this line
diff --git a/docs/writing-stories/stories-for-multiple-components.mdx b/docs/writing-stories/stories-for-multiple-components.mdx
index 8dfae72d0c48..d43c4c8ce882 100644
--- a/docs/writing-stories/stories-for-multiple-components.mdx
+++ b/docs/writing-stories/stories-for-multiple-components.mdx
@@ -72,6 +72,8 @@ By rendering the `Unchecked` story with its args, we are able to reuse the input
   {/* End if react */}
 </If>
 
+{/* TK: Vet this section for CSF Factory support and if required remove it */}
+
 ## Creating a Template Component
 
 Another option that is more “data”-based is to create a special “story-generating” template component:
diff --git a/docs/writing-stories/typescript.mdx b/docs/writing-stories/typescript.mdx
index ccbb9cedf1bc..38d8a946a02e 100644
--- a/docs/writing-stories/typescript.mdx
+++ b/docs/writing-stories/typescript.mdx
@@ -6,6 +6,8 @@ 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.
 
+{/* TODO: Make this section more agnostic for CSF Factories pattern */}
+
 ## 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).
@@ -63,7 +65,7 @@ Sometimes stories need to define args that aren’t included in the component's
 
   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):
 
-  ```html
+  ```html title="Counter.vue"
   <script setup lang="ts">
     defineProps<{ count: number; disabled: boolean }>();
 
@@ -92,7 +94,7 @@ Sometimes stories need to define args that aren’t included in the component's
 
   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).
 
-  ```html
+  ```svelte title="Counter.svelte"
   <script lang="ts">
     import { createEventDispatcher } from 'svelte';