diff --git a/app/angular/src/builders/build-storybook/index.spec.ts b/app/angular/src/builders/build-storybook/index.spec.ts
index 40b12a8b8804..6703244616da 100644
--- a/app/angular/src/builders/build-storybook/index.spec.ts
+++ b/app/angular/src/builders/build-storybook/index.spec.ts
@@ -177,8 +177,6 @@ describe('Build Storybook Builder', () => {
       ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
       {
         cwd: '',
-        env: process.env,
-        shell: true,
       }
     );
     expect(buildStandaloneMock).toHaveBeenCalledWith({
diff --git a/app/angular/src/builders/start-storybook/index.spec.ts b/app/angular/src/builders/start-storybook/index.spec.ts
index 1430ea25e5ba..381024a46399 100644
--- a/app/angular/src/builders/start-storybook/index.spec.ts
+++ b/app/angular/src/builders/start-storybook/index.spec.ts
@@ -159,8 +159,6 @@ describe('Start Storybook Builder', () => {
       ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
       {
         cwd: '',
-        env: process.env,
-        shell: true,
       }
     );
     expect(buildStandaloneMock).toHaveBeenCalledWith({
diff --git a/app/angular/src/builders/utils/run-compodoc.spec.ts b/app/angular/src/builders/utils/run-compodoc.spec.ts
index 3c99cfefc499..900bc6a7669f 100644
--- a/app/angular/src/builders/utils/run-compodoc.spec.ts
+++ b/app/angular/src/builders/utils/run-compodoc.spec.ts
@@ -20,10 +20,7 @@ const builderContextLoggerMock: LoggerApi = {
 };
 
 describe('runCompodoc', () => {
-  const originalEnv = process.env;
-
   beforeEach(() => {
-    process.env = { FOO: 'bar' };
     cpSpawnMock.spawn.mockImplementation(() => ({
       stdout: { on: () => {} },
       stderr: { on: () => {} },
@@ -32,7 +29,6 @@ describe('runCompodoc', () => {
   });
 
   afterEach(() => {
-    process.env = originalEnv;
     jest.clearAllMocks();
   });
 
@@ -55,8 +51,6 @@ describe('runCompodoc', () => {
       ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'],
       {
         cwd: 'path/to/project',
-        env: { FOO: 'bar' },
-        shell: true,
       }
     );
   });
@@ -80,8 +74,6 @@ describe('runCompodoc', () => {
       ['compodoc', '-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'],
       {
         cwd: 'path/to/project',
-        env: { FOO: 'bar' },
-        shell: true,
       }
     );
   });
diff --git a/app/angular/src/builders/utils/run-compodoc.ts b/app/angular/src/builders/utils/run-compodoc.ts
index 0df330892048..74551841046b 100644
--- a/app/angular/src/builders/utils/run-compodoc.ts
+++ b/app/angular/src/builders/utils/run-compodoc.ts
@@ -30,8 +30,6 @@ export const runCompodoc = (
       context.logger.info(finalCompodocArgs.join(' '));
       const child = spawn('npx', finalCompodocArgs, {
         cwd: context.workspaceRoot,
-        env: process.env,
-        shell: true,
       });
 
       child.stdout.on('data', (data) => {
diff --git a/app/svelte/package.json b/app/svelte/package.json
index 19f255c5964b..2ddf73de058f 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -77,6 +77,11 @@
     "svelte": "^3.1.0",
     "svelte-loader": "*"
   },
+  "peerDependenciesMeta": {
+    "svelte-loader": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=10.13.0"
   },
diff --git a/app/svelte/src/client/docs/extractArgTypes.test.ts b/app/svelte/src/client/docs/extractArgTypes.test.ts
index ed0921a0cf86..e25ec8bb2853 100644
--- a/app/svelte/src/client/docs/extractArgTypes.test.ts
+++ b/app/svelte/src/client/docs/extractArgTypes.test.ts
@@ -66,26 +66,22 @@ describe('Extracting Arguments', () => {
     expect(results).toMatchInlineSnapshot(`
       Object {
         "event_afterUpdate": Object {
+          "action": "afterUpdate",
+          "control": false,
           "description": "After Update",
           "name": "afterUpdate",
           "table": Object {
             "category": "events",
           },
-          "type": Object {
-            "name": "other",
-            "value": "void",
-          },
         },
         "event_click": Object {
+          "action": "click",
+          "control": false,
           "description": "Click Event",
           "name": "click",
           "table": Object {
             "category": "events",
           },
-          "type": Object {
-            "name": "other",
-            "value": "void",
-          },
         },
         "rounded": Object {
           "control": Object {
@@ -108,6 +104,7 @@ describe('Extracting Arguments', () => {
           },
         },
         "slot_default": Object {
+          "control": false,
           "description": "Default Slot
 
       \`{rounded}\`",
@@ -115,10 +112,6 @@ describe('Extracting Arguments', () => {
           "table": Object {
             "category": "slots",
           },
-          "type": Object {
-            "name": "other",
-            "value": "void",
-          },
         },
         "text": Object {
           "control": Object {
diff --git a/app/svelte/src/client/docs/extractArgTypes.ts b/app/svelte/src/client/docs/extractArgTypes.ts
index 91e28729c1af..7f68a545cf90 100644
--- a/app/svelte/src/client/docs/extractArgTypes.ts
+++ b/app/svelte/src/client/docs/extractArgTypes.ts
@@ -56,8 +56,9 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
   docgen.events.forEach((item) => {
     results[`event_${item.name}`] = {
       name: item.name,
+      action: item.name,
+      control: false,
       description: item.description,
-      type: { name: 'other', value: 'void' },
       table: {
         category: 'events',
       },
@@ -67,10 +68,10 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
   docgen.slots.forEach((item) => {
     results[`slot_${item.name}`] = {
       name: item.name,
+      control: false,
       description: [item.description, item.params?.map((p) => `\`${p.name}\``).join(' ')]
         .filter((p) => p)
         .join('\n\n'),
-      type: { name: 'other', value: 'void' },
       table: {
         category: 'slots',
       },
diff --git a/app/svelte/src/client/preview/render.ts b/app/svelte/src/client/preview/render.ts
index bb21b56f8221..0ddc79f81e84 100644
--- a/app/svelte/src/client/preview/render.ts
+++ b/app/svelte/src/client/preview/render.ts
@@ -18,7 +18,7 @@ function cleanUpPreviousStory() {
 }
 
 export function renderToDOM(
-  { storyFn, kind, name, showMain, showError }: RenderContext<SvelteFramework>,
+  { storyFn, kind, name, storyContext, showMain, showError }: RenderContext<SvelteFramework>,
   domElement: HTMLElement
 ) {
   cleanUpPreviousStory();
@@ -31,6 +31,7 @@ export function renderToDOM(
     target,
     props: {
       storyFn,
+      storyContext,
       name,
       kind,
       showError,
diff --git a/app/svelte/templates/PreviewRender.svelte b/app/svelte/templates/PreviewRender.svelte
index 40c027d6c803..8f98a03fb9f0 100644
--- a/app/svelte/templates/PreviewRender.svelte
+++ b/app/svelte/templates/PreviewRender.svelte
@@ -6,6 +6,7 @@
   export let kind;
   export let storyFn;
   export let showError;
+  export let storyContext;
 
   const {
     /** @type {SvelteComponent} */
@@ -18,6 +19,12 @@
     WrapperData = {},
   } = storyFn(); 
 
+   const eventsFromArgTypes = Object.fromEntries(Object.entries(storyContext.argTypes)
+      .filter(([k, v]) => v.action && props[k] != null)
+      .map(([k, v]) => [v.action, props[k]]));
+    
+  const events = {...eventsFromArgTypes, ...on};
+
   if (!Component) {
     showError({
       title: `Expecting a Svelte component from the story: "${name}" of "${kind}".`,
@@ -34,4 +41,4 @@
   decoratorProps={WrapperData}
   component={Component}
   props={props}
-  {on}/>
\ No newline at end of file
+  on={events}/>
\ No newline at end of file
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
index 5c0e5b2a6463..ec0b1a1ff78b 100644
--- a/docs/addons/addons-api.md
+++ b/docs/addons/addons-api.md
@@ -235,7 +235,6 @@ Let's say you've got a story like this:
     'vue/button-story-with-addon-example.js.mdx',
     'angular/button-story-with-addon-example.ts.mdx',
     'svelte/button-story-with-addon-example.js.mdx',
-    'svelte/button-story-with-addon-example.native-format.mdx',
   ]}
 />
 
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index 6245585bda3d..4486cb6a7420 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -200,7 +200,6 @@ When Storybook was initialized, it provided a small set of example stories. Chan
     'vue/button-story-with-addon-example.js.mdx',
     'angular/button-story-with-addon-example.ts.mdx',
     'svelte/button-story-with-addon-example.js.mdx',
-    'svelte/button-story-with-addon-example.native-format.mdx',
   ]}
 />
 
diff --git a/docs/api/csf.md b/docs/api/csf.md
index b96c2fd970e3..cdf0b586b74e 100644
--- a/docs/api/csf.md
+++ b/docs/api/csf.md
@@ -44,7 +44,6 @@ With CSF, every named export in the file represents a story object by default.
     'react/my-component-story-basic-and-props.ts.mdx',
     'vue/my-component-story-basic-and-props.js.mdx',
     'svelte/my-component-story-basic-and-props.js.mdx',
-    'svelte/my-component-story-basic-and-props.native-format.mdx',
     'angular/my-component-story-basic-and-props.ts.mdx',
   ]}
 />
@@ -92,7 +91,6 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def
     'vue/button-story-click-handler.2.js.mdx',
     'vue/button-story-click-handler.3.js.mdx',
     'svelte/button-story-click-handler.js.mdx',
-    'svelte/button-story-click-handler.native-format.mdx',
     'angular/button-story-click-handler.ts.mdx',
   ]}
 />
@@ -125,7 +123,6 @@ Or even more simply:
     'react/button-story-click-handler-simplificated.js.mdx',
     'angular/button-story-click-handler-simplificated.ts.mdx',
     'vue/button-story-click-handler-simplificated.js.mdx',
-    'svelte/button-story-click-handler-simplificated.native-format.mdx',
   ]}
 />
 
@@ -158,6 +155,28 @@ A good use case for the `play` function is a form component. With previous Story
 
 When the story renders in the UI, Storybook executes each step defined in the `play` function and runs the assertions without the need for user interaction.
 
+## Custom render functions
+
+Starting in Storybook 6.4, you can write your stories as JavaScript objects, reducing the boilerplate code you need to generate to test your components, thus improving functionality and usability. `Render` functions are helpful methods to give you additional control over how the story renders. For example, if you were writing a story as an object and you wanted to specify how your component should render, you could write the following:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'react/component-story-with-custom-render-function.js.mdx',
+   'react/component-story-with-custom-render-function.ts.mdx',
+   'angular/component-story-with-custom-render-function.ts.mdx',
+   'vue/component-story-with-custom-render-function.js.mdx',
+   'vue/component-story-with-custom-render-function.ts.mdx',
+   'preact/component-story-with-custom-render-function.js.mdx',
+   'web-components/component-story-with-custom-render-function.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook loads this story, it will detect the existence of a `render` function and adjust the component rendering accordingly based on what's defined.
+
 ## Storybook export vs. name handling
 
 Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?
diff --git a/docs/api/mdx.md b/docs/api/mdx.md
index 4783ec5f12a3..51c166417c71 100644
--- a/docs/api/mdx.md
+++ b/docs/api/mdx.md
@@ -44,7 +44,6 @@ For example, here's the story from the `Checkbox` example above, rewritten in CS
     'react/checkbox-story-csf.ts.mdx',
     'vue/checkbox-story-csf.js.mdx',
     'angular/checkbox-story-csf.ts.mdx',
-    'svelte/checkbox-story-csf.native-format.mdx',
   ]}
 />
 
diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md
index 1109db35c15b..675d2663e39d 100644
--- a/docs/configure/environment-variables.md
+++ b/docs/configure/environment-variables.md
@@ -3,7 +3,7 @@ title: 'Environment variables'
 ---
 
 You can use environment variables in Storybook to change its behavior in different “modes”.
-If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env`:
+If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env` when using webpack, or `import.meta.env` when using the vite builder:
 
 ```shell
 STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
@@ -60,7 +60,6 @@ Then you can access this environment variable anywhere, even within your stories
     'angular/my-component-with-env-variables.mdx.mdx',
     'web-components/my-component-with-env-variables.js.mdx',
     'svelte/my-component-with-env-variables.js.mdx',
-    'svelte/my-component-with-env-variables.native-format.mdx',
     'svelte/my-component-with-env-variables.mdx.mdx',
   ]}
 />
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index 8049a22db88a..c30babb303f5 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -24,7 +24,6 @@ Afterward, you can use any asset in your stories:
     'angular/component-story-static-asset-with-import.ts.mdx',
     'angular/component-story-static-asset-with-import.mdx.mdx',
     'svelte/component-story-static-asset-with-import.js.mdx',
-    'svelte/component-story-static-asset-with-import.native-format.mdx',
     'svelte/component-story-static-asset-with-import.mdx.mdx',
   ]}
 />
@@ -61,7 +60,6 @@ Here `../public` is your static directory. Now use it in a component or story li
     'angular/component-story-static-asset-without-import.ts.mdx',
     'angular/component-story-static-asset-without-import.mdx.mdx',
     'svelte/component-story-static-asset-without-import.js.mdx',
-    'svelte/component-story-static-asset-without-import.native-format.mdx',
     'svelte/component-story-static-asset-without-import.mdx.mdx',
   ]}
 />
@@ -112,7 +110,6 @@ Upload your files to an online CDN and reference them. In this example, we’re
     'angular/component-story-static-asset-cdn.ts.mdx',
     'angular/component-story-static-asset-cdn.mdx.mdx',
     'svelte/component-story-static-asset-cdn.js.mdx',
-    'svelte/component-story-static-asset-cdn.native-format.mdx',
     'svelte/component-story-static-asset-cdn.mdx.mdx',
   ]}
 />
diff --git a/docs/configure/overview.md b/docs/configure/overview.md
index 7ee09e53ec92..699c50803e55 100644
--- a/docs/configure/overview.md
+++ b/docs/configure/overview.md
@@ -158,7 +158,9 @@ If you would like, you can also write your Storybook configuration using TypeScr
 
 <!-- prettier-ignore-end -->
 
-This babel config will only be used to process files in the `.storybook/` directory, and will not affect your stories.
+This babel config will be used to process your stories, as well as your config files.
+
+Alternatively, you can install [`ts-node`](https://typestrong.org/ts-node/) in your project, which will be used to process your config files without the need for a `.babelrc`.
 
 Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storybook.
 
@@ -178,20 +180,20 @@ See the vite builder [TypeScript documentation](https://github.com/storybookjs/b
 
 <!-- prettier-ignore-end -->
 
-| Configuration element | Description                                                                                                                                                                      |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `stories`             | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts`                                                            |
-| `staticDirs`          | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']` |
-| `addons`              | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']`                                                   |
-| `typescript`          | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }`                                                      |
-| `framework`           | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'`                                                                         |
-| `core`                | Configures Storybook's internal features.<br/> `core: { builder: 'webpack5' }`                                                                                                   |
-| `features`            | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }`                                                |
-| `refs`                | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }`                      |
-| `logLevel`            | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'`                                                                              |
-| `webpackFinal`        | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }`                                                     |
+| Configuration element | Description                                                                                                                                                                                              |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `stories`             | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts`                                                                                    |
+| `staticDirs`          | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']`                         |
+| `addons`              | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']`                                                                           |
+| `typescript`          | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }`                                                                              |
+| `framework`           | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'`                                                                                                 |
+| `core`                | Configures Storybook's internal features.<br/> `core: { builder: 'webpack5' }`                                                                                                                           |
+| `features`            | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }`                                                                        |
+| `refs`                | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }`                                              |
+| `logLevel`            | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'`                                                                                                      |
+| `webpackFinal`        | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }`                                                                             |
 | `viteFinal`           | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite) <br/> `viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` |
-| `env`                 | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
+| `env`                 | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),`                         |
 
 ## Configure story rendering
 
diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 35a88ea36834..4bb1b6409add 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -47,7 +47,6 @@ Browse the documentation and look for the code snippets you're willing to contri
     'vue/your-component.2.js.mdx',
     'vue/your-component.3.js.mdx',
     'svelte/your-component.js.mdx',
-    'svelte/your-component.native-format.mdx',
     'web-components/your-component.js.mdx',
   ]}
 />
@@ -70,7 +69,6 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
     'vue/your-component.2.js.mdx',
     'vue/your-component.3.js.mdx',
     'svelte/your-component.js.mdx',
-    'svelte/your-component.native-format.mdx',
     'web-components/your-component.js.mdx',
     'ember/your-component.js.mdx', //👈🏼 The code snippet you created.
   ]}
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 5da997b1fc61..0fa30d0f92e1 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -119,7 +119,6 @@ Until now, we only used auto-generated controls based on the component we're wri
     'vue/table-story-fully-customize-controls.mdx-3.mdx.mdx',
     'angular/table-story-fully-customize-controls.ts.mdx',
     'angular/table-story-fully-customize-controls.mdx.mdx',
-    'svelte/table-story-fully-customize-controls.native-format.mdx',
   ]}
 />
 
@@ -151,7 +150,6 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
     'angular/component-story-custom-args-complex.ts.mdx',
     'angular/component-story-custom-args-complex.mdx.mdx',
     'svelte/component-story-custom-args-complex.js.mdx',
-    'svelte/component-story-custom-args-complex.native-format.mdx',
   ]}
 />
 
diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md
index 09b1e8cd856b..bc46620afde5 100644
--- a/docs/essentials/viewport.md
+++ b/docs/essentials/viewport.md
@@ -126,7 +126,6 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
     'angular/my-component-story-configure-viewports.mdx.mdx',
     'web-components/my-component-story-configure-viewports.js.mdx',
     'svelte/my-component-story-configure-viewports.js.mdx',
-    'svelte/my-component-story-configure-viewports.native-format.mdx',
     'svelte/my-component-story-configure-viewports.mdx.mdx',
   ]}
 />
diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index 2959e5685ddd..77aa586a2dc5 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -20,7 +20,6 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'vue/your-component.3.js.mdx',
     'vue/your-component.mdx-3.mdx.mdx',
     'svelte/your-component.js.mdx',
-    'svelte/your-component.native-format.mdx',
     'svelte/your-component.mdx.mdx',
     'web-components/your-component.js.mdx',
     'html/your-component.js.mdx',
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index c349c1768787..34cf16d75b59 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -22,7 +22,6 @@ Let’s start with the `Button` component. A story is a function that describes
     'vue/button-story.js.mdx',
     'vue/button-story.mdx.mdx',
     'svelte/button-story.js.mdx',
-    'svelte/button-story.native-format.mdx',
     'svelte/button-story.mdx.mdx',
     'web-components/button-story.js.mdx',
     'html/button-story.js.mdx',
@@ -54,7 +53,6 @@ The above story definition can be further improved to take advantage of [Storybo
     'angular/button-story-with-args.mdx.mdx',
     'web-components/button-story-with-args.js.mdx',
     'svelte/button-story-with-args.js.mdx',
-    'svelte/button-story-with-args.native-format.mdx',
     'svelte/button-story-with-args.mdx.mdx',
     'html/button-story-with-args.js.mdx',
     'html/button-story-with-args.ts.mdx',
diff --git a/docs/snippets/angular/app-story-with-mock.ts.mdx b/docs/snippets/angular/app-story-with-mock.ts.mdx
index c59e28fba4c0..1de9d248997a 100644
--- a/docs/snippets/angular/app-story-with-mock.ts.mdx
+++ b/docs/snippets/angular/app-story-with-mock.ts.mdx
@@ -1,37 +1,39 @@
 ```ts
 // App.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { AppComponent } from './app.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'App',
   component: AppComponent,
 } as Meta;
 
-const Template: Story = () => ({
-  props: {},
-});
-
-export const Success = Template.bind({});
-Success.parameters = {
-  fetch: {
-    json: {
-      JavaScript: 3390991,
-      'C++': 44974,
-      TypeScript: 15530,
-      CoffeeScript: 12253,
-      Python: 9383,
-      C: 5341,
-      Shell: 5115,
-      HTML: 3420,
-      CSS: 3171,
-      Makefile: 189,
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Success: Story = {
+  parameters: {
+    fetch: {
+      json: {
+        JavaScript: 3390991,
+        'C++': 44974,
+        TypeScript: 15530,
+        CoffeeScript: 12253,
+        Python: 9383,
+        C: 5341,
+        Shell: 5115,
+        HTML: 3420,
+        CSS: 3171,
+        Makefile: 189,
+      },
     },
   },
 };
diff --git a/docs/snippets/angular/badge-story-starter-example.mdx.mdx b/docs/snippets/angular/badge-story-starter-example.mdx.mdx
index 87b96b0ee968..b57a56f5d24e 100644
--- a/docs/snippets/angular/badge-story-starter-example.mdx.mdx
+++ b/docs/snippets/angular/badge-story-starter-example.mdx.mdx
@@ -12,24 +12,30 @@ import { Icon } from './icon.component';
 
 <Meta title="MDX/Badge" component={Badge} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
+
 # Badge
 
 Let's define a story for our `Badge` component:
 
-<Story name="positive">
-  {{
+<Story 
+  name="positive"
+  render={() => ({
     template:`<Badge status="positive">Positive</Badge>`,
-  }}
-</Story>
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
 <Canvas>
-  <Story name="negative">
-    {{
+  <Story 
+    name="negative"
+    render={() => ({
       template: `<Badge status="negative">Negative</Badge>`,
-    }}
-  </Story>
+    })} />
 </Canvas>
 
 We can even preview multiple stories in a block. This
@@ -37,37 +43,36 @@ gets rendered as a group, but defines individual stories
 with unique URLs and isolated snapshot tests.
 
 <Canvas>
-  <Story name="warning">
-    {{
+  <Story 
+    name="warning"
+    render={() => ({
       template: `<Badge status="warning">Warning</Badge>`,
-    }}
-  </Story>
-  <Story name="neutral">
-    {{
+    })} />
+  <Story 
+    name="neutral"
+    render={() => ({
       template: `<Badge status="neutral">Neutral</Badge>`,
-    }}
-  </Story>
-  <Story name="error">
-    {{
-      template: `<Badge status="error">Error</Badge>`,
-    }}
-  </Story>
+    })} />
   <Story 
+    name="error"
+    render={() => ({
+      template: `<Badge status="error">Error</Badge>`,
+    })} />
+  <Story
     name="with icon"
     decorators={[
       moduleMetadata({
-        declarations: [Badge, Icon],
-        imports: [CommonModule],
+       declarations: [Badge, Icon],
+       imports: [CommonModule],
       })
-    ]}>
-    {{
+    ]} 
+    render={() => ({
       template: `
         <Badge status="warning">
           <Icon icon="check" inline></Icon>
           with icon
         </Badge>
       `,
-    }}
-  </Story>
+    })} />
 </Canvas>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/badge-story.mdx.mdx b/docs/snippets/angular/badge-story.mdx.mdx
index e903fc6b8e56..8785f5c6689c 100644
--- a/docs/snippets/angular/badge-story.mdx.mdx
+++ b/docs/snippets/angular/badge-story.mdx.mdx
@@ -7,7 +7,11 @@ import { Badge } from './badge.component';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 # Badge
 
@@ -17,10 +21,11 @@ Let's define a story for our `Badge` component:
   name="positive"
   args={{
     status: 'positive',
-    label: 'Positive'
-  }}>
-  {Template.bind({})}
-</Story>
+   label: 'Positive',
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
@@ -28,11 +33,12 @@ We can drop it in a `Canvas` to get a code snippet:
   <Story 
     name="negative"
     args={{
-      status: 'negative', 
-      label: 'Negative'
-    }}>
-    {Template.bind({})}
-  </Story>
+      status: 'negative',
+      label: 'Negative',
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
 </Canvas>
 
 We can even preview multiple Stories in a block. This
@@ -41,36 +47,31 @@ with unique URLs, which is great for review and testing.
 
 <Canvas>
   <Story 
-    name="warning"
+    name="warning" 
     args={{
       status: 'warning',
-      label: 'Warning' 
-    }}>
-    {Template.bind({})}
-  </Story>
+     label: 'Warning',
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
   <Story 
-    name="neutral" 
+    name="neutral"
     args={{
       status: 'neutral', 
-      label: 'Neutral' 
-    }}>
-    {Template.bind({})}
-  </Story>
+      label: 'Neutral', 
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error', 
-      label: 'Error' 
-    }}>
-    {Template.bind({})}
-  </Story>
-  <Story 
-    name="with icon" 
-    args={{
-      status: 'warning', 
-      label: (<Icon icon="check" inline /> with icon)
-    )}}>
-    {Template.bind({})}
-  </Story>
+      label: 'Error', 
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
 </Canvas>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx b/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx
index 7cdd1cc2346a..7ab12337fc6b 100644
--- a/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx
+++ b/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx
@@ -1,6 +1,6 @@
 ```shell
 # Builds Storybook with Angular's custom builder
-# See https://storybook.js.org/docs/angular/get-started/install 
+# See https://storybook.js.org/docs/7.0/angular/get-started/install
 # to learn how to create the custom builder
 ng run my-project:build-storybook
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx
index ef7332db0db7..0a71e74d5e03 100644
--- a/docs/snippets/angular/button-group-story.ts.mdx
+++ b/docs/snippets/angular/button-group-story.ts.mdx
@@ -13,9 +13,9 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
-  */
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
   decorators: [
@@ -26,16 +26,15 @@ export default {
   ],
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [
-    { ...ButtonStories.Primary.args },
-    { ...ButtonStories.Secondary.args },
-  ],
-  orientation: 'horizontal',
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Pair: Story = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
index 024ee79c92a6..000f996bc195 100644
--- a/docs/snippets/angular/button-story-click-handler-args.ts.mdx
+++ b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { action } from '@storybook/addon-actions';
 
@@ -9,22 +9,21 @@ import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as Meta;
 
-export const Text: Story = ({ label, onClick }) => ({
-  props: {
-    label,
-    onClick,
+export const Text: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<storybook-button [label]="label" (onClick)="onClick()"></storybook-button>`,
+  }),
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
   },
-});
-
-Text.args = {
-  label: 'Hello',
-  onClick: action('clicked'),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx
index 7cb711badc7c..505c0be2c73a 100644
--- a/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx
+++ b/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx
@@ -1,20 +1,20 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as Meta;
 
-export const Text: Story = (args) => ({
-  props: args,
-});
+export const Text: Story = {
+  args: {...},
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-click-handler.ts.mdx b/docs/snippets/angular/button-story-click-handler.ts.mdx
index 603e95d0fb45..fabf50c1cfc8 100644
--- a/docs/snippets/angular/button-story-click-handler.ts.mdx
+++ b/docs/snippets/angular/button-story-click-handler.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Button } from './button.component';
 
@@ -9,17 +9,19 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button', 
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
 } as Meta;
 
-export const Text: Story = () => ({
-  props: {
-    text: 'Hello Button',
-    onClick: action('clicked'),
-  },
-});
+export const Text: Story = {
+  render: () => ({
+    props: {
+      label: 'Button',
+      onClick: action('clicked'),
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-component-args-primary.ts.mdx b/docs/snippets/angular/button-story-component-args-primary.ts.mdx
index 882b9c223c73..fbab7dec15d1 100644
--- a/docs/snippets/angular/button-story-component-args-primary.ts.mdx
+++ b/docs/snippets/angular/button-story-component-args-primary.ts.mdx
@@ -1,15 +1,15 @@
 ```ts
 // Button.stories.ts
 
-import { Meta } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific argTypes
diff --git a/docs/snippets/angular/button-story-component-decorator.ts.mdx b/docs/snippets/angular/button-story-component-decorator.ts.mdx
index 82bbfb0fd821..a47a543849a6 100644
--- a/docs/snippets/angular/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/angular/button-story-component-decorator.ts.mdx
@@ -9,9 +9,9 @@ import { Parent } from './parent.component'; // Parent contains ng-content
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   decorators: [
diff --git a/docs/snippets/angular/button-story-decorator.mdx.mdx b/docs/snippets/angular/button-story-decorator.mdx.mdx
index ea2980777cca..5b6c7f2f5fb4 100644
--- a/docs/snippets/angular/button-story-decorator.mdx.mdx
+++ b/docs/snippets/angular/button-story-decorator.mdx.mdx
@@ -13,18 +13,15 @@ import { Parent } from './parent.component';
 <Meta title="Button" component={Button}/>
 
 
-export const Template = () => ({
-  template: `<app-button label="Submit"></app-button>`,
-});
-
 <!-- With a template -->
-
 <Story 
   name="Primary"
   decorators={[
     componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)
-  ]} >
-  {Template.bind({})}
+  ]}
+  render={() => ({
+    template: `<app-button label="Submit"></app-button>`,
+  })} />
 </Story>
 
 <!-- With a component -->
@@ -36,7 +33,9 @@ export const Template = () => ({
       declarations: [ParentComponent],
     }),
     componentWrapperDecorator(ParentComponent)
-  ]} >
-  {Template.bind({})}
+  ]}
+  render={() => ({
+    template: `<app-button label="Submit"></app-button>`,
+  })} />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-decorator.ts.mdx b/docs/snippets/angular/button-story-decorator.ts.mdx
index 58dcfdd08461..f09d0111966a 100644
--- a/docs/snippets/angular/button-story-decorator.ts.mdx
+++ b/docs/snippets/angular/button-story-decorator.ts.mdx
@@ -8,31 +8,23 @@ import { Parent } from './parent.component'; // Parent contains ng-content
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as Meta;
 
-const Template: Story = (args) => ({
-  template: '<app-button label="Submit"></app-button>',
-});
-
-export const Primary = Template.bind({});
-Primary.decorators = [
-  componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`),
-];
-
-export const Primary = {
+export const Primary: Story = {
   decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
 };
 
-export const InsideParent= Template.bind({});
-InsideParent.decorators = [
-  moduleMetadata({
-    declarations: [Parent],
-  }),
-  componentWrapperDecorator(Parent),
-];
+export const InsideParent: Story = {
+  decorators: [
+    moduleMetadata({
+      declarations: [Parent],
+    }),
+    componentWrapperDecorator(Parent),
+  ],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-default-docs-code.mdx.mdx b/docs/snippets/angular/button-story-default-docs-code.mdx.mdx
deleted file mode 100644
index 22b41e4136dc..000000000000
--- a/docs/snippets/angular/button-story-default-docs-code.mdx.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import { Button } from './button.component';
-
-<!-- 👇 Creates specific argTypes -->
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    backgroundColor: {
-      control: 'color',
-    },
-  }}
-/>
-
-<!-- 👇 Some function to demonstrate the behavior -->
-export const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
-<Story
-  name="ExampleStory"
-  args={{
-    primary: true,
-    size: 'small',
-    label: 'button',
-  }}>
-  {(args) => {
-    const { label } = args;
-    const functionResult = someFunction(label);
-    return {
-      props: {
-        ...args,
-        label: functionResult,
-      },
-    };
-  }}
-</Story>
-```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-default-docs-code.ts.mdx b/docs/snippets/angular/button-story-default-docs-code.ts.mdx
deleted file mode 100644
index a064635bd5dd..000000000000
--- a/docs/snippets/angular/button-story-default-docs-code.ts.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-```ts
-// Button.stories.ts
-
-import { Meta, Story } from '@storybook/angular';
-
-import { Button } from './button.component';
-
-export default {
-  /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button',
-  component: Button,
-  //👇 Creates specific argTypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as Meta;
-
-//👇 Some function to demonstrate the behavior
-const someFunction = (someValue: string) => {
-  return `i am a ${someValue}`;
-};
-
-
-export const ExampleStory: Story = (args) => {
-  //👇 Destructure the label from the args object
-  const { label } = args;
-  
-  //👇 Assigns the function result to a variable and pass it as a prop into the component
-  const functionResult = someFunction(label);
-  return {
-    props: {
-      ...args,
-      label: functionResult,
-    },
-  };
-};
-ExampleStory.args = {
-  primary: true,
-  size: 'small',
-  label: 'button',
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-default-export-with-component.ts.mdx b/docs/snippets/angular/button-story-default-export-with-component.ts.mdx
index a725407344c8..c17664e80879 100644
--- a/docs/snippets/angular/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/angular/button-story-default-export-with-component.ts.mdx
@@ -1,15 +1,15 @@
 ```ts
 // Button.stories.ts
 
-import { Meta } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as Meta;
diff --git a/docs/snippets/angular/button-story-rename-story.ts.mdx b/docs/snippets/angular/button-story-rename-story.ts.mdx
index cc7e47168605..a90462526810 100644
--- a/docs/snippets/angular/button-story-rename-story.ts.mdx
+++ b/docs/snippets/angular/button-story-rename-story.ts.mdx
@@ -1,26 +1,31 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as Meta;
 
-
-export const Primary: Story = () => ({
-  props: {
-    label: 'Button',
-    primary: true,
-  },
-});
-
-Primary.storyName = 'I am the primary';
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  name: 'I am the primary',
+  render: () => ({
+    props: {
+      label: 'Button',
+      primary: true,
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-using-args.ts.mdx b/docs/snippets/angular/button-story-using-args.ts.mdx
index 33be6ec6ac21..d898ade3b623 100644
--- a/docs/snippets/angular/button-story-using-args.ts.mdx
+++ b/docs/snippets/angular/button-story-using-args.ts.mdx
@@ -1,45 +1,42 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as Meta;
 
-
-//👇 We create a “template” of how args map to rendering
-const Template: Story = (args) => ({
-  props: args,
-});
-
-// 👇 Each story then reuses that template
-export const Primary= Template.bind({});
-Primary.args = {
-  label: 'Button',
-  backgroundColor: '#ff0',
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  args: {
+    label: 'Button',
+    backgroundColor: '#ff0',
+  },
 };
 
-
-export const Secondary= Template.bind({});
-Secondary.args = {
+export const Secondary: Story = {
   args: {
     ...Primary.args,
     label: '😄👍😍💯',
   },
 };
 
-
-export const Tertiary= Template.bind({});
-Tertiary.args={
-  ...Primary.args,
-  label: '📚📕📈🤓',
+export const Tertiary: Story = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-with-addon-example.ts.mdx b/docs/snippets/angular/button-story-with-addon-example.ts.mdx
index a1809a0ee0bf..37368e73b2a2 100644
--- a/docs/snippets/angular/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/angular/button-story-with-addon-example.ts.mdx
@@ -1,15 +1,15 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
@@ -20,7 +20,14 @@ export default {
   },
 } as Meta;
 
-export const Basic: Story = () => ({
-   template: `<app-button>hello</<app-button>`,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Basic: Story = {
+  render: () => ({
+    template: `<app-button>hello</<app-button>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-with-args.mdx.mdx b/docs/snippets/angular/button-story-with-args.mdx.mdx
index e09bf9d0ea4f..15f9134bde74 100644
--- a/docs/snippets/angular/button-story-with-args.mdx.mdx
+++ b/docs/snippets/angular/button-story-with-args.mdx.mdx
@@ -7,16 +7,19 @@ import { Button } from './button.component';
 
 <Meta title="Button" component={Button} />
 
-<!-- 👇 We create a “template” of how args map to rendering -->
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
-<!-- 👇 Each story then reuses that template -->
 <Story
   name="Primary"
   args={{
     primary: true,
     label: 'Button',
-  }} >
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-with-args.ts.mdx b/docs/snippets/angular/button-story-with-args.ts.mdx
index 9397f8fcbb9b..12f1f9cc4907 100644
--- a/docs/snippets/angular/button-story-with-args.ts.mdx
+++ b/docs/snippets/angular/button-story-with-args.ts.mdx
@@ -1,29 +1,28 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular/';
+import type { Meta, Story } from '@storybook/angular/';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as Meta;
 
-//👇 We create a “template” of how args map to rendering
-const Template: Story = (args) => ({
-  props: args,
-});
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-
-Primary.args = {
-  primary: true,
-  label: 'Button',
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-with-blue-args.ts.mdx b/docs/snippets/angular/button-story-with-blue-args.ts.mdx
index 0883da9d428e..e6a8a4afb695 100644
--- a/docs/snippets/angular/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/angular/button-story-with-blue-args.ts.mdx
@@ -1,15 +1,15 @@
 ```ts
 // Button.stories.ts
 
-import { Meta } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
diff --git a/docs/snippets/angular/button-story-with-emojis.mdx.mdx b/docs/snippets/angular/button-story-with-emojis.mdx.mdx
index 8490a0c47ff7..4b262d749f91 100644
--- a/docs/snippets/angular/button-story-with-emojis.mdx.mdx
+++ b/docs/snippets/angular/button-story-with-emojis.mdx.mdx
@@ -7,30 +7,34 @@ import { Button } from './button.component';
 
 <Meta title="Button" component={Button}/>
 
-<Story name="Primary">
-  {{
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
+
+<Story 
+  name="Primary"
+  render={() => ({
     props: {
-      background: '#ff0',
+      backgroundColor: '#ff0',
       label: 'Button',
     },
-  }}
-</Story>
-
-<Story name="Secondary">
-  {{
+  })} />
+<Story 
+  name="Secondary"
+  render={() => ({
     props: {
-      background: '#ff0',
+      backgroundColor: '#ff0',
       label: '😄👍😍💯',
     },
-  }}
-</Story>
-
-<Story name="Tertiary">
-  {{
+  })} />
+<Story 
+  name="Tertiary"
+  render={() => ({
     props: {
-      background: '#ff0',
+      backgroundColor: '#ff0',
       label: '📚📕📈🤓',
     },
-  }}
-</Story>
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-with-emojis.ts.mdx b/docs/snippets/angular/button-story-with-emojis.ts.mdx
index ce4c5a05ed10..33f59f8e9fbc 100644
--- a/docs/snippets/angular/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/angular/button-story-with-emojis.ts.mdx
@@ -1,38 +1,48 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary: Story = () => ({
-  props: {
-    label: 'Button',
-    backgroundColor: '#ff0',
-  },
-});
-
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    props: {
+      label: 'Button',
+      backgroundColor: '#ff0',
+    },
+  }),
+};
 
-export const Secondary: Story = () => ({
-  props: {
-    label: '😄👍😍💯',
-    backgroundColor: '#ff0',
-  },
-});
+export const Secondary: Story = {
+  render: () => ({
+    props: {
+      label: '😄👍😍💯',
+      backgroundColor: '#ff0',
+    },
+  }),
+};
 
-export const Tertiary: Story = () => ({
-  props: {
-    label: '📚📕📈🤓',
-    backgroundColor: '#ff0',
-  },
-});
+export const Tertiary: Story = {
+  render: () => ({
+    props: {
+      label: '📚📕📈🤓',
+      backgroundColor: '#ff0',
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-with-parameters.ts.mdx b/docs/snippets/angular/button-story-with-parameters.ts.mdx
index a47b5b4d52d3..4bac6bb9b8a8 100644
--- a/docs/snippets/angular/button-story-with-parameters.ts.mdx
+++ b/docs/snippets/angular/button-story-with-parameters.ts.mdx
@@ -1,15 +1,15 @@
 ```ts
 // Button.stories.ts
 
-import { Meta } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   parameters: {
diff --git a/docs/snippets/angular/button-story.mdx.mdx b/docs/snippets/angular/button-story.mdx.mdx
index c0046a7e3fd4..622760377aef 100644
--- a/docs/snippets/angular/button-story.mdx.mdx
+++ b/docs/snippets/angular/button-story.mdx.mdx
@@ -9,12 +9,12 @@ import { Button } from './button.component.ts';
 
 # Button
 
-<Story name="Primary">
-  {{
+<Story 
+  name="Primary"
+  render={() => ({
     props: {
       primary: true,
       label: 'Button',
     },
-  }}
-</Story>
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story.ts.mdx b/docs/snippets/angular/button-story.ts.mdx
index 6caf51790495..d3fd7c86ceca 100644
--- a/docs/snippets/angular/button-story.ts.mdx
+++ b/docs/snippets/angular/button-story.ts.mdx
@@ -1,23 +1,30 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as Meta;
 
-export const Primary: Story = () => ({
-  props: {
-    label: 'Button',
-    primary: true,
-  },
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    props: {
+      label: 'Button',
+      primary: true,
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/checkbox-story-csf.ts.mdx b/docs/snippets/angular/checkbox-story-csf.ts.mdx
index 482aa27c18f4..0c39202e21dd 100644
--- a/docs/snippets/angular/checkbox-story-csf.ts.mdx
+++ b/docs/snippets/angular/checkbox-story-csf.ts.mdx
@@ -1,26 +1,33 @@
 ```ts
 // Checkbox.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Checkbox } from './Checkbox.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Checkbox', 
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Checkbox',
   component: Checkbox,
 } as Meta;
 
-export const allCheckboxes: Story = () => ({
-  template: `
-    <form>
-      <Checkbox id="Unchecked" label="Unchecked" />
-      <Checkbox id="Checked" label="Checked" checked />
-      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
-    </form>
-  `,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const allCheckboxes: Story = {
+  render: () => ({
+    template: `
+      <form>
+        <Checkbox id="Unchecked" label="Unchecked" />
+        <Checkbox id="Checked" label="Checked" checked />
+        <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+      </form>
+    `,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/checkbox-story-starter-example.mdx.mdx b/docs/snippets/angular/checkbox-story-starter-example.mdx.mdx
index 81d841b07fb7..13a72b787e04 100644
--- a/docs/snippets/angular/checkbox-story-starter-example.mdx.mdx
+++ b/docs/snippets/angular/checkbox-story-starter-example.mdx.mdx
@@ -7,18 +7,23 @@ import { Checkbox } from './checkbox.component';
 
 <Meta title="MDX/Checkbox" component={Checkbox} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
+
 <Canvas>
   <Story 
-    name="all checkboxes">
-    {{
+    name="MyStory"
+    render={() => ({
       template: `
         <form>
-          <Checkbox id="Unchecked" label="Unchecked" />
-          <Checkbox id="Checked" label="Checked" checked />
-          <Checkbox appearance="secondary" id="second" label="Secondary" checked />
-        </form>    
-      `,
-    }}
+          <Checkbox id="Unchecked" label="Unchecked" /> 
+          <Checkbox id="Checked" label="Checked" checked /> 
+          <Checkbox appearance="secondary" id="second" label="Secondary" checked /> 
+        </form>`,
+    })} >
   </Story>
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/checkbox-story.mdx.mdx b/docs/snippets/angular/checkbox-story.mdx.mdx
index e689fc4facf2..7c948bbbbf02 100644
--- a/docs/snippets/angular/checkbox-story.mdx.mdx
+++ b/docs/snippets/angular/checkbox-story.mdx.mdx
@@ -7,7 +7,11 @@ import { Checkbox } from './checkbox.component';
 
 <Meta title="MDX/Checkbox" component={Checkbox} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 # Checkbox
 
@@ -19,27 +23,28 @@ Markdown documentation.
     name="Unchecked"
     args={{ 
       label: 'Unchecked',
-    }}>
-    {Template.bind({})}
-  </Story>
-
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
   <Story 
     name="Checked"
     args={{ 
       label: 'Unchecked',
       checked: true,
-    }}>
-    {Template.bind({})}
-  </Story>
-
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
   <Story 
     name="Secondary"
     args={{
       label: 'Secondary',
       checked: true, 
       appearance: 'secondary',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-custom-args-complex.mdx.mdx b/docs/snippets/angular/component-story-custom-args-complex.mdx.mdx
index 3386c7ffc963..af0ba520ba35 100644
--- a/docs/snippets/angular/component-story-custom-args-complex.mdx.mdx
+++ b/docs/snippets/angular/component-story-custom-args-complex.mdx.mdx
@@ -15,22 +15,9 @@ export const someFunction = (valuePropertyA, valuePropertyB) => {
 
 };
 
-export const Template = (args) => {
-  const { propertyA, propertyB } = args;
-
-  // 👇 Assigns the function result to a variable 
-  const someFunctionResult = someFunction(propertyA, propertyB);
-  return {
-    props: {
-      ...args,
-      someProperty: someFunctionResult,
-    },
-  };
-};
-
 <Canvas>
   <Story
-    name="ExampleStory"
+    name="A complex case with a function"
     argTypes={{
       propertyA: {
         options: [
@@ -50,8 +37,16 @@ export const Template = (args) => {
     args={{
       propertyA: 'Item One',
       propertyB: 'Another Item One',
-    }}>
-    {Template.bind({})}
-  </Story>
-</Canvas
+    }} 
+    render={(args) => {
+      const { propertyA, propertyB } = args;
+      const someFunctionResult = someFunction(propertyA, propertyB);
+      return {
+        props: {
+          ...args,
+          someProperty: someFunctionResult,
+        },
+      };
+    }} />
+</Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-custom-args-complex.ts.mdx b/docs/snippets/angular/component-story-custom-args-complex.ts.mdx
index db70034eecf8..3c0e1267c6ea 100644
--- a/docs/snippets/angular/component-story-custom-args-complex.ts.mdx
+++ b/docs/snippets/angular/component-story-custom-args-complex.ts.mdx
@@ -1,15 +1,15 @@
 ```ts
 // YourComponent.stories.ts
 
-import { Meta, Story} from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { YourComponent } from './your-component.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   //👇 Creates specific argTypes with options
@@ -29,23 +29,23 @@ const someFunction = (valuePropertyA: String, valuePropertyB: String) => {
   // Makes some computations and returns something
 };
 
-const Template: Story = (args) => {
-  const { propertyA, propertyB } = args;
-  
-  //👇 Assigns the function result to a variable
-  const someFunctionResult = someFunction(propertyA, propertyB);
-  
-  return {
-    props: {
-      ...args,
-      someProperty: someFunctionResult,
-    },
-  };
-};
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args= {
-  propertyA: 'Item One',
-  propertyB: 'Another Item One',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+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' },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-figma-integration.mdx.mdx b/docs/snippets/angular/component-story-figma-integration.mdx.mdx
index 85939ccf81a0..314a0bbe2550 100644
--- a/docs/snippets/angular/component-story-figma-integration.mdx.mdx
+++ b/docs/snippets/angular/component-story-figma-integration.mdx.mdx
@@ -9,7 +9,11 @@ import { MyComponent } from './MyComponent.component';
 
 <Meta title="FigmaExample" component={MyComponent} decorators={[withDesign]} />
 
-export const Template = () => ({ props: {} });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
@@ -20,8 +24,8 @@ export const Template = () => ({ props: {} });
         url: 'https://www.figma.com/file/Sample-File',
       },
     }}
-  >
-  {Template.bind({})}
-  </Story>
+    render={(args) => ({
+      props: args,
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-figma-integration.ts.mdx b/docs/snippets/angular/component-story-figma-integration.ts.mdx
index eb0e2565f611..eb1327cb8580 100644
--- a/docs/snippets/angular/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/angular/component-story-figma-integration.ts.mdx
@@ -1,29 +1,25 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Story, Meta } from '@storybook/angular/';
+import type { Story, Meta } from '@storybook/angular/';
 
 import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent.component';
 
-// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 } as Meta;
 
-// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
-const Template: Story = () => ({
-  props: {},
-});
-
-export const Example = Template.bind({});
-Example.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/Sample-File',
+export const Example: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/angular/component-story-mdx-story-by-name.mdx.mdx
index 1bbde792d7ad..9c9002441fde 100644
--- a/docs/snippets/angular/component-story-mdx-story-by-name.mdx.mdx
+++ b/docs/snippets/angular/component-story-mdx-story-by-name.mdx.mdx
@@ -7,9 +7,18 @@ import { Button } from './button.component';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
-<Story name="Basic" args={{ label: 'hello' }}>
-  {Template.bind({})}
-</Story>
+<Story 
+  name="Basic" 
+  args={{ 
+    label: 'hello' 
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-static-asset-cdn.mdx.mdx b/docs/snippets/angular/component-story-static-asset-cdn.mdx.mdx
index dc9bcbf923b8..336ad15470f5 100644
--- a/docs/snippets/angular/component-story-static-asset-cdn.mdx.mdx
+++ b/docs/snippets/angular/component-story-static-asset-cdn.mdx.mdx
@@ -8,13 +8,15 @@ import { MyComponent } from './MyComponent.component';
 
 <Meta title="img" component={MyComponent}/>
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
+
 <Story 
-  name="WithAnImage">
-   {{
-    props: {
-      src: 'https://place-hold.it/350x150',
-      alt: 'My CDN placeholder',
-    },
-  }}
-</Story>
+  name="WithAnImage"
+  render={() => ({
+    template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder" />`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx b/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx
index 7fb6fa7d8e31..5ee0ebf5c46a 100644
--- a/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx
+++ b/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx
@@ -1,24 +1,30 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
   component: MyComponent,
 } as Meta;
 
-
-export const WithAnImage: Story = () => ({
-  props: {
-    src: 'https://place-hold.it/350x150',
-    alt: 'My CDN placeholder',
-  },
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage: Story = {
+  render: () => ({
+    props: {
+      src: 'https://place-hold.it/350x150',
+      alt: 'My CDN placeholder',
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-static-asset-with-import.mdx.mdx b/docs/snippets/angular/component-story-static-asset-with-import.mdx.mdx
index 35c9defa8c75..6dfd1477cc01 100644
--- a/docs/snippets/angular/component-story-static-asset-with-import.mdx.mdx
+++ b/docs/snippets/angular/component-story-static-asset-with-import.mdx.mdx
@@ -9,18 +9,24 @@ import imageFile from './static/image.png';
 
 <Meta title="img" component={MyComponent}/>
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
+
 export const image = {
   src: imageFile,
   alt: 'my image',
 };
 
-<Story name="WithAnImage">
-  {{
+<Story 
+  name="WithAnImage"
+  render={() => ({
     props: {
       src: image.src,
       alt: image.alt,
     },
     template: `<img src="{{src}}" alt="{{alt}}" />`,
-  }}
-</Story>
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx b/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx
index c8b078d1ce2f..54ff18d685e4 100644
--- a/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx
+++ b/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -9,9 +9,9 @@ import imageFile from './static/image.png';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
   component: MyComponent,
 } as Meta;
@@ -21,11 +21,18 @@ const image = {
   alt: 'my image',
 };
 
-export const WithAnImage: Story () => ({
-  template: `<img src="{{src}}" alt="{{alt}}" />`,
-  props: {
-    src: image.src,
-    alt: image.alt,
-  },
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage: Story = {
+  render: () => ({
+    props: {
+      src: image.src,
+      alt: image.alt,
+    },
+    template: `<img src="{{src}}" alt="{{alt}}" />`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-static-asset-without-import.mdx.mdx b/docs/snippets/angular/component-story-static-asset-without-import.mdx.mdx
index 9dbd1623b4ad..de052b06b225 100644
--- a/docs/snippets/angular/component-story-static-asset-without-import.mdx.mdx
+++ b/docs/snippets/angular/component-story-static-asset-without-import.mdx.mdx
@@ -9,12 +9,8 @@ import { MyComponent } from './MyComponent.component';
 
 <!-- Assume image.png is located in the "public" directory.-->
 <Story 
-  name="WithAnImage">
-  {{
-    props: {
-      src: '/image.png',
-      alt: 'my image',
-    },
-  }}
-</Story>
+  name="withAnImage"
+  render={() => ({
+    template: `<img src="/otherimage.jpg" alt="my image"/>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx b/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
index 04357f1f4557..806ebd115407 100644
--- a/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
+++ b/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
@@ -1,24 +1,26 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
   component: MyComponent,
 } as Meta;
 
 // Assume image.png is located in the "public" directory.
-export const WithAnImage: Story = () => ({
-  props: {
-    src: '/image.png',
-    alt: 'my image',
-  },
-});
+export const WithAnImage: Story = {
+  render: () => ({
+    props: {
+      src: '/image.png',
+      alt: 'my image',
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-with-accessibility.mdx.mdx b/docs/snippets/angular/component-story-with-accessibility.mdx.mdx
index d267cb707f36..e3871e8be688 100644
--- a/docs/snippets/angular/component-story-with-accessibility.mdx.mdx
+++ b/docs/snippets/angular/component-story-with-accessibility.mdx.mdx
@@ -16,28 +16,27 @@ import { Button } from './Button.component';
     }
   }} />
 
-export const Template = (args) => ({ props: args });
-
 ## This is an accessible story
 
-<Story
-  name="Accessible"
+<Story 
+  name="Accessible" 
   args={{ 
     primary: false,
     label: 'Button'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 
 ## This is not
-
-<Story
-  name="Inaccessible"
+<Story 
+  name="Inaccessible" 
   args={{ 
     primary: false, 
     label: 'Button', 
     backgroundColor: 'red'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-with-accessibility.ts.mdx b/docs/snippets/angular/component-story-with-accessibility.ts.mdx
index 751934b3ea15..1fc0e394e546 100644
--- a/docs/snippets/angular/component-story-with-accessibility.ts.mdx
+++ b/docs/snippets/angular/component-story-with-accessibility.ts.mdx
@@ -1,14 +1,14 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Button } from './Button.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading to learn how to generate automatic titles
+   */
   title: 'Accessibility testing',
   component: Button,
   argTypes: {
@@ -16,19 +16,18 @@ export default {
   },
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
-
-export const Accessible: Story = Template.bind({});
-Accessible.args = {
-  primary: false,
-  label: 'Button',
+// This is an accessible story
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
 };
-
-export const Inaccessible: Story = Template.bind({});
-Inaccessible.args = {
-  ...Accessible.args,
-  backgroundColor: 'red',
+// This is not
+export const Inaccessible: Story = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx b/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx
new file mode 100644
index 000000000000..41caa5907d30
--- /dev/null
+++ b/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx
@@ -0,0 +1,41 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+
+import { CommonModule } from '@angular/common';
+
+import { Layout } from './Layout.component';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [Layout],
+      imports: [CommonModule],
+    }),
+  ],
+} as Meta;
+
+export const Example: Story = {
+  render: () => ({
+    template: `
+      <app-layout>
+        <header>
+          <h1>Example</h1>
+        </header>
+        <article>
+          <app-my-component></app-my-component>
+        </article>
+      </app-layout>
+    `,
+  }),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
index 13f45f9fcfe4..14832bc934ff 100644
--- a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
+++ b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
@@ -1,13 +1,11 @@
 ```ts
 // YourPage.stories.ts
 
-import { Meta, Story } from '@storybook/angular'; 
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-
 import { graphql } from 'msw';
 
 import { DocumentScreen } from './YourPage.component';
@@ -19,9 +17,9 @@ import { MockGraphQLModule } from './mock-graphql.module';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
   decorators: [
@@ -81,32 +79,30 @@ const TestData = {
   ],
 };
 
-const PageTemplate: Story = () => ({
-  props: {},
-});
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(ctx.data(TestData));
-    }),
-  ],
+export const MockedSuccess: Story = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(ctx.data(TestData));
+      }),
+    ],
+  },
 };
 
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(
-        ctx.delay(800),
-        ctx.errors([
-          {
-            message: 'Access denied',
-          },
-        ])
-      );
-    }),
-  ],
+export const MockedError: Story = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(
+          ctx.delay(800),
+          ctx.errors([
+            {
+              message: 'Access denied',
+            },
+          ])
+        );
+      }),
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
index b322e273b2b2..00475e53bd64 100644
--- a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
+++ b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
@@ -1,13 +1,11 @@
 ```ts
 // YourPage.stories.ts
 
-import { Meta, Story } from '@storybook/angular'; 
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-
 import { rest } from 'msw';
 
 import { DocumentScreen } from './YourPage.component';
@@ -17,9 +15,9 @@ import { PageLayout } from './PageLayout.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
   decorators: [
@@ -79,25 +77,23 @@ const TestData = {
   ],
 };
 
-const PageTemplate: Story = () => ({
-  props: {},
-});
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-      return res(ctx.json(TestData));
-    }),
-  ],
+export const MockedSuccess: Story = {
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+        return res(ctx.json(TestData));
+      }),
+    ],
+  },
 };
 
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-      return res(ctx.delay(800), ctx.status(403));
-    }),
-  ],
+export const MockedError: Story = {
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+        return res(ctx.delay(800), ctx.status(403));
+      }),
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/form-story-component-with-play-function.ts.mdx b/docs/snippets/angular/form-story-component-with-play-function.ts.mdx
deleted file mode 100644
index 40c91d9e7389..000000000000
--- a/docs/snippets/angular/form-story-component-with-play-function.ts.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-```ts
-// Form.stories.ts
-
-import { userEvent, within } from '@storybook/testing-library';
-
-import { LoginForm } from './LoginForm.component';
-
-export default {
-  component: LoginForm,
-};
-
-export const FilledForm = {
-  play: async ({ args, canvasElement }) => {
-    // Starts querying the component from its root element
-    const canvas = within(canvasElement);
-
-    await userEvent.type(canvas.getByTestId('email'), 'email');
-    await userEvent.type(canvas.getByTestId('password'), 'password');
-    
-    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(canvas.getByRole('button'));
-  },
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-expanded.ts.mdx b/docs/snippets/angular/list-story-expanded.ts.mdx
index 2a3d5e1c9f82..0cdf2052046c 100644
--- a/docs/snippets/angular/list-story-expanded.ts.mdx
+++ b/docs/snippets/angular/list-story-expanded.ts.mdx
@@ -10,9 +10,9 @@ import { ListItem } from './list-item.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   decorators: [
@@ -24,26 +24,33 @@ export default {
 } as Meta;
 
 // Always an empty list, not super interesting
-export const Empty: Story = (args) => ({
-  props: args,
-  template: `<app-list></app-list>`,
-});
+export const Empty: Story = {
+  render: (args) => ({
+    props: args,
+    template: '<app-list></app-list>',
+  }),
+};
 
-export const OneItem: Story = (args) => ({
-  props: args,
-  template: `
-    <app-list>
-      <app-listitem></app-listitem>
-    </app-list>`,
-});
+export const OneItem: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item></app-list-item>
+      </app-list>`,
+  }),
+};
 
-export const ManyItems: Story = (args) => ({
-  props: args,
-  template: `
-    <app-list>
-      <app-listitem></app-listitem>
-      <app-listitem></app-listitem>
-      <app-listitem></app-listitem>
-    </app-list>`,
-});
+export const ManyItems: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item></app-list-item>
+        <app-list-item></app-list-item>
+        <app-list-item></app-list-item>
+      </app-list>
+    `,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-reuse-data.ts.mdx b/docs/snippets/angular/list-story-reuse-data.ts.mdx
index e58dd12c2aa1..2e758b034060 100644
--- a/docs/snippets/angular/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/angular/list-story-reuse-data.ts.mdx
@@ -13,9 +13,9 @@ import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   decorators: [
@@ -26,19 +26,25 @@ export default {
   ],
 } as Meta;
 
-
-export const ManyItems: Story = (args) => ({
-  props: args,
-  template: `
-    <app-list>
-      <app-listitem [isSelected]="Selected"></app-listitem>
-      <app-listitem [isSelected]="Unselected"></app-listitem>
-      <app-listitem [isSelected]="Unselected"></app-listitem>
-    </app-list>
-  `,
-});
-ManyItems.args= {
-  Selected: Selected.args.isSelected,
-  Unselected: Unselected.args.isSelected,
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems: Story = {
+  args: {
+    Selected: Selected.args.isSelected,
+    Unselected: Unselected.args.isSelected,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item [isSelected]="Selected"></app-list-item>
+        <app-list-item [isSelected]="Unselected"></app-list-item>
+        <app-list-item [isSelected]="Unselected"></app-list-item>
+      </app-list>
+    `,
+  }),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-starter.ts.mdx b/docs/snippets/angular/list-story-starter.ts.mdx
index d325679ad9e3..87f234b07a30 100644
--- a/docs/snippets/angular/list-story-starter.ts.mdx
+++ b/docs/snippets/angular/list-story-starter.ts.mdx
@@ -9,9 +9,9 @@ import { List } from './list.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   component: List,
   decorators: [
     moduleMetadata({
@@ -22,8 +22,10 @@ export default {
 } as Meta;
 
 // Always an empty list, not super interesting
-const Template: Story = (args) => ({
-  props: args,
-  template: `<app-list></app-list>`,
-});
+export const Empty: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-list></app-list>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-template.ts.mdx b/docs/snippets/angular/list-story-template.ts.mdx
index bac6ba8fdb19..0848e1c36cca 100644
--- a/docs/snippets/angular/list-story-template.ts.mdx
+++ b/docs/snippets/angular/list-story-template.ts.mdx
@@ -13,9 +13,9 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   decorators: [
@@ -26,29 +26,33 @@ export default {
   ],
 } as Meta;
 
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+const ListTemplate: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <div *ngFor="let item of items">
+          <app-list-item [item]="item"></app-list-item>
+        </div>
+      </app-list>
+    `,
+  }),
+};
 
-const ListTemplate: Story = (args) => ({
-  props: args,
-  template: `
-    <app-list>
-      <div *ngFor="let item of items">
-        <app-list-item [item]="item"></app-list-item>
-      </div>
-    </app-list>
-  `,
-});
-
-export const Empty = ListTemplate.bind({});
-EmptyListTemplate.args = {
-  items: [],
+export const Empty: Story = {
+  ...ListTemplate,
+  args: { items: [] },
 };
 
-export const OneItem = ListTemplate.bind({});
-OneItem.args = {
-  items: [
-    {
-      ...Unchecked.args,
-    },
-  ],
+export const OneItem: Story = {
+  ...ListTemplate,
+  args: {
+    items: [{ ...Unchecked.args }],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-unchecked.ts.mdx b/docs/snippets/angular/list-story-unchecked.ts.mdx
index 017d94620c1c..148bb5da82b1 100644
--- a/docs/snippets/angular/list-story-unchecked.ts.mdx
+++ b/docs/snippets/angular/list-story-unchecked.ts.mdx
@@ -13,9 +13,9 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   decorators: [
@@ -26,17 +26,22 @@ export default {
   ],
 } as Meta;
 
-
-export const OneItem: Story = (args) => ({
-  props: args,
-  template: `
-    <app-list>
-      <app-list-item [item]="item"></app-list-item>
-    </app-list>
-  `,
-});
-
-OneItem.args = {
-   ...Unchecked.args,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item [item]="item"></app-list-item>
+      </app-list>
+   `,
+  }),
+  args: {
+    ...Unchecked.args,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
index 459bf8791a68..373105e347a1 100644
--- a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
@@ -10,9 +10,9 @@ import { ListItem } from './list-item.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
@@ -24,20 +24,22 @@ export default {
   ],
 } as Meta;
 
-export const Empty: Story = () => ({
-  props: {
-    args,
-  },
-});
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty: Story = {};
 
-export const OneItem: Story = () => ({
-  props: {
-    args,
-  },
-  template: `
-    <app-list>
-      <app-list-item></app-list-item>
-    </app-list>
+export const OneItem: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        <app-list-item></app-list-item>
+      </app-list>
   `,
-});
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/loader-story.mdx.mdx b/docs/snippets/angular/loader-story.mdx.mdx
index b1ea6fa0b5bd..70635ae4aa8a 100644
--- a/docs/snippets/angular/loader-story.mdx.mdx
+++ b/docs/snippets/angular/loader-story.mdx.mdx
@@ -9,6 +9,12 @@ import fetch from 'node-fetch';
 
 <Meta title="Examples/Loader" component={TodoItem} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
+
 <Story
   name="Primary"
   loaders={[
@@ -17,11 +23,11 @@ import fetch from 'node-fetch';
         await fetch('https://jsonplaceholder.typicode.com/todos/1')
       ).json(),
     }),
-  ]} >
-  {(args, { loaded: { todo } }) => ({
+  ]}
+  render={(args, { loaded: { todo } }) => ({
     props: {
-      todo: todo,
+      args,
+      todo,
     },
-  })}
-</Story>
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/loader-story.ts.mdx b/docs/snippets/angular/loader-story.ts.mdx
index a48f5f9e78f8..515f920b3fc6 100644
--- a/docs/snippets/angular/loader-story.ts.mdx
+++ b/docs/snippets/angular/loader-story.ts.mdx
@@ -11,9 +11,9 @@ import { TodoItem } from './TodoItem';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Examples/Loader',
   component: TodoItem,
   decorators: [
@@ -24,18 +24,22 @@ export default {
   ],
 } as Meta;
 
-export const Primary = (args, { loaded: { todo } }) => {
-  return {
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (args, { loaded: { todo } }) => ({
     props: {
       args,
       todo,
     },
-  };
-};
-
-Primary.loaders = [
-  async () => ({
-    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
   }),
-];
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/login-form-with-play-function.mdx.mdx b/docs/snippets/angular/login-form-with-play-function.mdx.mdx
index 31443143cd7d..ed6ef23d9f3e 100644
--- a/docs/snippets/angular/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/angular/login-form-with-play-function.mdx.mdx
@@ -11,16 +11,21 @@ import { LoginForm } from './LoginForm.component';
 
 <Meta title="Form" component={LoginForm} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
-  <Story name="Empty Form">
-    {Template.bind({})}
-  </Story>
-
+  <Story 
+    name="Empty Form"
+    render={(args) => ({
+      props: args,
+    })} />
   <Story
     name="Filled Form"
-    play={async ({ canvasElement }) => {
+    play={ async ({ canvasElement }) => {
       // Starts querying the component from its root element
       const canvas = within(canvasElement);
 
@@ -29,7 +34,7 @@ export const Template = (args) => ({ props: args });
 
       await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-      // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+      // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
       await userEvent.click(canvas.getByRole('button'));
 
       // 👇 Assert DOM structure
@@ -38,8 +43,9 @@ export const Template = (args) => ({ props: args });
           'Everything is perfect. Your account is ready and we should probably get you started!'
         )
       ).toBeInTheDocument();
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
 </Canvas>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/login-form-with-play-function.ts.mdx b/docs/snippets/angular/login-form-with-play-function.ts.mdx
index 48df0db4da3c..cc9c0eacbde8 100644
--- a/docs/snippets/angular/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/angular/login-form-with-play-function.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // LoginForm.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { userEvent, within } from '@storybook/testing-library';
 
@@ -11,37 +11,35 @@ import { LoginForm } from './LoginForm.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Form',
   component: LoginForm,
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
 
-export const EmptyForm: Story = Template.bind({});
+export const EmptyForm: Story = {};
 
-export const FilledForm: Story = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  const canvas = within(canvasElement);
+export const FilledForm: Story = {
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
 
-  // 👇 Simulate interactions with the component
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
 
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-  // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
+    // See https://storybook.js.org/docs/7.0/react/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();
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx
index 8f34d74ce589..1e37d2da1eae 100644
--- a/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx
+++ b/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx
@@ -7,7 +7,11 @@ import { Badge } from './badge.component';
 
 <Meta title="Badge" component={Badge} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story 
@@ -15,24 +19,27 @@ export const Template = (args) => ({ props: args });
     args={{ 
       status: 'warning', 
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }} 
+    render={(args) => ({
+      props: args,
+    })} />
   <Story 
     name="neutral"
     args={{ 
       status: 'neutral', 
       label: 'Neutral',
-     }}>
-    {Template.bind({})}
-  </Story>
+     }} 
+    render={(args) => ({
+      props: args,
+    })} />
   <Story 
     name="error"
     args={{ 
       status: 'error', 
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
 </Canvas>
 ```
diff --git a/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx b/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx
index 39d95c5bd919..546d391f02db 100644
--- a/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx
+++ b/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx
@@ -9,23 +9,28 @@ import { MyComponent } from './MyComponent.component';
 
 <Meta title="QueryMethods" component={MyComponent} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleWithRole"
-  play={async () => {
-    // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(screen.getByRole('button', { name: / button label/i }));
-  }} >
-  {Template.bind({})}
-</Story>
-
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 <Story
   name="ExampleWithText"
-  play={async () => {
+  play={ async () => {
     // The play function interacts with the component and looks for the text
     await screen.findByText('example string');
-  }} >
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
index fae563d58d89..2a0ee07f7cfc 100644
--- a/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/addon-docs';
+import type { Meta, Story } from '@storybook/addon-docs';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -9,27 +9,24 @@ import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'QueryMethods',
   component: MyComponent,
-  
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
-
-export const ExampleWithRole: Story = Template.bind({});
-ExampleWithRole.play = async () => {
-  // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+export const ExampleWithRole: Story = {
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+  },
 };
 
-export const ExampleWithText: Story = Template.bind({});
-ExampleWithText.play = async () => {
-  // The play function interacts with the component and looks for the text
-  await screen.findByText('example string');
+export const ExampleWithText: Story = {
+  play: async () => {
+    // The play function interacts with the component and looks for the text
+    await screen.findByText('example string');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-composition.ts.mdx b/docs/snippets/angular/my-component-play-function-composition.ts.mdx
index 818de2f6f011..a30c9235ea87 100644
--- a/docs/snippets/angular/my-component-play-function-composition.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-composition.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -9,32 +9,31 @@ import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
-  component: MyComponent, 
+  component: MyComponent,
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
-
-export const FirstStory: Story = Template.bind({});
-FirstStory.play = async () => {
-  userEvent.type(screen.getByTestId('an-element'), 'example-value');
+export const FirstStory: Story = {
+  play: async () => {
+    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  },
 };
 
-export const SecondStory: Story = Template.bind({});
-SecondStory.play = async () => {
-  await userEvent.type(screen.getByTestId('other-element'), 'another value');
+export const SecondStory: Story = {
+  play: async () => {
+    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  },
 };
 
-export const CombinedStories: Story = Template.bind({});
-CombinedStories.play = async () => {
-  // Runs the FirstStory and Second story play function before running this story's play function
-  await FirstStory.play();
-  await SecondStory.play();
-  await userEvent.type(screen.getByTestId('another-element'), 'random value');
+export const CombinedStories: Story = {
+  play: async () => {
+    // Runs the FirstStory and Second story play function before running this story's play function
+    await FirstStory.play();
+    await SecondStory.play();
+    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx b/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx
index b0423221fde9..00cbd59e61c8 100644
--- a/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx
+++ b/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx
@@ -9,11 +9,15 @@ import { MyComponent } from './MyComponent.component';
 
 <Meta title="WithAsync" component={MyComponent} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleAsyncStory"
-  play={async () => {
+  play={ async () => {
     const Input = screen.getByLabelText('Username', {
       selector: 'input',
     });
@@ -22,15 +26,16 @@ export const Template = (args) => ({ props: args });
       delay: 100,
     });
 
-    // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    
+    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+
     const Submit = screen.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
       await userEvent.hover(screen.getByTestId('error'));
     });
-  }} >
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
index bb8cfebfc317..acf07c8f5c80 100644
--- a/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { screen, userEvent, waitFor } from '@storybook/testing-library';
 
@@ -9,34 +9,30 @@ import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithAsync',
   component: MyComponent,
-  
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
+export const ExampleAsyncStory: Story = {
+  play: async () => {
+    const Input = screen.getByLabelText('Username', {
+      selector: 'input',
+    });
 
-export const ExampleAsyncStory: Story = Template.bind({});
-ExampleAsyncStory.play = async () => {
-  const Input = screen.getByLabelText('Username', {
-    selector: 'input',
-  });
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
 
-  await userEvent.type(Input, 'WrongInput', {
-    delay: 100,
-  });
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = screen.getByRole('button');
+    await userEvent.click(Submit);
 
-  // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const Submit = screen.getByRole('button');
-  await userEvent.click(Submit);
-
-  await waitFor(async () => {
-    await userEvent.hover(screen.getByTestId('error'));
-  });
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx
index 420cd8114f5d..d0ae6d1d3cac 100644
--- a/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx
@@ -9,18 +9,23 @@ import { MyComponent } from './MyComponent.component';
 
 <Meta title="WithCanvasElement" component={MyComponent} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleStory"
   play={async ({ canvasElement }) => {
-    // Assigns canvas to the component root element
+    // Starts querying the component from its 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('another-element'));
-  }} >
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx
index 1cfc409bb7cc..51e1965ee5a2 100644
--- a/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { getByRole, userEvent, within } from '@storybook/testing-library';
 
@@ -9,24 +9,21 @@ import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithCanvasElement',
   component: MyComponent,
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
+export const ExampleStory: Story = {
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
 
-export const ExampleStory: Story = Template.bind({});
-ExampleStory.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('another-element'));
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx
index f14eb480c156..85ca78cb6491 100644
--- a/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx
@@ -9,23 +9,28 @@ import { MyComponent } from './MyComponent.component';
 
 <Meta title="ClickExamples" component={MyComponent} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ClickExample"
-  play={async () => {
-    // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(screen.getByRole('button'));
-  }}>
-  {Template.bind({})}
-</Story>
-
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 <Story
   name="FireEventExample"
   play={async () => {
-    // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await fireEvent.click(screen.getByTestId('data-testid'));
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
index 87dc0d2f1c74..b1e25712293c 100644
--- a/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
@@ -9,26 +9,24 @@ import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ClickExamples',
   component: MyComponent,
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
-
-export const ClickExample: Story = Template.bind({});
-ClickExample.play = async () => {
-  // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button'));
+export const ClickExample: Story = {
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button'));
+  },
 };
 
-export const FireEventExample: Story = Template.bind({});
-FireEventExample.play = async () => {
-  // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await fireEvent.click(screen.getByTestId('data-testid'));
+export const FireEventExample: Story = {
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(screen.getByTestId('data-testid'));
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
index 6ed819ac2e70..6fd941e4ee27 100644
--- a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
@@ -9,11 +9,15 @@ import { MyComponent } from './MyComponent.component';
 
 <Meta title="WithDelay" component={MyComponent} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="DelayedStory"
-  play={async () => {
+  play={ async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
     // The delay option set the amount of milliseconds between characters being typed
@@ -25,7 +29,8 @@ export const Template = (args) => ({ props: args });
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
-  }} >
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
index 084f43dd360d..dfc26e57fdd1 100644
--- a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -9,28 +9,26 @@ import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithDelay',
   component: MyComponent,
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
+export const DelayedStory: Story = {
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element');
 
-export const DelayedStory: Story = Template.bind({});
-DelayedStory.play = () => {
-  const exampleElement= screen.getByLabelText('example-element');
-    // The delay option set the amount of milliseconds between characters being typed
-  await userEvent.type(exampleElement, 'random string', {
-    delay: 100,
-  });
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
 
-  const AnotherExampleElement= screen.getByLabelText('another-example-element');
-  await userEvent.type(AnotherExampleElement, 'another random string', {
-    delay: 100,
-  });
+    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
 };
 ```
diff --git a/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx
index 4638665ad343..42c89c623ca6 100644
--- a/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx
@@ -15,11 +15,9 @@ export const sleep= (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
-export const Template = (args) => ({ props: args });
-
 <Story 
   name="ExampleChangeEvent"
-  play={async () => {
+  play={ async () => {
     const select = screen.getByRole('listbox');
 
     await userEvent.selectOptions(select, ['One Item']);
@@ -30,7 +28,8 @@ export const Template = (args) => ({ props: args });
 
     await userEvent.selectOptions(select, ['Yet another item']);
 
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
index d88755a5cb1c..b14cc2418506 100644
--- a/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -9,9 +9,9 @@ import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithSelectEvent',
   component: MyComponent,
 } as Meta;
@@ -21,20 +21,17 @@ function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const Template: Story = (args) => ({
-  props: args,
-});
+export const ExampleChangeEvent: Story = {
+  play: async () => {
+    const select = screen.getByRole('listbox');
 
-export const ExampleChangeEvent: Story = Template.bind({});
-ExampleChangeEvent.play = async () => {
-  const select = screen.getByRole('listbox');
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
 
-  await userEvent.selectOptions(select, ['One Item']);
-  await sleep(2000);
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
 
-  await userEvent.selectOptions(select, ['Another Item']);
-  await sleep(2000);
-
-  await userEvent.selectOptions(select, ['Yet another item']);
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx
index 4d212e54bec1..89485c2789a2 100644
--- a/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx
+++ b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx
@@ -1,27 +1,26 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Path/To/MyComponent',
   component: MyComponent,
 } as Meta;
 
+export const Default: Story = {};
 
-export const Default: Story = () => ({
-  props: {},
-});
-
-export const WithProp: Story = () => ({
-  props: {
-    prop: 'value',
-  },
-});
+export const WithProp: StoryObj = {
+  render: () => ({
+    props: {
+      prop: 'value',
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx
index 4e7ecefe55b3..57957a4dd1b2 100644
--- a/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx
+++ b/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx
@@ -17,15 +17,20 @@ import { MyComponent } from './MyComponent.component';
   }}
   component={MyComponent} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
+
 <Story
   name="MyStory"
   parameters={{
     viewport: {
       defaultViewport: 'iphonex',
     }
-  }}>
-  {{
-    template: '<MyComponent></MyComponent>',
   }}
-</Story>
+  render={() => ({
+    template: `<MyComponent></MyComponent>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx
index 31b17240aaee..b311827c3cb5 100644
--- a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx
+++ b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
@@ -9,9 +9,9 @@ import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
   parameters: {
@@ -26,7 +26,14 @@ export default {
   },
 } as Meta;
 
-export const MyStory: Story = () => ({
-  template: '<MyComponent></MyComponent>',
-});
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const MyStory: Story = {
+  render: () => ({
+    template: '<MyComponent></MyComponent>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx
index ffd8be4ad9e7..25a90d09aa1e 100644
--- a/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx
@@ -18,12 +18,12 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<Story name="StoryWithLocale">
-  {(args, { globals: { locale } }) => {
+<Story 
+  name="StoryWithLocale" 
+  render={(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
       template: `<p>${caption}</p>`,
     };
-  }}
-</Story>
+  }} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx
index c0f5e90f1954..bceac3fade0f 100644
--- a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx
+++ b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx
@@ -1,15 +1,15 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 } as Meta;
@@ -29,10 +29,12 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = (args, { globals: { locale } }) => {
-  const caption = getCaptionForLocale(locale);
-  return {
-    template: `<p>${caption}</p>`,
-  };
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return {
+      template: `<p>${caption}</p>`,
+    };
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx b/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx
index 51b639ed1292..57f0fbcff8bf 100644
--- a/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx
+++ b/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -9,29 +9,27 @@ import someData from './data.json';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'MyComponent', 
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
-
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-export const SimpleStory = Template.bind({});
-SimpleStory.args = {
-  data: simpleData,
+export const SimpleStory: Story = {
+  args: {
+    data: simpleData,
+  },
 };
 
-export const ComplexStory = Template.bind({});
-ComplexStory.args = {
-  data: complexData,
+export const ComplexStory: Story = {
+  args: {
+    data: complexData,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-with-env-variables.mdx.mdx b/docs/snippets/angular/my-component-with-env-variables.mdx.mdx
index 1ece7ecd9a8d..a7875e1350aa 100644
--- a/docs/snippets/angular/my-component-with-env-variables.mdx.mdx
+++ b/docs/snippets/angular/my-component-with-env-variables.mdx.mdx
@@ -7,14 +7,14 @@ import { MyComponent } from './my-component.component';
 
 <Meta title="MyComponent" component={MyComponent}/>
 
-export const Template = (args) => ({ props: args });
-
 <Canvas>
   <Story
     name="ExampleStory"
     args={{
       propertyA: process.env.STORYBOOK_DATA_KEY,
-    }}>
-    {Template.bind({})}
+    }}
+    render={(args) => ({
+      props: args,
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-with-env-variables.ts.mdx b/docs/snippets/angular/my-component-with-env-variables.ts.mdx
index 46a610aeab4f..176b55f18b1a 100644
--- a/docs/snippets/angular/my-component-with-env-variables.ts.mdx
+++ b/docs/snippets/angular/my-component-with-env-variables.ts.mdx
@@ -1,25 +1,22 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY
+export const ExampleStory: Story = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/page-story-slots.mdx.mdx b/docs/snippets/angular/page-story-slots.mdx.mdx
index 333bc3bec80f..9989753de595 100644
--- a/docs/snippets/angular/page-story-slots.mdx.mdx
+++ b/docs/snippets/angular/page-story-slots.mdx.mdx
@@ -7,20 +7,17 @@ import { Page } from './page.component';
 
 <Meta title="Page" component={Page} />
 
-export const Template = (args) => ({ 
-  props: args,
-  template:`
-    <storybook-page>
-      <ng-container footer>${args.footer}</ng-container>
-    </storybook-page>
-  `,
-});
-
 <Story
   name="CustomFooter"
   args={{
     footer: 'Built with Storybook',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+    template:`
+      <storybook-page>
+        <ng-container footer>${args.footer}</ng-container>
+      </storybook-page>
+    `,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
index 4a59a2b1b5f7..8bfe40a63d24 100644
--- a/docs/snippets/angular/page-story-slots.ts.mdx
+++ b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -1,30 +1,34 @@
 ```ts
 // Page.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { Page } from './page.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 } as Meta;
 
-
-const Template: Story = (args) => ({
-  props: args,
-  template: `
-    <storybook-page>
-      <ng-container footer>${args.footer}</ng-container>
-    </storybook-page>`,
-});
-
-export const CustomFooter = Template.bind({});
-CustomFooter.args = {
-  footer: 'Built with Storybook',
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const CustomFooter: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <storybook-page>
+        <ng-container footer>${args.footer}</ng-container>
+      </storybook-page>`,
+  }),
+  args: {
+    footer: 'Built with Storybook',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/page-story-with-args-composition.ts.mdx b/docs/snippets/angular/page-story-with-args-composition.ts.mdx
index 6b141cf0a9a7..39732dacb4d8 100644
--- a/docs/snippets/angular/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/angular/page-story-with-args-composition.ts.mdx
@@ -17,9 +17,9 @@ import * as DocumentListStories from './DocumentList.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
   decorators: [
@@ -30,15 +30,11 @@ export default {
   ],
 } as Meta;
 
-
-const Template: Story = (args) => ({
-  props: args,
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  user: PageLayoutStories.PageLayoutSimple.args.user,
-  document: DocumentHeaderStories.DocumentHeaderSimple.args.document,
-  subdocuments: DocumentListStories.DocumentListSimple.args.documents
+export const ExampleWithRole: Story = {
+  args: {
+    user: PageLayoutStories.PageLayoutSimple.args.user,
+    document: DocumentHeaderStories.DocumentHeaderSimple.args.document,
+    subdocuments: DocumentListStories.DocumentListSimple.args.documents,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/page-story.ts.mdx b/docs/snippets/angular/page-story.ts.mdx
index b10dacff8340..271e9fe2ad09 100644
--- a/docs/snippets/angular/page-story.ts.mdx
+++ b/docs/snippets/angular/page-story.ts.mdx
@@ -14,9 +14,9 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
   decorators: [
@@ -27,11 +27,7 @@ export default {
   ],
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
-
-export const LoggedIn = {
+export const LoggedIn: Story = {
   args: {
     ...HeaderStories.LoggedIn.args,
   },
diff --git a/docs/snippets/angular/register-component-with-play-function.mdx.mdx b/docs/snippets/angular/register-component-with-play-function.mdx.mdx
index e157ee1d754f..0908c9a0e704 100644
--- a/docs/snippets/angular/register-component-with-play-function.mdx.mdx
+++ b/docs/snippets/angular/register-component-with-play-function.mdx.mdx
@@ -9,11 +9,15 @@ import { RegistrationForm } from './RegistrationForm.component';
 
 <Meta title="RegistrationForm" component={RegistrationForm} />
 
-export const Template = (args) => ({ props: args });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="FilledForm"
-  play={async () => {
+  play={ async () => {
     const emailInput = screen.getByLabelText('email', {
       selector: 'input',
     });
@@ -29,12 +33,13 @@ export const Template = (args) => ({ props: args });
     await userEvent.type(passwordInput, 'ExamplePassword', {
       delay: 100,
     });
-    
-    // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+
+    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     const Submit = screen.getByRole('button');
 
     await userEvent.click(Submit);
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/register-component-with-play-function.ts.mdx b/docs/snippets/angular/register-component-with-play-function.ts.mdx
index 39f62fd79993..57a13770a312 100644
--- a/docs/snippets/angular/register-component-with-play-function.ts.mdx
+++ b/docs/snippets/angular/register-component-with-play-function.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // RegistrationForm.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -9,37 +9,34 @@ import { RegistrationForm } from './RegistrationForm.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'RegistrationForm',
   component: RegistrationForm,
 } as Meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
+export const FilledForm: Story = {
+  play: async () => {
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
 
-export const FilledForm: Story = Template.bind({});
-FilledForm.play = async () => {
-  const emailInput = screen.getByLabelText('email', {
-    selector: 'input',
-  });
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
 
-  await userEvent.type(emailInput, 'example-email@email.com', {
-    delay: 100,
-  });
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
 
-  const passwordInput = screen.getByLabelText('password', {
-    selector: 'input',
-  });
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = screen.getByRole('button');
 
-  await userEvent.type(passwordInput, 'ExamplePassword', {
-    delay: 100,
-  });
-  // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const Submit = screen.getByRole('button');
-
-  await userEvent.click(Submit);
+    await userEvent.click(submitButton);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx b/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx
index 3e1845ee0ffb..da3cb7c98323 100644
--- a/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx
+++ b/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx
@@ -9,7 +9,11 @@ import { MyComponent } from './MyComponent.component';
   title="Disable a11y addon" 
   component={MyComponent} />
 
-export const Template = () => ({});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="NonA11yStory"
@@ -18,7 +22,9 @@ export const Template = () => ({});
       // This option disables all a11y checks on this story
       disable: true,
     },
-  }}>
-  {Template.bind({})}
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx
index 7b3aec3f59d2..403b182f6ed4 100644
--- a/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx
+++ b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx
@@ -1,26 +1,25 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Disable a11y addon',
   component: MyComponent,
 } as Meta;
 
-const Template: Story = () => ({});
-
-export const NonA11yStory = Template.bind({});
-NonA11yStory.parameters = {
-  a11y: {
-    // This option disables all a11y checks on this story
-    disable: true,
+export const NonA11yStory: Story = {
+  parameters: {
+    a11y: {
+      // This option disables all a11y checks on this story
+      disabled: true,
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx
index 4b39ad459c52..87e00b06da36 100644
--- a/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx
+++ b/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx
@@ -9,7 +9,11 @@ import { MyComponent } from './MyComponent.component';
   title="Configure a11y addon" 
   component={MyComponent} />
 
-export const Template = () => ({});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleStory"
@@ -33,7 +37,8 @@ export const Template = () => ({});
       options: {},
       manual: true,
     },
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
index 9b434d8a6506..e6e38f49c1dc 100644
--- a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
+++ b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
@@ -1,41 +1,40 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Configure a11y addon',
   component: MyComponent,
 } as Meta;
 
-const Template: Story = () => ({});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.parameters = {
-  a11y: {
-    element: '#root',
-    config: {
-      rules: [
-        {
-          // The autocomplete rule will not run based on the CSS selector provided
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // Setting the enabled option to false will disable checks for this particular rule on all stories.
-          id: 'image-alt',
-          enabled: false,
-        },
-      ],
+export const ExampleStory: Story = {
+  parameters: {
+    a11y: {
+      element: '#root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
     },
-    options: {},
-    manual: true,
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx b/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx
index 51fccdf7d9fa..4ade6743a4c0 100644
--- a/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx
+++ b/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx
@@ -7,20 +7,11 @@ import { Table } from './Table.component';
 
 <Meta title="Custom Table" component={Table} />
 
-export const TableStory = (args) => ({
-  props: args,
-  template: `
-    <table>
-      <tbody>
-        <tr *ngFor="let row of data; let i=index">
-          <td *ngFor="let col of row; let j=index">
-            {{data[i][j]}}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    `,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="Numeric"
@@ -30,7 +21,19 @@ export const TableStory = (args) => ({
       [4, 5, 6],
     ],
     size: 'large',
-  }}>
-  {TableStory.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    props: args,
+    template: `
+      <table>
+        <tbody>
+          <tr *ngFor="let row of data; let i=index">
+            <td *ngFor="let col of row; let j=index">
+              {{data[i][j]}}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
index 17982a224f13..af5932ac3143 100644
--- a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
+++ b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
@@ -1,42 +1,46 @@
 ```ts
 // Table.stories.ts
 
-import { Meta, Story } from '@storybook/angular',
+import type { Meta, StoryObj } from '@storybook/angular',
 
 import { Table } from './Table.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Custom Table',
   component: Table,
 } as Meta;
 
-const TableStory: Story = (args) => ({
-  props: args,
-  template: `
-    <table>
-      <tbody>
-        <tr *ngFor="let row of data; let i=index">
-          <td *ngFor="let col of row; let j=index">
-            {{data[i][j]}}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Numeric: StoryObj<Table> = {
+  render:(args)=>({
+    props: args,
+    template: `
+      <table>
+        <tbody>
+          <tr *ngFor="let row of data; let i=index">
+            <td *ngFor="let col of row; let j=index">
+              {{data[i][j]}}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     `,
-});
-
-export const Numeric = TableStory.bind({});
-Numeric.args = {
-  //👇 This arg is for the story component
-  data: [
-    [1, 2, 3],
-    [4, 5, 6],
-  ],
-  //👇 The remaining args get passed to the `Table` component
-  size: 'large',
+  }),
+  args:{
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/your-component-with-decorator.ts.mdx b/docs/snippets/angular/your-component-with-decorator.ts.mdx
index 927536968cb5..5a99d33d6f15 100644
--- a/docs/snippets/angular/your-component-with-decorator.ts.mdx
+++ b/docs/snippets/angular/your-component-with-decorator.ts.mdx
@@ -7,9 +7,9 @@ import { YourComponent } from './your.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
diff --git a/docs/snippets/angular/your-component.mdx.mdx b/docs/snippets/angular/your-component.mdx.mdx
index 8c2bd62e6f2a..4362e2f6a862 100644
--- a/docs/snippets/angular/your-component.mdx.mdx
+++ b/docs/snippets/angular/your-component.mdx.mdx
@@ -8,13 +8,13 @@ import { YourComponent } from './your.component';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!--👇 We create a “template” of how args map to rendering --> 
-export const Template = (args) => ({ props: args });
++
 
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}>
-  {Template.bind({})}
-</Story>
+  args={{}}
+  render={(args) => ({
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/your-component.ts.mdx b/docs/snippets/angular/your-component.ts.mdx
index e33f39347f74..6b772dde7937 100644
--- a/docs/snippets/angular/your-component.ts.mdx
+++ b/docs/snippets/angular/your-component.ts.mdx
@@ -1,28 +1,23 @@
 ```ts
 // YourComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
-
+import type { Meta, Story } from '@storybook/angular';
 
 import { YourComponent } from './your.component';
 
 //👇 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/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
 } as Meta;
 
-//👇 We create a “template” of how args map to rendering
-const Template: Story = (args) => ({
-  props:args,
-});
-
-export const FirstStory = Template.bind({});
-FirstStory.args= {
- //👇 The args you need here will depend on your component
+export const FirstStory: Story = {
+  args: {
+    //👇 The args you need here will depend on your component
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/badge-story-custom-argtypes.js.mdx b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
index 1a4d2a33ec0a..7fc6076d0d3c 100644
--- a/docs/snippets/common/badge-story-custom-argtypes.js.mdx
+++ b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
@@ -1,13 +1,13 @@
 ```js
 // Badge.stories.js|jsx|ts|tsx
 
-import { Badge } from './Badge';
+import { Badge } from './Badge';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Badge',
   component: Badge,
   argTypes: {
diff --git a/docs/snippets/common/button-group-story-subcomponents.js.mdx b/docs/snippets/common/button-group-story-subcomponents.js.mdx
index 98111438fa22..94e8780fcbce 100644
--- a/docs/snippets/common/button-group-story-subcomponents.js.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.js.mdx
@@ -5,9 +5,9 @@ import { Button, ButtonGroup } from './ButtonGroup';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
   subcomponents: { Button },
diff --git a/docs/snippets/common/button-group-story-subcomponents.ts.mdx b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
index 1b5a6f33bc13..8e5804663e16 100644
--- a/docs/snippets/common/button-group-story-subcomponents.ts.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
@@ -7,9 +7,9 @@ import { Button, ButtonGroup } from './ButtonGroup';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
   subcomponents: { Button },
diff --git a/docs/snippets/common/button-story-action-event-handle.js.mdx b/docs/snippets/common/button-story-action-event-handle.js.mdx
index 831cd407bcf0..33200075d935 100644
--- a/docs/snippets/common/button-story-action-event-handle.js.mdx
+++ b/docs/snippets/common/button-story-action-event-handle.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   parameters: {
diff --git a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
index f082f781cb87..f88021cad8db 100644
--- a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
diff --git a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
index 216e23a47816..9f9a4ccbfd9f 100644
--- a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
diff --git a/docs/snippets/common/button-story-controls-primary-variant.js.mdx b/docs/snippets/common/button-story-controls-primary-variant.js.mdx
index 4fd71c6e3a0a..c5a03c5a073c 100644
--- a/docs/snippets/common/button-story-controls-primary-variant.js.mdx
+++ b/docs/snippets/common/button-story-controls-primary-variant.js.mdx
@@ -5,22 +5,13 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  variant: 'primary',
-};
-
 export const Primary = {
   args: {
     variant: 'primary',
diff --git a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx b/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx
index bf07a883f857..b062be004420 100644
--- a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx
+++ b/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx
@@ -7,15 +7,11 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) => ({
-   //👇 Your template goes here
-});
-
 <Story 
   name="Primary"
   args={{ 
     variant: 'primary',
-  }}>
-  {Template.bind({})}
+  }}
+  render={() => ({ // Your implementation here })} />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-controls-radio-group.js.mdx b/docs/snippets/common/button-story-controls-radio-group.js.mdx
index f6dbb4bd85c7..b719fb3fddd6 100644
--- a/docs/snippets/common/button-story-controls-radio-group.js.mdx
+++ b/docs/snippets/common/button-story-controls-radio-group.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
diff --git a/docs/snippets/common/button-story-default-export.js.mdx b/docs/snippets/common/button-story-default-export.js.mdx
index a7a5098295c9..db83125c508e 100644
--- a/docs/snippets/common/button-story-default-export.js.mdx
+++ b/docs/snippets/common/button-story-default-export.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
diff --git a/docs/snippets/common/button-story-disable-addon.js.mdx b/docs/snippets/common/button-story-disable-addon.js.mdx
index 30655cd5be7b..db10fb915189 100644
--- a/docs/snippets/common/button-story-disable-addon.js.mdx
+++ b/docs/snippets/common/button-story-disable-addon.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   parameters: {
diff --git a/docs/snippets/common/button-story-disable-docspage-component.js.mdx b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
index f6da64894f03..c69e2b667993 100644
--- a/docs/snippets/common/button-story-disable-docspage-component.js.mdx
+++ b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
diff --git a/docs/snippets/common/button-story-docs-code-type.js.mdx b/docs/snippets/common/button-story-docs-code-type.js.mdx
index 9fe963c74b40..0cb0e70bcf58 100644
--- a/docs/snippets/common/button-story-docs-code-type.js.mdx
+++ b/docs/snippets/common/button-story-docs-code-type.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
diff --git a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
index 49b77125e0ee..176e5513a3b1 100644
--- a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
@@ -7,9 +7,9 @@ import { CustomDocumentationComponent } from './CustomDocumentationComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
diff --git a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
index ce8fad9d9645..6b6c426060b9 100644
--- a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
@@ -7,9 +7,9 @@ import CustomMDXDocumentation from './Custom-MDX-Documentation.mdx';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
@@ -22,27 +22,27 @@ export default {
   },
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  backgroundColor: 'primary',
+export const Primary = {
+  args:{
+    backgroundColor: 'primary',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  backgroundColor: 'secondary',
+export const Secondary = {
+  args:{
+     backgroundColor: 'secondary',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
+export const Large =  = {
+  args:{
+    size:'large',
+  }
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
+export const Small = {
+  args:{
+    size:'small',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-grouped.js.mdx b/docs/snippets/common/button-story-grouped.js.mdx
index 9028a5814afe..2571067d4208 100644
--- a/docs/snippets/common/button-story-grouped.js.mdx
+++ b/docs/snippets/common/button-story-grouped.js.mdx
@@ -4,10 +4,10 @@
 import { Button } from './Button';
 
 export default {
-   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Design System/Atoms/Button',
   component: Button,
 };
diff --git a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
index c58e8ebc6eb7..c416375d03dd 100644
--- a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
+++ b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
@@ -5,19 +5,16 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-export const Large = Template.bind({});
-Large.parameters = {
-  controls: { hideNoControlsWarning: true },
+export const Large = {
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-hoisted.js.mdx b/docs/snippets/common/button-story-hoisted.js.mdx
index 6ad1284bba47..87334b5f994c 100644
--- a/docs/snippets/common/button-story-hoisted.js.mdx
+++ b/docs/snippets/common/button-story-hoisted.js.mdx
@@ -5,15 +5,13 @@ import { Button as ButtonComponent } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#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 = (args) =>({
-  //👇  Your story implementation goes here
-});
+export const Button = { };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-hypothetical-example.js.mdx b/docs/snippets/common/button-story-hypothetical-example.js.mdx
index bfeefd6567b5..bb610f4187d8 100644
--- a/docs/snippets/common/button-story-hypothetical-example.js.mdx
+++ b/docs/snippets/common/button-story-hypothetical-example.js.mdx
@@ -5,17 +5,24 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Sample = () => ({
-  template: '<button :label=label />',
-  data: {
-    label: 'hello button',
-  },
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Sample = {
+  render: () => ({
+    template: '<button :label=label />',
+    data: {
+      label: 'hello button',
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-matching-argtypes.js.mdx b/docs/snippets/common/button-story-matching-argtypes.js.mdx
index 04a60ef3b388..044a4fc50b72 100644
--- a/docs/snippets/common/button-story-matching-argtypes.js.mdx
+++ b/docs/snippets/common/button-story-matching-argtypes.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   parameters: { actions: { argTypesRegex: '^on.*' } },
diff --git a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
index 689cbbafd976..6c1864a6f3d6 100644
--- a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
+++ b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: { onClick: { action: 'clicked' } },
diff --git a/docs/snippets/common/button-story-primary-composition.js.mdx b/docs/snippets/common/button-story-primary-composition.js.mdx
index facbef12d8ab..a8b5afedbbbb 100644
--- a/docs/snippets/common/button-story-primary-composition.js.mdx
+++ b/docs/snippets/common/button-story-primary-composition.js.mdx
@@ -5,26 +5,24 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => ({
-  // 👈 Your template goes here
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  ...Primary.args,
-  primary: false,
+const Secondary = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-primary-long-name.js.mdx b/docs/snippets/common/button-story-primary-long-name.js.mdx
index b3ad79bb5cae..86ebca0d6add 100644
--- a/docs/snippets/common/button-story-primary-long-name.js.mdx
+++ b/docs/snippets/common/button-story-primary-long-name.js.mdx
@@ -5,21 +5,24 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = () => ({
-  //👇 Your template goes here
-})
-
-export const PrimaryLongName = Template.bind({});
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
 
-PrimaryLongName.args = {
-  ...Primary.args,
-  label: 'Primary with a really long name',
+export const PrimaryLongName = {
+  args: {
+    ...Primary.args,
+    label: 'Primary with a really long name',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-remix-docspage.js.mdx b/docs/snippets/common/button-story-remix-docspage.js.mdx
index a53e2440c1c2..7c405f21e8e7 100644
--- a/docs/snippets/common/button-story-remix-docspage.js.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.js.mdx
@@ -17,9 +17,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   parameters: {
diff --git a/docs/snippets/common/button-story-remix-docspage.ts.mdx b/docs/snippets/common/button-story-remix-docspage.ts.mdx
index 8ba8b9b1cb30..9b61f97b636f 100644
--- a/docs/snippets/common/button-story-remix-docspage.ts.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.ts.mdx
@@ -19,9 +19,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   parameters: {
diff --git a/docs/snippets/common/button-story-with-parameters.js.mdx b/docs/snippets/common/button-story-with-parameters.js.mdx
index de0279de551d..d1d435b20aa6 100644
--- a/docs/snippets/common/button-story-with-parameters.js.mdx
+++ b/docs/snippets/common/button-story-with-parameters.js.mdx
@@ -5,24 +5,25 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
-}
+};
 
-export const Primary = Template.bind({});
-Primary.args ={
-  primary: true,
-  label: 'Button',
-}
-Primary.parameters = { 
-  backgrounds:{
-    values: [
-      { name: 'red', value: '#f00', },
-      { name: 'green', value: '#0f0', },
-    ],
-  }
+export const Primary = {
+  args: {
+     primary: true,
+     label: 'Button',
+  },
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+      ],
+    },
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/checkbox-story-csf.js.mdx b/docs/snippets/common/checkbox-story-csf.js.mdx
index d22e4c4fbb23..3a1a8300568f 100644
--- a/docs/snippets/common/checkbox-story-csf.js.mdx
+++ b/docs/snippets/common/checkbox-story-csf.js.mdx
@@ -5,20 +5,16 @@ import { Checkbox } from './Checkbox';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Checkbox',
   component: Checkbox,
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-
-export const Unchecked = Template.bind({});
-Unchecked.args = {
-  label: 'Unchecked',
+export const Unchecked = {
+  args: {
+    label: 'Unchecked',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/checkbox-story-grouped.js.mdx b/docs/snippets/common/checkbox-story-grouped.js.mdx
index 2986b2438ac3..bd35fb350352 100644
--- a/docs/snippets/common/checkbox-story-grouped.js.mdx
+++ b/docs/snippets/common/checkbox-story-grouped.js.mdx
@@ -5,9 +5,9 @@ import { CheckBox } from './Checkbox';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Design System/Atoms/Checkbox',
   component: CheckBox,
 };
diff --git a/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx b/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
index 58ecafb7128c..40274a134b4c 100644
--- a/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
+++ b/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
@@ -1,11 +1,17 @@
 ```js
 // Button.stories.js
+
 import { Button } from './Button';
+
 export default {
-  component: Button,
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
+  component: Button,
   argTypes: {
-    // button can be passed a label or an image, not both
+    // Button can be passed a label or an image, not both
     label: {
       control: 'text',
       if: { arg: 'image', truthy: false },
diff --git a/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
index 2eba20f71e3e..0497511aef04 100644
--- a/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
+++ b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
@@ -1,13 +1,19 @@
 ```js
 // Button.stories.js
+
 import { Button } from './Button';
+
 export default {
-  component: Button,
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
+  component: Button,
   argTypes: {
     label: { control: 'text' }, // always shows
     advanced: { control: 'boolean' },
-    // below are only included when advanced is true
+    // Below are only included when advanced is true
     margin: { control: 'number', if: { arg: 'advanced' } },
     padding: { control: 'number', if: { arg: 'advanced' } },
     cornerRadius: { control: 'number', if: { arg: 'advanced' } },
diff --git a/docs/snippets/common/component-story-configuration-custom.js.mdx b/docs/snippets/common/component-story-configuration-custom.js.mdx
index 7aa782a847ce..845e80f3cf3d 100644
--- a/docs/snippets/common/component-story-configuration-custom.js.mdx
+++ b/docs/snippets/common/component-story-configuration-custom.js.mdx
@@ -1,5 +1,6 @@
 ```js
 // ./storybook/main.js
+
 module.exports = {
   stories: [
    { directory: '../src', files: '*.story.tsx', titlePrefix: 'Foo' }
diff --git a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
index bfde24ebe722..095287966ccf 100644
--- a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
+++ b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
diff --git a/docs/snippets/common/component-story-csf-description.js.mdx b/docs/snippets/common/component-story-csf-description.js.mdx
index 0e2619214d1c..10554897e83b 100644
--- a/docs/snippets/common/component-story-csf-description.js.mdx
+++ b/docs/snippets/common/component-story-csf-description.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   parameters: {
@@ -19,15 +19,12 @@ export default {
   },
 };
 
-const Template = (args) => ({
- //👇  Your template goes here
-});
-
-export const WithStoryDescription = Template.bind({});
-WithStoryDescription.parameters = {
-  docs: {
-    description: {
-      story: 'Some story **markdown**',
+export const WithStoryDescription = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Some story **markdown**',
+      },
     },
   },
 };
diff --git a/docs/snippets/common/component-story-custom-args-mapping.js.mdx b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
index 0c60f3d46733..a7b4e965fead 100644
--- a/docs/snippets/common/component-story-custom-args-mapping.js.mdx
+++ b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
@@ -8,9 +8,9 @@ const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
diff --git a/docs/snippets/common/component-story-custom-params.js.mdx b/docs/snippets/common/component-story-custom-params.js.mdx
index 4972a1f89be4..4ab4271cf478 100644
--- a/docs/snippets/common/component-story-custom-params.js.mdx
+++ b/docs/snippets/common/component-story-custom-params.js.mdx
@@ -5,29 +5,26 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => ({
-  // 👈 Your template goes here
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-Primary.parameters = {
-  backgrounds: {
-    values: [
-      { name: 'red', value: '#f00' },
-      { name: 'green', value: '#0f0' },
-      { name: 'blue', value: '#00f' },
-    ],
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-custom-params.mdx.mdx b/docs/snippets/common/component-story-custom-params.mdx.mdx
index 691256987b81..1b7a228b6aba 100644
--- a/docs/snippets/common/component-story-custom-params.mdx.mdx
+++ b/docs/snippets/common/component-story-custom-params.mdx.mdx
@@ -7,10 +7,6 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) =>({
-  // 👈 Your template goes here
-});
-
 <Story
   name="Primary"
   parameters={{
@@ -25,7 +21,6 @@ export const Template = (args) =>({
   args={{
     primary: true,
     label: 'Button',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({ // Your implementation here })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-custom-source.js.mdx b/docs/snippets/common/component-story-custom-source.js.mdx
index a1bc4291717c..2a5d0fe2a1f8 100644
--- a/docs/snippets/common/component-story-custom-source.js.mdx
+++ b/docs/snippets/common/component-story-custom-source.js.mdx
@@ -5,24 +5,21 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-export const CustomSource = Template.bind({});
-CustomSource.parameters = {
-  docs: {
-    source: {
-      code: 'Your code snippet goes here.',
-      language: "yml",
-      type: "auto",
+export const CustomSource = {
+  parameters: {
+    docs: {
+      source: {
+        code: 'Your code snippet goes here.',
+        language: 'yml',
+        type: 'auto',
+      },
     },
   },
 };
diff --git a/docs/snippets/common/component-story-disable-controls-alt.js.mdx b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
index 9a42a63bffa7..82443cb91cc7 100644
--- a/docs/snippets/common/component-story-disable-controls-alt.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
@@ -5,9 +5,9 @@ import { YourComponent } from './YourComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   argTypes: {
diff --git a/docs/snippets/common/component-story-disable-controls-regex.js.mdx b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
index 2a1da86d0407..cfb407c3397b 100644
--- a/docs/snippets/common/component-story-disable-controls-regex.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
@@ -5,27 +5,34 @@ import { YourComponent } from './YourComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-
-ArrayInclude = Template.bind({})
-ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } };
+export const ArrayInclude = {
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+};
 
-RegexInclude = Template.bind({})
-RegexInclude.parameters = { controls: { include: /^hello*/ } };
+export const RegexInclude = {
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+};
 
-ArrayExclude = Template.bind({})
-ArrayExclude.parameters = { controls: { exclude: ['foo', 'bar'] } };
+export const ArrayExclude = {
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+};
 
-RegexExclude = Template.bind({})
-RegexExclude.parameters = { controls: { exclude: /^hello*/ } };
+export const RegexExclude = {
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx b/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx
index 5126941ad070..33427bb1c1f0 100644
--- a/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx
+++ b/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx
@@ -7,19 +7,14 @@ import { YourComponent } from './YourComponent';
 
 <Meta title="YourComponent" component={YourComponent} />
 
-export const Template = (args) => ({
-  //👇 Your template goes here
-});
-
 <Story 
   name="Array Include"
   parameters={{ 
     controls: { 
       include: ['foo', 'bar'] 
     } 
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({ // Your implementation here })} />
 
 <Story 
   name="Regex Include"
@@ -27,9 +22,8 @@ export const Template = (args) => ({
     controls: { include: 
       /^hello*/ 
     } 
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({ // Your implementation here })} />
 
 <Story 
   name="Array Exclude"
@@ -37,9 +31,8 @@ export const Template = (args) => ({
     controls: { 
       exclude: ['foo', 'bar'] 
     } 
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({ // Your implementation here })} />
 
 <Story 
   name="Regex Exclude"
@@ -47,7 +40,6 @@ export const Template = (args) => ({
     controls: { 
       exclude: /^hello*/ 
     } 
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({ // Your implementation here })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-disable-controls.js.mdx b/docs/snippets/common/component-story-disable-controls.js.mdx
index b1a054880605..7a23bd51982c 100644
--- a/docs/snippets/common/component-story-disable-controls.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls.js.mdx
@@ -5,7 +5,7 @@ import { YourComponent } from './YourComponent';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/common/component-story-mdx-argstable-block-for-story.with-story.mdx.mdx b/docs/snippets/common/component-story-mdx-argstable-block-for-story.with-story.mdx.mdx
index c94fd5a18a11..34842e5df7e6 100644
--- a/docs/snippets/common/component-story-mdx-argstable-block-for-story.with-story.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-argstable-block-for-story.with-story.mdx.mdx
@@ -7,16 +7,11 @@ import { MyComponent } from './MyComponent';
 
 <Meta title="MyComponent" component={MyComponent} />
 
-export const Template = (args) => ({
-  //👇 Your template goes here
-});
-
 # My Component!
 
 <Story 
-  name="My Story" >
-  {Template.bind({})}
-</Story>
+  name="My Story"
+  render={() => ({ // Your implementation here })} />
 
 <ArgsTable story="My Story" />
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx b/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
index fb7f3f44598e..1a426a2d4f54 100644
--- a/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
@@ -12,7 +12,5 @@ import { MyComponent } from './MyComponent';
   component={MyComponent}
 />
 
-<Story name="story" decorators={[ ... ]} parameters={{ ... }} >
-...
-</Story>
+<Story name="story" decorators={[ ... ]} parameters={{ ... }} render={() => ({ // Your implementation here })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-sort-controls.js.mdx b/docs/snippets/common/component-story-sort-controls.js.mdx
index 838bcf8760e6..c6b9e7112829 100644
--- a/docs/snippets/common/component-story-sort-controls.js.mdx
+++ b/docs/snippets/common/component-story-sort-controls.js.mdx
@@ -5,9 +5,9 @@ import { YourComponent } from './your-component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   parameters: { controls: { sort: 'requiredFirst' } },
diff --git a/docs/snippets/common/custom-docs-page.mdx.mdx b/docs/snippets/common/custom-docs-page.mdx.mdx
index 1d5edbc864ec..ce61135ca145 100644
--- a/docs/snippets/common/custom-docs-page.mdx.mdx
+++ b/docs/snippets/common/custom-docs-page.mdx.mdx
@@ -3,7 +3,7 @@
 
 # Replacing DocsPage with custom `MDX` content
 
-This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage).
+This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/7.0/react/writing-docs/docs-page#replacing-docspage).
 
 It can be further expanded with your own code snippets and include specific information related to your stories.
 
diff --git a/docs/snippets/common/foo-bar-baz-story.js.mdx b/docs/snippets/common/foo-bar-baz-story.js.mdx
index 1675fa11f94e..811ea86b28e2 100644
--- a/docs/snippets/common/foo-bar-baz-story.js.mdx
+++ b/docs/snippets/common/foo-bar-baz-story.js.mdx
@@ -5,16 +5,12 @@ import { Foo } from './Foo';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Foo/Bar',
   component: Foo,
 };
 
-const BarStory = () => ({
-  //👇 Your template goes here
-});
-
-export const Baz = BarStory.bind({})
+export const Baz = {};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
index bf521438d404..6e24af789656 100644
--- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx
+++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
@@ -5,7 +5,7 @@ import { Gizmo } from './Gizmo';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Gizmo',
diff --git a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
index 55543dd93639..39824ef0dbd2 100644
--- a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
+++ b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
@@ -66,6 +66,6 @@ import { Gizmo } from './Gizmo';
     revisionDate: {
       control: 'date',
     },
-}}
+  }}
 />
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/login-form-with-play-function.js.mdx b/docs/snippets/common/login-form-with-play-function.js.mdx
index 012e1b753b40..b9f021254d37 100644
--- a/docs/snippets/common/login-form-with-play-function.js.mdx
+++ b/docs/snippets/common/login-form-with-play-function.js.mdx
@@ -1,17 +1,22 @@
 ```js
-// LoginForm.stories.jsx | LoginForm.stories.js | LoginForm.stories.ts | LoginForm.stories.tsx
+// LoginForm.stories.jsx|js|ts|tsx
 
 import { userEvent, within } from '@storybook/testing-library';
 
 import { LoginForm } from './LoginForm';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Foo/Bar',
   component: LoginForm,
 };
 
 export const Example = {
   play: async ({ canvasElement }) => {
-    // Queries the DOM and looks for the root element of the component and assigns it for a performance boost
+    // Starts querying the component from its root element
     const canvas = within(canvasElement);
     
     await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
@@ -20,7 +25,8 @@ export const Example = {
     await userEvent.type(canvas.getByTestId('password'), 'a-random-password'{
       delay: 100,
     });
-    // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(canvas.getByRole('button'));
   },
 };
diff --git a/docs/snippets/common/login-form-with-play-function.mdx.mdx b/docs/snippets/common/login-form-with-play-function.mdx.mdx
index 9fe6b72619d6..490cc94d5ecd 100644
--- a/docs/snippets/common/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/common/login-form-with-play-function.mdx.mdx
@@ -14,6 +14,7 @@ import { LoginForm } from './LoginForm';
 <Story 
   name="Example"
   play={async ({ canvasElement }) => {
+    // Starts querying the component from its root element
     const canvas = within(canvasElement);
     
     await userEvent.type(screen.getByTestId('email'), 'emailaddress@provider.com', {
diff --git a/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx b/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
index 04280b5136d7..dbd2297f3da2 100644
--- a/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
+++ b/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
@@ -5,14 +5,6 @@ import { Canvas, Meta } from '@storybook/addon-docs';
 
 import { ExampleComponent} from './ExampleComponent';
 
-export const Template = (args) => (
-  /*
-  *  Your template implementation goes here.
-  * Read more about Storybook templates at:
-  * https://storybook.js.org/docs/react/get-started/whats-a-story
-  */
-);
-
 <Meta title="SampleComponent" component={ ExampleComponent } />
 
 <Canvas columns={2}  withSource="open" withToolbar>
diff --git a/docs/snippets/common/mdx-changelog-stories.mdx.mdx b/docs/snippets/common/mdx-changelog-stories.mdx.mdx
index 502faa40e3a2..bc0aeb2980a7 100644
--- a/docs/snippets/common/mdx-changelog-stories.mdx.mdx
+++ b/docs/snippets/common/mdx-changelog-stories.mdx.mdx
@@ -2,9 +2,9 @@
 
 <!-- Changelog.stories.mdx -->
 
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from '@storybook/addon-docs';
 
-import Changelog from "../CHANGELOG.md";
+import Changelog from '../CHANGELOG.md';
 
 <Meta title="Changelog" />
 
diff --git a/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx b/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
index 16c223db6e54..d12876fa0f1f 100644
--- a/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
+++ b/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
@@ -5,7 +5,7 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'MyComponent',
diff --git a/docs/snippets/common/my-component-env-var-config.js.mdx b/docs/snippets/common/my-component-env-var-config.js.mdx
index fc83a32f3b6b..8e8614f7ee42 100644
--- a/docs/snippets/common/my-component-env-var-config.js.mdx
+++ b/docs/snippets/common/my-component-env-var-config.js.mdx
@@ -5,19 +5,16 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  exampleProp: process.env.EXAMPLE_VAR,
+export const Default = {
+  args: {
+    exampleProp: process.env.EXAMPLE_VAR,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-env-var-config.mdx.mdx b/docs/snippets/common/my-component-env-var-config.mdx.mdx
index beaf32a5d824..1f804a46f442 100644
--- a/docs/snippets/common/my-component-env-var-config.mdx.mdx
+++ b/docs/snippets/common/my-component-env-var-config.mdx.mdx
@@ -7,17 +7,11 @@ import { MyComponent } from './MyComponent';
 
 <Meta title="MyComponent" component={MyComponent}/>
 
-export const Template = (args) => ({
-  //👇 Your template goes here
-});
-
 <Canvas>
   <Story
     name="ExampleStory"
     args={{
       exampleProp: process.env.EXAMPLE_VAR,
-    }}>
-    {Template.bind({})}
-  </Story>
+    }} render={() => ({ // Your implementation here })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-story-mandatory-export.js.mdx b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
index e242cb17b315..69fde256ca71 100644
--- a/docs/snippets/common/my-component-story-mandatory-export.js.mdx
+++ b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
@@ -5,7 +5,7 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Path/To/MyComponent',
diff --git a/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx b/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
index 7bd6a19fd386..0ef22aa5cc39 100644
--- a/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
+++ b/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
@@ -4,6 +4,7 @@
 import { Meta, Story } from '@storybook/addon-docs';
 
 import { MyComponent } from './MyComponent';
+
 <Meta
   title="MyComponent"
   decorators={[ ... ]}
diff --git a/docs/snippets/common/my-component-story-with-storyname.js.mdx b/docs/snippets/common/my-component-story-with-storyname.js.mdx
index e33e149078f9..0990d86c7b46 100644
--- a/docs/snippets/common/my-component-story-with-storyname.js.mdx
+++ b/docs/snippets/common/my-component-story-with-storyname.js.mdx
@@ -5,17 +5,16 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
-  title: 'Path/To/MyComponent', 
+  title: 'Path/To/MyComponent',
   component: MyComponent,
 };
 
-export const Simple = () => ({
-  //👇 Your story goes here
-});
-Simple.decorators = [ ... ];
-Simple.parameters = { ... };
-Simple.storyName = 'So simple!';
+export const Simple = {
+  decorators: [...],
+  name: 'So simple!',
+  parameters: {...},
+}
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-story.js.mdx b/docs/snippets/common/my-component-story.js.mdx
index b1f5f156f33e..495ecf8fd5dd 100644
--- a/docs/snippets/common/my-component-story.js.mdx
+++ b/docs/snippets/common/my-component-story.js.mdx
@@ -5,7 +5,7 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'MyComponent',
diff --git a/docs/snippets/common/other-foo-bar-story.js.mdx b/docs/snippets/common/other-foo-bar-story.js.mdx
index b808f1c6bc4b..8c1ab5d0a91f 100644
--- a/docs/snippets/common/other-foo-bar-story.js.mdx
+++ b/docs/snippets/common/other-foo-bar-story.js.mdx
@@ -5,18 +5,15 @@ import { Foo } from './Foo';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'OtherFoo/Bar',
   component: Foo,
   id: 'Foo/Bar', // Or 'foo-bar' if you prefer
 };
 
-const BarStory = () => ({
-  //👇 Your template goes here
-});
-
-export const Baz = () => BarStory.bind({});
-Baz.storyName = 'Moo';
+export const Baz = {
+  name: 'Moo',
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx b/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx
index 9ba337a7df3d..a6c58919fb8b 100644
--- a/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx
+++ b/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx
@@ -5,7 +5,7 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading 
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading 
   * to learn how to generate automatic titles
   */
   title: 'Configure a11y addon',
diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
index da6f7007333f..c12d5f5dcdf5 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
@@ -6,7 +6,7 @@ import { Button } from './Button';
 // To apply a set of backgrounds to all stories of Button:
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
index 9df0a569faec..f73809546841 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
@@ -6,7 +6,7 @@ import { Button } from './Button';
 // To apply a grid to all stories of Button:
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
index ecd999944876..8da6e0bacc6a 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
@@ -5,19 +5,16 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-export const Large = Template.bind({});
-Large.parameters = {
-  backgrounds: { disable: true },
+export const Large = {
+  parameters: {
+    backgrounds: { disable: true },
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx
index bdf3311e5052..6a5aec8b66b5 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx
@@ -7,10 +7,6 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) => ({
-   //👇 Your template goes here
-});
-
 
 <Story
   name="Large"
@@ -18,7 +14,6 @@ export const Template = (args) => ({
     backgrounds: {
       disable: true,
     },
-  }}>
-  {Template.bind({})}
-</Story>
+  }} 
+  render={() => ({ // Your implementation here })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
index ddd1f94da7ca..07e926ee453f 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
@@ -5,23 +5,20 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-export const Large = Template.bind({});
-Large.parameters = {
-  backgrounds: {
-    grid: {
-      disable: true,
-    }
-  }
+export const Large = {
+  parameters: {
+    backgrounds: {
+      grid: {
+        disable: true,
+      },
+    },
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.mdx.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.mdx.mdx
index f39b32039904..7507a4871a09 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.mdx.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.mdx.mdx
@@ -7,9 +7,6 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) => ({
-   //👇 Your template goes here
-});
 
 <Story
   name="Large"
@@ -19,7 +16,6 @@ export const Template = (args) => ({
         disable: true,
       }
     }
-  }} >
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({ // Your implementation here })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
index 80f9c094ae65..4b9c5308d0e1 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
@@ -5,19 +5,16 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => ({
-  //👇 Your template goes here
-});
-
-export const Large = Template.bind({});
-Large.parameters = {
-  backgrounds: { default: 'facebook' },
+export const Large = {
+  parameters: {
+    backgrounds: { default: 'facebook' },
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx
index 0b49c369c4d8..ff48fa016ed2 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx
@@ -7,17 +7,12 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) => ({
-   //👇 Your template goes here
-});
-
 <Story
   name="Large"
   parameters={{
     backgrounds: {
       default: 'facebook',
     },
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({ // Your implementation here })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-component-layout-param.js.mdx b/docs/snippets/common/storybook-component-layout-param.js.mdx
index 36f905596a64..e5694c4efd29 100644
--- a/docs/snippets/common/storybook-component-layout-param.js.mdx
+++ b/docs/snippets/common/storybook-component-layout-param.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx b/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx
index 26c9d0997b57..1e6d449c1c41 100644
--- a/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx
+++ b/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx
@@ -13,5 +13,4 @@ export const Default = {
     something: 'Something else',
   },
 };
-
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-customize-argtypes.js.mdx b/docs/snippets/common/storybook-customize-argtypes.js.mdx
index ceebba27f518..c07e71c5b8d4 100644
--- a/docs/snippets/common/storybook-customize-argtypes.js.mdx
+++ b/docs/snippets/common/storybook-customize-argtypes.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/common/storybook-interactions-play-function.js.mdx b/docs/snippets/common/storybook-interactions-play-function.js.mdx
index b449defce278..c4751ebd30d9 100644
--- a/docs/snippets/common/storybook-interactions-play-function.js.mdx
+++ b/docs/snippets/common/storybook-interactions-play-function.js.mdx
@@ -1,10 +1,17 @@
 ```js
 // MyForm.stories.js
+
 import { expect } from '@storybook/jest';
+
 import { userEvent, waitFor, within } from '@storybook/testing-library';
-import { MyForm } from './MyForm'
+
+import { MyForm } from './MyForm';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyForm',
   component: MyForm,
   argTypes: {
@@ -12,16 +19,16 @@ export default {
   },
 };
 
-const Template = (args) => <MyForm {...args} />;
+export const Submitted = {
+  play: async () => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
 
-const Submitted = Template.bind({});
-Submitted.play = async ({ args, canvasElement }) => {
-  const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
+    await userEvent.type(canvas.getByTestId('password'), 'supersecret');
+    await userEvent.click(canvas.getByRole('button'));
 
-  await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
-  await userEvent.type(canvas.getByTestId('password'), 'supersecret');
-  await userEvent.click(canvas.getByRole('button'));
-
-  await waitFor(() => expect(args.onSubmit).toHaveBeenCalled());
+    await waitFor(() => expect(args.onSubmit).toHaveBeenCalled());
+  },
 };
 ```
diff --git a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx
index 96b6e0408971..a77a0971869f 100644
--- a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx
+++ b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx
@@ -9,7 +9,7 @@ module.exports = {
     '@storybook/addon-interactions',
   ],
   core: {
-    builder: 'webpack5',
+    builder: '@storybook/builder-webpack5',
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx
index f7933dbf6e67..fdcf53e13289 100644
--- a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx
+++ b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx
@@ -9,7 +9,7 @@ module.exports = {
     '@storybook/addon-interactions',
   ],
   core: {
-    builder: 'webpack5'
+    builder: '@storybook/builder-webpack5',
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-default-setup.js.mdx b/docs/snippets/common/storybook-main-default-setup.js.mdx
index 0e69c590b09c..32fec3c1bf69 100644
--- a/docs/snippets/common/storybook-main-default-setup.js.mdx
+++ b/docs/snippets/common/storybook-main-default-setup.js.mdx
@@ -2,13 +2,17 @@
 // .storybook/main.js
 
 module.exports = {
+  stories: ['../src/**/*.stories.@(js|mdx)'],
   addons: ['@storybook/addon-essentials'],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
   babel: async (options) => ({
     // Update your babel configuration here
     ...options,
   }),
-  framework: '@storybook/react',
-  stories: ['../src/**/*.stories.@(js|mdx)'],
+
   webpackFinal: async (config, { configType }) => {
     // Make whatever fine-grained changes you need
     // Return the altered config
diff --git a/docs/snippets/common/storybook-main-default-setup.ts.mdx b/docs/snippets/common/storybook-main-default-setup.ts.mdx
index 9cad2ee423a4..1466bc63d768 100644
--- a/docs/snippets/common/storybook-main-default-setup.ts.mdx
+++ b/docs/snippets/common/storybook-main-default-setup.ts.mdx
@@ -24,7 +24,7 @@ const config: StorybookConfig = {
   },
   framework: '@storybook/react',
   core: {
-    builder: 'webpack4',
+    builder: '@storybook/builder-webpack4',
   },
   features: {
     postcss: false,
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
index c7786a174244..b61b95d18965 100644
--- a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
@@ -11,7 +11,7 @@ module.exports = {
   ],
   framework: '@storybook/react',
   core: {
-    builder: 'webpack5',
+    builder: '@storybook/builder-webpack5',
     disableTelemetry: true, // 👈 Disables telemetry
   },
 };
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
index 1f707e2d95e7..a3d37125b457 100644
--- a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
@@ -14,7 +14,7 @@ const config: StorybookConfig = {
   ],
   framework: '@storybook/react',
   core: {
-    builder: 'webpack5',
+    builder: '@storybook/builder-webpack5',
     disableTelemetry: true, // 👈 Disables telemetry
   },
 };
diff --git a/docs/snippets/common/storybook-main-webpack5.js.mdx b/docs/snippets/common/storybook-main-webpack5.js.mdx
index 918c5a12cdda..842c45505dd6 100644
--- a/docs/snippets/common/storybook-main-webpack5.js.mdx
+++ b/docs/snippets/common/storybook-main-webpack5.js.mdx
@@ -3,7 +3,7 @@
 
 module.exports = {
   core: {
-    builder: 'webpack5',
+    builder: '@storybook/builder-webpack5',
   },
 };
 ```
diff --git a/docs/snippets/common/storybook-story-layout-param.js.mdx b/docs/snippets/common/storybook-story-layout-param.js.mdx
index 2a43b9666ecc..9510df3b38b8 100644
--- a/docs/snippets/common/storybook-story-layout-param.js.mdx
+++ b/docs/snippets/common/storybook-story-layout-param.js.mdx
@@ -5,19 +5,16 @@ import { Button } from './Button':
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
   component: Button,
 }
 
-const Template = () => ({
- // Your template goes here
-});
-
-export const WithLayout= Template.bind({});
-WithLayout.parameters = {
-  layout: 'centered',
+export const WithLayout = {
+  parameters: {
+    layout: 'centered',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-story-layout-param.mdx.mdx b/docs/snippets/common/storybook-story-layout-param.mdx.mdx
index 7574b2a21904..eafcb3f22cb9 100644
--- a/docs/snippets/common/storybook-story-layout-param.mdx.mdx
+++ b/docs/snippets/common/storybook-story-layout-param.mdx.mdx
@@ -15,7 +15,6 @@ export const Template = () => ({
   name="WithLayout"
   parameters={{
     layout: 'centered',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({ // Your implementation here })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
index c1e3d032880e..aaefbd2f81bc 100644
--- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
@@ -11,7 +11,7 @@ module.exports = {
   ],
   framework: '@storybook/react',
   core: {
-    builder: 'webpack5',
+    builder: '@storybook/builder-webpack5',
     enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
   },
 };
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
index 7ce3bba1a827..4b23ced1cc2c 100644
--- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
@@ -14,7 +14,7 @@ const config: StorybookConfig = {
   ],
   framework: '@storybook/react',
   core: {
-    builder: 'webpack5',
+    builder: '@storybook/builder-webpack5',
     enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
   },
 };
diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
index 22bf4552fe90..ff00bf746dc7 100644
--- a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
@@ -4,7 +4,7 @@
 const { injectAxe, checkA11y } = require('axe-playwright');
 
 /*
-* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+* See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental
 * to learn more about the test-runner hooks API.
 */
 module.exports = {
diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
index aed751c49a9b..d9f9ac2b4b5a 100644
--- a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
+++ b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
@@ -6,7 +6,7 @@ import { injectAxe, checkA11y } from 'axe-playwright';
 import type { TestRunnerConfig } from '@storybook/test-runner';
 
 /*
-* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+* See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental
 * to learn more about the test-runner hooks API.
 */
 const a11yConfig: TestRunnerConfig = {
diff --git a/docs/snippets/common/storybook-ts-config-babelrc.js.mdx b/docs/snippets/common/storybook-ts-config-babelrc.js.mdx
index 2fbafc24bc57..8f69b981507b 100644
--- a/docs/snippets/common/storybook-ts-config-babelrc.js.mdx
+++ b/docs/snippets/common/storybook-ts-config-babelrc.js.mdx
@@ -3,7 +3,6 @@
 
 {
   "presets": [
-    "@babel/preset-env",
     "@babel/preset-typescript"
   ]
 }
diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx
index c87cb62adbb8..390d7e105178 100644
--- a/docs/snippets/html/button-story-component-decorator.js.mdx
+++ b/docs/snippets/html/button-story-component-decorator.js.mdx
@@ -17,5 +17,12 @@ export default {
   }],
 };
 
-export const Primary = (args) => createButton(args);
-```
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => createButton(args),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx
index d1a4efaa4258..465428aab26c 100644
--- a/docs/snippets/html/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/html/button-story-component-decorator.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
 
 import { createButton, ButtonArgs } from './Button';
 
@@ -19,5 +19,7 @@ export default {
   }],
 } as Meta<ButtonArgs>;
 
-export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
-```
+export const Primary: Story = {
+  render: (args) => createButton(args),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-exports.ts.mdx
index e294d98b1b40..f7f15871e351 100644
--- a/docs/snippets/html/button-story-default-exports.ts.mdx
+++ b/docs/snippets/html/button-story-default-exports.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 
 import { createButton, ButtonArgs } from './Button';
 
@@ -12,4 +12,4 @@ export default {
   */
   title: 'Button',
 } as Meta<ButtonArgs>;
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx
index 3f13f148ce43..b97d998bf83f 100644
--- a/docs/snippets/html/button-story-rename-story.js.mdx
+++ b/docs/snippets/html/button-story-rename-story.js.mdx
@@ -11,6 +11,13 @@ export default {
   title: 'Button',
 };
 
-export const Primary = (args) => createButton(args);
-Primary.storyName = 'I am the primary';
-```
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  name: 'I am the primary',
+  render: (args) => createButton(args),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx
index 0b37196b9a41..ae7b4c57c6fc 100644
--- a/docs/snippets/html/button-story-rename-story.ts.mdx
+++ b/docs/snippets/html/button-story-rename-story.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
 
 import { createButton, ButtonArgs } from './Button';
 
@@ -13,6 +13,13 @@ export default {
   title: 'Button',
 } as Meta<ButtonArgs>;
 
-export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
-Primary.storyName = 'I am the primary';
-```
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  name: 'I am the primary',
+  render: (args) => createButton(args),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx
index 9df04fd6e394..f9dcae898731 100644
--- a/docs/snippets/html/button-story-using-args.js.mdx
+++ b/docs/snippets/html/button-story-using-args.js.mdx
@@ -11,16 +11,32 @@ export default {
   title: 'Button',
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => createButton(args);
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { primary: true, label: 'Button' };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => createButton(args),
+  args: {
+    primary: true, 
+    label: 'Button',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+export const Secondary = {
+  render: (args) => createButton(args),
+  args: {
+    ...Primary.args, 
+    label: '😄👍😍💯',
+  },
+};
 
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
-```
+export const Tertiary = {
+  render: (args) => createButton(args),
+  args: {
+    ...Primary.args, 
+    label: '📚📕📈🤓',
+  },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx
index 759858bf1da4..9b566f5fa6fb 100644
--- a/docs/snippets/html/button-story-using-args.ts.mdx
+++ b/docs/snippets/html/button-story-using-args.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
 import { createButton, ButtonArgs } from './Button';
 
 export default {
@@ -12,16 +12,32 @@ export default {
   title: 'Button',
 } as Meta<ButtonArgs>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => createButton(args);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (args) => createButton(args),
+  args: {
+    primary: true, 
+    label: 'Button',
+  },
+};
 
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { primary: true, label: 'Button' };
+export const Secondary: Story = {
+  render: (args) => createButton(args),
+  args: {
+    ...Primary.args, 
+    label: '😄👍😍💯',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
-
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
-```
+export const Tertiary: Story = {
+  render: (args) => createButton(args),
+  args: {
+    ...Primary.args, 
+    label: '📚📕📈🤓',
+  },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx
index 8d71b288cef9..dbfe2d268a5a 100644
--- a/docs/snippets/html/button-story-with-args.js.mdx
+++ b/docs/snippets/html/button-story-with-args.js.mdx
@@ -9,21 +9,28 @@ export default {
   title: 'Button',
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => {
-  const btn = document.createElement('button');
-  btn.innerText = args.label;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => {
+    const btn = document.createElement("button");
+    btn.innerText = args.label;
 
-  const mode = args.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  btn.className = ['storybook-button', 'storybook-button--medium', mode].join(' ');
+    const mode = args.primary
+      ? "storybook-button--primary"
+      : "storybook-button--secondary";
+    btn.className = ["storybook-button", "storybook-button--medium", mode].join(
+      " "
+    );
 
-  return btn;
+    return btn;
+  },
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx
index 9b75446177ee..77eeef07ae30 100644
--- a/docs/snippets/html/button-story-with-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-args.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
 
 type ButtonArgs = {
   primary: boolean;
@@ -16,21 +16,28 @@ export default {
   title: 'Button',
 } as Meta<ButtonArgs>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => {
-  const btn = document.createElement('button');
-  btn.innerText = args.label;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (args) => {
+    const btn = document.createElement("button");
+    btn.innerText = args.label;
 
-  const mode = args.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  btn.className = ['storybook-button', 'storybook-button--medium', mode].join(' ');
+    const mode = args.primary
+      ? "storybook-button--primary"
+      : "storybook-button--secondary";
+    btn.className = ["storybook-button", "storybook-button--medium", mode].join(
+      " "
+    );
 
-  return btn;
+    return btn;
+  },
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-with-blue-args.js.mdx b/docs/snippets/html/button-story-with-blue-args.js.mdx
index 5cb8981ad168..e83f8f60f34e 100644
--- a/docs/snippets/html/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/html/button-story-with-blue-args.js.mdx
@@ -20,6 +20,4 @@ export default {
     },
   },
 };
-
-export const Primary = (args) => createButton(args);
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-with-blue-args.ts.mdx b/docs/snippets/html/button-story-with-blue-args.ts.mdx
index 906845b4f472..c22368c501b9 100644
--- a/docs/snippets/html/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-blue-args.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta } from '@storybook/html';
 
 import { createButton, ButtonArgs } from './Button';
 
@@ -22,6 +22,4 @@ export default {
     },
   },
 } as Meta<ButtonArgs>;
-
-export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx
index b6b9b43ec295..933e1ce8f983 100644
--- a/docs/snippets/html/button-story-with-emojis.js.mdx
+++ b/docs/snippets/html/button-story-with-emojis.js.mdx
@@ -10,7 +10,21 @@ export default {
    */
   title: 'Button',
 };
-export const Primary = () => createButton({ backgroundColor: "#ff0", label: "Button"});
-export const Secondary = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
-export const Tertiary = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
-```
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => createButton({ backgroundColor: "#ff0", label: "Button"}),
+};
+
+export const Secondary = {
+  render: (args) => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"}),
+};
+
+export const Tertiary = {
+  render: (args) => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"}),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx
index 47a1f99f8ee1..67f012d2250c 100644
--- a/docs/snippets/html/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/html/button-story-with-emojis.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
 import { createButton, ButtonArgs } from './Button';
 
 export default {
@@ -11,7 +11,21 @@ export default {
    */
   title: 'Button',
 } as Meta<ButtonArgs>;
-export const Primary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "Button"});
-export const Secondary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
-export const Tertiary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
-```
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (args) => createButton({ backgroundColor: "#ff0", label: "Button"}),
+};
+
+export const Secondary: Story = {
+  render: (args) => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"}),
+};
+
+export const Tertiary: Story = {
+  render: (args) => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"}),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx
index 6268687c428b..36725f39dadc 100644
--- a/docs/snippets/html/button-story.js.mdx
+++ b/docs/snippets/html/button-story.js.mdx
@@ -9,16 +9,23 @@ export default {
   title: 'Button',
 };
 
-export const Primary = () => {
-  const btn = document.createElement('button');
-  btn.innerText = 'Button';
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => {
+    const btn = document.createElement('button');
+    btn.innerText = 'Button';
 
-  btn.className = [
-    'storybook-button',
-    'storybook-button--medium',
-    'storybook-button--primary',
-  ].join(' ');
+    btn.className = [
+      'storybook-button',
+      'storybook-button--medium',
+      'storybook-button--primary',
+    ].join(' ');
 
-  return btn;
+    return btn;
+  },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx
index 62e72638171e..d544c874b6be 100644
--- a/docs/snippets/html/button-story.ts.mdx
+++ b/docs/snippets/html/button-story.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
 
 export default {
   /* 👇 The title prop is optional.
@@ -11,16 +11,23 @@ export default {
   title: 'Button',
 } as Meta;
 
-export const Primary: StoryFn = (): HTMLButtonElement => {
-  const btn = document.createElement('button');
-  btn.innerText = 'Button';
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => {
+    const btn = document.createElement('button');
+    btn.innerText = 'Button';
 
-  btn.className = [
-    'storybook-button',
-    'storybook-button--medium',
-    'storybook-button--primary',
-  ].join(' ');
+    btn.className = [
+      'storybook-button',
+      'storybook-button--medium',
+      'storybook-button--primary',
+    ].join(' ');
 
-  return btn;
+    return btn;
+  },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx
index b9cbe7d627f1..3466632b67d6 100644
--- a/docs/snippets/html/list-story-expanded.js.mdx
+++ b/docs/snippets/html/list-story-expanded.js.mdx
@@ -6,22 +6,37 @@ import { createList } from  './List';
 import { createListItem } from './ListItem';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 };
 
-export const Empty = (args) => createList(args);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: () => createList(args) 
+};
 
-export const OneItem = (args) => {
-  const list = createList(args);
-  list.appendChild(createListItem());
-  return list;
+export const OneItem = {
+  render: (args) => {
+    const list = createList(args);
+    list.appendChild(createListItem());
+    return list;
+  },
 };
 
-export const ManyItems = (args) => {
-  const list = createList(args);
-  list.appendChild(createListItem());
-  list.appendChild(createListItem());
-  list.appendChild(createListItem());
-  return list;
+export const ManyItems = {
+  render: (args) => {
+    const list = createList(args);
+    list.appendChild(createListItem());
+    list.appendChild(createListItem());
+    list.appendChild(createListItem());
+    return list;
+  },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/list-story-expanded.ts.mdx b/docs/snippets/html/list-story-expanded.ts.mdx
index 81e14d1162a4..c6854009141f 100644
--- a/docs/snippets/html/list-story-expanded.ts.mdx
+++ b/docs/snippets/html/list-story-expanded.ts.mdx
@@ -2,7 +2,7 @@
 ```ts
 // List.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
 
 import { createList, ListArgs } from  './List';
 import { createListItem } from './ListItem';
@@ -11,19 +11,30 @@ export default {
   title: 'List',
 } as Meta<ListArgs>;
 
-export const Empty: StoryFn<ListArgs> = (args) => createList(args);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty: Story = {
+  render: () => createList(args) 
+};
 
-export const OneItem: StoryFn<ListArgs> = (args) => {
-  const list = createList(args);
-  list.appendChild(createListItem());
-  return list;
+export const OneItem: Story = {
+  render: (args) => {
+    const list = createList(args);
+    list.appendChild(createListItem());
+    return list;
+  },
 };
 
-export const ManyItems: StoryFn<ListArgs> = (args) => {
-  const list = createList(args);
-  list.appendChild(createListItem());
-  list.appendChild(createListItem());
-  list.appendChild(createListItem());
-  return list;
+export const ManyItems: Story = {
+  render: (args) => {
+    const list = createList(args);
+    list.appendChild(createListItem());
+    list.appendChild(createListItem());
+    list.appendChild(createListItem());
+    return list;
+  },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx
index a58833617912..7c36ec6feb0a 100644
--- a/docs/snippets/html/list-story-reuse-data.js.mdx
+++ b/docs/snippets/html/list-story-reuse-data.js.mdx
@@ -9,14 +9,25 @@ import { createListItem } from './ListItem';
 import { Selected, Unselected } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 };
 
-export const ManyItems = (args) => {
-  const list = createList(args);
-  list.appendChild(createListItem(Selected.args));
-  list.appendChild(createListItem(Unselected.args));
-  list.appendChild(createListItem(Unselected.args));
-  return list;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems = {
+  render: (args) => {
+    const list = createList(args);
+    list.appendChild(createListItem(Selected.args));
+    list.appendChild(createListItem(Unselected.args));
+    list.appendChild(createListItem(Unselected.args));
+    return list;
+  },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx
index 434bec00d690..3291a2d93991 100644
--- a/docs/snippets/html/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/html/list-story-reuse-data.ts.mdx
@@ -2,7 +2,7 @@
 ```ts
 // List.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
 
 import { createList, ListArgs } from  './List';
 import { createListItem } from './ListItem';
@@ -11,22 +11,25 @@ import { createListItem } from './ListItem';
 import { Selected, Unselected } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
   title: 'List',
 } as Meta<ListArgs>;
 
-export const Empty: StoryFn<ListArgs> = (args) => createList(args);
-
-export const OneItem: StoryFn<ListArgs> = (args) => {
-  const list = createList(args);
-  list.appendChild(createListItem());
-  return list;
-};
-
-export const ManyItems: StoryFn<ListArgs> = (args) => {
-  const list = createList(args);
-  list.appendChild(createListItem(Selected.args));
-  list.appendChild(createListItem(Unselected.args));
-  list.appendChild(createListItem(Unselected.args));
-  return list;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems: Story = {
+  render: (args) => {
+    const list = createList(args);
+    list.appendChild(createListItem(Selected.args));
+    list.appendChild(createListItem(Unselected.args));
+    list.appendChild(createListItem(Unselected.args));
+    return list;
+  },
 };
 ```
diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx
index 8e4959b468d3..441ae42f5c1f 100644
--- a/docs/snippets/html/list-story-starter.js.mdx
+++ b/docs/snippets/html/list-story-starter.js.mdx
@@ -4,9 +4,15 @@
 import { createList } from  './List';
 
 export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
   title: 'List',
 };
 
 // Always an empty list, not super interesting
-const Template = (args) => createList(args);
-```
+export const Empty = {
+  render: (args) => createList(args),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx
index e0706e6c0827..15f226a18707 100644
--- a/docs/snippets/html/list-story-starter.ts.mdx
+++ b/docs/snippets/html/list-story-starter.ts.mdx
@@ -1,14 +1,20 @@
 ```ts
 // List.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
 
 import { createList, ListArgs } from  './List';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 } as Meta<ListArgs>;
 
 // Always an empty list, not super interesting
-const Template: StoryFn<ListArgs> = (args) => createList(args);
-```
+export const Empty: Story = {
+  render: (args) => createList(args),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/html/your-component.js.mdx b/docs/snippets/html/your-component.js.mdx
index 50e47094f092..497ba4615fd1 100644
--- a/docs/snippets/html/your-component.js.mdx
+++ b/docs/snippets/html/your-component.js.mdx
@@ -6,17 +6,21 @@ import { createYourComponent } from './YourComponent';
 // 👇 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/html/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
+  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
   title: 'YourComponent',
 };
 
-// 👇 We create a “template” of how args map to rendering
-const Template = (args) => createYourComponent(args);
-
-export const FirstStory = Template.bind({});
-FirstStory.args = {
-  // 👇 The args you need here will depend on your component
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: (args) => createYourComponent(args),
+  args:{
+    // 👇 The args you need here will depend on your component
+  },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/html/your-component.ts.mdx b/docs/snippets/html/your-component.ts.mdx
index 52dcbbdb7f48..bc4d127aa4d4 100644
--- a/docs/snippets/html/your-component.ts.mdx
+++ b/docs/snippets/html/your-component.ts.mdx
@@ -1,7 +1,8 @@
 ```ts
 // YourComponent.stories.ts
 
-import { Meta, StoryFn } from '@storybook/html';
+import type { Meta, Story } from '@storybook/html';
+
 import { createYourComponent } from './YourComponent';
 
 //👇 This default export determines where your story goes in the story list
@@ -12,12 +13,15 @@ export default {
    */
   title: 'YourComponent',
 } as Meta;
-
-//👇 We create a “template” of how args map to rendering
-const Template: StoryFn = (args): HTMLElement => createYourComponent(args);
-
-export const FirstStory = Template.bind({});
-FirstStory.args = {
-  //👇 The args you need here will depend on your component
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/html/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory: Story = {
+  render: (args) => createYourComponent(args),
+  args:{
+    // 👇 The args you need here will depend on your component
+  },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/preact/button-story-with-args.js.mdx b/docs/snippets/preact/button-story-with-args.js.mdx
index 93b3a1b01943..9e7a42247ae3 100644
--- a/docs/snippets/preact/button-story-with-args.js.mdx
+++ b/docs/snippets/preact/button-story-with-args.js.mdx
@@ -8,19 +8,23 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/preact/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/preact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
-}
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => <Button {...args} />;
+};
 
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/preact/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => <Button {...args} />,
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/preact/button-story.js.mdx b/docs/snippets/preact/button-story.js.mdx
index db4f1887ada4..9577823d3adf 100644
--- a/docs/snippets/preact/button-story.js.mdx
+++ b/docs/snippets/preact/button-story.js.mdx
@@ -3,16 +3,24 @@
 
 /** @jsx h */
 import { h } from 'preact';
+
 import { Button } from './Button';
 
 export default {
-   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/preact/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/preact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
-}
+};
 
-export const Primary = () => <Button primary label='Button' />;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/preact/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => <Button primary label="Button" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/preact/component-story-with-custom-render-function.js.mdx b/docs/snippets/preact/component-story-with-custom-render-function.js.mdx
new file mode 100644
index 000000000000..96cc49422901
--- /dev/null
+++ b/docs/snippets/preact/component-story-with-custom-render-function.js.mdx
@@ -0,0 +1,33 @@
+```js
+// MyComponent.stories.js|jsx
+
+/** @jsx h */
+import { h } from 'preact';
+
+import { Layout } from './Layout';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/preact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+// This story uses a render function to fully control how the component renders.
+export const Example = {
+  render: () => (
+    <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  ),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/preact/your-component.js.mdx b/docs/snippets/preact/your-component.js.mdx
index 48ed9e84991d..f84b3d0dfef7 100644
--- a/docs/snippets/preact/your-component.js.mdx
+++ b/docs/snippets/preact/your-component.js.mdx
@@ -9,18 +9,22 @@ import { YourComponent } from './YourComponent';
 //👇 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/preact/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/preact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
-}
-
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => <YourComponent {...args} />;
+};
 
-export const FirstStory = Template.bind({});
-FirstStory.args = {
-  //👇 The args you need here will depend on your component
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/preact/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: (args) => <YourComponent {...args} />,
+  args: {
+    //👇 The args you need here will depend on your component
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/app-story-with-mock.js.mdx b/docs/snippets/react/app-story-with-mock.js.mdx
index 6c23af111583..c39a94968ca3 100644
--- a/docs/snippets/react/app-story-with-mock.js.mdx
+++ b/docs/snippets/react/app-story-with-mock.js.mdx
@@ -7,30 +7,29 @@ import App from './App';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'App',
   component: App,
 };
 
-const Template = (ags) => <App />;
-
-export const Success = Template.bind({});
-Success.parameters = {
-  fetch: {
-    json: {
-      JavaScript: 3390991,
-      'C++': 44974,
-      TypeScript: 15530,
-      CoffeeScript: 12253,
-      Python: 9383,
-      C: 5341,
-      Shell: 5115,
-      HTML: 3420,
-      CSS: 3171,
-      Makefile: 189,
-    }
-  }
+export const Success = {
+  parameters: {
+    fetch: {
+      json: {
+        JavaScript: 3390991,
+        'C++': 44974,
+        TypeScript: 15530,
+        CoffeeScript: 12253,
+        Python: 9383,
+        C: 5341,
+        Shell: 5115,
+        HTML: 3420,
+        CSS: 3171,
+        Makefile: 189,
+      },
+    },
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/app-story-with-mock.ts.mdx b/docs/snippets/react/app-story-with-mock.ts.mdx
index 1613c6f8a3e9..c6dd38c9e784 100644
--- a/docs/snippets/react/app-story-with-mock.ts.mdx
+++ b/docs/snippets/react/app-story-with-mock.ts.mdx
@@ -3,36 +3,35 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import App from './App';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'App',
   component: App,
 } as ComponentMeta<typeof App>;
 
-const Template: ComponentStory<typeof App> = () => <App />;
-
-export const Success = Template.bind({});
-Success.parameters = {
-  fetch: {
-    json: {
-      JavaScript: 3390991,
-      'C++': 44974,
-      TypeScript: 15530,
-      CoffeeScript: 12253,
-      Python: 9383,
-      C: 5341,
-      Shell: 5115,
-      HTML: 3420,
-      CSS: 3171,
-      Makefile: 189,
-    }
-  }
+export const Success: ComponentStoryObj<typeof App> = {
+  parameters: {
+    fetch: {
+      json: {
+        JavaScript: 3390991,
+        'C++': 44974,
+        TypeScript: 15530,
+        CoffeeScript: 12253,
+        Python: 9383,
+        C: 5341,
+        Shell: 5115,
+        HTML: 3420,
+        CSS: 3171,
+        Makefile: 189,
+      },
+    },
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/badge-story-starter-example.mdx.mdx b/docs/snippets/react/badge-story-starter-example.mdx.mdx
index 5a025429d643..0485e1828453 100644
--- a/docs/snippets/react/badge-story-starter-example.mdx.mdx
+++ b/docs/snippets/react/badge-story-starter-example.mdx.mdx
@@ -1,7 +1,7 @@
 ```md
-<!-- Badge.stories.mdx -->
+<!--- Badge.stories.mdx --->
 
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
 
 import { Badge } from './Badge';
 import { Icon } from './Icon';
@@ -19,7 +19,7 @@ Let's define a story for our `Badge` component:
 We can drop it in a `Canvas` to get a code snippet:
 
 <Canvas>
-  <Story name="negative">
+  <Story name="negative" >
     <Badge status="negative">Negative</Badge>
   </Story>
 </Canvas>
@@ -29,7 +29,7 @@ gets rendered as a group, but defines individual stories
 with unique URLs and isolated snapshot tests.
 
 <Canvas>
-  <Story name="warning">
+  <Story name="warning" >
     <Badge status="warning">Warning</Badge>
   </Story>
   <Story name="neutral">
diff --git a/docs/snippets/react/badge-story.mdx.mdx b/docs/snippets/react/badge-story.mdx.mdx
index 5a7139b754ac..f23da268d262 100644
--- a/docs/snippets/react/badge-story.mdx.mdx
+++ b/docs/snippets/react/badge-story.mdx.mdx
@@ -1,14 +1,18 @@
 ```md
-<!-- Badge.stories.mdx -->
+<!---Badge.stories.mdx --->
 
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
 
 import { Badge } from './Badge';
 import { Icon } from './Icon';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => <Badge {...args } />
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
 
 # Badge
 
@@ -19,9 +23,8 @@ Let's define a story for our `Badge` component:
   args={{
     status: 'positive',
     label: 'Positive'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => <Badge {...args } />} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
@@ -29,11 +32,10 @@ We can drop it in a `Canvas` to get a code snippet:
   <Story 
     name="negative"
     args={{
-      status: 'negative', 
+      status: 'negative',
       label: 'Negative'
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => <Badge {...args } />} />
 </Canvas>
 
 We can even preview multiple Stories in a block. This
@@ -46,32 +48,28 @@ with unique URLs, which is great for review and testing.
     args={{
       status: 'warning',
       label: 'Warning' 
-    }}>
-    {Template.bind({})}
-  </Story>
-  <Story 
-    name="neutral" 
+    }}
+    render={(args) => <Badge {...args } />} />
+  <Story
+    name="neutral"
     args={{
-      status: 'neutral', 
-      label: 'Neutral' 
-    }}>
-    {Template.bind({})}
-  </Story>
-  <Story 
+      status: 'neutral',
+      label: 'Neutral'
+    }}
+    render={(args) => <Badge {...args } />} />
+  <Story
     name="error"
     args={{
-      status: 'error', 
-      label: 'Error' 
-    }}>
-    {Template.bind({})}
-  </Story>
-  <Story 
-    name="with icon" 
+      status: 'error',
+      label: 'Error'
+    }}
+    render={(args) => <Badge {...args } />} />
+  <Story
+    name="with icon"
     args={{
-      status: 'warning', 
+      status: 'warning',
       label: (<Icon icon="check" inline /> with icon)
-    )}}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => <Badge {...args } />} />
 </Canvas>
 ```
diff --git a/docs/snippets/react/button-group-story.js.mdx b/docs/snippets/react/button-group-story.js.mdx
index 0dcd0042b5bf..16f61cec932b 100644
--- a/docs/snippets/react/button-group-story.js.mdx
+++ b/docs/snippets/react/button-group-story.js.mdx
@@ -10,21 +10,17 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
 };
 
-const Template = (args) => <ButtonGroup {...args} />;
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [
-    { ...ButtonStories.Primary.args },
-    { ...ButtonStories.Secondary.args }
-  ],
-  orientation: 'horizontal',
+export const Pair = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-group-story.ts.mdx b/docs/snippets/react/button-group-story.ts.mdx
index 8b25518eb4a9..7d53a03f84e0 100644
--- a/docs/snippets/react/button-group-story.ts.mdx
+++ b/docs/snippets/react/button-group-story.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { ButtonGroup } from '../ButtonGroup';
 
@@ -12,21 +12,17 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
 } as ComponentMeta<typeof ButtonGroup>;
 
-const Template: ComponentStory<typeof ButtonGroup> = (args) => <ButtonGroup {...args} />;
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [
-    { ...ButtonStories.Primary.args },
-    { ...ButtonStories.Secondary.args }
-  ],
-  orientation: 'horizontal',
+export const Pair: ComponentStoryObj<typeof ButtonGroup> = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler-args.js.mdx b/docs/snippets/react/button-story-click-handler-args.js.mdx
index 0219ef1a3d6e..8fc63bd26b41 100644
--- a/docs/snippets/react/button-story-click-handler-args.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-args.js.mdx
@@ -9,17 +9,18 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
-
-Text.args = {
-  label: 'Hello',
-  onClick: action('clicked'),
+export const Text = {
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
new file mode 100644
index 000000000000..8d1766bfcc76
--- /dev/null
+++ b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
@@ -0,0 +1,22 @@
+```js
+// Button.stories.js|jsx|ts|tsx
+
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = {
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx b/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
index 293e5431a0de..300616218565 100644
--- a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
@@ -5,12 +5,14 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
   component: Button,
 }
 
-export const Text = (args) => <Button {...args} />;
+export const Text = {
+  args: {...},
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler.js.mdx b/docs/snippets/react/button-story-click-handler.js.mdx
index 1a0a43d8730b..c9e29652a6e3 100644
--- a/docs/snippets/react/button-story-click-handler.js.mdx
+++ b/docs/snippets/react/button-story-click-handler.js.mdx
@@ -9,12 +9,14 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button', 
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
 };
 
-export const Text = () => <Button label="Hello" onClick={action('clicked')} />;
+export const Text = {
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler.ts.mdx b/docs/snippets/react/button-story-click-handler.ts.mdx
index 89909a04e4ff..d38cc868641a 100644
--- a/docs/snippets/react/button-story-click-handler.ts.mdx
+++ b/docs/snippets/react/button-story-click-handler.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
 
@@ -11,12 +11,14 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button', 
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Basic: ComponentStory<typeof Button> = () => <Button label="Hello" onClick={action('clicked')} />;
+export const Basic: ComponentStoryObj<typeof Button> = {
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-component-args-primary.js.mdx b/docs/snippets/react/button-story-component-args-primary.js.mdx
index ffaf3f14f3dc..f90d0ec4b350 100644
--- a/docs/snippets/react/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/react/button-story-component-args-primary.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/react/button-story-component-args-primary.ts.mdx b/docs/snippets/react/button-story-component-args-primary.ts.mdx
index 99b0fe27361b..d893bcab4776 100644
--- a/docs/snippets/react/button-story-component-args-primary.ts.mdx
+++ b/docs/snippets/react/button-story-component-args-primary.ts.mdx
@@ -3,15 +3,15 @@
 
 import React from 'react';
 
-import { ComponentMeta } from '@storybook/react';
+import type { ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific argTypes
diff --git a/docs/snippets/react/button-story-component-decorator.js.mdx b/docs/snippets/react/button-story-component-decorator.js.mdx
index 63dd659618fd..104353493fb9 100644
--- a/docs/snippets/react/button-story-component-decorator.js.mdx
+++ b/docs/snippets/react/button-story-component-decorator.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/react/button-story-component-decorator.story-function-js.js.mdx b/docs/snippets/react/button-story-component-decorator.story-function-js.js.mdx
index 888391d059ef..97a29f1caf88 100644
--- a/docs/snippets/react/button-story-component-decorator.story-function-js.js.mdx
+++ b/docs/snippets/react/button-story-component-decorator.story-function-js.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/react/button-story-component-decorator.story-function-ts.ts.mdx b/docs/snippets/react/button-story-component-decorator.story-function-ts.ts.mdx
index 91153d92a1de..3e1490e41a18 100644
--- a/docs/snippets/react/button-story-component-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/react/button-story-component-decorator.story-function-ts.ts.mdx
@@ -3,23 +3,17 @@
 
 import React from 'react';
 
-import { ComponentMeta } from '@storybook/react';
+import type { ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '3em' }}>
-        {Story()}
-      </div>
-    ),
-  ],
+  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
 } as ComponentMeta<typeof Button>;
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-component-decorator.ts.mdx b/docs/snippets/react/button-story-component-decorator.ts.mdx
index 7c088fc34b81..fdfb1a370216 100644
--- a/docs/snippets/react/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/react/button-story-component-decorator.ts.mdx
@@ -3,15 +3,15 @@
 
 import React from 'react';
 
-import { ComponentMeta } from '@storybook/react';
+import type { ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   decorators: [
diff --git a/docs/snippets/react/button-story-decorator.js.mdx b/docs/snippets/react/button-story-decorator.js.mdx
index 909e514f5dbf..c6b7c1d4db18 100644
--- a/docs/snippets/react/button-story-decorator.js.mdx
+++ b/docs/snippets/react/button-story-decorator.js.mdx
@@ -7,21 +7,20 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-Primary.decorators = [
-  (Story) => (
-    <div style={{ margin: '3em' }}>
-      <Story />
-    </div>
-  ),
-];
+export const Primary = {
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.mdx.mdx b/docs/snippets/react/button-story-decorator.mdx.mdx
index 22cfbe8d6822..14ece3207cd1 100644
--- a/docs/snippets/react/button-story-decorator.mdx.mdx
+++ b/docs/snippets/react/button-story-decorator.mdx.mdx
@@ -7,8 +7,6 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) => <Button {...args} />;
-
 <Story
   name="Primary"
   args={{}}
@@ -19,6 +17,5 @@ export const Template = (args) => <Button {...args} />;
       </div>
     ),
   ]}>
-  {Template.bind({})}
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
index 507a41844ceb..bcf48f137d2f 100644
--- a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
@@ -3,19 +3,18 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-Primary.decorators = [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>];
+export const Primary: ComponentStoryObj<typeof Button> = {
+  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.story-function.js.mdx b/docs/snippets/react/button-story-decorator.story-function.js.mdx
index 396fbd6aec25..bbe57aa3b37a 100644
--- a/docs/snippets/react/button-story-decorator.story-function.js.mdx
+++ b/docs/snippets/react/button-story-decorator.story-function.js.mdx
@@ -5,15 +5,14 @@ import React from 'react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
   component: Button,
 };
 
-const Template = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-Primary.decorators = [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>];
+export const Primary = {
+  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.ts.mdx b/docs/snippets/react/button-story-decorator.ts.mdx
index 48ed75e585e6..868ec5fabecb 100644
--- a/docs/snippets/react/button-story-decorator.ts.mdx
+++ b/docs/snippets/react/button-story-decorator.ts.mdx
@@ -3,25 +3,24 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-Primary.decorators = [
-  (Story) => (
-    <div style={{ margin: '3em' }}>
-      <Story />
-    </div>
-  ),
-];
+export const Primary: ComponentStoryObj<typeof Button> = {
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-default-docs-code.js.mdx b/docs/snippets/react/button-story-default-docs-code.js.mdx
deleted file mode 100644
index b31ce637273a..000000000000
--- a/docs/snippets/react/button-story-default-docs-code.js.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```js
-// Button.stories.js|jsx
-
-import React from 'react';
-
-import { Button } from './Button';
-
-export default {
-  /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button',
-  component: Button,
-  //👇 Creates specific argTypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-//👇 Some function to demonstrate the behavior
-const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-export const ExampleStory = (args) => {
-  //👇 Destructure the label from the args object
-  const { label } = args;
-
-  //👇 Assigns the function result to a variable and pass it as a prop into the component
-  const functionResult = someFunction(label);
-  return <Button {...args} label={functionResult} />;
-};
-ExampleStory.args = {
-  primary: true,
-  size: 'small',
-  label: 'button',
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-default-docs-code.mdx.mdx b/docs/snippets/react/button-story-default-docs-code.mdx.mdx
deleted file mode 100644
index c5900e20d2ae..000000000000
--- a/docs/snippets/react/button-story-default-docs-code.mdx.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import { Button } from './Button';
-
-<!-- 👇 Creates specific argTypes -->
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    backgroundColor: {
-      control: 'color',
-    },
-  }}
-/>
-
-<!-- 👇 Some function to demonstrate the behavior -->
-export const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-
-<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
-<Story
-  name="ExampleStory"
-  args={{
-    primary: true,
-    size: 'small',
-    label: 'button',
-  }}>
-  {(args) => {
-    const { label } = args;
-    const functionResult = someFunction(label);
-    return <Button {...args} label={functionResult} />;
-  }}
-</Story>
-```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-default-docs-code.ts.mdx b/docs/snippets/react/button-story-default-docs-code.ts.mdx
deleted file mode 100644
index 13abf6e69b8a..000000000000
--- a/docs/snippets/react/button-story-default-docs-code.ts.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-```ts
-// Button.stories.ts|tsx
-
-import React from 'react';
-
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Button } from './Button';
-
-//👇 Some function to demonstrate the behavior
-const someFunction = (someValue: String) => {
-  return `i am a ${someValue}`;
-};
-
-export default {
-  /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button',
-  component: Button,
-  //👇 Creates specific argTypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Button>;
-
-export const ExampleStory: ComponentStory<typeof Button> = (args) => {
-  //👇 Destructure the label from the args object
-  const { label } = args;
-
-  //👇 Assigns the function result to a variable and pass it as a prop into the component
-  const functionResult = someFunction(label);
-  return <Button {...args} label={functionResult} />;
-};
-ExampleStory.args = {
-  primary: true,
-  size: 'small',
-  label: 'button',
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-default-export-with-component.js.mdx b/docs/snippets/react/button-story-default-export-with-component.js.mdx
index f7b5b88f05c2..e21e8f0e8d0e 100644
--- a/docs/snippets/react/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/react/button-story-default-export-with-component.ts.mdx b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
index 3cb7e46e9fee..85cbe1053071 100644
--- a/docs/snippets/react/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
@@ -3,15 +3,15 @@
 
 import React from 'react';
 
-import { ComponentMeta } from '@storybook/react';
+import type { ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
diff --git a/docs/snippets/react/button-story-rename-story.js.mdx b/docs/snippets/react/button-story-rename-story.js.mdx
index a9d0dc818383..cbcbc49d8e87 100644
--- a/docs/snippets/react/button-story-rename-story.js.mdx
+++ b/docs/snippets/react/button-story-rename-story.js.mdx
@@ -7,13 +7,15 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => <Button primary label="Button"/>;
-Primary.storyName = 'I am the primary';
+export const Primary= {
+  name: 'I am the primary',
+  render: () => <Button primary label="Button" />,
+}
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-rename-story.ts.mdx b/docs/snippets/react/button-story-rename-story.ts.mdx
index 368c94a2a84b..fa122eced248 100644
--- a/docs/snippets/react/button-story-rename-story.ts.mdx
+++ b/docs/snippets/react/button-story-rename-story.ts.mdx
@@ -3,19 +3,26 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Primary: ComponentStory<typeof Button> = () => <Button primary label="Button"/>;
-Primary.storyName = 'I am the primary';
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: ComponentStoryObj<typeof Button> = {
+  name: 'I am the primary',
+  render: () => <Button primary label="Button" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-using-args.js.mdx b/docs/snippets/react/button-story-using-args.js.mdx
index b7baafb461b6..6d604199eebd 100644
--- a/docs/snippets/react/button-story-using-args.js.mdx
+++ b/docs/snippets/react/button-story-using-args.js.mdx
@@ -7,23 +7,31 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => <Button {...args} />;
-
-// 👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { backgroundColor: '#ff0', label: 'Button' };
+export const Primary = {
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-using-args.ts.mdx b/docs/snippets/react/button-story-using-args.ts.mdx
index 60590f4dfe21..a558e441b958 100644
--- a/docs/snippets/react/button-story-using-args.ts.mdx
+++ b/docs/snippets/react/button-story-using-args.ts.mdx
@@ -3,29 +3,35 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { backgroundColor: '#ff0', label: 'Button' };
-
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
-
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Primary: ComponentStoryObj<typeof Button> = {
+  backgroundColor: '#ff0',
+  label: 'Button',
+};
+
+export const Secondary: ComponentStoryObj<typeof Button> = {
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
+
+export const Tertiary: ComponentStoryObj<typeof Button> = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-addon-example.js.mdx b/docs/snippets/react/button-story-with-addon-example.js.mdx
index 02ba3fec7e98..97a0d181b699 100644
--- a/docs/snippets/react/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.js.mdx
@@ -7,18 +7,20 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
     myAddon: {
-      data: 'this data is passed to the addon',
+      data: 'This data is passed to the addon',
     },
   },
 };
 
-export const Basic = () => <Button>hello</Button>;
+export const Basic = {
+  render: () => <Button>Hello</Button>,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx
index 8c1fd7d10081..5f90996fc267 100644
--- a/docs/snippets/react/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.ts.mdx
@@ -3,15 +3,15 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
@@ -22,5 +22,12 @@ export default {
   },
 } as ComponentMeta<typeof Button>;
 
-const Basic: ComponentStory<typeof Button> = () => <Button>hello</Button>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Basic: ComponentStoryObj<typeof Button> = {
+  render: () => <Button>Hello</Button>,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx
index 430d0187f520..7fcf35be8bde 100644
--- a/docs/snippets/react/button-story-with-args.js.mdx
+++ b/docs/snippets/react/button-story-with-args.js.mdx
@@ -7,20 +7,17 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => <Button {...args} />;
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = {
-   primary: true,
-   label: 'Button',
+export const Primary = {
+  args: {
+    label: 'Button',
+    primary: true,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-args.mdx.mdx b/docs/snippets/react/button-story-with-args.mdx.mdx
index e7ceed0467f5..b5505d8c2e6c 100644
--- a/docs/snippets/react/button-story-with-args.mdx.mdx
+++ b/docs/snippets/react/button-story-with-args.mdx.mdx
@@ -5,19 +5,19 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import { Button } from './Button';
 
-<Meta title="Button" component={Button} />
+<Meta title="Components/Button" component={Button} />
 
-<!-- 👇 We create a “template” of how args map to rendering -->
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
 
-export const Template = (args) => <Button {...args} />;
-
-<!-- 👇 Each story then reuses that template -->
 <Story
   name="Primary"
   args={{
     primary: true,
     label: 'Button',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => <Button {...args} />} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx
index 76b502fa348d..91b96dba0452 100644
--- a/docs/snippets/react/button-story-with-args.ts.mdx
+++ b/docs/snippets/react/button-story-with-args.ts.mdx
@@ -3,26 +3,23 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { Button, ButtonProps } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary: ComponentStoryObj<typeof Button> = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 ```
diff --git a/docs/snippets/react/button-story-with-blue-args.js.mdx b/docs/snippets/react/button-story-with-blue-args.js.mdx
index 27ee66e8f691..0625d9d041ad 100644
--- a/docs/snippets/react/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/react/button-story-with-blue-args.mdx.mdx b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
index 7c5e3c682781..07520139721d 100644
--- a/docs/snippets/react/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
@@ -6,6 +6,7 @@ import { Meta } from '@storybook/addon-docs';
 import { Button } from './Button';
 
 <!-- 👇 Creates specific parameters for the story -->
+
 <Meta
   title="Button"
   component={Button}
diff --git a/docs/snippets/react/button-story-with-blue-args.ts.mdx b/docs/snippets/react/button-story-with-blue-args.ts.mdx
index 1e18e4fdfec5..5cdcc6b5731e 100644
--- a/docs/snippets/react/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.ts.mdx
@@ -3,15 +3,15 @@
 
 import React from 'react';
 
-import { ComponentMeta } from '@storybook/react';
+import type { ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
diff --git a/docs/snippets/react/button-story-with-emojis.js.mdx b/docs/snippets/react/button-story-with-emojis.js.mdx
index 7254e5cc7493..e12f64ac939e 100644
--- a/docs/snippets/react/button-story-with-emojis.js.mdx
+++ b/docs/snippets/react/button-story-with-emojis.js.mdx
@@ -7,13 +7,27 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
-export const Primary = () => <Button backgroundColor="#ff0" label="Button" />;
-export const Secondary = () => <Button backgroundColor="#ff0" label="😄👍😍💯" />;
-export const Tertiary = () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => <Button backgroundColor="#ff0" label="Button" />,
+};
+
+export const Secondary = {
+  render: () => <Button backgroundColor="#ff0" label="😄👍😍💯" />,
+};
+
+export const Tertiary = {
+  render: () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-emojis.mdx.mdx b/docs/snippets/react/button-story-with-emojis.mdx.mdx
index 61a12324bdce..13423a727ecd 100644
--- a/docs/snippets/react/button-story-with-emojis.mdx.mdx
+++ b/docs/snippets/react/button-story-with-emojis.mdx.mdx
@@ -5,7 +5,8 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import { Button } from './Button';
 
-<Meta title="Button" component={Button}/>
+<Meta title="Components/Button" component={Button}/>
+
 
 <Story name="Primary">
   <Button backgroundColor="#ff0" label="Button" />
diff --git a/docs/snippets/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx
index 67c84733adf7..894a0b6ad6f1 100644
--- a/docs/snippets/react/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/react/button-story-with-emojis.ts.mdx
@@ -3,28 +3,33 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Primary: ComponentStory<typeof Button> = () => (
-  <Button backgroundColor="#ff0" label="Button" />
-);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: ComponentStoryObj<typeof Button> = {
+  render: () => <Button backgroundColor="#ff0" label="Button" />,
+};
 
-export const Secondary: ComponentStory<typeof Button> = () => (
-  <Button backgroundColor="#ff0" label="😄👍😍💯" />
-);
+export const Secondary: ComponentStoryObj<typeof Button> = {
+  render: () => <Button backgroundColor="#ff0" label="😄👍😍💯" />,
+};
 
-export const Tertiary: ComponentStory<typeof Button> = () => (
-  <Button backgroundColor="#ff0" label="📚📕📈🤓" />
+export const Tertiary: ComponentStoryObj<typeof Button> = {
+  render: () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />
 );
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-parameters.js.mdx b/docs/snippets/react/button-story-with-parameters.js.mdx
index fad4c9f8d853..d384bcee7923 100644
--- a/docs/snippets/react/button-story-with-parameters.js.mdx
+++ b/docs/snippets/react/button-story-with-parameters.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/react/button-story-with-parameters.ts.mdx b/docs/snippets/react/button-story-with-parameters.ts.mdx
index bf1efee5237b..b62a2481400b 100644
--- a/docs/snippets/react/button-story-with-parameters.ts.mdx
+++ b/docs/snippets/react/button-story-with-parameters.ts.mdx
@@ -5,11 +5,11 @@ import React from 'react';
 
 import { Button } from './Button';
 
-import { ComponentMeta } from '@storybook/react';
+import type { ComponentMeta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/react/button-story-with-sample.js.mdx b/docs/snippets/react/button-story-with-sample.js.mdx
index 77accffcd239..e31674ddd6eb 100644
--- a/docs/snippets/react/button-story-with-sample.js.mdx
+++ b/docs/snippets/react/button-story-with-sample.js.mdx
@@ -7,12 +7,19 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button', 
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
 };
 
-export const Sample = () => <Button label="hello button" />;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Sample = {
+  render: () => <Button label="hello button" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story.js.mdx b/docs/snippets/react/button-story.js.mdx
index 4942dabf0aa9..88c65efb4862 100644
--- a/docs/snippets/react/button-story.js.mdx
+++ b/docs/snippets/react/button-story.js.mdx
@@ -7,12 +7,19 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => <Button primary>Button</Button>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => <Button primary label="Button" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story.mdx-with-hooks.mdx.mdx b/docs/snippets/react/button-story.mdx-with-hooks.mdx.mdx
index 41d981b81380..68a86334b504 100644
--- a/docs/snippets/react/button-story.mdx-with-hooks.mdx.mdx
+++ b/docs/snippets/react/button-story.mdx-with-hooks.mdx.mdx
@@ -9,22 +9,23 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
+<!-- Example Button story with React Hooks. See note below related to this example. -->
+
+export 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} />;
+};
+
 <Canvas>
-  <Story name="Primary">
-    {() => {
-      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} />
-      );
-    }}
-  </Story>
+  <Story name="Primary" render={() => <ButtonWithHooks />} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story.ts.mdx b/docs/snippets/react/button-story.ts.mdx
index 50a95e304e45..28f7a2c6f17b 100644
--- a/docs/snippets/react/button-story.ts.mdx
+++ b/docs/snippets/react/button-story.ts.mdx
@@ -3,18 +3,25 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Primary: ComponentStory<typeof Button> = () => <Button primary>Button</Button>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: ComponentStoryObj<typeof Button> = {
+  render: () => <Button primary label="Button" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx
index a55ac3a4bc24..cc1ad75e73cc 100644
--- a/docs/snippets/react/button-story.with-hooks.js.mdx
+++ b/docs/snippets/react/button-story.with-hooks.js.mdx
@@ -7,9 +7,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
@@ -18,7 +18,7 @@ export default {
  * Example Button story with React Hooks.
  * See note below related to this example.
  */
-export const Primary = () => {
+const ButtonWithHooks = () => {
   // Sets the hooks for both the label and primary props
   const [value, setValue] = useState('Secondary');
   const [isPrimary, setIsPrimary] = useState(false);
@@ -32,4 +32,8 @@ export const Primary = () => {
   };
   return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
 };
+
+export const Primary = {
+  render: () => <ButtonWithHooks />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/checkbox-story-csf.js.mdx b/docs/snippets/react/checkbox-story-csf.js.mdx
index 460b871a04bc..356e9fa8486c 100644
--- a/docs/snippets/react/checkbox-story-csf.js.mdx
+++ b/docs/snippets/react/checkbox-story-csf.js.mdx
@@ -7,18 +7,20 @@ import { Checkbox } from './Checkbox';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Checkbox', 
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Checkbox',
   component: Checkbox,
 };
 
-export const allCheckboxes = () => (
-  <form>
-    <Checkbox id="Unchecked" label="Unchecked" />
-    <Checkbox id="Checked" label="Checked" checked />
-    <Checkbox appearance="secondary" id="second" label="Secondary" checked />
-  </form>
-);
+export const allCheckboxes = {
+  render: () => (
+    <form>
+      <Checkbox id="Unchecked" label="Unchecked" />
+      <Checkbox id="Checked" label="Checked" checked />
+      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+    </form>
+  ),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/checkbox-story-csf.ts.mdx b/docs/snippets/react/checkbox-story-csf.ts.mdx
index 503a2f991320..10874756af63 100644
--- a/docs/snippets/react/checkbox-story-csf.ts.mdx
+++ b/docs/snippets/react/checkbox-story-csf.ts.mdx
@@ -3,24 +3,31 @@
 
 import React from 'react';
 
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentStoryObj, ComponentStory } from '@storybook/react';
 
 import { Checkbox } from './Checkbox';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Checkbox', 
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Checkbox',
   component: Checkbox,
 } as ComponentMeta<typeof Checkbox>;
 
-export const allCheckboxes: ComponentStory<typeof Checkbox> = () => (
-  <form>
-    <Checkbox id="Unchecked" label="Unchecked" />
-    <Checkbox id="Checked" label="Checked" checked />
-    <Checkbox appearance="secondary" id="second" label="Secondary" checked />
-  </form>
-);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const allCheckboxes: ComponentStoryObj<typeof Checkbox> = {
+  render: () => (
+    <form>
+      <Checkbox id="Unchecked" label="Unchecked" />
+      <Checkbox id="Checked" label="Checked" checked />
+      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+    </form>
+  ),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/checkbox-story.mdx.mdx b/docs/snippets/react/checkbox-story.mdx.mdx
index 2621dc968d12..075b110a0676 100644
--- a/docs/snippets/react/checkbox-story.mdx.mdx
+++ b/docs/snippets/react/checkbox-story.mdx.mdx
@@ -19,27 +19,22 @@ Markdown documentation.
     name="Unchecked"
     args={{ 
       label: 'Unchecked',
-    }}>
-    {Template.bind({})}
-   </Story>
-
+    }}
+    render={(args) => <Checkbox {...args} />} />
   <Story 
     name="Checked"
     args={{ 
       label: 'Unchecked', 
       checked: true,
-    }}>
-    {Template.bind({})}
-   </Story>
-  
+    }}
+    render={(args) => <Checkbox {...args} />} />
   <Story 
-    name="Secondary"
+    name="Secondary" 
     args={{
       label: 'Secondary', 
       checked: true, 
       appearance: 'secondary',
-    }}>
-    {Template.bind({})}
-   </Story>
+    }}
+    render={(args) => <Checkbox {...args} />} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-custom-args-complex.js.mdx b/docs/snippets/react/component-story-custom-args-complex.js.mdx
index 870ce8bdd85d..5b6dc7b38c24 100644
--- a/docs/snippets/react/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.js.mdx
@@ -7,9 +7,9 @@ import { YourComponent } from './your-component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   //👇 Creates specific argTypes with options
@@ -29,16 +29,17 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
   // Makes some computations and returns something
 };
 
-const Template = ({ propertyA, propertyB, ...rest }) => {
-  //👇 Assigns the function result to a variable
-  const someFunctionResult = someFunction(propertyA, propertyB);
+export const ExampleStory = {
+  render: (args) => {
+    const { propertyA, propertyB } = args;
+    //👇 Assigns the function result to a variable
+    const someFunctionResult = someFunction(propertyA, propertyB);
 
-  return <YourComponent someProperty={someFunctionResult} {...rest} />;
-};
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args= {
-  propertyA: 'Item One',
-  propertyB: 'Another Item One',
+    return <YourComponent {...args} someProperty={someFunctionResult} />;
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-custom-args-complex.mdx.mdx b/docs/snippets/react/component-story-custom-args-complex.mdx.mdx
index fcb607b642a6..b33381e0ce27 100644
--- a/docs/snippets/react/component-story-custom-args-complex.mdx.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.mdx.mdx
@@ -5,7 +5,25 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { YourComponent } from './your-component';
 
-<Meta title="YourComponent" component={YourComponent} />
+<Meta 
+  title="YourComponent" 
+  component={YourComponent} 
+  argTypes={{
+    propertyA: {
+      options: [
+        'Item One',
+        'Item Two',
+        'Item Three'
+      ],
+    },
+    propertyB: {
+      options: [
+        'Another Item One',
+        'Another Item Two',
+        'Another Item Three'
+      ],
+    },
+  }} />
 
 <!-- 👇 A function to apply some computations -->
 
@@ -13,37 +31,17 @@ export const someFunction = (valuePropertyA, valuePropertyB) => {
   // Makes some computations and returns something
 };
 
-export const Template = ({propertyA,propertyB,...rest})=>{
-  //👇 Assigns the function result to a variable
-
-const someFunctionResult = someFunction(propertyA, propertyB);
-  return <YourComponent someProperty={someFunctionResult} {...rest} />;
-}
-
 <Canvas>
   <Story
     name="ExampleStory"
-    argTypes={{
-      propertyA: {
-        options: [
-          'Item One',
-          'Item Two',
-          'Item Three'
-        ],
-      },
-      propertyB: {
-        options: [
-          'Another Item One',
-          'Another Item Two',
-          'Another Item Three'
-        ],
-      },
-    }}
     args={{
       propertyA: 'Item One',
       propertyB: 'Another Item One',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => {
+      const { propertyA, propertyB } = args;
+      const someFunctionResult = someFunction(propertyA, propertyB);
+      return <YourComponent {...args} someProperty={someFunctionResult} />;
+    }} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
index be64e1f14af5..d658823f93ad 100644
--- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
@@ -3,26 +3,21 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { YourComponent } from './your-component';
 
-//👇 Some function to demonstrate the behavior
-const someFunction = (valuePropertyA, valuePropertyB) => {
-  // Makes some computations and returns something
-};
-
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   //👇 Creates specific argTypes with options
   argTypes: {
     propertyA: {
       options: ['Item One', 'Item Two', 'Item Three'],
-      control: { type: 'select' } // Automatically inferred when 'options' is defined
+      control: { type: 'select' }, // Automatically inferred when 'options' is defined
     },
     propertyB: {
       options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
@@ -30,16 +25,22 @@ export default {
   },
 } as ComponentMeta<typeof YourComponent>;
 
-const Template: ComponentStory<typeof YourComponent> = ({ propertyA, propertyB, ...rest }) => {
-  //👇 Assigns the result from the function to a variable
-  const someFunctionResult = someFunction(propertyA, propertyB);
-
-  return <YourComponent someProperty={someFunctionResult} {...rest} />;
+//👇 Some function to demonstrate the behavior
+const someFunction = (valuePropertyA, valuePropertyB) => {
+  // Makes some computations and returns something
 };
 
-export const ExampleStory = Template.bind({});
-ExampleStory.args= {
-  propertyA: 'Item One',
-  propertyB: 'Another Item One',
+export const ExampleStory: ComponentStoryObj<typeof YourComponent> = {
+  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',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-figma-integration.js.mdx b/docs/snippets/react/component-story-figma-integration.js.mdx
index 57ecc2750431..d67bccc53ba6 100644
--- a/docs/snippets/react/component-story-figma-integration.js.mdx
+++ b/docs/snippets/react/component-story-figma-integration.js.mdx
@@ -7,21 +7,19 @@ import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = () => <MyComponent />;
-
-export const Example = Template.bind({});
-Example.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/Sample-File',
+export const Example = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-figma-integration.mdx.mdx b/docs/snippets/react/component-story-figma-integration.mdx.mdx
index 455cb3a10eaa..cc29d5bb78b9 100644
--- a/docs/snippets/react/component-story-figma-integration.mdx.mdx
+++ b/docs/snippets/react/component-story-figma-integration.mdx.mdx
@@ -9,8 +9,6 @@ import { MyComponent } from './MyComponent';
 
 <Meta title="FigmaExample" component={MyComponent} decorators={[withDesign]} />
 
-export const Template = () => <MyComponent />;
-
 <Canvas>
   <Story
     name="Example"
@@ -19,9 +17,8 @@ export const Template = () => <MyComponent />;
         type: 'figma',
         url: 'https://www.figma.com/file/Sample-File',
       },
-    }}
-  >
-  {Template.bind({})}
+    }}>
+    <MyComponent />
   </Story>
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx
index 1b54ea82e143..471b76a0db01 100644
--- a/docs/snippets/react/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/react/component-story-figma-integration.ts.mdx
@@ -3,27 +3,25 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 } as ComponentMeta<typeof YourComponent>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof MyComponent> = () => <MyComponent />;
-
-export const Example = Template.bind({});
-Example.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/Sample-File',
+export const Example: ComponentStoryObj<typeof MyComponent> = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/react/component-story-mdx-story-by-name.mdx.mdx
index 327ceab03a2d..5c9a5ce7fa91 100644
--- a/docs/snippets/react/component-story-mdx-story-by-name.mdx.mdx
+++ b/docs/snippets/react/component-story-mdx-story-by-name.mdx.mdx
@@ -7,13 +7,16 @@ import { Button } from './Button';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) => <Button {...args} />;
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
 
 <Story 
   name="Basic" 
   args={{ 
     label: 'hello' 
-  }}>
-  {Template.bind({})}
-<Story>
+  }}
+  render={(args)=> <Button {...args} />} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-cdn.js.mdx b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
index 1343f1e1f692..1b32c6eae4c0 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
@@ -1,15 +1,22 @@
 ```js
-// MyComponent.stories.js|jsx
+// MyComponent.stories.js|jsx|ts|tsx
 
 import React from 'react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
-export const WithAnImage = () => <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-cdn.mdx.mdx b/docs/snippets/react/component-story-static-asset-cdn.mdx.mdx
index c2be3438add0..43536bd96a7b 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.mdx.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.mdx.mdx
@@ -7,8 +7,7 @@ import { MyComponent } from './MyComponent';
 
 <Meta title="img" component={MyComponent} />
 
-<Story 
-  name="WithAnImage">
+<Story name="WithAnImage">
   <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />}
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-cdn.ts.mdx b/docs/snippets/react/component-story-static-asset-cdn.ts.mdx
index 902c61d9baca..27782d0de62c 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.ts.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.ts.mdx
@@ -3,15 +3,17 @@
 
 import React from 'react';
 
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 } as Meta;
 
-export const WithAnImage = () => <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />;
+export const WithAnImage = {
+  render: () => <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-with-import.js.mdx b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
index 2e0e9672a329..ad03dcac5056 100644
--- a/docs/snippets/react/component-story-static-asset-with-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js|jsx
+// MyComponent.stories.js|jsx|ts|tsx
 
 import React from 'react';
 
@@ -7,9 +7,9 @@ import imageFile from './static/image.png';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
@@ -18,5 +18,12 @@ const image = {
   alt: 'my image',
 };
 
-export const WithAnImage = () => <img src={image.src} alt={image.alt} />;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => <img src={image.src} alt={image.alt} />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-with-import.ts.mdx b/docs/snippets/react/component-story-static-asset-with-import.ts.mdx
index 4d5665e7cf05..cb70866d6f3a 100644
--- a/docs/snippets/react/component-story-static-asset-with-import.ts.mdx
+++ b/docs/snippets/react/component-story-static-asset-with-import.ts.mdx
@@ -5,13 +5,13 @@ import React from 'react';
 
 import imageFile from './static/image.png';
 
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 } as Meta;
 
@@ -20,5 +20,13 @@ const image = {
   alt: 'my image',
 };
 
-export const WithAnImage = () => <img src={image.src} alt={image.alt} />;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+
+export const WithAnImage = {
+  render: () => <img src={image.src} alt={image.alt} />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-without-import.js.mdx b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
index 1c9cfe4fe771..b53e69dbdd19 100644
--- a/docs/snippets/react/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
@@ -1,16 +1,18 @@
 ```js
-// MyComponent.stories.js|jsx
+// MyComponent.stories.js|jsx|ts|tsx
 
 import React from 'react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
 // Assume image.png is located in the "public" directory.
-export const WithAnImage = () => <img src="/image.png" alt="my image" />;
+export const WithAnImage = {
+  render: () => <img src="/image.png" alt="my image" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
index 4f47a7c9718d..94806a2821c2 100644
--- a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
+++ b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
@@ -5,13 +5,13 @@ import React from 'react';
 
 import imageFile from './static/image.png';
 
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 } as Meta;
 
@@ -20,5 +20,7 @@ const image = {
   alt: 'my image',
 };
 // Assume image.png is located in the "public" directory.
-export const WithAnImage = () => <img src="/image.png" alt="my image" />;
+export const WithAnImage = {
+  render: () => <img src="/image.png" alt="my image" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-with-accessibility.js.mdx b/docs/snippets/react/component-story-with-accessibility.js.mdx
index 6f46af0ede4f..469d4e7d41b2 100644
--- a/docs/snippets/react/component-story-with-accessibility.js.mdx
+++ b/docs/snippets/react/component-story-with-accessibility.js.mdx
@@ -7,8 +7,8 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading to learn how to generate automatic titles
+   */
   title: 'Accessibility testing',
   component: Button,
   argTypes: {
@@ -16,19 +16,19 @@ export default {
   },
 };
 
-const Template = (args) => <Button {...args} />;
-
 // This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
-  primary: false,
-  label: 'Button',
+export const Accessible = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
 };
 
 // This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
-  ...Accessible.args,
-  backgroundColor: 'red',
+export const Inaccessible = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-with-accessibility.mdx.mdx b/docs/snippets/react/component-story-with-accessibility.mdx.mdx
index 280fe7353e17..54edba8df817 100644
--- a/docs/snippets/react/component-story-with-accessibility.mdx.mdx
+++ b/docs/snippets/react/component-story-with-accessibility.mdx.mdx
@@ -15,8 +15,12 @@ import { Button } from './Button';
       }
     }
   }} />
-
-export const Template = (args) => <Button {...args} />;
+  
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
 
 ## This is an accessible story
 
@@ -25,9 +29,9 @@ export const Template = (args) => <Button {...args} />;
   args={{ 
     primary: false,
     label: 'Button'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args)=> <Button {...args} />} />
+
 
 ## This is not
 
@@ -37,7 +41,6 @@ export const Template = (args) => <Button {...args} />;
     primary: false, 
     label: 'Button',
     backgroundColor: 'red'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args)=> <Button {...args} />} />
 ```
diff --git a/docs/snippets/react/component-story-with-accessibility.ts.mdx b/docs/snippets/react/component-story-with-accessibility.ts.mdx
index 84fd419b4457..9342cf921e37 100644
--- a/docs/snippets/react/component-story-with-accessibility.ts.mdx
+++ b/docs/snippets/react/component-story-with-accessibility.ts.mdx
@@ -3,14 +3,14 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading to learn how to generate automatic titles
+   */
   title: 'Accessibility testing',
   component: Button,
   argTypes: {
@@ -18,20 +18,19 @@ export default {
   },
 } as ComponentMeta<typeof Button>;
 
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
 // This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
-  primary: false,
-  label: 'Button',
+export const Accessible: ComponentStoryObj<typeof Button> = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
 };
 
 // This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
-  ...Accessible.args,
-  backgroundColor: 'red',
+export const Inaccessible: ComponentStoryObj<typeof Button> = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-with-custom-render-function.js.mdx b/docs/snippets/react/component-story-with-custom-render-function.js.mdx
new file mode 100644
index 000000000000..eaf97ebc9b4a
--- /dev/null
+++ b/docs/snippets/react/component-story-with-custom-render-function.js.mdx
@@ -0,0 +1,32 @@
+```js
+// MyComponent.stories.js|jsx
+
+import React from 'react';
+
+import { Layout } from './Layout';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+// This story uses a render function to fully control how the component renders.
+export const Example = {
+  render: () => (
+    <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  ),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-with-custom-render-function.ts.mdx b/docs/snippets/react/component-story-with-custom-render-function.ts.mdx
new file mode 100644
index 000000000000..d23f3ba4e32c
--- /dev/null
+++ b/docs/snippets/react/component-story-with-custom-render-function.ts.mdx
@@ -0,0 +1,34 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+
+import { Layout } from './Layout';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+} as ComponentMeta<typeof MyComponent>;
+
+// This story uses a render function to fully control how the component renders.
+export const Example: ComponentStoryObj<typeof MyComponent> = {
+  render: () => (
+    <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  ),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
index af165ffcc2ad..b8d5d408b4fa 100644
--- a/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
+++ b/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
@@ -9,15 +9,6 @@ import { graphql } from 'msw';
 
 import { DocumentScreen } from './YourPage';
 
-export default {
-  /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'DocumentScreen',
-  component: DocumentScreen,
-};
-
 const mockedClient = new ApolloClient({
   uri: 'https://your-graphql-endpoint',
   cache: new InMemoryCache(),
@@ -82,34 +73,46 @@ const TestData = {
   ],
 };
 
-const PageTemplate = () => (
-  <ApolloProvider client={mockedClient}>
-    <DocumentScreen />
-  </ApolloProvider>
-);
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(ctx.data(TestData));
-    }),
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
+  component: DocumentScreen,
+  decorators: [
+    (Story) => (
+      <ApolloProvider client={mockedClient}>
+        <Story />
+      </ApolloProvider>
+    ),
   ],
 };
 
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(
-        ctx.delay(800),
-        ctx.errors([
-          {
-            message: 'Access denied',
-          },
-        ])
-      );
-    }),
-  ],
+export const MockedSuccess = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(ctx.data(TestData));
+      }),
+    ],
+  },
+};
+
+export const MockedError = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(
+          ctx.delay(800),
+          ctx.errors([
+            {
+              message: 'Access denied',
+            },
+          ])
+        );
+      }),
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
index 07aba40a9fe6..aa1232cd9153 100644
--- a/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
+++ b/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
@@ -9,9 +9,9 @@ import { DocumentScreen } from './YourPage';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
@@ -65,23 +65,23 @@ const TestData = {
   ],
 };
 
-const PageTemplate = () => <DocumentScreen />;
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-      return res(ctx.json(TestData));
-    }),
-  ],
+export const MockedSuccess = {
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+        return res(ctx.json(TestData));
+      }),
+    ],
+  },
 };
 
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-      return res(ctx.delay(800), ctx.status(403));
-    }),
-  ],
+export const MockedError = {
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+        return res(ctx.delay(800), ctx.status(403));
+      }),
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/form-story-component-with-play-function.js.mdx b/docs/snippets/react/form-story-component-with-play-function.js.mdx
deleted file mode 100644
index 78dfc8aa8f51..000000000000
--- a/docs/snippets/react/form-story-component-with-play-function.js.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-```js
-// Form.stories.js|jsx|ts|tsx
-
-import { userEvent, within } from '@storybook/testing-library';
-
-import { LoginForm } from './LoginForm';
-
-export default {
-  component: LoginForm,
-};
-
-export const FilledForm = {
-  play: async ({ args, canvasElement }) => {
-
-    // Starts querying the component from its root element
-    const canvas = within(canvasElement);
-
-    await userEvent.type(canvas.getByTestId('email'), 'email');
-    await userEvent.type(canvas.getByTestId('password'), 'password');
-    
-    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(canvas.getByRole('button'));
-  },
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-expanded.js.mdx b/docs/snippets/react/list-story-expanded.js.mdx
index c8caeb837367..e3569cded2a8 100644
--- a/docs/snippets/react/list-story-expanded.js.mdx
+++ b/docs/snippets/react/list-story-expanded.js.mdx
@@ -8,26 +8,35 @@ import { ListItem } from './ListItem';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const Empty = (args) => <List {...args} />;
+export const Empty = {};
 
-export const OneItem = (args) => (
-  <List {...args}>
-    <ListItem />
-  </List>
-);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
 
-export const ManyItems = (args) => (
-  <List {...args}>
-    <ListItem />
-    <ListItem />
-    <ListItem />
-  </List>
-);
+export const ManyItems = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-expanded.ts.mdx b/docs/snippets/react/list-story-expanded.ts.mdx
index 78f814a4add9..03b0424da88b 100644
--- a/docs/snippets/react/list-story-expanded.ts.mdx
+++ b/docs/snippets/react/list-story-expanded.ts.mdx
@@ -3,33 +3,42 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 } as ComponentMeta<typeof List>;
 
-export const Empty: ComponentStory<typeof List> = (args) => <List {...args} />;
+export const Empty: ComponentStoryObj<typeof List> = {};
 
-export const OneItem: ComponentStory<typeof List> = (args) => (
-  <List {...args}>
-    <ListItem />
-  </List>
-);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem: ComponentStoryObj<typeof List> = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
 
-export const ManyItems: ComponentStory<typeof List> = (args) => (
-  <List {...args}>
-    <ListItem />
-    <ListItem />
-    <ListItem />
-  </List>
-);
+export const ManyItems: ComponentStoryObj<typeof List> = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-reuse-data.js.mdx b/docs/snippets/react/list-story-reuse-data.js.mdx
index ca1159e54c60..296c1b80b799 100644
--- a/docs/snippets/react/list-story-reuse-data.js.mdx
+++ b/docs/snippets/react/list-story-reuse-data.js.mdx
@@ -11,18 +11,26 @@ import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const ManyItems = (args) => (
-  <List {...args}>
-    <Selected {...Selected.args} />
-    <Unselected {...Unselected.args} />
-    <Unselected {...Unselected.args} />
-  </List>
-);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+
+export const ManyItems = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.args} />
+      <ListItem {...Unselected.args} />
+      <ListItem {...Unselected.args} />
+    </List>
+  ),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-reuse-data.ts.mdx b/docs/snippets/react/list-story-reuse-data.ts.mdx
index 231dfa5662e9..61d40e14af88 100644
--- a/docs/snippets/react/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/react/list-story-reuse-data.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -13,18 +13,25 @@ import * as ListItemStories from './ListItemStories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 } as ComponentMeta<typeof List>;
 
-export const ManyItems: ComponentStory<typeof List> = (args) => (
-  <List {...args}>
-    <Selected {...ListItemStories.Selected.args} />
-    <Unselected {...ListItemStories.Unselected.args} />
-    <Unselected {...ListItemStories.Unselected.args} />
-  </List>
-);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems: ComponentStoryObj<typeof List> = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.args} />
+      <ListItem {...Unselected.args} />
+      <ListItem {...Unselected.args} />
+    </List>
+  ),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-starter.js.mdx b/docs/snippets/react/list-story-starter.js.mdx
index d03dbc9ddd30..66ad660c9fc8 100644
--- a/docs/snippets/react/list-story-starter.js.mdx
+++ b/docs/snippets/react/list-story-starter.js.mdx
@@ -7,13 +7,14 @@ import { List } from './List';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
 // Always an empty list, not super interesting
-const Template = (args) => <List {...args} />;
+
+export const Empty = {};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-starter.ts.mdx b/docs/snippets/react/list-story-starter.ts.mdx
index 608c8383fc68..fa887d219714 100644
--- a/docs/snippets/react/list-story-starter.ts.mdx
+++ b/docs/snippets/react/list-story-starter.ts.mdx
@@ -3,19 +3,20 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 } as ComponentMeta<typeof List>;
 
 //👇 Always an empty list, not super interesting
-const Template: ComponentStory<typeof List> = (args) => <List {...args} />;
+
+const Template: ComponentStoryObj<typeof List> = {};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-template.js.mdx b/docs/snippets/react/list-story-template.js.mdx
index c43e38e571b2..2b2ef5cda2c4 100644
--- a/docs/snippets/react/list-story-template.js.mdx
+++ b/docs/snippets/react/list-story-template.js.mdx
@@ -11,30 +11,41 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-const ListTemplate = ({ items, ...args }) => (
-  <List>
-    {items.map((item) => (
-      <ListItem {...item} />
-    ))}
-  </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 = ListTemplate.bind({});
-Empty.args = { items: [] };
+export const Empty = {
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+};
 
-export const OneItem = ListTemplate.bind({});
-OneItem.args = {
-  items: [
-    {
-      ...Unchecked.args,
-    },
-  ],
+export const OneItem = {
+  ...ListTemplate,
+  args: {
+    items: [
+      {
+        ...Unchecked.args,
+      },
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx
index b8b8e736411d..6a337e138c58 100644
--- a/docs/snippets/react/list-story-template.ts.mdx
+++ b/docs/snippets/react/list-story-template.ts.mdx
@@ -1,9 +1,9 @@
-```js
+```ts
 // List.stories.ts|tsx
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -13,32 +13,41 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * Seehttps://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 } as ComponentMeta<typeof List>;
 
-const ListTemplate: ComponentStory<typeof ButtonGroup> = (args) => {
-  const { items } = args;
-  return (
-    <List>
-      {items.map((item) => (
-        <ListItem {...item} />
-      ))}
-  </List>
-)};
-
-export const Empty = ListTemplate.bind({});
-Empty.args = { items: [] };
-
-export const OneItem = ListTemplate.bind({});
-OneItem.args = {
-  items: [
-    {
-      ...Unchecked.args,
-    },
-  ],
+//👇 The ListTemplate construct will be spread to the existing stories.
+const ListTemplate: ComponentStoryObj<typeof List> = {
+  render: ({ items, ...args }) => {
+    return (
+      <List>
+        {items.map((item) => (
+          <ListItem {...item} />
+        ))}
+      </List>
+    );
+  },
+};
+
+export const Empty = {
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+};
+
+export const OneItem = {
+  ...ListTemplate,
+  args: {
+    items: [
+      {
+        ...Unchecked.args,
+      },
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx
index d0669a6bd8b2..760f91d53d66 100644
--- a/docs/snippets/react/list-story-unchecked.js.mdx
+++ b/docs/snippets/react/list-story-unchecked.js.mdx
@@ -10,9 +10,9 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx
index 07da8038142d..04ca37e7f96f 100644
--- a/docs/snippets/react/list-story-unchecked.ts.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts.mdx
@@ -12,7 +12,7 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'List',
diff --git a/docs/snippets/react/list-story-with-subcomponents.js.mdx b/docs/snippets/react/list-story-with-subcomponents.js.mdx
index e81a24462c7d..190656650ae2 100644
--- a/docs/snippets/react/list-story-with-subcomponents.js.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.js.mdx
@@ -8,19 +8,21 @@ import { ListItem } from './ListItem';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
 
-export const Empty = (args) => <List {...args} />;
+export const Empty = {};
 
-export const OneItem = (args) => (
-  <List {...args}>
-    <ListItem />
-  </List>
-);
+export const OneItem = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-with-subcomponents.ts.mdx b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
index 5c0b520bf1df..b5cada02e91c 100644
--- a/docs/snippets/react/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
@@ -3,26 +3,28 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 } as ComponentMeta<typeof List>;
 
-const Empty: ComponentStory<typeof List> = (args) => <List {...args} />;
+export const Empty: ComponentStoryObj<typeof List> = {};
 
-const OneItem: ComponentStory<typeof List> = (args) =>(
-  <List {...args}>
-    <ListItem />
-  </List>
-);
+export const OneItem: ComponentStoryObj<typeof List> = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
 ```
diff --git a/docs/snippets/react/list-story-with-unchecked-children.js.mdx b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
index 0a56226a15eb..0cf8714df29f 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.js.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'List',
diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
index f77d847ad0dc..4c71fe6e5a00 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
@@ -12,7 +12,7 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'List',
diff --git a/docs/snippets/react/loader-story.js.mdx b/docs/snippets/react/loader-story.js.mdx
index d048c0f36bb4..a1e44437d462 100644
--- a/docs/snippets/react/loader-story.js.mdx
+++ b/docs/snippets/react/loader-story.js.mdx
@@ -9,17 +9,21 @@ import { TodoItem } from './TodoItem';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Examples/Loader'
   component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
 };
 
-export const Primary = (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />;
-Primary.loaders = [
+export const Primary = {
+  loaders: [
     async () => ({
-      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+      todo: await (
+        await fetch('https://jsonplaceholder.typicode.com/todos/1')
+      ).json(),
     }),
-];
+  ],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/loader-story.mdx.mdx b/docs/snippets/react/loader-story.mdx.mdx
index 9298c9bfcd58..566cd5e39ca8 100644
--- a/docs/snippets/react/loader-story.mdx.mdx
+++ b/docs/snippets/react/loader-story.mdx.mdx
@@ -9,6 +9,12 @@ import { TodoItem } from './TodoItem';
 
 <Meta title="Examples/Loader" component={TodoItem} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
+
 <Story
   name="Primary"
   loaders={[
@@ -17,9 +23,6 @@ import { TodoItem } from './TodoItem';
         await fetch('https://jsonplaceholder.typicode.com/todos/1')
       ).json(),
     }),
-  ]}>
-  {(args, { loaded: { todo } }) => (
-    <TodoItem {...args} todo={todo} />
-  )}
-</Story
+  ]}
+  render={(args, { loaded: { todo } }) => <TodoItem {...args} todo={todo} />} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/login-form-with-play-function.js.mdx b/docs/snippets/react/login-form-with-play-function.js.mdx
index ca6e59d02331..686ebc05e65b 100644
--- a/docs/snippets/react/login-form-with-play-function.js.mdx
+++ b/docs/snippets/react/login-form-with-play-function.js.mdx
@@ -1,9 +1,7 @@
 ```js
 // LoginForm.stories.js|jsx
 
-import React from 'react';
-
-import { within, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { expect } from '@storybook/jest';
 
@@ -11,35 +9,34 @@ import { LoginForm } from './LoginForm';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Form',
   component: LoginForm,
 };
 
-const Template = (args) => <LoginForm {...args} />;
+export const EmptyForm = {};
 
-export const EmptyForm = Template.bind({});
+export const FilledForm = {
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
 
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  const canvas = within(canvasElement);
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
 
-  // 👇 Simulate interactions with the component
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
-  
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
+    // See https://storybook.js.org/docs/7.0/react/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();
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/login-form-with-play-function.mdx.mdx b/docs/snippets/react/login-form-with-play-function.mdx.mdx
index 327a8ae55c42..a37280ade7f4 100644
--- a/docs/snippets/react/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/react/login-form-with-play-function.mdx.mdx
@@ -11,16 +11,14 @@ import { LoginForm } from './LoginForm';
 
 <Meta title="Form" component={LoginForm} />
 
-export const Template = (args) => <LoginForm {...args} />;
 
 <Canvas>
   <Story name="Empty Form">
-    {Template.bind({})}
+    <LoginForm />
   </Story>
-
   <Story
     name="Filled Form"
-    play={async ({ canvasElement }) => {
+    play={ async ({ canvasElement }) => {
       // Starts querying the component from its root element
       const canvas = within(canvasElement);
 
@@ -29,7 +27,7 @@ export const Template = (args) => <LoginForm {...args} />;
 
       await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-      // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+      // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
       await userEvent.click(canvas.getByRole('button'));
 
       // 👇 Assert DOM structure
@@ -39,7 +37,7 @@ export const Template = (args) => <LoginForm {...args} />;
         )
       ).toBeInTheDocument();
     }}>
-    {Template.bind({})}
+    <LoginForm />
   </Story>
 </Canvas>
 ```
diff --git a/docs/snippets/react/login-form-with-play-function.ts.mdx b/docs/snippets/react/login-form-with-play-function.ts.mdx
index 05b3e8395739..da31e63ec267 100644
--- a/docs/snippets/react/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/react/login-form-with-play-function.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { within, userEvent } from '@storybook/testing-library';
 
@@ -13,35 +13,34 @@ import { LoginForm } from './LoginForm';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Form',
   component: LoginForm,
 } as ComponentMeta<typeof LoginForm>;
 
-const Template: ComponentStory<typeof LoginForm> = (args) => <LoginForm {...args} />;
+export const EmptyForm: ComponentStoryObj<typeof LoginForm> = {};
 
-export const EmptyForm = Template.bind({});
+export const FilledForm: ComponentStoryObj<typeof LoginForm> = {
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
 
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  const canvas = within(canvasElement);
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
 
-  // 👇 Simulate interactions with the component
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
-  
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
+    // See https://storybook.js.org/docs/7.0/react/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();
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/react/mdx-canvas-multiple-stories.mdx.mdx
index 65bc82c2e41f..8ac8e7702f91 100644
--- a/docs/snippets/react/mdx-canvas-multiple-stories.mdx.mdx
+++ b/docs/snippets/react/mdx-canvas-multiple-stories.mdx.mdx
@@ -7,7 +7,11 @@ import { Badge } from './Badge';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => <Badge {...args } />;
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story 
@@ -15,24 +19,21 @@ export const Template = (args) => <Badge {...args } />;
     args={{
       status: 'warning', 
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => <Badge {...args } />} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral', 
       label: 'Neutral',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => <Badge {...args } />} />
   <Story 
     name="error"
     args={{
       status: 'error', 
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => <Badge {...args } />} />
 </Canvas>
 ```
diff --git a/docs/snippets/react/mock-context-container-global.js.mdx b/docs/snippets/react/mock-context-container-global.js.mdx
index 0d9582e5be1c..057c8f69120e 100644
--- a/docs/snippets/react/mock-context-container-global.js.mdx
+++ b/docs/snippets/react/mock-context-container-global.js.mdx
@@ -16,6 +16,5 @@ const AppDecorator = (storyFn) => {
     <GlobalContainerContext.Provider value={context}>{storyFn()}</GlobalContainerContext.Provider>
   );
 };
-
-addDecorator(AppDecorator);
+export const decorators = [AppDecorator];
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/mock-context-container.js.mdx b/docs/snippets/react/mock-context-container.js.mdx
index ca752289d6d8..7184cafc16f4 100644
--- a/docs/snippets/react/mock-context-container.js.mdx
+++ b/docs/snippets/react/mock-context-container.js.mdx
@@ -7,13 +7,13 @@ import { ProfilePage } from './ProfilePage';
 import { UserPosts } from './UserPosts';
 
 //👇 Imports a specific story from a story file
-import { normal as UserFriendsNormal } from './UserFriends.stories';
+import { Normal as UserFriendsNormal } from './UserFriends.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ProfilePage',
   component: ProfilePage,
 };
@@ -34,11 +34,11 @@ const context = {
   UserFriendsContainer: UserFriendsNormal,
 };
 
-export const normal = () => {
-  return (
+export const Normal = {
+  render: () => (
     <ProfilePageContext.Provider value={context}>
       <ProfilePage {...ProfilePageProps} />
     </ProfilePageContext.Provider>
-  );
+  ),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/mock-context-create.js.mdx b/docs/snippets/react/mock-context-create.js.mdx
index 5c935b9476e3..ee65d1327e48 100644
--- a/docs/snippets/react/mock-context-create.js.mdx
+++ b/docs/snippets/react/mock-context-create.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ProfilePageContext.js | ProfilePageContext.jsx
+// ProfilePageContext.js|jsx
 
 import { createContext } from 'react';
 
diff --git a/docs/snippets/react/my-component-play-function-alt-queries.js.mdx b/docs/snippets/react/my-component-play-function-alt-queries.js.mdx
index 129856ff200d..2b1101f8e042 100644
--- a/docs/snippets/react/my-component-play-function-alt-queries.js.mdx
+++ b/docs/snippets/react/my-component-play-function-alt-queries.js.mdx
@@ -1,32 +1,30 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'QueryMethods',
   component: MyComponent,
 };
 
-const Template = (args) => <MyComponent {...args} />;
-
-export const ExampleWithRole = Template.bind({});
-ExampleWithRole.play = async () => {
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+export const ExampleWithRole = {
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+  },
 };
 
-export const ExampleWithText = Template.bind({});
-ExampleWithText.play = async () => {
-  // The play function interacts with the component and looks for the text
-  await screen.findByText('example string');
+export const ExampleWithText = {
+  play: async () => {
+    // The play function interacts with the component and looks for the text
+    await screen.findByText('example string');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-alt-queries.mdx.mdx b/docs/snippets/react/my-component-play-function-alt-queries.mdx.mdx
index 1ba347c2964b..8ece56cb44a1 100644
--- a/docs/snippets/react/my-component-play-function-alt-queries.mdx.mdx
+++ b/docs/snippets/react/my-component-play-function-alt-queries.mdx.mdx
@@ -9,23 +9,21 @@ import { MyComponent } from './MyComponent';
 
 <Meta title="QueryMethods" component={MyComponent} />
 
-export const Template = (args) => <MyComponent {...args} />;
-
 <Story
   name="ExampleWithRole"
-  play={async () => {
-    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(screen.getByRole('button', { name: / button label/i }));
   }}>
-  {Template.bind({})}
+  <MyComponent />
 </Story>
 
 <Story
   name="ExampleWithText"
-  play={async () => {
+  play={ async () => {
     // The play function interacts with the component and looks for the text
     await screen.findByText('example string');
   }}>
-  {Template.bind({})}
+  <MyComponent />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
index 753b76843dce..8b257888c313 100644
--- a/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -11,24 +11,24 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'QueryMethods',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
-
-export const ExampleWithRole = Template.bind({});
-ExampleWithRole.play = async () => {
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+export const ExampleWithRole: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+  },
 };
 
-export const ExampleWithText = Template.bind({});
-ExampleWithText.play = async () => {
-  // The play function interacts with the component and looks for the text
-  await screen.findByText('example string');
+export const ExampleWithText: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    // The play function interacts with the component and looks for the text
+    await screen.findByText('example string');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-composition.js.mdx b/docs/snippets/react/my-component-play-function-composition.js.mdx
index a6eb763cf286..7b17b60735a9 100644
--- a/docs/snippets/react/my-component-play-function-composition.js.mdx
+++ b/docs/snippets/react/my-component-play-function-composition.js.mdx
@@ -1,38 +1,37 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args) => <MyComponent {...args} />;
-
-export const FirstStory = Template.bind({});
-FirstStory.play = async () => {
-  await userEvent.type(screen.getByTestId('an-element'), 'example-value');
+export const FirstStory = {
+  play: async () => {
+    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  },
 };
 
-export const SecondStory = Template.bind({});
-SecondStory.play = async () => {
-  await userEvent.type(screen.getByTestId('other-element'), 'another value');
+export const SecondStory = {
+  play: async () => {
+    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  },
 };
 
-export const CombinedStories = Template.bind({});
-CombinedStories.play = async () => {
-  // Runs the FirstStory and Second story play function before running this story's play function
-  await FirstStory.play();
-  await SecondStory.play();
-  await userEvent.type(screen.getByTestId('another-element'), 'random value');
+export const CombinedStories = {
+  play: async () => {
+    // Runs the FirstStory and Second story play function before running this story's play function
+    await FirstStory.play();
+    await SecondStory.play();
+    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-composition.ts.mdx b/docs/snippets/react/my-component-play-function-composition.ts.mdx
index 963c4333adb2..5506b0b02e6f 100644
--- a/docs/snippets/react/my-component-play-function-composition.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-composition.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -11,30 +11,31 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/eact/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
-
-export const FirstStory = Template.bind({});
-FirstStory.play = async () => {
-  await userEvent.type(screen.getByTestId('an-element'), 'example-value');
+export const FirstStory: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  },
 };
 
-export const SecondStory = Template.bind({});
-SecondStory.play = async () => {
-  await userEvent.type(screen.getByTestId('other-element'), 'another value');
+export const SecondStory: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  },
 };
 
-export const CombinedStories = Template.bind({});
-CombinedStories.play = async () => {
-  // Runs the FirstStory and Second story play function before running this story's play function
-  await FirstStory.play();
-  await SecondStory.play();
-  await userEvent.type(screen.getByTestId('another-element'), 'random value');
+export const CombinedStories: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    // Runs the FirstStory and Second story play function before running this story's play function
+    await FirstStory.play();
+    await SecondStory.play();
+    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-waitfor.js.mdx b/docs/snippets/react/my-component-play-function-waitfor.js.mdx
index 644d84dcd2ba..e6ba8ea5d22b 100644
--- a/docs/snippets/react/my-component-play-function-waitfor.js.mdx
+++ b/docs/snippets/react/my-component-play-function-waitfor.js.mdx
@@ -1,39 +1,36 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { screen, userEvent, waitFor } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithAsync',
   component: MyComponent,
 };
 
-const Template = (args) => <MyComponent {...args} />;
-
-export const ExampleAsyncStory = Template.bind({});
-ExampleAsyncStory.play = async () => {
-  const Input = screen.getByLabelText('Username', {
-    selector: 'input',
-  });
+export const ExampleAsyncStory = {
+  play: async () => {
+    const Input = screen.getByLabelText('Username', {
+      selector: 'input',
+    });
 
-  await userEvent.type(Input, 'WrongInput', {
-    delay: 100,
-  });
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const Submit = screen.getByRole('button');
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
 
-  await userEvent.click(Submit);
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = screen.getByRole('button');
+    await userEvent.click(Submit);
 
-  await waitFor(async () => {
-    await userEvent.hover(screen.getByTestId('error'));
-  });
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-waitfor.mdx.mdx b/docs/snippets/react/my-component-play-function-waitfor.mdx.mdx
index 5f8283aec0ff..ba2de20bb456 100644
--- a/docs/snippets/react/my-component-play-function-waitfor.mdx.mdx
+++ b/docs/snippets/react/my-component-play-function-waitfor.mdx.mdx
@@ -9,11 +9,9 @@ import { MyComponent } from './MyComponent';
 
 <Meta title="WithAsync" component={MyComponent}/>
 
-export const Template = (args) => <MyComponent {...args} />;
-
 <Story
   name="ExampleAsyncStory"
-  play={async () => {
+  play={ async () => {
     const Input = screen.getByLabelText('Username', {
       selector: 'input',
     });
@@ -22,7 +20,7 @@ export const Template = (args) => <MyComponent {...args} />;
       delay: 100,
     });
     
-    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     const Submit = screen.getByRole('button');
 
     await userEvent.click(Submit);
@@ -31,6 +29,6 @@ export const Template = (args) => <MyComponent {...args} />;
       await userEvent.hover(screen.getByTestId('error'));
     });
   }}>
-  {Template.bind({})}
+  <MyComponent />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-waitfor.ts.mdx b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
index 9244723af719..e145f8962501 100644
--- a/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent, waitFor } from '@storybook/testing-library';
 
@@ -11,31 +11,30 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithAsync',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+export const ExampleAsyncStory: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    const Input = screen.getByLabelText('Username', {
+      selector: 'input',
+    });
 
-export const ExampleAsyncStory = Template.bind({});
-ExampleAsyncStory.play = async () => {
-  const Input = screen.getByLabelText('Username', {
-    selector: 'input',
-  });
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
 
-  await userEvent.type(Input, 'WrongInput', {
-    delay: 100,
-  });
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const Submit = screen.getByRole('button');
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = screen.getByRole('button');
+    await userEvent.click(Submit);
 
-  await userEvent.click(Submit);
-
-  await waitFor(async () => {
-    await userEvent.hover(screen.getByTestId('error'));
-  });
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-canvas.js.mdx b/docs/snippets/react/my-component-play-function-with-canvas.js.mdx
index 8919922d972b..49a4d60c8551 100644
--- a/docs/snippets/react/my-component-play-function-with-canvas.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-canvas.js.mdx
@@ -1,30 +1,27 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { getByRole, userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithCanvasElement',
   component: MyComponent,
 };
 
-const Template = () => <MyComponent {...args} />;
-
-export const ExampleStory = Template.bind({});
-ExampleStory.play = async ({ canvasElement }) => {
-  // Assigns canvas to the component root element
-  const canvas = within(canvasElement);
+export const ExampleStory = {
+  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('another-element'));
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-canvas.mdx.mdx b/docs/snippets/react/my-component-play-function-with-canvas.mdx.mdx
index fb0229cc7336..3ab138987002 100644
--- a/docs/snippets/react/my-component-play-function-with-canvas.mdx.mdx
+++ b/docs/snippets/react/my-component-play-function-with-canvas.mdx.mdx
@@ -7,11 +7,9 @@ import { MyComponent } from './MyComponent';
 
 <Meta title="WithCanvasElement" component={MyComponent}/>
 
-export const Template = (args) => <MyComponent {...args} />;
-
 <Story
   name="ExampleStory"
-  play={async ({ canvasElement }) => {
+  play={ async ({ canvasElement }) => {
     // Assigns canvas to the component root element
     const canvas = within(canvasElement);
 
@@ -19,6 +17,6 @@ export const Template = (args) => <MyComponent {...args} />;
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
     await userEvent.click(canvas.getByRole('another-element'));
   }}>
-  {Template.bind({})}
+  <MyComponent/>
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
index 30b939abf272..f0a7942d48e3 100644
--- a/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { userEvent, within } from '@storybook/testing-library';
 
@@ -11,22 +11,21 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithCanvasElement',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+export const ExampleStory: ComponentStoryObj<typeof MyComponent> = {
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
 
-export const ExampleStory = Template.bind({});
-ExampleStory.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('another-element'));
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/react/my-component-play-function-with-clickevent.js.mdx
index fe4c017e7113..4b9959f264f9 100644
--- a/docs/snippets/react/my-component-play-function-with-clickevent.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-clickevent.js.mdx
@@ -1,32 +1,30 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ClickExamples',
   component: MyComponent,
 };
 
-const Template = (args) => <MyComponent {...args} />;
-
-export const ClickExample = Template.bind({});
-ClickExample.play = async () => {
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button'));
+export const ClickExample = {
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button'));
+  },
 };
 
-export const FireEventExample = Template.bind({});
-FireEventExample.play = async () => {
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await fireEvent.click(screen.getByTestId('data-testid'));
+export const FireEventExample = {
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(screen.getByTestId('data-testid'));
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-clickevent.mdx.mdx b/docs/snippets/react/my-component-play-function-with-clickevent.mdx.mdx
index bb3ff3e9b31c..c94aea01fb62 100644
--- a/docs/snippets/react/my-component-play-function-with-clickevent.mdx.mdx
+++ b/docs/snippets/react/my-component-play-function-with-clickevent.mdx.mdx
@@ -9,23 +9,21 @@ import { MyComponent } from './MyComponent';
 
 <Meta title="ClickExamples" component={MyComponent} />
 
-export const Template = (args) => <MyComponent {...args} />;
-
 <Story
   name="ClickExample"
-  play={async () => {
-    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(screen.getByRole('button'));
   }}>
-  {Template.bind({})}
+  <MyComponent />
 </Story>
 
 <Story
   name="FireEventExample"
-  play={async ()=>{
-    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async ()=>{
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await fireEvent.click(screen.getByTestId('data-testid'));
   }}>
-  {Template.bind({})}
+  <MyComponent />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
index 876c1cc32015..2deaa5daf555 100644
--- a/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
@@ -11,24 +11,24 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ClickExamples',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
-
-export const ClickExample = Template.bind({});
-ClickExample.play = async () => {
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button'));
+export const ClickExample: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button'));
+  },
 };
 
-export const FireEventExample = Template.bind({});
-FireEventExample.play = async () => {
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await fireEvent.click(screen.getByTestId('data-testid'));
+export const FireEventExample: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(screen.getByTestId('data-testid'));
+  },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-with-delay.js.mdx b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
index ffda0d5edec1..f0f38d5a71f7 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
@@ -1,35 +1,32 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithDelay',
   component: MyComponent,
 };
 
-const Template = (args) => <MyComponent {...args} />;
-
-export const DelayedStory = Template.bind({});
-DelayedStory.play = async () => {
-  const exampleElement= screen.getByLabelText('example-element');
+export const DelayedStory = {
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element');
 
-  // The delay option set the amount of milliseconds between characters being typed
-  await userEvent.type(exampleElement, 'random string', {
-    delay: 100,
-  });
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
 
-  const AnotherExampleElement= screen.getByLabelText('another-example-element');
-  await userEvent.type(AnotherExampleElement, 'another random string', {
-    delay: 100,
-  });
+    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
 };
 ```
diff --git a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
index 56ab5df2ebcc..6f925fd8b7f7 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
@@ -9,11 +9,9 @@ import { MyComponent } from './MyComponent';
 
 <Meta title="WithDelay" component={MyComponent} />
 
-export const Template = (args) => <MyComponent {...args} />;
-
 <Story
   name="DelayedStory"
-  play={async () => {
+  play={ async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
     // The delay option set the amount of milliseconds between characters being typed
@@ -26,6 +24,6 @@ export const Template = (args) => <MyComponent {...args} />;
       delay: 100,
     });
   }}>
-  {Template.bind({})}
+  <MyComponent />
 </Story>
 ```
diff --git a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
index 0d806f32d210..e9966a552b14 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -11,27 +11,26 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithDelay',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+export const DelayedStory: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element');
 
-export const DelayedStory = Template.bind({});
-DelayedStory.play = async () => {
-  const exampleElement= screen.getByLabelText('example-element');
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
 
-  // The delay option set the amount of milliseconds between characters being typed
-  await userEvent.type(exampleElement, 'random string', {
-    delay: 100,
-  });
-
-  const AnotherExampleElement= screen.getByLabelText('another-example-element');
-  await userEvent.type(AnotherExampleElement, 'another random string', {
-    delay: 100,
-  });
+    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
 };
 ```
diff --git a/docs/snippets/react/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/react/my-component-play-function-with-selectevent.js.mdx
index 82bf334a5062..742038b8cee7 100644
--- a/docs/snippets/react/my-component-play-function-with-selectevent.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-selectevent.js.mdx
@@ -1,17 +1,15 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { userEvent, screen } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithSelectEvent',
   component: MyComponent,
 };
@@ -21,18 +19,19 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const Template = (args) => <MyComponent {...args} />;
+// Queries the element by it's role and fires the event
 
-export const ExampleChangeEvent = Template.bind({});
-ExampleChangeEvent.play = async () => {
-  const select = screen.getByRole('listbox');
+export const ExampleChangeEvent = {
+  play: async () => {
+    const select = screen.getByRole('listbox');
 
-  await userEvent.selectOptions(select, ['One Item']);
-  await sleep(2000);
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
 
-  await userEvent.selectOptions(select, ['Another Item']);
-  await sleep(2000);
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
 
-  await userEvent.selectOptions(select, ['Yet another item']);
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-selectevent.mdx.mdx b/docs/snippets/react/my-component-play-function-with-selectevent.mdx.mdx
index e0e16944bee0..168ee8e35b6b 100644
--- a/docs/snippets/react/my-component-play-function-with-selectevent.mdx.mdx
+++ b/docs/snippets/react/my-component-play-function-with-selectevent.mdx.mdx
@@ -15,11 +15,9 @@ export const sleep = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
-export const Template = (args) => <MyComponent {...args} />;
-
 <Story 
   name="ExampleChangeEvent"
-  play={async () => {
+  play={ async () => {
     const select = screen.getByRole('listbox');
 
     await userEvent.selectOptions(select, ['One Item']);
@@ -31,6 +29,6 @@ export const Template = (args) => <MyComponent {...args} />;
     await userEvent.selectOptions(select, ['Yet another item']);
 
   }}>
-  {Template.bind({})}
+  <MyComponent />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
index 2bc79c8dd1fa..f97d551f7494 100644
--- a/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { userEvent, screen } from '@storybook/testing-library';
 
@@ -11,9 +11,9 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithSelectEvent',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
@@ -23,18 +23,19 @@ function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+// Queries the element by it's role and fires the event
 
-export const ExampleChangeEvent = Template.bind({});
-ExampleChangeEvent.play = async () => {
-  const select = screen.getByRole('listbox');
+export const ExampleChangeEvent: ComponentStoryObj<typeof MyComponent> = {
+  play: async () => {
+    const select = screen.getByRole('listbox');
 
-  await userEvent.selectOptions(select, ['One Item']);
-  await sleep(2000);
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
 
-  await userEvent.selectOptions(select, ['Another Item']);
-  await sleep(2000);
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
 
-  await userEvent.selectOptions(select, ['Yet another item']);
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-basic-and-props.js.mdx b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
index 71d3ea0da3d3..ad5fa295738e 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
@@ -7,14 +7,16 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Path/To/MyComponent',
   component: MyComponent,
 };
 
-export const Basic = () => <MyComponent />;
+export const Basic = {};
 
-export const WithProp = () => <MyComponent prop="value" />;
+export const WithProp = {
+  render: () => <MyComponent prop="value" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
index 62acb5a7bc20..62798b6d4ed8 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
@@ -3,20 +3,22 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Path/To/MyComponent',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-export const Basic: ComponentStory<typeof MyComponent> = () => <MyComponent/>;
+export const Basic: ComponentStoryObj<typeof MyComponent> = {};
 
-export const WithProp: ComponentStory<typeof MyComponent> = () => <MyComponent prop="value"/>;
+export const WithProp: ComponentStoryObj<typeof MyComponent> = {
+  render: () => <MyComponent prop="value" />,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-configure-viewports.js.mdx b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
index cbfb8999e9ab..85d6233282b0 100644
--- a/docs/snippets/react/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
@@ -1,17 +1,15 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
   parameters: {
@@ -25,10 +23,11 @@ export default {
   },
 };
 
-export const MyStory = () => <MyComponent />;
-MyStory.parameters = {
-  viewport: {
-    defaultViewport: 'iphonex',
+export const MyStory = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-configure-viewports.ts.mdx b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
index 8ab4c0a95185..384076a66d64 100644
--- a/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
+++ b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
@@ -11,9 +11,9 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
   parameters: {
@@ -27,10 +27,11 @@ export default {
   },
 } as ComponentMeta<typeof MyComponent>;
 
-export const MyStory: ComponentStory<typeof MyComponent> = () => <MyComponent />;
-MyStory.parameters = {
-  viewport: {
-    defaultViewport: 'iphonex',
+export const MyStory: ComponentStoryObj<typeof MyComponent> = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
index ab59221464e8..8b56d5b88a65 100644
--- a/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -3,6 +3,6 @@
 
 export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
-  return <>{caption}</>;
+  return <p>{caption}</p>;
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-use-globaltype.js.mdx b/docs/snippets/react/my-component-story-use-globaltype.js.mdx
index 03f49fbe2eb5..db294a0081a4 100644
--- a/docs/snippets/react/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/react/my-component-story-use-globaltype.js.mdx
@@ -7,9 +7,9 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
@@ -29,8 +29,15 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = (args, { globals: { locale } }) => {
-  const caption = getCaptionForLocale(locale);
-  return <>{caption}</>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <p>{caption}</p>;
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx
index 55c5ca4ab813..07553b06e43b 100644
--- a/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx
@@ -18,10 +18,16 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<Story name="StoryWithLocale">
-  {(args, { globals: { locale } }) => {
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
+
+<Story 
+  name="StoryWithLocale"
+  render={(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return <>{caption}</>;
-  }}
-</Story>
+  }} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-with-nonstory.js.mdx b/docs/snippets/react/my-component-story-with-nonstory.js.mdx
index 6f07127c2e6b..438611688594 100644
--- a/docs/snippets/react/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/react/my-component-story-with-nonstory.js.mdx
@@ -1,18 +1,16 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { MyComponent } from './MyComponent';
 
 import someData from './data.json';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'MyComponent', 
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
@@ -21,16 +19,15 @@ export default {
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-
-const Template = (args) => <MyComponent {...args} />;
-
-export const SimpleStory = Template.bind({});
-SimpleStory.args = {
-  data: simpleData,
+export const SimpleStory = {
+  args: {
+    data: simpleData,
+  },
 };
 
-export const ComplexStory = Template.bind({});
-ComplexStory.args = {
-  data: complexData,
+export const ComplexStory = {
+  args: {
+    data: complexData,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-with-nonstory.ts.mdx b/docs/snippets/react/my-component-story-with-nonstory.ts.mdx
index b3f0a65f7897..38467c5f18d2 100644
--- a/docs/snippets/react/my-component-story-with-nonstory.ts.mdx
+++ b/docs/snippets/react/my-component-story-with-nonstory.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
@@ -11,10 +11,10 @@ import someData from './data.json';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'MyComponent', 
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
@@ -23,15 +23,15 @@ export default {
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
-
-export const SimpleStory = Template.bind({});
-SimpleStory.args = {
-  data: simpleData,
+export const SimpleStory: ComponentStoryObj<typeof MyComponent> = {
+  args: {
+    data: simpleData,
+  },
 };
 
-export const ComplexStory = Template.bind({});
-ComplexStory.args = {
-  data: complexData,
+export const ComplexStory: ComponentStoryObj<typeof MyComponent> = {
+  args: {
+    data: complexData,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-with-env-variables.js.mdx b/docs/snippets/react/my-component-with-env-variables.js.mdx
index b54d5ffa125b..9fdf5755862c 100644
--- a/docs/snippets/react/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.js.mdx
@@ -1,23 +1,20 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args) => <MyComponent {...args} />;
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY,
+export const ExampleStory = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-with-env-variables.mdx.mdx b/docs/snippets/react/my-component-with-env-variables.mdx.mdx
index 69b94fd67797..40f690100faf 100644
--- a/docs/snippets/react/my-component-with-env-variables.mdx.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.mdx.mdx
@@ -3,18 +3,22 @@
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-import MyComponent from './MyComponent';
+import {  } from './MyComponent';
 
-<Meta title="MyComponent" />
+<Meta title="MyComponent" component={MyComponent}/>
 
-export const Template = (args) => <MyComponent {...args} />
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
     name="ExampleStory"
     args={{
       propertyA: process.env.STORYBOOK_DATA_KEY,
-    }}>
-    {Template.bind({})}
+    }}
+    render={(args) => <MyComponent {...args} />} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-with-env-variables.ts.mdx b/docs/snippets/react/my-component-with-env-variables.ts.mdx
index d92592bccfbe..c61e637c8d2f 100644
--- a/docs/snippets/react/my-component-with-env-variables.ts.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.ts.mdx
@@ -3,23 +3,22 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY,
+export const ExampleStory: ComponentStoryObj<typeof MyComponent> = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-slots.js.mdx b/docs/snippets/react/page-story-slots.js.mdx
index 11d4bc89c9b5..b1505265d54e 100644
--- a/docs/snippets/react/page-story-slots.js.mdx
+++ b/docs/snippets/react/page-story-slots.js.mdx
@@ -7,21 +7,26 @@ import { Page } from './Page';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-const Template = (args) => (
-  <Page {...args}>
-    <footer>{args.footer}</footer>
-  </Page>
-);
-
-export const CustomFooter= Template.bind({});
-CustomFooter.args = {
-  footer: 'Built with Storybook',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const CustomFooter = {
+  render: (args) => (
+    <Page {...args}>
+      <footer>{args.footer}</footer>
+    </Page>
+  ),
+  args: {
+    footer: 'Built with Storybook',
+  },
 };
 ```
diff --git a/docs/snippets/react/page-story-slots.mdx.mdx b/docs/snippets/react/page-story-slots.mdx.mdx
index fc0f0220bb3e..fa2c0d613a52 100644
--- a/docs/snippets/react/page-story-slots.mdx.mdx
+++ b/docs/snippets/react/page-story-slots.mdx.mdx
@@ -7,18 +7,20 @@ import { Page } from './Page';
 
 <Meta title="Page" component={Page} />
 
-
-export const Template = (args) => (
-  <Page {...args}>
-    <footer>{args.footer}</footer>
-  </Page>
-);
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="CustomFooter"
   args={{
     footer: 'Built with Storybook',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => (
+    <Page {...args}>
+      <footer>{args.footer}</footer>
+    </Page>
+  )} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-slots.ts.mdx b/docs/snippets/react/page-story-slots.ts.mdx
index 46feb98468c5..02dbbc54a737 100644
--- a/docs/snippets/react/page-story-slots.ts.mdx
+++ b/docs/snippets/react/page-story-slots.ts.mdx
@@ -3,27 +3,27 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { Page } from './Page';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 } as ComponentMeta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => (
-  <Page {...args}>
-    <footer>{args.footer}</footer>
-  </Page>
-);
-
-export const CustomFooter = Template.bind({});
-CustomFooter.args = {
-  footer: 'Built with Storybook',
+export const CustomFooter: ComponentStoryObj<typeof Page> = {
+  render: (args) => (
+    <Page {...args}>
+      <footer>{args.footer}</footer>
+    </Page>
+  ),
+  args: {
+    footer: 'Built with Storybook',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-with-args-composition.js.mdx b/docs/snippets/react/page-story-with-args-composition.js.mdx
index f111fbf2d215..fb3eecd81707 100644
--- a/docs/snippets/react/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.js.mdx
@@ -1,8 +1,6 @@
 ```js
 // YourPage.stories.js|jsx
 
-import React from 'react';
-
 import { DocumentScreen } from './YourPage';
 
 //👇 Imports the required stories
@@ -12,19 +10,18 @@ import * as DocumentList from './DocumentList.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-const Template = (args) => <DocumentScreen {...args} />;
-
-export const Simple = Template.bind({});
-Simple.args = {
-  user: PageLayout.Simple.args.user,
-  document: DocumentHeader.Simple.args.document,
-  subdocuments: DocumentList.Simple.args.documents,
+export const Simple = {
+  args: {
+    user: PageLayout.Simple.args.user,
+    document: DocumentHeader.Simple.args.document,
+    subdocuments: DocumentList.Simple.args.documents,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index be960adff652..83c9734b3da0 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { DocumentScreen } from './YourPage';
 
@@ -13,20 +13,18 @@ import DocumentList from './DocumentList.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 } as ComponentMeta<typeof DocumentScreen>;
 
-
-const Template: ComponentStory<typeof DocumentScreen> = (args) => <DocumentScreen {...args} />;
-
-export const Simple = Template.bind({});
-Simple.args = {
-  user: PageLayout.Simple.args.user,
-  document: DocumentHeader.Simple.args.document,
-  subdocuments: DocumentList.Simple.args.documents,
+export const Simple: ComponentStoryObj<typeof DocumentScreen> = {
+  args: {
+    user: PageLayout.Simple.args.user,
+    document: DocumentHeader.Simple.args.document,
+    subdocuments: DocumentList.Simple.args.documents,
+  },
 };
 ```
diff --git a/docs/snippets/react/page-story.js.mdx b/docs/snippets/react/page-story.js.mdx
index a294dfedbfaf..f35a189c0953 100644
--- a/docs/snippets/react/page-story.js.mdx
+++ b/docs/snippets/react/page-story.js.mdx
@@ -1,8 +1,6 @@
 ```js
 // Page.stories.js|jsx
 
-import React from 'react';
-
 import { Page } from './Page';
 
 //👇 Imports all Header stories
@@ -10,17 +8,16 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-const Template = (args) => <Page {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  ...HeaderStories.LoggedIn.args,
+export const LoggedIn = {
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story.ts.mdx b/docs/snippets/react/page-story.ts.mdx
index d1757de939a6..dfb8c0149c66 100644
--- a/docs/snippets/react/page-story.ts.mdx
+++ b/docs/snippets/react/page-story.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { Page } from './Page';
 
@@ -12,17 +12,16 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 } as ComponentMeta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  ...HeaderStories.LoggedIn.args,
+export const LoggedIn: ComponentStoryObj<typeof Page> = {
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/register-component-with-play-function.js.mdx b/docs/snippets/react/register-component-with-play-function.js.mdx
index 84ce6df35c49..bcb456e1c94e 100644
--- a/docs/snippets/react/register-component-with-play-function.js.mdx
+++ b/docs/snippets/react/register-component-with-play-function.js.mdx
@@ -1,43 +1,40 @@
 ```js
 // RegistrationForm.stories.js|jsx
 
-import React from 'react';
-
 import { screen, userEvent } from '@storybook/testing-library';
 
 import { RegistrationForm } from './RegistrationForm';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'RegistrationForm',
   component: RegistrationForm,
 };
 
-const Template = (args) => <RegistrationForm {...args} />;
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async () => {
-  const emailInput = screen.getByLabelText('email', {
-    selector: 'input',
-  });
+export const FilledForm = {
+  play: async () => {
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
 
-  await userEvent.type(emailInput, 'example-email@email.com', {
-    delay: 100,
-  });
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
 
-  const passwordInput = screen.getByLabelText('password', {
-    selector: 'input',
-  });
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
 
-  await userEvent.type(passwordInput, 'ExamplePassword', {
-    delay: 100,
-  });
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const submitButton = screen.getByRole('button');
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = screen.getByRole('button');
 
-  await userEvent.click(submitButton);
+    await userEvent.click(submitButton);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/register-component-with-play-function.mdx.mdx b/docs/snippets/react/register-component-with-play-function.mdx.mdx
index 3efb0b00bf4c..3faec01dbe12 100644
--- a/docs/snippets/react/register-component-with-play-function.mdx.mdx
+++ b/docs/snippets/react/register-component-with-play-function.mdx.mdx
@@ -9,11 +9,9 @@ import { RegistrationForm } from './RegistrationForm';
 
 <Meta title="RegistrationForm" component={RegistrationForm} />
 
-export const Template = (args) => <RegistrationForm {...args} />;
-
 <Story
   name="FilledForm"
-  play={async () => {
+  play={ async () => {
     const emailInput = screen.getByLabelText('email', {
       selector: 'input',
     });
@@ -29,11 +27,11 @@ export const Template = (args) => <RegistrationForm {...args} />;
     await userEvent.type(passwordInput, 'ExamplePassword', {
       delay: 100,
     });
-    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     const submitButton = screen.getByRole('button');
 
     await userEvent.click(submitButton);
   }}>
-  {Template.bind({})}
+  <RegistrationForm />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/register-component-with-play-function.ts.mdx b/docs/snippets/react/register-component-with-play-function.ts.mdx
index 31bdad97cb54..2fce7c72a1d2 100644
--- a/docs/snippets/react/register-component-with-play-function.ts.mdx
+++ b/docs/snippets/react/register-component-with-play-function.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -11,35 +11,34 @@ import { RegistrationForm } from './RegistrationForm';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'RegistrationForm',
   component: RegistrationForm,
 } as ComponentMeta<typeof RegistrationForm>;
 
-const Template: ComponentStory<typeof RegistrationForm> = (args) => <RegistrationForm {...args} />;
+export const FilledForm: ComponentStoryObj<typeof RegistrationForm> = {
+  play: async () => {
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
 
-export const FilledForm = Template.bind({});
-FilledForm.play = async () => {
-  const emailInput = screen.getByLabelText('email', {
-    selector: 'input',
-  });
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
 
-  await userEvent.type(emailInput, 'example-email@email.com', {
-    delay: 100,
-  });
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
 
-  const passwordInput = screen.getByLabelText('password', {
-    selector: 'input',
-  });
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = screen.getByRole('button');
 
-  await userEvent.type(passwordInput, 'ExamplePassword', {
-    delay: 100,
-  });
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const submitButton = screen.getByRole('button');
-
-  await userEvent.click(submitButton);
+    await userEvent.click(submitButton);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/storybook-addon-a11y-disable.js.mdx b/docs/snippets/react/storybook-addon-a11y-disable.js.mdx
index 84e5a531fdc7..58dbe375c9c0 100644
--- a/docs/snippets/react/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-disable.js.mdx
@@ -1,26 +1,23 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Disable a11y addon',
   component: MyComponent,
 };
 
-const Template = () => <MyComponent />;
-
-export const NonA11yStory = Template.bind({});
-NonA11yStory.parameters = {
-  a11y: {
-    // This option disables all a11y checks on this story
-    disable: true,
+export const NonA11yStory = {
+  parameters: {
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/storybook-addon-a11y-disable.mdx.mdx b/docs/snippets/react/storybook-addon-a11y-disable.mdx.mdx
index 5347735e74ae..4862f1babef3 100644
--- a/docs/snippets/react/storybook-addon-a11y-disable.mdx.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-disable.mdx.mdx
@@ -9,8 +9,6 @@ import { MyComponent } from './MyComponent';
   title="Disable a11y addon" 
   component={MyComponent} />
 
-export const Template = () => <MyComponent />;
-
 <Story
   name="NonA11yStory"
   parameters={{
@@ -19,6 +17,6 @@ export const Template = () => <MyComponent />;
       disable: true,
     },
   }}>
-  {Template.bind({})}
+  <MyComponent />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
index 113f6fd5127a..05edd53befb8 100644
--- a/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
@@ -3,26 +3,25 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Disable a11y addon',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = () => <MyComponent />;
-
-export const NonA11yStory = Template.bind({});
-NonA11yStory.parameters = {
-  a11y: {
-    // This option disables all a11y checks on this story
-    disable: true,
+export const NonA11yStory: ComponentStoryObj<typeof MyComponent> = {
+  parameters: {
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx
index cc39f6799564..7fb87ca1156c 100644
--- a/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx
@@ -1,41 +1,38 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Configure a11y addon',
   component: MyComponent,
 };
 
-const Template = () => <MyComponent />;
-
-export const ExampleStory = Template.bind({});
-ExampleStory.parameters = {
-  a11y: {
-    element: '#root',
-    config: {
-      rules: [
-        {
-          // The autocomplete rule will not run based on the CSS selector provided
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // Setting the enabled option to false will disable checks for this particular rule on all stories.
-          id: 'image-alt',
-          enabled: false,
-        },
-      ],
+export const ExampleStory = {
+  parameters: {
+    a11y: {
+      element: '#root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
     },
-    options: {},
-    manual: true,
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx
index 8b1ed8796ccd..42224490b34c 100644
--- a/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx
@@ -9,8 +9,6 @@ import { MyComponent } from './MyComponent';
   title="Configure A11y addon" 
   component={MyComponent} />
 
-export const Template = () => <MyComponent />;
-
 <Story
   name="ExampleStory"
   parameters={{
@@ -34,6 +32,6 @@ export const Template = () => <MyComponent />;
       manual: true,
     },
   }}>
-  {Template.bind({})}
+  <MyComponent />
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
index 9ae7ea00ea79..f75499b42b50 100644
--- a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
@@ -3,41 +3,40 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Configure a11y addon',
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = () => <MyComponent />;
-
-export const ExampleStory = Template.bind({});
-ExampleStory.parameters = {
-  a11y: {
-    element: '#root',
-    config: {
-      rules: [
-        {
-          // The autocomplete rule will not run based on the CSS selector provided
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // Setting the enabled option to false will disable checks for this particular rule on all stories.
-          id: 'image-alt',
-          enabled: false,
-        },
-      ],
+export const ExampleStory: ComponentStoryObj<typeof MyComponent> = {
+  parameters: {
+    a11y: {
+      element: '#root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
     },
-    options: {},
-    manual: true,
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/storybook-preview-global-decorator.story-function.js.mdx b/docs/snippets/react/storybook-preview-global-decorator.story-function.js.mdx
index 46e393bdf808..9cffd503437f 100644
--- a/docs/snippets/react/storybook-preview-global-decorator.story-function.js.mdx
+++ b/docs/snippets/react/storybook-preview-global-decorator.story-function.js.mdx
@@ -1,13 +1,7 @@
 ```js
 // .storybook/preview.js
 
-import React from "react";
+import React from 'react';
 
-export const decorators = [
-  (Story) => (
-    <div style={{ margin: '3em' }}>
-      {Story()}
-    </div>
-  ),
-];
+export const decorators = [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>];
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/table-story-fully-customize-controls.js.mdx b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
index 0778b994fd6f..8e1163eecaa2 100644
--- a/docs/snippets/react/table-story-fully-customize-controls.js.mdx
+++ b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
@@ -9,30 +9,38 @@ import { TR } from './TableRow';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Custom Table',
   component: Table,
 };
 
-const TableStory = ({ data, ...args}) => (
-  <Table {...args}>
-    {data.map((row) => (
-      <TR>
-        {row.map((item) => (
-          <TD>{item}</TD>
-        ))}
-      </TR>
-    ))}
-  </Table>
-);
-
-export const Numeric = TableStory.bind({});
-Numeric.args = {
-  //👇 This arg is for the story component
-  data: [[1, 2, 3], [4, 5, 6]],
-  //👇 The remaining args get passed to the `Table` component
-  size: 'large',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const TableStory = {
+  render: ({ data, ...args }) => (
+    <Table {...args}>
+      {data.map((row) => (
+        <TR>
+          {row.map((item) => (
+            <TD>{item}</TD>
+          ))}
+        </TR>
+      ))}
+    </Table>
+  ),
+  args: {
+    //👇 This arg is for the story component
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx b/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx
index f656ff9b88b6..0611c9129490 100644
--- a/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx
+++ b/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx
@@ -9,18 +9,27 @@ import { TR } from './TableRow';
 
 <Meta title="Custom Table" component={Table} />
 
-export const TableStory = ({ data, ...args }) => (
-  <Table {...args} >
-    {data.map(row => (<TR>{row.map(item => <TD>{item}</TD>}</TR>))}
-  </Table>
-);
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/react/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="Numeric"
   args={{
     data: [[1, 2, 3], [4, 5, 6]],
     size: 'large',
-  }}>
-  {TableStory.bind({})}
-</Story>
+  }}
+  render={({data, ...args})=>(
+    <Table {...args}>
+      {data.map((row) => (
+        <TR>
+          {row.map((item) => (
+            <TD>{item}</TD>
+          ))}
+        </TR>
+      ))}
+    </Table>
+  )}/>
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/your-component-with-decorator.js.mdx b/docs/snippets/react/your-component-with-decorator.js.mdx
index 9b2d3f20058b..3b6ffa7b81a8 100644
--- a/docs/snippets/react/your-component-with-decorator.js.mdx
+++ b/docs/snippets/react/your-component-with-decorator.js.mdx
@@ -1,13 +1,15 @@
 ```js
 // YourComponent.stories.js|jsx
 
+import React from 'react';
+
 import { YourComponent } from './YourComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   decorators: [
diff --git a/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx b/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx
index f7cfb381d284..a2ec1f492a0d 100644
--- a/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx
+++ b/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx
@@ -1,16 +1,18 @@
 ```js
 // YourComponent.stories.js|jsx
 
+import React from 'react';
+
 import { YourComponent } from './YourComponent';
 
 // Replacing the <Story/> element with a Story function is also a good way of writing decorators.
 // Useful to prevent the full remount of the component's story.
 
 export default {
-   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
diff --git a/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx b/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx
index 9ba55b1da62c..1c47e59bc50b 100644
--- a/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx
@@ -1,6 +1,8 @@
 ```ts
 // YourComponent.stories.ts|tsx
 
+import React from 'react';
+
 import { ComponentMeta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
@@ -9,17 +11,11 @@ import { YourComponent } from './YourComponent';
 // Useful to prevent the full remount of the component's story.
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '3em' }}>
-        {Story()}
-      </div>
-    ),
-  ],
+  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
 } as ComponentMeta<typeof YourComponent>;
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/your-component-with-decorator.ts.mdx b/docs/snippets/react/your-component-with-decorator.ts.mdx
index dc89e46e4c69..c60a314816e6 100644
--- a/docs/snippets/react/your-component-with-decorator.ts.mdx
+++ b/docs/snippets/react/your-component-with-decorator.ts.mdx
@@ -1,21 +1,23 @@
 ```ts
 // YourComponent.stories.ts|tsx
 
+import React from 'react';
+
 import { ComponentMeta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   decorators: [
     (Story) => (
       <div style={{ margin: '3em' }}>
-        <Story/>
+        <Story />
       </div>
     ),
   ],
diff --git a/docs/snippets/react/your-component.js.mdx b/docs/snippets/react/your-component.js.mdx
index 5b3121d657ac..2e06e8e384f2 100644
--- a/docs/snippets/react/your-component.js.mdx
+++ b/docs/snippets/react/your-component.js.mdx
@@ -6,16 +6,13 @@ import { YourComponent } from './YourComponent';
 //👇 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/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/eact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => <YourComponent {...args} />;
-
 export const FirstStory = {
   args: {
     //👇 The args you need here will depend on your component
diff --git a/docs/snippets/react/your-component.mdx.mdx b/docs/snippets/react/your-component.mdx.mdx
index 432f8a5f1703..d28dcfca0f00 100644
--- a/docs/snippets/react/your-component.mdx.mdx
+++ b/docs/snippets/react/your-component.mdx.mdx
@@ -8,13 +8,9 @@ import { YourComponent } from './YourComponent';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!--👇 We create a “template” of how args map to rendering -->
-export const Template = (args) => <YourComponent {...args} />;
-
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}>
-  {Template.bind({})}
-</Story>
+  args={{}}
+  render={(args) => <YourComponent {...args} />} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/your-component.ts.mdx b/docs/snippets/react/your-component.ts.mdx
index cabd3abcb3e7..6871d8461af1 100644
--- a/docs/snippets/react/your-component.ts.mdx
+++ b/docs/snippets/react/your-component.ts.mdx
@@ -3,26 +3,23 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
 
 //👇 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/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
 } as ComponentMeta<typeof YourComponent>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof YourComponent> = (args) => <YourComponent {...args} />;
-
-export const FirstStory = Template.bind({});
-
-FirstStory.args = {
-  /*👇 The args you need here will depend on your component */
+export const FirstStory: ComponentStoryObj<typeof YourComponent> = {
+  args: {
+    //👇 The args you need here will depend on your component
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/badge-story.mdx.mdx b/docs/snippets/svelte/badge-story.mdx.mdx
index 06a6c95b9386..f30d432b4d38 100644
--- a/docs/snippets/svelte/badge-story.mdx.mdx
+++ b/docs/snippets/svelte/badge-story.mdx.mdx
@@ -7,11 +7,6 @@ import Badge from './Badge.svelte';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => ({
-  Component: Badge,
-  props: args,
-});
-
 # Badge
 
 Let's define a story for our `Badge` component:
@@ -21,9 +16,11 @@ Let's define a story for our `Badge` component:
   args={{
     status: 'positive',
     label: 'Positive'
-  }}>
-  {Template.bind({})}
-</Story>
+  }} 
+  render={(args) => ({
+    Component: Badge,
+    props: args,
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
@@ -33,9 +30,11 @@ We can drop it in a `Canvas` to get a code snippet:
     args={{
       status: 'negative', 
       label: 'Negative'
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
 </Canvas>
 
 We can even preview multiple Stories in a block. This
@@ -48,32 +47,30 @@ with unique URLs, which is great for review and testing.
     args={{
       status: 'warning',
       label: 'Warning' 
-    }}>
-    {Template.bind({})}
-  </Story>
+    }} 
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
   <Story 
     name="neutral" 
     args={{
       status: 'neutral', 
       label: 'Neutral' 
-    }}>
-    {Template.bind({})}
-  </Story>
+    }} 
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error', 
       label: 'Error' 
-    }}>
-    {Template.bind({})}
-  </Story>
-  <Story 
-    name="with icon" 
-    args={{
-      status: 'warning', 
-      label: (<Icon icon="check" inline /> with icon)
-    )}}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
 </Canvas>
 ```
diff --git a/docs/snippets/svelte/button-group-story.js.mdx b/docs/snippets/svelte/button-group-story.js.mdx
index 78ebad33838c..16db4a2ef26f 100644
--- a/docs/snippets/svelte/button-group-story.js.mdx
+++ b/docs/snippets/svelte/button-group-story.js.mdx
@@ -8,24 +8,26 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
 };
 
-const Template = (args) => ({
-  Component: ButtonGroup,
-  props: args,
-});
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [
-    { ...ButtonStories.Primary.args },
-    { ...ButtonStories.Secondary.args }
-  ],
-  orientation: 'horizontal',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Pair = {
+  render: (args) => ({
+    Component: ButtonGroup,
+    props: args,
+  }),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-click-handler-args.js.mdx b/docs/snippets/svelte/button-story-click-handler-args.js.mdx
index 9970840aa256..140ae8dff1df 100644
--- a/docs/snippets/svelte/button-story-click-handler-args.js.mdx
+++ b/docs/snippets/svelte/button-story-click-handler-args.js.mdx
@@ -7,25 +7,26 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text  = ({ label, click }) => ({
-  Component: Button,
-  props: {
-    label,
+export const Text = {
+  render: ({ label, click }) => ({
+    Component: Button,
+    props: {
+      label,
+    },
+    on: {
+      click,
+    },
+  }),
+  args: {
+    label: 'Hello',
+    click: action('clicked'),
   },
-  on: {
-    click,
-  },
-});
-
-Text.args = {
-  label: 'Hello',
-  click: action('clicked'),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx
index b56d194e15b3..b295452cdc4b 100644
--- a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx
+++ b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx
@@ -7,7 +7,7 @@
 </script>
 
 <!-- 
-  See https://storybook.js.org/docs/svelte/essentials/actions#action-argtype-annotation
+  See https://storybook.js.org/docs/7.0/svelte/essentials/actions#action-argtype-annotation
   to learn how to set up argTypes for actions
 --> 
 
diff --git a/docs/snippets/svelte/button-story-click-handler.js.mdx b/docs/snippets/svelte/button-story-click-handler.js.mdx
index 822519e0f529..c75cd6f9a972 100644
--- a/docs/snippets/svelte/button-story-click-handler.js.mdx
+++ b/docs/snippets/svelte/button-story-click-handler.js.mdx
@@ -7,20 +7,22 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = () => ({
-  Component: Button,
-  props:{
-    label: 'Hello',
-  },
-  on: {
-    click: action('clicked'),
-  },
-});
+export const Text = {
+  render: () => ({
+    Component: Button,
+    props: {
+      label: 'Hello',
+    },
+    on: {
+      click: action('clicked'),
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-component-args-primary.js.mdx b/docs/snippets/svelte/button-story-component-args-primary.js.mdx
index cf7b5b6e0856..1de418bc0c03 100644
--- a/docs/snippets/svelte/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/svelte/button-story-component-args-primary.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/svelte/button-story-component-decorator.js.mdx b/docs/snippets/svelte/button-story-component-decorator.js.mdx
index 65ee7698d751..499f675bab4e 100644
--- a/docs/snippets/svelte/button-story-component-decorator.js.mdx
+++ b/docs/snippets/svelte/button-story-component-decorator.js.mdx
@@ -6,7 +6,7 @@ import MarginDecorator from './MarginDecorator.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/svelte/button-story-decorator.js.mdx b/docs/snippets/svelte/button-story-decorator.js.mdx
index 41232c9df617..420042d1ba8d 100644
--- a/docs/snippets/svelte/button-story-decorator.js.mdx
+++ b/docs/snippets/svelte/button-story-decorator.js.mdx
@@ -6,17 +6,22 @@ import MarginDecorator from './MarginDecorator.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-const Template = () => ({
-  Component: Button,
-})
-
-export const Primary = Template.bind({});
-Primary.decorators = [() => MarginDecorator]
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => ({
+    component: Button,
+  }),
+  decorators: [() => MarginDecorator],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-decorator.mdx.mdx b/docs/snippets/svelte/button-story-decorator.mdx.mdx
index 101b6c3d6db8..6368983838f0 100644
--- a/docs/snippets/svelte/button-story-decorator.mdx.mdx
+++ b/docs/snippets/svelte/button-story-decorator.mdx.mdx
@@ -8,12 +8,18 @@ import MarginDecorator from './MarginDecorator.svelte';
 
 <Meta title="Button" component={Button}/>
 
-export const Template = () => ({ Component:Button });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="Primary"
   args={{}}
-  decorators={[() => MarginDecorator]}>
-  {Template.bind({})}
-</Story>
+  decorators={[() => MarginDecorator]}
+  render={(args) => ({
+    Component: Badge,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-default-docs-code.js.mdx b/docs/snippets/svelte/button-story-default-docs-code.js.mdx
index b2fec6cfe5f1..9c2b7da35eb1 100644
--- a/docs/snippets/svelte/button-story-default-docs-code.js.mdx
+++ b/docs/snippets/svelte/button-story-default-docs-code.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/svelte/button-story-default-export-with-component.js.mdx b/docs/snippets/svelte/button-story-default-export-with-component.js.mdx
index e155ce8c3d43..d15838083b74 100644
--- a/docs/snippets/svelte/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/svelte/button-story-default-export-with-component.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/svelte/button-story-rename-story.js.mdx b/docs/snippets/svelte/button-story-rename-story.js.mdx
index 230ba0631042..a82c46b59411 100644
--- a/docs/snippets/svelte/button-story-rename-story.js.mdx
+++ b/docs/snippets/svelte/button-story-rename-story.js.mdx
@@ -5,20 +5,26 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  Component: Button,
-  props: {
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = ({
+  name: 'I am the primary',
+  render: () => ({
+    Component: Button,
+    props: {
       primary: true,
       label: 'Button',
     },
-});
-
-Primary.storyName = 'I am the primary';
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-using-args.js.mdx b/docs/snippets/svelte/button-story-using-args.js.mdx
index 8aa730112e10..8cca071da12d 100644
--- a/docs/snippets/svelte/button-story-using-args.js.mdx
+++ b/docs/snippets/svelte/button-story-using-args.js.mdx
@@ -5,26 +5,48 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => ({
-  Component: Button,
-  props: args,
-});
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+export const Secondary = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-addon-example.js.mdx b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
index 876b38d4aae5..d829880a92a9 100644
--- a/docs/snippets/svelte/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   //👇 Creates specific parameters for the story
   parameters: {
@@ -17,7 +17,15 @@ export default {
   },
 };
 
-export const Basic = () => ({
-  Component: Button,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Basic = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-args.js.mdx b/docs/snippets/svelte/button-story-with-args.js.mdx
index 3453d89898b2..f7c749fca636 100644
--- a/docs/snippets/svelte/button-story-with-args.js.mdx
+++ b/docs/snippets/svelte/button-story-with-args.js.mdx
@@ -5,23 +5,26 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-// 👇 We create a “template” of how args map to rendering
-const Template = (args)=>({
-  component: Button,
-  props: args,
-});
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-args.mdx.mdx b/docs/snippets/svelte/button-story-with-args.mdx.mdx
index cd26e64a3168..e3c78745fdec 100644
--- a/docs/snippets/svelte/button-story-with-args.mdx.mdx
+++ b/docs/snippets/svelte/button-story-with-args.mdx.mdx
@@ -7,20 +7,20 @@ import Button from './Button.svelte';
 
 <Meta title="Button" component={Button} />
 
-<!-- 👇 We create a “template” of how args map to rendering -->
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
-export const Template = (args) => ({
-  Component: Button,
-  props: args,
-});
-
-<!-- 👇 Each story then reuses that template -->
 <Story
   name="Primary"
   args={{
     primary: true,
     label: 'Button',
-  }}>
-  {Template.bind({})}
-</Story>
+  }} 
+  render={(args) => ({
+    Component: Button,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-blue-args.js.mdx b/docs/snippets/svelte/button-story-with-blue-args.js.mdx
index 953d7a9da43b..f6665b8c7e24 100644
--- a/docs/snippets/svelte/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/svelte/button-story-with-blue-args.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/svelte/button-story-with-emojis.js.mdx b/docs/snippets/svelte/button-story-with-emojis.js.mdx
index 5dabb1d51468..a14cadc32956 100644
--- a/docs/snippets/svelte/button-story-with-emojis.js.mdx
+++ b/docs/snippets/svelte/button-story-with-emojis.js.mdx
@@ -5,34 +5,45 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  Component: Button,
-  props: {
-    background: '#ff0',
-    label: 'Button',
-  },
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => ({
+    Component: Button,
+    props: {
+      backgroundColor: '#ff0',
+      label: 'Button',
+    },
+  }),
+};
 
-export const Secondary = () => ({
-  Component: Button,
-  props: {
-    background: '#ff0',
-    label: '😄👍😍💯',
-  },
-});
+export const Secondary = {
+  render: () => ({
+    Component: Button,
+    props: {
+      backgroundColor: '#ff0',
+      label: '😄👍😍💯',
+    },
+  }),
+};
 
-export const Tertiary = () => ({
-  Component: Button,
-  props: {
-    background: '#ff0',
-    label: '📚📕📈🤓',
-  },
-});
+export const Tertiary = {
+  render: () => ({
+    Component: Button,
+    props: {
+      backgroundColor: '#ff0',
+      label: '📚📕📈🤓',
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx b/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
index b9690ff2e4db..3e4950c92166 100644
--- a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
+++ b/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
@@ -7,31 +7,37 @@ import Button from './Button.svelte';
 
 <Meta title="Button" component={Button} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
-<Story name="Primary">
-  {{
+<Story 
+  name="Primary"
+  render={() => ({
+    Component: Button,
     props: {
-      background: '#ff0',
+      backgroundColor: '#ff0',
       label: 'Button',
-    },
-  }}
-</Story>
-
-<Story name="Secondary">
-  {{
+    }
+  })} />
+<Story 
+  name="Secondary"
+  render={() => ({
+    Component: Button,
     props: {
       background: '#ff0',
       label: '😄👍😍💯',
     },
-  }}
-</Story>
-
-<Story name="Tertiary">
-  {{
+  })} />
+<Story 
+  name="Tertiary"
+  render={() => ({
+    Component: Button,
     props: {
       background: '#ff0',
       label: '📚📕📈🤓',
     },
-  }}
-</Story>
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story.js.mdx b/docs/snippets/svelte/button-story.js.mdx
index a79a36bf5398..f34e8b52b3d2 100644
--- a/docs/snippets/svelte/button-story.js.mdx
+++ b/docs/snippets/svelte/button-story.js.mdx
@@ -5,18 +5,25 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  Component: Button,
-  props: {
-    primary: true,
-    label: 'Button',
-  },
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => ({
+    Component: Button,
+    props: {
+      primary: true,
+      label: 'Button',
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story.mdx.mdx b/docs/snippets/svelte/button-story.mdx.mdx
index 43d30f351676..b49f20627d86 100644
--- a/docs/snippets/svelte/button-story.mdx.mdx
+++ b/docs/snippets/svelte/button-story.mdx.mdx
@@ -9,12 +9,19 @@ import Button from './Button.svelte';
 
 # Button
 
-<Story name="Primary">
-  {{
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
+
+<Story 
+  name="Primary"
+  render={() => ({
+    Component:Button,
     props: {
       primary: true,
       label: 'Button',
     },
-  }}
-</Story>
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/checkbox-story.mdx.mdx b/docs/snippets/svelte/checkbox-story.mdx.mdx
index e3f325b59ac4..1e417a83ff55 100644
--- a/docs/snippets/svelte/checkbox-story.mdx.mdx
+++ b/docs/snippets/svelte/checkbox-story.mdx.mdx
@@ -7,42 +7,49 @@ import Checkbox from './Checkbox.svelte';
 
 <Meta title="MDX/Checkbox" component={Checkbox} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
+
 # Checkbox
 
 With `MDX`, we can define a story for `Checkbox` right in the middle of our
 Markdown documentation.
 
-export const Template = (args) => ({
-  Component: Button,
-  props: args,
-});
-
 <Canvas>
   <Story 
     name="Unchecked"
     args={{ 
       label: 'Unchecked',
-    }}>
-    {Template.bind({})}
-   </Story>
+    }}
+    render={(args) => ({
+      Component: Checkbox,
+      props: args
+    })} />
 
   <Story 
     name="Checked"
     args={{ 
       label: 'Unchecked', 
       checked: true,
-    }}>
-    {Template.bind({})}
-   </Story>
-  
+    }}
+    render={(args) => ({
+      Component: Checkbox,
+      props: args
+    })} />
+
   <Story 
     name="Secondary"
     args={{
       label: 'Secondary', 
       checked: true, 
       appearance: 'secondary',
-    }}>
-    {Template.bind({})}
-   </Story>
+    }}
+    render={(args) => ({
+      Component: Checkbox,
+      props: args
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx b/docs/snippets/svelte/component-story-custom-args-complex.js.mdx
index 917f82f212d7..a64143e69353 100644
--- a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/svelte/component-story-custom-args-complex.js.mdx
@@ -5,9 +5,9 @@ import YourComponent from './YourComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   //👇 Creates specific argTypes
@@ -27,23 +27,26 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
   // Makes some computations and returns something
 };
 
-const Template = (args) => {
-  const { propertyA, propertyB } = args;
-  
-  //👇 Assigns the function result to a variable
-  const someFunctionResult = someFunction(propertyA, propertyB);
-  return {
-    Component: YourComponent,
-    props: {
-      ...args,
-      someProperty: someFunctionResult,
-    },
-  };
-};
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args= {
-  propertyA: 'Item One',
-  propertyB: 'Another Item One',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: ({ propertyA, propertyB }) => {
+    //👇 Assigns the function result to a variable
+    const someFunctionResult = someFunction(propertyA, propertyB);
+    return {
+      Component: YourComponent,
+      props: {
+        ...args,
+        someProperty: someFunctionResult,
+      },
+    };
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-figma-integration.js.mdx b/docs/snippets/svelte/component-story-figma-integration.js.mdx
index a509ab634c30..9b88fccbe207 100644
--- a/docs/snippets/svelte/component-story-figma-integration.js.mdx
+++ b/docs/snippets/svelte/component-story-figma-integration.js.mdx
@@ -5,24 +5,28 @@ import { withDesign } from 'storybook-addon-designs';
 
 import MyComponent from './MyComponent.svelte';
 
-// More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: { MyComponent },
   decorators: [withDesign],
 };
 
-// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
-const Template = () => ({
-  props: {},
-  Component: MyComponent,
-});
-
-export const Example = Template.bind({});
-Example.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/Sample-File',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Example = {
+  render: () => ({
+    Component: MyComponent,
+    props: {},
+  }),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-figma-integration.mdx.mdx b/docs/snippets/svelte/component-story-figma-integration.mdx.mdx
index 3dcfbcfd35e0..5a90970810d1 100644
--- a/docs/snippets/svelte/component-story-figma-integration.mdx.mdx
+++ b/docs/snippets/svelte/component-story-figma-integration.mdx.mdx
@@ -13,10 +13,11 @@ import MyComponent from './MyComponent.svelte';
   decorators={[withDesign]}
 />
 
-export const Template = () => ({
-  props: {},
-  Component: MyComponent,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
@@ -27,8 +28,9 @@ export const Template = () => ({
         url: 'https://www.figma.com/file/Sample-File',
       },
     }}
-  >
-  {Template.bind({})}
-  </Story>
+    render={() => ({
+      Component: MyComponent,
+      props: {}
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
index bcd700c06fbd..652c6e9524d1 100644
--- a/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
+++ b/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
@@ -7,12 +7,17 @@ import Button from './Button.svelte';
 
 <Meta title="Button" component={Button}/>
 
-export const Template = (args) => ({
-  Component: Button,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
-<Story name="Basic" args={{ label: 'hello' }}>
-  {Template.bind({})}
-</Story>
+<Story 
+  name="Basic" 
+  args={{ label: 'hello' }}
+  render={(args) => ({
+    Component: Button,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx
index 0ac4fa2292d8..e70308d74ff8 100644
--- a/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx
@@ -5,18 +5,25 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
   component: MyComponent,
 };
 
-export const WithAnImage = () =>  ({
-  Component: MyComponent,
-  props: {
-    src: 'https://place-hold.it/350x150',
-    alt: 'My CDN placeholder',
-  },
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => ({
+    Component: MyComponent,
+    props: {
+      src: 'https://place-hold.it/350x150',
+      alt: 'My CDN placeholder',
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
index 5358e00db8da..f56dd4eb360e 100644
--- a/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
@@ -7,16 +7,19 @@ import MyComponent from './MyComponent.svelte';
 
 <Meta title="img" component={MyComponent} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
+
 <Story 
-  name="WithAnImage">
-  {() => {
-    return {
-      Component: MyComponent,
-      props: {
-        src: 'https://place-hold.it/350x150',
-        alt: 'my image',
-      },
-    };
-  }}
-</Story>
+  name="WithAnImage"
+  render={() => ({
+    Component: MyComponent,
+    props: {
+      src: 'https://place-hold.it/350x150',
+      alt: 'my image',
+    },
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx
index 3249a2362673..d909211f3a01 100644
--- a/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx
@@ -7,9 +7,9 @@ import imageFile from './static/image.png';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
   component: MyComponent,
 };
@@ -19,10 +19,15 @@ const image = {
   alt: 'my image',
 };
 
-export const WithAnImage = () => ({
-  Component: MyComponent,
-  props: {
-    image: image
-  },
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => ({
+    Component: MyComponent,
+    props: image,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
index af8e70fc9e73..7d1d6376a34a 100644
--- a/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
@@ -9,19 +9,21 @@ import imageFile from './static/image.png';
 
 <Meta title="img" component={MyComponent} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
+
 export const image = {
   src: imageFile,
   alt: 'my image',
 };
 
-<Story name="WithAnImage">
-  {() => {
-    return {
-      Component: MyComponent,
-      props: {
-        image: image,
-      },
-    };
-  }}
-</Story>
+<Story 
+  name="WithAnImage"
+  render={() => ({
+    Component: MyComponent,
+    props: image
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx
index ac464f27b845..35ed6dc6122b 100644
--- a/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx
@@ -5,19 +5,25 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
   component: MyComponent,
 };
 
-// Assume image.png is located in the "public" directory.
-export const WithAnImage = () => ({
-  Component: MyComponent,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => ({
+    Component: MyComponent,
     props: {
-      src: '/image.png',
+      src: '/image.png', //👈 Assume image.png is located in the "public" directory.
       alt: 'my image',
     },
-});
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
index 8012053b0c52..5d7141fd087e 100644
--- a/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
@@ -9,15 +9,13 @@ import MyComponent from './MyComponent.svelte0;
 
 <!-- Assume image.png is located in the "public" directory. -->
 
-<Story name="withAnImage">
-  {() => {
-    return {
-      Component: MyComponent,
-      props: {
-        src: '/image.png',
-        alt: 'my image',
-      },
-    };
-  }}
-</Story>
+<Story 
+  name="withAnImage"
+  render={() => ({
+    Component: MyComponent,
+    props: {
+      src: '/image.png',
+      alt: 'my image',
+    },
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-with-accessibility.js.mdx b/docs/snippets/svelte/component-story-with-accessibility.js.mdx
index 64f63c7edf34..2fe14a937108 100644
--- a/docs/snippets/svelte/component-story-with-accessibility.js.mdx
+++ b/docs/snippets/svelte/component-story-with-accessibility.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Accessibility testing',
   component: Button,
   argTypes: {
@@ -15,22 +15,27 @@ export default {
   },
 };
 
-const Template = (args) => ({
-  Component: Button,
-  props: args,
-});
-
 // This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
-  primary: false,
-  label: 'Button',
+export const Accessible = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+  args: {
+    primary: false,
+    label: 'Button',
+  },
 };
 
 // This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
-  ...Accessible.args,
-  backgroundColor: 'red',
+export const Inaccessible = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-with-accessibility.mdx.mdx b/docs/snippets/svelte/component-story-with-accessibility.mdx.mdx
index c0a6bb1202da..154cfbca0dc2 100644
--- a/docs/snippets/svelte/component-story-with-accessibility.mdx.mdx
+++ b/docs/snippets/svelte/component-story-with-accessibility.mdx.mdx
@@ -16,10 +16,11 @@ import Button from './Button.svelte';
     }
   }} />
 
-export const Template = (args) => ({
-  Component: Button,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 ## This is an accessible story
 
@@ -28,10 +29,12 @@ export const Template = (args) => ({
   args={{
     primary: false, 
     label: 'Button'
-  }}>
-  {Template.bind({})}
-</Story>
-
+  }}
+  render={(args) => ({
+    Component: Button,
+    props: args,
+  })} />
+ 
 ## This is not
 
 <Story
@@ -40,7 +43,9 @@ export const Template = (args) => ({
     primary: false,
     label: 'Button',
     backgroundColor: 'red'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    Component: Button,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
index ee5818cedfbf..4de0633ff067 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
@@ -8,9 +8,9 @@ import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
   decorators: [() => MockGraphqlProvider],
@@ -65,31 +65,36 @@ const TestData = {
   ],
 };
 
-const PageTemplate = () => ({
-  Component: DocumentScreen,
-});
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(ctx.data(TestData));
-    }),
-  ],
+export const MockedSuccess = {
+  render: () => ({
+    Component: DocumentScreen,
+  }),
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(ctx.data(TestData));
+      }),
+    ],
+  },
 };
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(
-        ctx.delay(800),
-        ctx.errors([
-          {
-            message: 'Access denied',
-          },
-        ])
-      );
-    }),
-  ],
+
+export const MockedError = {
+  render: () => ({
+    Component: DocumentScreen,
+  }),
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(
+          ctx.delay(800),
+          ctx.errors([
+            {
+              message: 'Access denied',
+            },
+          ])
+        );
+      }),
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
index e828bb388f32..3247b130184e 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
@@ -7,9 +7,9 @@ import { rest } from 'msw';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
@@ -63,25 +63,29 @@ const TestData = {
   ],
 };
 
-const PageTemplate = () => ({
-  Component: DocumentScreen,
-});
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-      return res(ctx.json(TestData));
-    }),
-  ],
+export const MockedSuccess = {
+  render: (args) => ({
+    Component: DocumentScreen,
+  }),
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+        return res(ctx.json(TestData));
+      }),
+    ],
+  },
 };
 
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-      return res(ctx.delay(800), ctx.status(403));
-    }),
-  ],
+export const MockedError = {
+  render: (args) => ({
+    Component: DocumentScreen,
+  }),
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+        return res(ctx.delay(800), ctx.status(403));
+      }),
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/form-story-component-with-play-function.js.mdx b/docs/snippets/svelte/form-story-component-with-play-function.js.mdx
deleted file mode 100644
index 8b87a8998a13..000000000000
--- a/docs/snippets/svelte/form-story-component-with-play-function.js.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```js
-// Form.stories.js
-
-import { userEvent, within } from '@storybook/testing-library';
-
-import LoginForm from './LoginForm.svelte';
-
-export default {
-  component: LoginForm,
-};
-
-export const FilledForm = {
-  play: async ({ args, canvasElement }) => {
-    // Starts querying the component from its root element
-    const canvas = within(canvasElement);
-
-    await userEvent.type(canvas.getByTestId('email'), 'email');
-    await userEvent.type(canvas.getByTestId('password'), 'password');
-    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(canvas.getByRole('button'));
-  },
-  render: (args) => {
-    Component: LoginForm,
-    props: args,
-  },
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/loader-story.js.mdx b/docs/snippets/svelte/loader-story.js.mdx
index 6cf31b630e77..24945db86ab3 100644
--- a/docs/snippets/svelte/loader-story.js.mdx
+++ b/docs/snippets/svelte/loader-story.js.mdx
@@ -7,21 +7,30 @@ import TodoItem from './TodoItem.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Examples/Loader',
   component: TodoItem,
 };
 
-export const Primary = (args, { loaded: { todo } }) => ({
-  Component: TodoItem,
-  props: { ...args, ...todo },
-});
-
-Primary.loaders = [
-  async () => ({
-    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args, { loaded: { todo } }) => ({
+    Component: TodoItem,
+    props: {
+      ...args,
+      todo,
+    },
   }),
-];
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/loader-story.mdx.mdx b/docs/snippets/svelte/loader-story.mdx.mdx
index b068479999f2..80dec358b839 100644
--- a/docs/snippets/svelte/loader-story.mdx.mdx
+++ b/docs/snippets/svelte/loader-story.mdx.mdx
@@ -9,21 +9,26 @@ import fetch from 'node-fetch';
 
 <Meta title="Examples/Loader" component={TodoItem} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
+
 <Story
   name="Primary"
   loaders={[
     async () => ({
       todo: await (
-        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+        await fetch('https://jsonplaceholder.typicode.com/todos/1')
       ).json(),
     }),
-  ]}>
-  {(args, { loaded: { todo } }) => ({
+  ]}
+  render={(args, { loaded: { todo } }) => ({
     Component: TodoItem,
     props: {
       ...args,
       todo,
     },
-  })}
-</Story>
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/login-form-with-play-function.js.mdx b/docs/snippets/svelte/login-form-with-play-function.js.mdx
index e06ea2235a84..010a758118ae 100644
--- a/docs/snippets/svelte/login-form-with-play-function.js.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.js.mdx
@@ -9,38 +9,48 @@ import LoginForm from './LoginForm.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Form',
   component: LoginForm,
 };
 
-const Template = (args) => ({
-  Component: LoginForm,
-  props: args,
-});
-
-export const EmptyForm = Template.bind({});
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  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/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm = {
+  render: (args) => ({
+    Component: LoginForm,
+    props: args,
+  }),
+};
 
-  // 👇 Assert DOM structure
-  await expect(
-    canvas.getByText(
-      'Everything is perfect. Your account is ready and we should probably get you started!'
-    )
-  ).toBeInTheDocument();
+export const FilledForm = {
+  render: (args) => ({
+    Component: LoginForm,
+    props: args,
+  }),
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    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/7.0/svelte/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();
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
index 8f5e3441bf6c..06ce15dc6b70 100644
--- a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
@@ -11,19 +11,26 @@ import LoginForm from './LoginForm.svelte';
 
 <Meta title="Form" component={LoginForm} />
 
-export const Template = (args) => ({
-  Component: LoginForm,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
-  <Story name="Empty Form">
-    {Template.bind({})}
-  </Story>
-
+  <Story 
+  name="Empty Form"
+  render={(args) => ({
+    Component: LoginForm,
+    props: args,
+  })} />
   <Story
     name="Filled Form"
-    play={async ({ canvasElement }) => {
+    render={(args) => ({
+      Component: LoginForm,
+      props: args,
+    })} 
+    play={ async ({ canvasElement }) => {
       // Starts querying the component from its root element
       const canvas = within(canvasElement);
 
@@ -32,7 +39,7 @@ export const Template = (args) => ({
       
       await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-      // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+      // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
       await userEvent.click(canvas.getByRole('button'));
 
       // 👇 Assert DOM structure
@@ -41,8 +48,6 @@ export const Template = (args) => ({
           'Everything is perfect. Your account is ready and we should probably get you started!'
         )
       ).toBeInTheDocument();
-    }}>
-    {Template.bind({})}
-  </Story>
+    }} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
index 2b5c5d2ee1a4..cb3367d2f4ef 100644
--- a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
+++ b/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
@@ -7,10 +7,11 @@ import Badge from './Badge.svelte';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => ({
-  Component: Badge,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story 
@@ -18,24 +19,30 @@ export const Template = (args) => ({
     args={{
       status: 'warning',
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral',
       label: 'Neutral',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error',
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
 </Canvas>
 ```
diff --git a/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx b/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx
index 43e558f83e01..1385646d5086 100644
--- a/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx
@@ -7,27 +7,37 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'QueryMethods',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
-
-export const ExampleWithRole = Template.bind({});
-ExampleWithRole.play = async () => {
-  // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleWithRole = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+  },
 };
 
-export const ExampleWithText = Template.bind({});
-ExampleWithText.play = async () => {
-  // The play function interacts with the component and looks for the text
-  await screen.findByText('example string');
+export const ExampleWithText = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+  play: async () => {
+    // The play function interacts with the component and looks for the text
+    await screen.findByText('example string');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-alt-queries.mdx.mdx b/docs/snippets/svelte/my-component-play-function-alt-queries.mdx.mdx
index d1514e09e9f8..01cd59c66709 100644
--- a/docs/snippets/svelte/my-component-play-function-alt-queries.mdx.mdx
+++ b/docs/snippets/svelte/my-component-play-function-alt-queries.mdx.mdx
@@ -9,26 +9,30 @@ import MyComponent from './MyComponent.svelte';
 
 <Meta title="QueryMethods" component={MyComponent} />
 
-export const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleWithRole"
-  play={async () => {
-    // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(screen.getByRole('button', { name: / button label/i }));
-  }}>
-  {Template.bind({})}
-</Story>
-
+  }}
+  render={(args) => ({
+    Component: MyComponent,
+    props: args,
+  })} />
 <Story
   name="ExampleWithText"
-  play={async () => {
+  play={ async () => {
     // The play function interacts with the component and looks for the text
     await screen.findByText('example string');
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    Component: MyComponent,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-composition.js.mdx b/docs/snippets/svelte/my-component-play-function-composition.js.mdx
index f863d7ea4bf9..1b28803f27c4 100644
--- a/docs/snippets/svelte/my-component-play-function-composition.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-composition.js.mdx
@@ -7,33 +7,49 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
 
-export const FirstStory = Template.bind({});
-FirstStory.play = async () => {
-  userEvent.type(screen.getByTestId('an-element'), 'example-value');
+export const FirstStory = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  play: async () => {
+    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  },
 };
 
-export const SecondStory = Template.bind({});
-SecondStory.play = async () => {
-  await userEvent.type(screen.getByTestId('other-element'), 'another value');
+export const SecondStory = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  play: async () => {
+    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  },
 };
 
-export const CombinedStories = Template.bind({});
-CombinedStories.play = async () => {
-  // Runs the FirstStory and Second story play function before running this story's play function
-  await FirstStory.play();
-  await SecondStory.play();
-  await userEvent.type(screen.getByTestId('another-element'), 'random value');
+export const CombinedStories = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  play: async () => {
+    // Runs the FirstStory and Second story play function before running this story's play function
+    await FirstStory.play();
+    await SecondStory.play();
+    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx b/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx
index 2697261ca5a7..b68676b2696a 100644
--- a/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx
@@ -7,34 +7,40 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithAsync',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
-
-export const ExampleAsyncStory = Template.bind({});
-ExampleAsyncStory.play = async () => {
-  const Input = screen.getByLabelText('Username', {
-    selector: 'input',
-  });
-
-  await userEvent.type(Input, 'WrongInput', {
-    delay: 100,
-  });
-
-  // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const Submit = screen.getByRole('button');
-  await userEvent.click(Submit);
-
-  await waitFor(async () => {
-    await userEvent.hover(screen.getByTestId('error'));
-  });
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleAsyncStory = {
+  render: (args) => ({
+    component: MyComponent,
+    props: args,
+  }),
+  play: async () => {
+    const exampleElement = screen.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = screen.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-waitfor.mdx.mdx b/docs/snippets/svelte/my-component-play-function-waitfor.mdx.mdx
index 07b8966a6a6f..e3e2c204d784 100644
--- a/docs/snippets/svelte/my-component-play-function-waitfor.mdx.mdx
+++ b/docs/snippets/svelte/my-component-play-function-waitfor.mdx.mdx
@@ -9,14 +9,15 @@ import MyComponent from './MyComponent.svelte';
 
 <Meta title="WithAsync" component={MyComponent} />
 
-export const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleAsyncStory"
-  play={async () => {
+  play={ async () => {
     const Input = screen.getByLabelText('Username', {
       selector: 'input',
     });
@@ -25,14 +26,16 @@ export const Template = (args) => ({
       delay: 100,
     });
 
-    // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     const Submit = screen.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
       await userEvent.hover(screen.getByTestId('error'));
     });
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    Component: MyComponent,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx b/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx
index 1f826ddccc8d..c10eba0e2760 100644
--- a/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx
@@ -7,25 +7,25 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithCanvasElement',
-  component: MyComponent,  
+  component: MyComponent,
 };
 
-const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.play = async ({ canvasElement }) => {
-  // Assigns canvas to the component root element
+export const ExampleStory = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  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('another-element'));
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-canvas.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-canvas.mdx.mdx
index 7fdbc2663300..1891e842d70b 100644
--- a/docs/snippets/svelte/my-component-play-function-with-canvas.mdx.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-canvas.mdx.mdx
@@ -9,21 +9,24 @@ import MyComponent from './MyComponent.svelte';
 
 <Meta title="WithCanvasElement" component={MyComponent} />
 
-export const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleStory"
-  play={async ({ canvasElement }) => {
+  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('another-element'));
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    Component: MyComponent,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx
index e1e8931e911a..ef7da34712c9 100644
--- a/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx
@@ -7,27 +7,38 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ClickExamples',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
 
-export const ClickExample = Template.bind({});
-ClickExample.play = async () => {
-  // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button'));
+export const ClickExample = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button'));
+  },
 };
 
-export const FireEventExample = Template.bind({});
-FireEventExample.play = async () => {
-  // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await fireEvent.click(screen.getByTestId('data-testid'));
+export const FireEventExample = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(screen.getByTestId('data-testid'));
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-clickevent.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-clickevent.mdx.mdx
index 29618daa1302..3cb43de88f88 100644
--- a/docs/snippets/svelte/my-component-play-function-with-clickevent.mdx.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-clickevent.mdx.mdx
@@ -9,26 +9,30 @@ import MyComponent from './MyComponent.svelte';
 
 <Meta title="ClickExamples" component={MyComponent} />
 
-export const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ClickExample"
-  play={async () => {
-    // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(screen.getByRole('button'));
-  }}>
-  {Template.bind({})}
-</Story>
-
+  }}
+  render={(args) => ({
+    Component: MyComponent,
+    props: args,
+  })} />
 <Story
   name="FireEventExample"
-  play={async ()=>{
-    // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await fireEvent.click(screen.getByTestId('data-testid'));
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    Component: MyComponent,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
index 47ce8d030ca1..32648be43be6 100644
--- a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
@@ -7,30 +7,35 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithDelay',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const DelayedStory = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element');
 
-export const DelayedStory = Template.bind({});
-DelayedStory.play = async () => {
-  const exampleElement= screen.getByLabelText('example-element');
+    // The delay option set the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
 
-  // The delay option set the amount of milliseconds between characters being typed
-  await userEvent.type(exampleElement, 'random string', {
-    delay: 100,
-  });
-
-  const AnotherExampleElement= screen.getByLabelText('another-example-element');
-  await userEvent.type(AnotherExampleElement, 'another random string', {
-    delay: 100,
-  });
+    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
 };
 ```
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
index 2706786d7110..41ebd73e086c 100644
--- a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
@@ -9,14 +9,15 @@ import MyComponent from './MyComponent.svelte';
 
 <Meta title="WithDelay" component={MyComponent} />
 
-export const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="DelayedStory"
-  play={async () => {
+  play={ async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
     // The delay option set the amount of milliseconds between characters being typed
@@ -28,7 +29,9 @@ export const Template = (args) => ({
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    Component: MyComponent,
+    props: args,
+  })} />
 ```
diff --git a/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx
index f5bd1ffc6204..b5461b9e438f 100644
--- a/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx
@@ -7,9 +7,9 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithSelectEvent',
   component: MyComponent,
 };
@@ -19,21 +19,26 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
-
-export const ExampleChangeEvent = Template.bind({});
-ExampleChangeEvent.play = async () => {
-  const select = screen.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']);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleChangeEvent = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  play: async () => {
+    const select = screen.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']);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-selectevent.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-selectevent.mdx.mdx
index 6bae3642ade7..bba4c2db104e 100644
--- a/docs/snippets/svelte/my-component-play-function-with-selectevent.mdx.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-selectevent.mdx.mdx
@@ -15,10 +15,11 @@ export const sleep(ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
-export const Template= (args)=>({
-  Component: MyComponent,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story 
   name="ExampleChangeEvent"
@@ -33,7 +34,9 @@ export const Template= (args)=>({
 
     await userEvent.selectOptions(select, ['Yet another item']);
 
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    Component: MyComponent,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
index a67422f4d357..97ad38ff5e70 100644
--- a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
@@ -5,21 +5,25 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Path/To/MyComponent',
   component: MyComponent,
 };
 
-export const Basic = () => ({
-  Component: MyComponent,
-});
+export const Basic = {
+  render: () => ({
+    Component: MyComponent,
+  }),
+};
 
-export const WithProp = () => ({
-  Component: MyComponent,
-  props:{
-    prop: 'value',
-  },
-});
+export const WithProp = {
+  render: () => ({
+    Component: MyComponent,
+    props: {
+      prop: 'value',
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
index 3720e5ed3998..0d53c78ddab8 100644
--- a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
@@ -7,9 +7,9 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
   parameters: {
@@ -23,12 +23,19 @@ export default {
   },
 };
 
-export const MyStory = () => ({
-  Component: MyComponent,
-});
-MyStory.parameters = {
-  viewport: {
-    defaultViewport: 'iphonex',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const MyStory = {
+  render: () => ({
+    Component: MyComponent,
+  }),
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
index afd1ced8915a..55db71066347 100644
--- a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
@@ -17,17 +17,21 @@ import MyComponent from './MyComponent.svelte';
   }}
   component={MyComponent} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
+
 <Story
   name="MyStory"
   parameters={{
     viewport: {
       defaultViewport: 'iphonex',
     }
-  }}>
-   {() => {
-    return {
-      Component: MyComponent,
-    };
   }}
-</Story>
+  render={(args) => ({
+    Component: MyComponent,
+    props: {},
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
index 510c59460176..6a3b2c5f9beb 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
@@ -5,9 +5,9 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
@@ -27,13 +27,20 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = (args, { globals: { locale } }) => {
-  const caption = getCaptionForLocale(locale);
-  return {
-    component: MyComponent,
-    props: {
-      locale: caption,
-    },
-  };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return {
+      component: MyComponent,
+      props: {
+        locale: caption,
+      },
+    };
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
index 07fca01dd1c8..8616875818d4 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
@@ -18,8 +18,15 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<Story name="StoryWithLocale">
-  {(args, { globals: { locale } }) => {
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
+
+<Story 
+  name="StoryWithLocale"
+  render={(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
       component: MyComponent,
@@ -27,6 +34,5 @@ export const getCaptionForLocale = (locale) => {
         locale: caption,
       },
     };
-  }}
-</Story>
+  }} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
index 43779b2731ab..6e1b1d7ac763 100644
--- a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
@@ -7,10 +7,10 @@ import someData from './data.json';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'MyComponent', 
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
@@ -19,20 +19,28 @@ export default {
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-
-const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
-
-
-export const SimpleStory = Template.bind({});
-SimpleStory.args = {
-  data: simpleData,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const SimpleStory = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  args: {
+    data: simpleData,
+  },
 };
 
-export const ComplexStory = Template.bind({});
-ComplexStory.args = {
-  data: complexData,
+export const ComplexStory = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  args: {
+    data: complexData,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-with-env-variables.js.mdx b/docs/snippets/svelte/my-component-with-env-variables.js.mdx
index 6dfb2cfbe662..2d64ce457d36 100644
--- a/docs/snippets/svelte/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/svelte/my-component-with-env-variables.js.mdx
@@ -5,21 +5,25 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-
-const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx b/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
index 9dfc843bad60..803105fa297a 100644
--- a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
+++ b/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
@@ -7,17 +7,21 @@ import MyComponent from './MyComponent.svelte';
 
 <Meta title="MyComponent" component={MyComponent}/>
 
-export const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
     name="ExampleStory"
     args={{
       propertyA: process.env.STORYBOOK_DATA_KEY,
-    }}>
-    {Template.bind({})}
+    }}
+    render={(args) => ({
+      Component: MyComponent,
+      props: args,
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/page-story-with-args-composition.js.mdx b/docs/snippets/svelte/page-story-with-args-composition.js.mdx
index 9501dcd295e9..7fd600d4c084 100644
--- a/docs/snippets/svelte/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/svelte/page-story-with-args-composition.js.mdx
@@ -10,23 +10,27 @@ import * as DocumentListStories from './DocumentList.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-
-const Template = (args) => ({
-  component: DocumentScreen,
-  props: args,
-});
-
-export const SimplePage = Template.bind({});
-SimplePage.args = {
-  user: PageLayoutStories.Simple.args.user,
-  document: DocumentHeaderStories.Simple.args.document,
-  subdocuments: DocumentListStories.Simple.args.documents,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const SimplePage = {
+  render: (args) => ({
+    Component: DocumentScreen,
+    props: args,
+  }),
+  args: {
+    user: PageLayoutStories.Simple.args.user,
+    document: DocumentHeaderStories.Simple.args.document,
+    subdocuments: DocumentListStories.Simple.args.documents,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/page-story.js.mdx b/docs/snippets/svelte/page-story.js.mdx
index f6f88c50c350..8f75ccbdd52a 100644
--- a/docs/snippets/svelte/page-story.js.mdx
+++ b/docs/snippets/svelte/page-story.js.mdx
@@ -8,20 +8,25 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-const Template = (args) => ({
-  Component: Page,
-  props: args,
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  ...HeaderStories.LoggedIn.args,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const LoggedIn = {
+  render: (args) => ({
+    Component: Page,
+    props: args,
+  }),
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/register-component-with-play-function.js.mdx b/docs/snippets/svelte/register-component-with-play-function.js.mdx
index 9ca947780a30..f30390cf6252 100644
--- a/docs/snippets/svelte/register-component-with-play-function.js.mdx
+++ b/docs/snippets/svelte/register-component-with-play-function.js.mdx
@@ -7,38 +7,44 @@ import RegistrationForm from './RegistrationForm.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'RegistrationForm',
   component: RegistrationForm,
 };
 
-const Template = (args) => ({
-  Component: RegistrationForm,
-  props: args,
-});
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async () => {
-  const emailInput = screen.getByLabelText('email', {
-    selector: 'input',
-  });
-
-  await userEvent.type(emailInput, 'example-email@email.com', {
-    delay: 100,
-  });
-
-  const passwordInput = screen.getByLabelText('password', {
-    selector: 'input',
-  });
-
-  await userEvent.type(passwordInput, 'ExamplePassword', {
-    delay: 100,
-  });
-  // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const submitButton = screen.getByRole('button');
-
-  await userEvent.click(submitButton);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+
+export const FilledForm = {
+  render: (args) => ({
+    Component: RegistrationForm,
+    props: args,
+  }),
+  play: async () => {
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = screen.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/register-component-with-play-function.mdx.mdx b/docs/snippets/svelte/register-component-with-play-function.mdx.mdx
index ed9ab116afdc..0f7dc0717ef6 100644
--- a/docs/snippets/svelte/register-component-with-play-function.mdx.mdx
+++ b/docs/snippets/svelte/register-component-with-play-function.mdx.mdx
@@ -9,14 +9,15 @@ import RegistrationForm from './RegistrationForm.svelte';
 
 <Meta title="RegistrationForm" component={RegistrationForm} />
 
-export const Template = (args) => ({
-  Component: RegistrationForm,
-  props: args,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="FilledForm"
-  play={async () => {
+  play={ async () => {
     const emailInput = screen.getByLabelText('email', {
       selector: 'input',
     });
@@ -31,10 +32,12 @@ export const Template = (args) => ({
     await userEvent.type(passwordInput, 'ExamplePassword', {
       delay: 100,
     });
-    // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     const submitButton = screen.getByRole('button');
     await userEvent.click(submitButton);
-  }}>
-  {Template.bind({})}
-</Story>
+  }
+  render={() => ({
+    component: RegistrationForm,
+    props: {},
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
index 11a55bbc244f..4d39da409e61 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
@@ -5,20 +5,29 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Disable a11y addon',
   component: MyComponent,
 };
 
-const Template = () => ({ Component: MyComponent });
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
 
-export const NonA11yStory = Template.bind({});
-NonA11yStory.parameters = {
-  a11y: {
-    // This option disables all a11y checks on this story
-    disable: true,
+export const NonA11yStory = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  parameters: {
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
index e5020c45ed4d..0ce1c81432ae 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
@@ -9,7 +9,11 @@ import MyComponent from './MyComponent.svelte';
   title="Disable a11y addon" 
   component={MyComponent} />
 
-export const Template = () => ({ Component: MyComponent });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="NonA11yStory"
@@ -18,7 +22,9 @@ export const Template = () => ({ Component: MyComponent });
       // This option disables all a11y checks on this story
       disable: true,
     },
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    Component: MyComponent,
+    props: {},
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
index 92b58d82a4f2..580d26aa0768 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
@@ -5,35 +5,43 @@ import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Configure a11y addon',
   component: MyComponent,
 };
 
-const Template = () => ({ Component: MyComponent });
-
-export const ExampleStory = Template.bind({});
-ExampleStory.parameters = {
-  a11y: {
-    element: '#root',
-    config: {
-      rules: [
-        {
-          // The autocomplete rule will not run based on the CSS selector provided
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // Setting the enabled option to false will disable checks for this particular rule on all stories.
-          id: 'image-alt',
-          enabled: false,
-        },
-      ],
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: (args) => ({
+    Component: MyComponent,
+    props: args,
+  }),
+  parameters: {
+    a11y: {
+      element: '#root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
     },
-    options: {},
-    manual: true,
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
index 8fb7b459a044..77ffa3d57120 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
@@ -9,7 +9,11 @@ import MyComponent from './MyComponent.svelte';
   title="Configure a11y addon" 
   component={MyComponent} />
 
-export const Template = () => ({ Component: MyComponent });
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/svelte/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleStory"
@@ -33,7 +37,9 @@ export const Template = () => ({ Component: MyComponent });
       options: {},
       manual: true,
     },
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    Component: MyComponent,
+    props: {},
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/your-component-with-decorator.js.mdx b/docs/snippets/svelte/your-component-with-decorator.js.mdx
index 66408444bb56..874a7d75da3c 100644
--- a/docs/snippets/svelte/your-component-with-decorator.js.mdx
+++ b/docs/snippets/svelte/your-component-with-decorator.js.mdx
@@ -7,7 +7,7 @@ import MarginDecorator from './MarginDecorator.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'YourComponent',
diff --git a/docs/snippets/svelte/your-component.js.mdx b/docs/snippets/svelte/your-component.js.mdx
index 89578545f2cb..f2e0697e997f 100644
--- a/docs/snippets/svelte/your-component.js.mdx
+++ b/docs/snippets/svelte/your-component.js.mdx
@@ -6,20 +6,25 @@ import YourComponent from './YourComponent.svelte';
 //👇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/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => ({
-  props: args,
-});
-
-export const FirstStory = Template.bind({});
-FirstStory.args= {
- //👇 The args you need here will depend on your component
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: (args) => ({
+    Component: YourComponent,
+    props: args,
+  }),
+  args: {
+    //👇 The args you need here will depend on your component
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/your-component.mdx.mdx b/docs/snippets/svelte/your-component.mdx.mdx
index a0d8259cefd1..8f63ceffc626 100644
--- a/docs/snippets/svelte/your-component.mdx.mdx
+++ b/docs/snippets/svelte/your-component.mdx.mdx
@@ -9,16 +9,12 @@ import YourComponent from './YourComponent.svelte';
 
 <Meta title="YourComponent" component={YourComponent} />
 
-<!--👇 We create a “template” of how args map to rendering -->
-export const Template = (args) => ({
-  Component: YourComponent,
-  props: args,
-});
-
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}>
-  {Template.bind({})}
-</Story>
+  args={{}}
+  render={(args) => ({
+    component: YourComponent,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/app-story-with-mock.js.mdx b/docs/snippets/vue/app-story-with-mock.js.mdx
index f6266eb076ac..6890cf9d7964 100644
--- a/docs/snippets/vue/app-story-with-mock.js.mdx
+++ b/docs/snippets/vue/app-story-with-mock.js.mdx
@@ -5,34 +5,39 @@ import App from './App.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'App',
   component: App,
 };
 
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
 
-const Template = () => ({
-  components: { App },
-  template: '<App />',
-});
-
-export const Success = Template.bind({});
-Success.parameters = {
-  fetch: {
-    json: {
-      JavaScript: 3390991,
-      "C++": 44974,
-      TypeScript: 15530,
-      CoffeeScript: 12253,
-      Python: 9383,
-      C: 5341,
-      Shell: 5115,
-      HTML: 3420,
-      CSS: 3171,
-      Makefile: 189
-    }
-  }
+export const Success = {
+  parameters: {
+    fetch: {
+      json: {
+        JavaScript: 3390991,
+        'C++': 44974,
+        TypeScript: 15530,
+        CoffeeScript: 12253,
+        Python: 9383,
+        C: 5341,
+        Shell: 5115,
+        HTML: 3420,
+        CSS: 3171,
+        Makefile: 189,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { App },
+    template: '<App />',
+  }),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story-starter-example.mdx.mdx b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
index 3b228d2840a9..8dc01331a330 100644
--- a/docs/snippets/vue/badge-story-starter-example.mdx.mdx
+++ b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
@@ -8,30 +8,32 @@ import Icon from './Icon.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 # Badge
 
 Let's define a story for our `Badge` component:
 
-<Story name="positive">
-  {() => {
-    return {
-      components: { Badge },
-      template: `<Badge status="positive">Positive</Badge>`,
-    };
-  }}
-</Story>
+<Story 
+  name="positive"
+  render={() => ({
+    components: { Badge },
+    template: `<Badge status="positive">Positive</Badge>`,
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
 <Canvas>
-  <Story name="negative">
-    {() => {
-      return {
-        components: { Badge },
-        template: `<Badge status="negative">Negative</Badge>`,
-      };
-    }}
-  </Story>
+  <Story
+    name="negative"
+    render={() => ({
+      components: { Badge },
+      template: `<Badge status="negative">Negative</Badge>`,
+    })} />
 </Canvas>
 
 We can even preview multiple stories in a block. This
@@ -39,41 +41,33 @@ gets rendered as a group, but defines individual stories
 with unique URLs and isolated snapshot tests.
 
 <Canvas>
-  <Story name="warning">
-    {() => {
-      return {
-        components: { Badge },
-        template: `<Badge status="warning">Warning</Badge>`,
-      };
-    }}
-  </Story>
-  <Story name="neutral">
-    {() => {
-      return {
-        components: { Badge },
-        template: `<Badge status="neutral">Neutral</Badge>`,
-      };
-    }}
-  </Story>
-  <Story name="error">
-    {() => {
-      return {
-        components: { Badge },
-        template: `<Badge status="error">Error</Badge>`,
-      };
-    }}
-  </Story>
-  <Story name="with icon">
-    {() => {
-      return {
-        components: { Badge, Icon },
-        template: `
-          <Badge status="warning">
-            <Icon icon="check" inline />
-             with icon
-          </Badge>`,
-      };
-    }}
-  </Story>
+  <Story 
+    name="warning"
+    render={() => ({
+      components: { Badge },
+      template: `<Badge status="warning">Warning</Badge>`,
+    })} />
+  <Story 
+    name="neutral"
+    render={() => ({
+      components: { Badge },
+      template: `<Badge status="neutral">Neutral</Badge>`,
+    })} />
+  <Story 
+    name="error"
+    render={() => ({
+      components: { Badge },
+      template: `<Badge status="error">Error</Badge>`,
+    })} />
+  <Story 
+    name="with icon"
+    render={() => ({
+      components: { Badge, Icon },
+      template: `
+        <Badge status="warning">
+          <Icon icon="check" inline />
+          with icon
+        </Badge>`,
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
index 32ed8f0726b5..464655e42792 100644
--- a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
@@ -7,24 +7,27 @@ import Badge from './Badge.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Badge },
-  template: '<Badge v-bind="$props" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 # Badge
 
 Let's define a story for our `Badge` component:
 
-<Story
+<Story 
   name="positive"
   args={{
     status: 'positive',
     label: 'Positive',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Badge },
+    template: '<Badge v-bind="$props" />',
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
@@ -34,9 +37,12 @@ We can drop it in a `Canvas` to get a code snippet:
     args={{
       status: 'negative', 
      label: 'Negative',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
 </Canvas>
 
 We can even preview multiple Stories in a block. This
@@ -49,24 +55,33 @@ with unique URLs, which is great for review and testing.
     args={{
       status: 'warning',
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral', 
       label: 'Neutral',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error', 
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story.mdx-3.mdx.mdx b/docs/snippets/vue/badge-story.mdx-3.mdx.mdx
index d4909ef78c70..b6010a1cd555 100644
--- a/docs/snippets/vue/badge-story.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/badge-story.mdx-3.mdx.mdx
@@ -7,13 +7,11 @@ import Badge from './Badge.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => ({
-  components: { Badge },
-  setup() {
-    return { args };
-  },
-  template: '<Badge v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 # Badge
 
@@ -24,9 +22,14 @@ Let's define a story for our `Badge` component:
   args={{
     status: 'positive',
     label: 'Positive'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { Badge },
+    setup() {
+      return { args };
+    },
+    template: '<Badge v-bind="args" />',
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
@@ -36,9 +39,14 @@ We can drop it in a `Canvas` to get a code snippet:
     args={{
       status: 'negative', 
       label: 'Negative',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
 </Canvas>
 
 We can even preview multiple Stories in a block. This
@@ -51,24 +59,39 @@ with unique URLs, which is great for review and testing.
     args={{
       status: 'warning',
       label: 'Warning', 
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral', 
       label: 'Neutral', 
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error', 
       label: 'Error', 
-  }}>
-  {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.2.js.mdx b/docs/snippets/vue/button-group-story.2.js.mdx
index a083bfbce036..62e2e4934165 100644
--- a/docs/snippets/vue/button-group-story.2.js.mdx
+++ b/docs/snippets/vue/button-group-story.2.js.mdx
@@ -8,25 +8,27 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { ButtonGroup },
-  props: Object.keys(argTypes),
-  template: '<ButtonGroup v-bind="$props" />',
-});
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [
-    { ...ButtonStories.Primary.args },
-    { ...ButtonStories.Secondary.args }
-  ],
-  orientation: 'horizontal',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Pair = {
+  render: (args, { argTypes }) => ({
+    components: { ButtonGroup },
+    props: Object.keys(argTypes),
+    template: '<ButtonGroup v-bind="$props" />',
+  }),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.3.js.mdx b/docs/snippets/vue/button-group-story.3.js.mdx
index 6197ffd73ae4..f4f074c61a16 100644
--- a/docs/snippets/vue/button-group-story.3.js.mdx
+++ b/docs/snippets/vue/button-group-story.3.js.mdx
@@ -8,27 +8,29 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
   component: ButtonGroup,
 };
 
-const Template = (args) => ({
-  components: { ButtonGroup },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Pair = {
+  render: (args) => ({
+    components: { ButtonGroup },
+    setup() {
+      return { args };
+    },
+    template: '<ButtonGroup v-bind="args" />',
+  }),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
   },
-  template: '<ButtonGroup v-bind="args" />',
-});
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [
-    { ...ButtonStories.Primary.args },
-    { ...ButtonStories.Secondary.args }
-  ],
-  orientation: 'horizontal',
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.ts-2.ts.mdx b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
index d0e1eb3adadc..b55030242c7b 100644
--- a/docs/snippets/vue/button-group-story.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
@@ -10,7 +10,7 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
diff --git a/docs/snippets/vue/button-group-story.ts-3.ts.mdx b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
index 91b68cc272f6..c6bb2b46420e 100644
--- a/docs/snippets/vue/button-group-story.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
@@ -3,31 +3,31 @@
 
 import ButtonGroup from './ButtonGroup.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 //👇 Imports the Button stories
 import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
   component: ButtonGroup,
 } as Meta<typeof Button>;
 
-const Template: StoryFn<typeof Button> = (args) => ({
-  components: { ButtonGroup },
-  setup() {
-    return { args };
+export const Pair: Story = {
+  render: (args) => ({
+    components: { ButtonGroup },
+    setup() {
+      return { args };
+    },
+    template: '<ButtonGroup v-bind="args" />',
+  }),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
   },
-  template: '<ButtonGroup v-bind="args" />',
-});
-
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
-  orientation: 'horizontal',
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx b/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
index 703274ec5570..ee3c22d82d28 100644
--- a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
@@ -7,21 +7,22 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: '<Button @onClick="onClick" :label="label" />'
-});
-
-Text.args = {
-  label: 'Hello',
-  onClick: action('clicked'),
+export const Text = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button @onClick="onClick" :label="label" />',
+  }),
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx b/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
index b192f70be997..fcb25d64724f 100644
--- a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
@@ -7,26 +7,26 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = ({ label, onClick }) => ({
-  components: { Button },
-  setup() {
-    return {
-      label,
-      onClick,
-    };
+export const Text = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return {
+        ...args,
+        onClick: action('clicked'),
+      };
+    },
+    template: '<Button @onClick="onClick" :label="label" />',
+  }),
+  args: {
+    label: 'Hello',
   },
-  template: '<Button @onClick="onClick" :label="label" />',
-});
-
-Text.args = {
-  label: 'Hello',
-  onClick: action('clicked'),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
index 7fffcdbcab4e..9f1c4bd3bc40 100644
--- a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
@@ -5,13 +5,13 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
   /*
-   * See https://storybook.js.org/docs/vue/essentials/actions#action-argtype-annotation
+   * See https://storybook.js.org/docs/7.0/vue/essentials/actions#action-argtype-annotation
    * to learn how to set up argTypes for actions
    */
   argTypes: {
@@ -19,11 +19,13 @@ export default {
   },
 };
 
-export const Text = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
-});
+export const Text = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler.2.js.mdx b/docs/snippets/vue/button-story-click-handler.2.js.mdx
index 78a35e008a9a..cdd298f8ac38 100644
--- a/docs/snippets/vue/button-story-click-handler.2.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler.2.js.mdx
@@ -7,18 +7,20 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = () => ({
-  components: { Button },
-  template: '<Button label="Hello" @click="onClick" />',
-  methods: {
-    onClick: action('clicked'),
-  },
-});
+export const Text = {
+  render: () => ({
+    components: { Button },
+    template: '<Button label="Hello" @click="onClick" />',
+    methods: {
+      onClick: action('clicked'),
+    },
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler.3.js.mdx b/docs/snippets/vue/button-story-click-handler.3.js.mdx
index 7c1ad200ae7f..5d0c507c271c 100644
--- a/docs/snippets/vue/button-story-click-handler.3.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler.3.js.mdx
@@ -7,20 +7,22 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Text = () => ({
-  components: { Button },
-  template: '<Button label="Hello" @click="onClick" />',
-  setup(){
-    return {
-      onClick: action('clicked'),
-    };
-  },
-});
+export const Text = {
+  render: () => ({
+    components: { Button },
+    setup() {
+      return {
+        onClick: action('clicked'),
+      };
+    },
+    template: '<Button label="Hello" @click="onClick" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-component-args-primary.js.mdx b/docs/snippets/vue/button-story-component-args-primary.js.mdx
index 525fc0d27571..8612d8a608a5 100644
--- a/docs/snippets/vue/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/vue/button-story-component-args-primary.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-component-decorator.js.mdx b/docs/snippets/vue/button-story-component-decorator.js.mdx
index 0c505d3b8c0e..497c9e6c298d 100644
--- a/docs/snippets/vue/button-story-component-decorator.js.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
index 37a6ec4b52f0..75a646696fa5 100644
--- a/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue';
+import type { Meta } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
index bc4678319e93..95ae0184fdb3 100644
--- a/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue3';
+import type { Meta } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-decorator.js.mdx b/docs/snippets/vue/button-story-decorator.js.mdx
index 80d1d3caf4c2..0f2c85b0d1b9 100644
--- a/docs/snippets/vue/button-story-decorator.js.mdx
+++ b/docs/snippets/vue/button-story-decorator.js.mdx
@@ -5,16 +5,23 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  components: { Button },
-  template: '<Button primary label="Hello World" />',
-});
-Primary.decorators = [() => ({ template: '<div style="margin: 3em;"><story /></div>' })];
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Hello World" />',
+  }),
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-decorator.mdx.mdx b/docs/snippets/vue/button-story-decorator.mdx.mdx
index 613fa80690f2..058c6520dfb7 100644
--- a/docs/snippets/vue/button-story-decorator.mdx.mdx
+++ b/docs/snippets/vue/button-story-decorator.mdx.mdx
@@ -7,19 +7,20 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button}/>
 
-export const Template = () => ({
-  components: { Button },
-  template: '<Button primary label="Hello World"/>',
-});
-
-
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Story
   name="Primary"
   decorators={[
     () => ({
       template: '<div style="margin: 3em;"><story /></div>',
     }),
-  ]}>
-  {Template.bind({})}
-<Story>
+  ]}
+  render={() => ({
+    components: { Button },
+    template: '<Button primary label="Hello World"/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-docs-code.3.js.mdx b/docs/snippets/vue/button-story-default-docs-code.3.js.mdx
deleted file mode 100644
index 12c57c90a59d..000000000000
--- a/docs/snippets/vue/button-story-default-docs-code.3.js.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-export default {
-  /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button',
-  component: Button,
-  //👇 Creates specific argTypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-//👇 Some function to demonstrate the behavior
-const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-export const ExampleStory = (args) => {
-  //👇 Assigns the function result to a variable
-  const functionResult = someFunction(args.label);
-  return {
-    components: { Button },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return {
-        args: {
-          ...args,
-          //👇 Replaces arg variable with the override (without the need of mutation)
-          label: functionResult,
-        },
-      };
-    },
-    template: '<Button v-bind="args" />',
-  };
-};
-ExampleStory.args = {
-  primary: true,
-  size: 'small',
-  label: 'button',
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-docs-code.mdx-3.mdx.mdx b/docs/snippets/vue/button-story-default-docs-code.mdx-3.mdx.mdx
deleted file mode 100644
index 1491648a2ccf..000000000000
--- a/docs/snippets/vue/button-story-default-docs-code.mdx-3.mdx.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.vue';
-
-<!-- 👇 Creates specific argTypes -->
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    backgroundColor: {
-      control: 'color',
-    },
-  }}
-/>
-
-<!-- 👇 Some function to demonstrate the behavior -->
-export const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-
-<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
-<Story
-  name="ExampleStory"
-  args={{
-    primary: true,
-    size: 'small',
-    label: 'button',
-  }} >
-  {(args) => {
-    const functionResult = someFunction(args.label);
-    return {
-      components: { Button },
-      setup() {
-        return {
-          args: {
-            ...args,
-            label: functionResult,
-          },
-        };
-      },
-      template: '<Button v-bind="args" />',
-    };
-  }}
-</Story>
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-export-with-component.js.mdx b/docs/snippets/vue/button-story-default-export-with-component.js.mdx
index c0a453a77ecd..4f5b035e16d1 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
index 3203b13bc70a..02326201d4aa 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue';
+import type { Meta } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
index afc5e65c7954..d034f021fcb8 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue3';
+import type { Meta } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-rename-story.js.mdx b/docs/snippets/vue/button-story-rename-story.js.mdx
index 95750d3d6c82..2cbbe957335d 100644
--- a/docs/snippets/vue/button-story-rename-story.js.mdx
+++ b/docs/snippets/vue/button-story-rename-story.js.mdx
@@ -5,16 +5,23 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
-Primary.storyName = 'I am the primary';
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  name: 'I am the primary',
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
deleted file mode 100644
index 14dfc01e1fc2..000000000000
--- a/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-```ts
-// Button.stories.ts
-
-import Button from './Button.vue';
-
-import { Meta, StoryFn } from '@storybook/vue';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-} as Meta<typeof Button>;
-
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
-Primary.storyName = 'I am the primary';
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
deleted file mode 100644
index 8925512e6961..000000000000
--- a/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-```ts
-// Button.stories.ts
-
-import Button from './Button.vue';
-
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-} as Meta<typeof Button>;
-
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
-Primary.storyName = 'I am the primary';
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts.mdx
new file mode 100644
index 000000000000..196941dad0c2
--- /dev/null
+++ b/docs/snippets/vue/button-story-rename-story.ts.mdx
@@ -0,0 +1,29 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import type { Meta, Story } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as Meta<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  name:'I am the primary',
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.2.js.mdx b/docs/snippets/vue/button-story-using-args.2.js.mdx
index 1cce963c293f..4883a73fbbcd 100644
--- a/docs/snippets/vue/button-story-using-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-using-args.2.js.mdx
@@ -5,27 +5,51 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args, { argTypes }) => ({
-  components: { Button },
-  props: Object.keys(argTypes),
-  template: '<Button v-bind="$props" />',
-});
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+export const Secondary = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.3.js.mdx b/docs/snippets/vue/button-story-using-args.3.js.mdx
index c681a3c25ead..0a99803e1d16 100644
--- a/docs/snippets/vue/button-story-using-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-using-args.3.js.mdx
@@ -5,28 +5,57 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
   },
-  template: '<Button v-bind="args" />',
-});
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+};
 
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
index 4bfe62dd1183..95ddfe52c24d 100644
--- a/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
@@ -3,31 +3,55 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: StoryFn<typeof Button> = (args, { argTypes }) => ({
-  components: { Button },
-  props: Object.keys(argTypes),
-  template: '<Button v-bind="$props" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    background: '#ff0',
+    label: 'Button',
+  },
+};
 
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+export const Secondary: Story = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
-
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary: Story = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
index b081e49bbe23..e28b61419145 100644
--- a/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
@@ -3,33 +3,62 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: StoryFn<typeof Button> = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
-});
 
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    background: '#ff0',
+    label: 'Button',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+export const Secondary: Story = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary: Story = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-addon-example.js.mdx b/docs/snippets/vue/button-story-with-addon-example.js.mdx
index d07029c32d4e..2416e1432620 100644
--- a/docs/snippets/vue/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/vue/button-story-with-addon-example.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   //👇 Creates specific parameters for the story
   parameters: {
@@ -17,8 +17,10 @@ export default {
   },
 };
 
-export const Basic = () => ({
-  components: { Button },
+export const Basic = {
+  render: () => ({
+    components: { Button },
     template: '<Button label="Hello" />',
-});
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-args.2.js.mdx b/docs/snippets/vue/button-story-with-args.2.js.mdx
index b7cfcaee9515..17611ee114ec 100644
--- a/docs/snippets/vue/button-story-with-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-with-args.2.js.mdx
@@ -5,24 +5,27 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-// 👇 We create a “template” of how args map to rendering
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-});
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-
-Primary.args = {
-  primary: true,
-  label: 'Button',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" v-on="$props" />',
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-args.3.js.mdx b/docs/snippets/vue/button-story-with-args.3.js.mdx
index bd54da03cfb1..20f44a3250a3 100644
--- a/docs/snippets/vue/button-story-with-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-with-args.3.js.mdx
@@ -5,28 +5,29 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => ({
-  components: { Button },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
   },
-  template: '<Button v-bind="args" />',
-});
-
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx b/docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx
index 0fe61e09fbb8..66dc1204cb95 100644
--- a/docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx
@@ -7,21 +7,20 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button} />
 
-<!-- 👇 We create a “template” of how args map to rendering -->
-
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: `<Button v-bind="$props" v-on="$props" />`,
-});
-
-<!-- 👇 Each story then reuses that template -->
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Story
   name="Primary"
   args={{
     primary: true,
     label: 'Button',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button v-bind="$props" v-on="$props" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx b/docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx
index 252647df8f9c..49f7073f6211 100644
--- a/docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx
@@ -7,22 +7,22 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button}/>
 
-<!-- 👇 We create a “template” of how args map to rendering -->
-
-export const Template = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
-});
-
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Story
   name="Primary"
   args={{
     primary: true,
     label: 'Button',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.js.mdx b/docs/snippets/vue/button-story-with-blue-args.js.mdx
index b4a9ad989654..2c546313794b 100644
--- a/docs/snippets/vue/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
index c55b57c2ccc5..25a0b18c0b4c 100644
--- a/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue';
+import type { Meta } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
index 00cd50dc5c04..42c5b8729df9 100644
--- a/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
@@ -3,11 +3,11 @@
 
 import Button from './Button.vue';
 
-import { Meta } from '@storybook/vue3';
+import type { Meta } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/vue/button-story-with-emojis.js.mdx b/docs/snippets/vue/button-story-with-emojis.js.mdx
index 7e4a668ce3e3..a1298fb5308e 100644
--- a/docs/snippets/vue/button-story-with-emojis.js.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.js.mdx
@@ -5,25 +5,35 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="Button" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="Button" />',
+  }),
+};
 
-export const Secondary = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="😄👍😍💯" />',
-});
+export const Secondary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />',
+  }),
+};
 
-export const Tertiary = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="📚📕📈🤓" />',
-});
+export const Tertiary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
+  }),
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.mdx.mdx b/docs/snippets/vue/button-story-with-emojis.mdx.mdx
index c9d44de65917..f0acba6330b7 100644
--- a/docs/snippets/vue/button-story-with-emojis.mdx.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.mdx.mdx
@@ -7,32 +7,27 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button}/>
 
-<Story name="Primary">
-  {() => {
-    return {
-      components: { Button },
-      template: `<Button background="#ff0" label="Button"  />`,
-    };
-  }}
-</Story>
-
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+<Story 
+  name="Primary"
+  render={() => ({
+    components: { Button },
+    template: `<Button background="#ff0" label="Button"  />`,
+  })} />
 <Story
-  name="Secondary">
-  {() => {
-    return {
-      components: { Button },
-      template: `<Button background="#ff0" label="😄👍😍💯" />`,
-    };
-  }}
-</Story>
-
+  name="Secondary"
+  render={() => ({
+    components: { Button },
+    template: `<Button background="#ff0" label="😄👍😍💯" />`,
+  })} />
 <Story
-  name="Tertiary">
-  {() => {
-    return {
-      components: { Button },
-      template: `<Button background="#ff0" label="📚📕📈🤓" />`,
-    };
-  }}
-</Story>
+  name="Tertiary"
+  render={() => ({
+    components: { Button },
+    template: `<Button background="#ff0" label="📚📕📈🤓" />`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
index cf8c9ca28e53..1b0551fb3d80 100644
--- a/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
@@ -3,29 +3,41 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="Button" />',
-});
 
-export const Secondary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="😄👍😍💯" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="Button" />',
+  }),
+};
 
-export const Tertiary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="📚📕📈🤓" />',
-});
+export const Secondary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="😄👍😍💯" />',
+  }),
+};
+
+export const Tertiary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="📚📕📈🤓" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
index b292bb311fff..09b47b82b287 100644
--- a/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
@@ -3,29 +3,41 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="Button" />',
-});
 
-export const Secondary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="😄👍😍💯" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="Button" />',
+  }),
+};
 
-export const Tertiary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button background="#ff0" label="📚📕📈🤓" />',
-});
+export const Secondary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="😄👍😍💯" />',
+  }),
+};
+
+export const Tertiary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button background="#ff0" label="📚📕📈🤓" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.js.mdx b/docs/snippets/vue/button-story.js.mdx
index 15514fefa403..1034da9bcf0d 100644
--- a/docs/snippets/vue/button-story.js.mdx
+++ b/docs/snippets/vue/button-story.js.mdx
@@ -5,15 +5,22 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.mdx.mdx b/docs/snippets/vue/button-story.mdx.mdx
index 7e5db63593b4..329d84014677 100644
--- a/docs/snippets/vue/button-story.mdx.mdx
+++ b/docs/snippets/vue/button-story.mdx.mdx
@@ -7,14 +7,18 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 # Button
 
-<Story name="Primary">
-  {() => {
-    return {
-      components: { Button },
-      template: `<Button primary label="Button" />`,
-    };
-  }}
-</Story>
+<Story 
+  name="Primary"
+  render={() => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-2.ts.mdx b/docs/snippets/vue/button-story.ts-2.ts.mdx
index 38643023a710..f57eaff84b6d 100644
--- a/docs/snippets/vue/button-story.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story.ts-2.ts.mdx
@@ -3,19 +3,26 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-3.ts.mdx b/docs/snippets/vue/button-story.ts-3.ts.mdx
index 813792649c3d..29286788861a 100644
--- a/docs/snippets/vue/button-story.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story.ts-3.ts.mdx
@@ -3,19 +3,26 @@
 
 import Button from './Button.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
 
-export const Primary: StoryFn<typeof Button> = () => ({
-  components: { Button },
-  template: '<Button primary label="Button" />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button primary label="Button" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/checkbox-story-csf.js.mdx b/docs/snippets/vue/checkbox-story-csf.js.mdx
index 8047f0e4d5da..6d8bedac7379 100644
--- a/docs/snippets/vue/checkbox-story-csf.js.mdx
+++ b/docs/snippets/vue/checkbox-story-csf.js.mdx
@@ -5,20 +5,27 @@ import Checkbox from './Checkbox.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Checkbox', 
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Checkbox',
   component: Checkbox,
 };
 
-export const allCheckboxes = () => ({
-  components: { Checkbox },
-  template: `
-    <form>
-      <Checkbox id="Unchecked" label="Unchecked"/>
-      <Checkbox id="Checked" label="Checked" checked />
-      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
-    </form>`,
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const allCheckboxes = () => {
+  render: () => ({
+    components: { Checkbox },
+    template: `
+      <form>
+        <Checkbox id="Unchecked" label="Unchecked"/>
+        <Checkbox id="Checked" label="Checked" checked />
+        <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+      </form>`,
+  });
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/checkbox-story-starter-example.mdx.mdx b/docs/snippets/vue/checkbox-story-starter-example.mdx.mdx
index b2a23ae68bab..9f76a0ab3e24 100644
--- a/docs/snippets/vue/checkbox-story-starter-example.mdx.mdx
+++ b/docs/snippets/vue/checkbox-story-starter-example.mdx.mdx
@@ -7,23 +7,27 @@ import Checkbox from './Checkbox.vue';
 
 <Meta title="MDX/Checkbox" component={Checkbox} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 # Checkbox
 
 With `MDX`, we can define a story for `Checkbox` right in the middle of our Markdown documentation.
 
 <Canvas>
-  <Story name="all checkboxes">
-    {() => {
-      return {
-        components: { Checkbox },
-        template: `
-          <form>
-            <Checkbox id="Unchecked" label="Unchecked" />
-            <Checkbox id="Checked" label="Checked" checked />
-            <Checkbox appearance="secondary" id="second" label="Secondary" checked />
-          </form>`,
-      };
-    }}
-  </Story>
+  <Story 
+  name="all checkboxes"
+  render={() => ({
+    components: { Checkbox },
+    template: `
+      <form>
+        <Checkbox id="Unchecked" label="Unchecked" />
+        <Checkbox id="Checked" label="Checked" checked />
+        <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+      </form>`,
+  })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/checkbox-story.mdx-2.mdx.mdx b/docs/snippets/vue/checkbox-story.mdx-2.mdx.mdx
index 1175e202dc0d..0950503fee8d 100644
--- a/docs/snippets/vue/checkbox-story.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/checkbox-story.mdx-2.mdx.mdx
@@ -7,11 +7,11 @@ import Checkbox from './Checkbox.vue';
 
 <Meta title="MDX/Checkbox" component={Checkbox} />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Checkbox },
-  template: '<Checkbox v-bind="$props" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 # Checkbox
 
@@ -23,27 +23,34 @@ Markdown documentation.
     name="Unchecked"
     args={{ 
       label: 'Unchecked',
-    }}>
-    {Template.bind({})}
-   </Story>
-
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Checkbox },
+      template: '<Checkbox v-bind="$props" />',
+    })} />
   <Story 
     name="Checked"
     args={{ 
       label: 'Unchecked', 
       checked: true,
-    }}>
-    {Template.bind({})}
-   </Story>
-  
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Checkbox },
+      template: '<Checkbox v-bind="$props" />',
+    })} />
   <Story 
     name="Secondary"
     args={{
       label: 'Secondary', 
       checked: true, 
       appearance: 'secondary',
-    }}>
-    {Template.bind({})}
-   </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Checkbox },
+      template: '<Checkbox v-bind="$props" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/checkbox-story.mdx-3.mdx.mdx b/docs/snippets/vue/checkbox-story.mdx-3.mdx.mdx
index d72e2856ea16..a721a22ab8bb 100644
--- a/docs/snippets/vue/checkbox-story.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/checkbox-story.mdx-3.mdx.mdx
@@ -7,13 +7,12 @@ import Checkbox from './Checkbox.vue';
 
 <Meta title="MDX/Checkbox" component={Checkbox} />
 
-export const Template = (args) => ({
-  components: { Checkbox },
-  setup() {
-    return { args };
-  },
-  template: '<Checkbox v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 # Checkbox
 
 With `MDX`, we can define a story for `Checkbox` right in the middle of our
@@ -24,27 +23,40 @@ Markdown documentation.
     name="Unchecked"
     args={{ 
       label: 'Unchecked',
-    }}>
-    {Template.bind({})}
-   </Story>
-
+    }}
+    render={(args) => ({
+      components: { Checkbox },
+      setup() {
+        return { args };
+      },
+      template: '<Checkbox v-bind="args" />',
+    })} />
   <Story 
     name="Checked"
     args={{ 
       label: 'Unchecked', 
       checked: true,
-    }}>
-    {Template.bind({})}
-   </Story>
-  
+    }}
+    render={(args) => ({
+      components: { Checkbox },
+      setup() {
+        return { args };
+      },
+      template: '<Checkbox v-bind="args" />',
+    })} />
   <Story 
     name="Secondary"
     args={{
       label: 'Secondary', 
       checked: true, 
       appearance: 'secondary',
-    }}>
-    {Template.bind({})}
-   </Story>
+    }}
+    render={(args) => ({
+      components: { Checkbox },
+      setup() {
+        return { args };
+      },
+      template: '<Checkbox v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx b/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
index 1beee880c504..69d5024a98f1 100644
--- a/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
+++ b/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
@@ -5,9 +5,9 @@ import YourComponent from './YourComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   //👇 Creates specific argTypes with options
@@ -27,28 +27,27 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
   // Makes some computations and returns something
 };
 
-const Template = (args) => {
-  //👇 Assigns the function result to a variable
-  const functionResult = someFunction(args.propertyA, args.propertyB);
-  return {
-    components: { YourComponent },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return {
-        args: {
+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"/>',
-  };
-};
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args= {
-  propertyA: 'Item One',
-  propertyB: 'Another Item One',
+        };
+      },
+      template:
+        '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
+    };
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx
index 3f98a721667c..595367af8dda 100644
--- a/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx
@@ -15,25 +15,11 @@ export const someFunction = (valuePropertyA, valuePropertyB) => {
 
 };
 
-export const Template = (args) => {
-  //👇 Assigns the function result to a variable
-  const functionResult = someFunction(args.propertyA, args.propertyB);
-  return {
-    components: { YourComponent },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return {
-        args: {
-          ...args,
-          //👇 Replaces arg variable with the override (without the need of mutation)
-          someProperty: functionResult,
-        },
-      };
-    },
-    template:  '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
-  };
-};
-
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Canvas>
   <Story
     name="ExampleStory"
@@ -56,8 +42,22 @@ export const Template = (args) => {
     args={{
       propertyA: 'Item One',
       propertyB: 'Another Item One',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => {
+      const { propertyA, propertyB } = args;
+      const functionResult = someFunction(propertyA, propertyB);
+      return {
+        components: { YourComponent },
+        setup() {
+          return {
+            args: {
+              ...args,
+              someProperty: functionResult,
+            },
+          };
+        },
+        template: '<YourComponent v-bind="args" />',
+      };
+    }} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-custom-args-icons.2.js.mdx b/docs/snippets/vue/component-story-custom-args-icons.2.js.mdx
deleted file mode 100644
index 59af2057e054..000000000000
--- a/docs/snippets/vue/component-story-custom-args-icons.2.js.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```js
-// YourComponent.stories.js
-
-import YourComponent from './YourComponent.vue';
-
-import { IconA, IconB, IconC, IconD, IconE } from './icons';
-
-//👇 Maps the icons to a JSON serializable object to be safely used with the argTypes
-const iconMap = { IconA, IconB, IconC, IconD, IconE };
-
-export default {
-  title: 'My Story with Icons',
-  component: YourComponent,
-  //👇 Creates specific argTypes with options
-  argTypes: {
-    icon: {
-      options: Object.keys(iconMap),
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => {
-  //👇 Retrieves the appropriate icon passes it as a component prop
-  const oldArgs = args;
-  const { icon } = oldArgs;
-
-  //👇 Sets the new icon
-  const selectedIcon = iconMap[icon];
-
-  //👇 Updates the args with the new icon
-  args.icon = selectedIcon;
-
-  return {
-    props: Object.keys(argTypes),
-    components: { YourComponent },
-    template: '<YourComponent v-bind="$props"/>',
-  };
-};
-```
diff --git a/docs/snippets/vue/component-story-custom-args-icons.3.js.mdx b/docs/snippets/vue/component-story-custom-args-icons.3.js.mdx
deleted file mode 100644
index 8da0ef8d9bb5..000000000000
--- a/docs/snippets/vue/component-story-custom-args-icons.3.js.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-```js
-// YourComponent.stories.js
-
-import YourComponent from './YourComponent.vue';
-
-import { IconA, IconB, IconC, IconD, IconE } from './icons';
-
-//👇 Maps the icons to a JSON serializable object to be safely used with the argTypes
-const iconMap = { IconA, IconB, IconC, IconD, IconE };
-
-export default {
-  title: 'My Story with Icons',
-  component: YourComponent,
-  //👇 Creates specific argTypes with options
-  argTypes: {
-    icon: {
-      options: Object.keys(iconMap),
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    components: { YourComponent },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return {
-        args: {
-          ...args,
-          //👇 Replaces the local variable with the override (without mutating it)
-          icon: iconMap[args.icon],
-        },
-      };
-    },
-    template: '<YourComponent v-bind="args" />',
-  };
-};
-```
diff --git a/docs/snippets/vue/component-story-figma-integration.js.mdx b/docs/snippets/vue/component-story-figma-integration.js.mdx
index c11f6fc3654b..113030fabe16 100644
--- a/docs/snippets/vue/component-story-figma-integration.js.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.js.mdx
@@ -5,24 +5,28 @@ import { withDesign } from 'storybook-addon-designs';
 
 import MyComponent from './MyComponent.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = () => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const Example = Template.bind({});
-Example.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/Sample-File',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Example = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.mdx.mdx b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
index a75e89528830..3012f1cfd244 100644
--- a/docs/snippets/vue/component-story-figma-integration.mdx.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
@@ -9,23 +9,24 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="FigmaExample" component={MyComponent} decorators={[withDesign]} />
 
-export const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { MyComponent },
-  template: 'MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
     name="Example"
-     parameters={{
+    parameters={{
       design: {
         type: 'figma',
         url: 'https://www.figma.com/file/Sample-File',
       },
     }}
-  >
-  {Template.bind({})}
-  </Story>
+    render={() => ({
+      components: { MyComponent },
+      template: 'MyComponent />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.ts.mdx b/docs/snippets/vue/component-story-figma-integration.ts.mdx
index 0bacfcc5b3b3..b308b60e3c04 100644
--- a/docs/snippets/vue/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.ts.mdx
@@ -1,30 +1,40 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, StoryFn } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
 
 import { withDesign } from 'storybook-addon-designs';
 
 import MyComponent from './MyComponent.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 } as Meta<typeof MyComponent>;
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+// More on component templates: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#using-args
 const Template: StoryFn<typeof MyComponent> = () => ({
   components: { MyComponent },
   template: '<MyComponent />',
 });
 
-export const Example = Template.bind({});
-Example.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/Sample-File',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Example: Story = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx b/docs/snippets/vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx
index c03e760d90e2..32d8fd989ff8 100644
--- a/docs/snippets/vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx
@@ -7,13 +7,18 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: '<Button v-bind="$props" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
-<Story name="Basic" args={{ label: 'hello' }}>
-  {Template.bind({})}
-</Story>
+<Story 
+  name="Basic"
+  args={{ label: 'hello' }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button v-bind="$props" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx
index 80895d40a79c..deca29ac4103 100644
--- a/docs/snippets/vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx
@@ -7,15 +7,20 @@ import Button from './Button.vue';
 
 <Meta title="Button" component={Button} />
 
-export const Template = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
-<Story name="Basic" args={{ label: 'hello' }}>
-  {Template.bind({})}
-</Story>
+<Story
+name="Basic"
+args={{ label: 'hello' }}
+render={(args) => ({
+components: { Button },
+setup() {
+return { args };
+},
+template: '<Button v-bind="args" />',
+})} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-cdn.js.mdx b/docs/snippets/vue/component-story-static-asset-cdn.js.mdx
index 20e6e9101918..c54b2d1b1ba7 100644
--- a/docs/snippets/vue/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-cdn.js.mdx
@@ -3,13 +3,20 @@
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
-export const WithAnImage = () => ({
-  template: '<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => ({
+    template: '<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-cdn.mdx.mdx b/docs/snippets/vue/component-story-static-asset-cdn.mdx.mdx
index 25f91e1caf3c..2508d192beaf 100644
--- a/docs/snippets/vue/component-story-static-asset-cdn.mdx.mdx
+++ b/docs/snippets/vue/component-story-static-asset-cdn.mdx.mdx
@@ -7,12 +7,15 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="img" component={MyComponent}/>
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 <Story 
-  name="withAnImage">
-  {() => {
-    return {
-      template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>`,
-    };
-  }}
-</Story>
+  name="withAnImage"
+  render={() => ({
+    template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx b/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
index 72e8ea79e836..25433007805c 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
@@ -5,9 +5,9 @@ import imageFile from './static/image.png';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
@@ -16,15 +16,22 @@ const image = {
   alt: 'my image',
 };
 
-export const WithAnImage = () => ({
-  props: {
-    src: {
-      default: () => image.src,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => ({
+    props: {
+      src: {
+        default: () => image.src,
+      },
+      alt: {
+        default: () => image.alt,
+      },
     },
-    alt: {
-      default: () => image.alt,
-    },
-  },
-  template: `<img :src="src" :alt="alt"/>`,
-});
+    template: `<img :src="src" :alt="alt"/>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx b/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
index 19c181a8e1f6..7c429a2e1743 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
@@ -5,9 +5,9 @@ import imageFile from './static/image.png';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
@@ -16,13 +16,18 @@ const image = {
   alt: 'my image',
 };
 
-export const WithAnImage = () => {
-  return {
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => ({
     setup() {
-       //👇 Returns the content of the image object create above.
+      //👇 Returns the content of the image object create above.
       return { image };
     },
     template: `<img v-bind="image"/>`,
-  };
+  }),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.mdx-2.mdx.mdx b/docs/snippets/vue/component-story-static-asset-with-import.mdx-2.mdx.mdx
index 555aa9a3d332..765535ee17a9 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.mdx-2.mdx.mdx
@@ -12,20 +12,23 @@ export const image = {
   alt: 'my image',
 };
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 <Story 
-  name="WithAnImage">
-  {() => {
-    return {
-      props: {
-        src: {
-          default: () => image.src,
-        },
-        alt: {
-          default: () => image.alt,
-        },
+  name="withAnImage"
+  render={() => ({
+    props: {
+      src: {
+        default: () => image.src,
+      },
+      alt: {
+        default: () => image.alt,
       },
-      template: `<img :src="src" :alt="alt"/>`,
-    };
-  }}
-</Story>
+    },
+    template: `<img :src="src" :alt="alt"/>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-static-asset-with-import.mdx-3.mdx.mdx
index 0c248e8c6177..3511fbffee53 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.mdx-3.mdx.mdx
@@ -12,15 +12,18 @@ export const image = {
   alt: 'my image',
 };
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 <Story 
-  name="WithAnImage">
-  {() => {
-    return {
-      setup() {
-        return { image };
-      },
-      template: `<img v-bind="image"/>`,
-    };
-  }}
-</Story>
+  name="WithAnImage"
+  render={() => ({
+    setup() {
+      return { image };
+    },
+    template: `<img v-bind="image"/>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-without-import.js.mdx b/docs/snippets/vue/component-story-static-asset-without-import.js.mdx
index 37352927b9a5..4ef7585553a8 100644
--- a/docs/snippets/vue/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-without-import.js.mdx
@@ -3,14 +3,16 @@
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'img',
 };
 
 // Assume image.png is located in the "public" directory.
-export const WithAnImage = () => ({
-  template: '<img src="image.png" alt="my image" />',
-});
+export const WithAnImage = {
+  render: () => ({
+    template: '<img src="image.png" alt="my image" />',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx b/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
index d793002a15c6..f4875eccfdec 100644
--- a/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
+++ b/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
@@ -5,16 +5,10 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="img" component={MyComponent}/>
 
-<!-- Assume image.png is located in the "public" directory.-->
+<!-- Assume image.png is located in the "public" directory. -->
 <Story 
-  name="WithAnImage">
-  {() => {
-    return {
-      setup() {
-        return { image };
-      },
-      template: `<img src="image.png" alt="my image" />`,
-    };
-  }}
-</Story>
+  name="WithAnImage"
+  render={() => ({
+    template: '<img src="/image.png" alt="my image" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx b/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
index 1559c5bf5238..0e0876e15954 100644
--- a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Accessibility testing',
   component: Button,
   argTypes: {
@@ -15,23 +15,29 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { Button },
-  props: Object.keys(argTypes),
-  template: '<Button v-bind="$props" v-on="$props" />',
-});
-
 // This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
-  primary: false,
-  label: 'Button',
+export const Accessible = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" v-on="$props" />',
+  }),
+  args: {
+    primary: false,
+    label: 'Button',
+  },
 };
 
 // This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
-  ...Accessible.args,
-  backgroundColor: 'red',
+export const Inaccessible = {
+  render: (args, { argTypes }) => ({
+    components: { Button },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" v-on="$props" />',
+  }),
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
index 82f3717d0cf9..f006abce95b7 100644
--- a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Accessibility testing',
   component: Button,
   argTypes: {
@@ -24,16 +24,32 @@ const Template = (args) => ({
 });
 
 // This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
-  primary: false,
-  label: 'Button',
+export const Accessible = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    primary: false,
+    label: 'Button',
+  },
 };
 
 // This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
-  ...Accessible.args,
-  backgroundColor: 'red',
+export const Inaccessible = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  }),
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx b/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
index 8d2b797e331b..a236ad94897b 100644
--- a/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
@@ -16,11 +16,11 @@ import Button from './Button.vue';
     }
   }} />
 
-export const Template = (args, { argTypes }) => ({
-  components: { Button },
-  props: Object.keys(argTypes),
-  template: '<Button v-bind="$props" v-on="$props" />',
-});
+<!--
+  👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 ## This is an accessible story
 
@@ -29,9 +29,12 @@ export const Template = (args, { argTypes }) => ({
   args={{
     primary: false,
     label: 'Button'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button v-bind="$props" v-on="$props" />',
+  })} />
 
 ## This is not
 
@@ -41,7 +44,10 @@ export const Template = (args, { argTypes }) => ({
     primary: false,
     label: 'Button',
     backgroundColor: 'red'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Button },
+    template: '<Button v-bind="$props" v-on="$props" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
index 2b891162b950..221cd63ecc60 100644
--- a/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
@@ -16,13 +16,11 @@ import Button from './Button.vue';
     }
   }} />
 
-export const Template = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
-});
+<!--
+  👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 ## This is an accessible story
 
@@ -31,9 +29,14 @@ export const Template = (args) => ({
   args={{
     primary: false,
     label: 'Button'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { MyButton },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  })} />
 
 ## This is not
 
@@ -43,7 +46,12 @@ export const Template = (args) => ({
     primary: false,
     label: 'Button',
     backgroundColor: 'red'
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { MyButton },
+    setup() {
+      return { args };
+    },
+    template: '<Button v-bind="args" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-custom-render-function.js.mdx b/docs/snippets/vue/component-story-with-custom-render-function.js.mdx
new file mode 100644
index 000000000000..b2226c9ebf7a
--- /dev/null
+++ b/docs/snippets/vue/component-story-with-custom-render-function.js.mdx
@@ -0,0 +1,33 @@
+```js
+// MyComponent.stories.js
+
+import Layout from './Layout.vue';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+// This story uses a render function to fully control how the component renders.
+export const Example = {
+  render: () => ({
+    components: { Layout, MyComponent },
+    template: `
+      <Layout>
+        <header>
+          <h1>Example</h1>
+        </header>
+        <article>
+          <MyComponent />
+        </article>
+      </Layout>
+    `,
+  }),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx b/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
new file mode 100644
index 000000000000..5e7e56c8a5b7
--- /dev/null
+++ b/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
@@ -0,0 +1,35 @@
+```ts
+// MyComponent.stories.js
+
+import type { Meta, Story } from '@storybook/vue'; // Replace with '@storybook/vue3' if you're working with Vue3 project
+
+import Layout from './Layout.vue';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+// This story uses a render function to fully control how the component renders.
+export const Example: Story = {
+  render: () => ({
+    components: { Layout, MyComponent },
+    template: `
+      <Layout>
+        <header>
+          <h1>Example</h1>
+        </header>
+        <article>
+          <MyComponent />
+        </article>
+      </Layout>
+    `,
+  }),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
index 94dba8191196..185a5df817b1 100644
--- a/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
+++ b/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
@@ -9,9 +9,9 @@ import { graphql } from 'msw';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
@@ -65,37 +65,43 @@ const TestData = {
   ],
 };
 
-const PageTemplate = () => ({
-  components: { DocumentScreen, WrapperComponent },
-  template: `
-    <WrapperComponent>
-      <SampleGraphqlComponent />
-    </WrapperComponent>
-  `,
-});
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(ctx.data(TestData));
-    }),
-  ],
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const MockedSuccess = {
+  render: () => ({
+    components: { DocumentScreen, WrapperComponent },
+    template: '<WrapperComponent><DocumentScreen /></WrapperComponent>',
+  }),
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(ctx.data(TestData));
+      }),
+    ],
+  },
 };
 
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    graphql.query('AllInfoQuery', (req, res, ctx) => {
-      return res(
-        ctx.delay(800),
-        ctx.errors([
-          {
-            message: 'Access denied',
-          },
-        ])
-      );
-    }),
-  ],
+export const MockedError = {
+  render: () => ({
+    components: { DocumentScreen, WrapperComponent },
+    template: '<WrapperComponent><DocumentScreen /></WrapperComponent>',
+  }),
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(
+          ctx.delay(800),
+          ctx.errors([
+            {
+              message: 'Access denied',
+            },
+          ])
+        );
+      }),
+    ],
+  },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
index eaf1c5396b89..f09309eee49f 100644
--- a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
+++ b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
@@ -7,9 +7,9 @@ import DocumentScreen from './YourPage.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
@@ -63,26 +63,36 @@ const TestData = {
   ],
 };
 
-const PageTemplate = () => ({
-  components: { DocumentScreen },
-  template: '<DocumentScreen />',
-});
-
-export const MockedSuccess = PageTemplate.bind({});
-MockedSuccess.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-      return res(ctx.json(TestData));
-    }),
-  ],
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const MockedSuccess = {
+  render: () => ({
+    components: { DocumentScreen },
+    template: '<DocumentScreen />',
+  }),
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+        return res(ctx.json(TestData));
+      }),
+    ],
+  },
 };
 
-export const MockedError = PageTemplate.bind({});
-MockedError.parameters = {
-  msw: [
-    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-      return res(ctx.delay(800), ctx.status(403));
-    }),
-  ],
+export const MockedError = {
+  render: () => ({
+    components: { DocumentScreen },
+    template: '<DocumentScreen />',
+  }),
+  parameters: {
+    msw: [
+      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+        return res(ctx.delay(800), ctx.status(403));
+      }),
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/form-story-component-with-play-function.2.js.mdx b/docs/snippets/vue/form-story-component-with-play-function.2.js.mdx
deleted file mode 100644
index d79f1d5905f7..000000000000
--- a/docs/snippets/vue/form-story-component-with-play-function.2.js.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-```js
-// Form.stories.js
-
-import { userEvent, within } from '@storybook/testing-library';
-
-import LoginForm from './LoginForm.vue';
-
-export default {
-  component: LoginForm,
-};
-
-export const FilledForm = {
-  play: async ({ args, canvasElement }) => {
-     // Starts querying the component from its root element
-    const canvas = within(canvasElement);
-
-    await userEvent.type(canvas.getByTestId('email'), 'email');
-    await userEvent.type(canvas.getByTestId('password'), 'password');
-
-    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(canvas.getByRole('button'));
-  },
-  render: (args, { argTypes }) => ({
-    components: { LoginForm },
-    props: Object.keys(argTypes),
-    template: '<LoginForm @onSubmit="onSubmit" v-bind="$props"/>',
-  }),
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/form-story-component-with-play-function.3.js.mdx b/docs/snippets/vue/form-story-component-with-play-function.3.js.mdx
deleted file mode 100644
index 96d612cee7d0..000000000000
--- a/docs/snippets/vue/form-story-component-with-play-function.3.js.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-```js
-// Form.stories.js
-
-import { userEvent, within } from '@storybook/testing-library';
-
-import LoginForm from './LoginForm.vue';
-
-export default {
-  component: LoginForm,
-};
-
-export const FilledForm = {
-  play: async ({ args, canvasElement }) => {
-    // Starts querying the component from its root element
-    const canvas = within(canvasElement);
-
-    await userEvent.type(canvas.getByTestId('email'), 'email');
-    await userEvent.type(canvas.getByTestId('password'), 'password');
-    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(canvas.getByRole('button'));
-  },
-  render: (args) => ({
-    components: { LoginForm },
-    setup() {
-      return { args };
-    },
-    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
-  }),
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.2.js.mdx b/docs/snippets/vue/list-story-expanded.2.js.mdx
index b81948be649a..0283f679873c 100644
--- a/docs/snippets/vue/list-story-expanded.2.js.mdx
+++ b/docs/snippets/vue/list-story-expanded.2.js.mdx
@@ -6,34 +6,47 @@ import ListItem from './ListItem.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const Empty = (args, { argTypes }) => ({
-  components: { List },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: (args, { argTypes }) => ({
+    components: { List },
+    props: Object.keys(argTypes),
+    template: '<List v-bind="$props"/>',
+  }),
+};
 
-export const OneItem = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"><list-item/></list>',
-});
+export const OneItem = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item/>
+      </List>`,
+  }),
+};
 
-export const ManyItems = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: `
-    <list v-bind="$props">
-      <list-item/>
-      <list-item/>
-      <list-item/>
-    </list>
-    `,
-});
+export const ManyItems = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.3.js.mdx b/docs/snippets/vue/list-story-expanded.3.js.mdx
index e74b9d9705d6..30d8fb53c459 100644
--- a/docs/snippets/vue/list-story-expanded.3.js.mdx
+++ b/docs/snippets/vue/list-story-expanded.3.js.mdx
@@ -6,40 +6,53 @@ import ListItem from './ListItem.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const Empty = (args) => ({
-  components: { List },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args">',
+  }),
+};
 
-export const OneItem = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"><list-item/></list>',
-});
+export const OneItem = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item/>
+      </List>`,
+  }),
+};
 
-export const ManyItems = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <list v-bind="args">
-      <list-item/>
-      <list-item/>
-      <list-item/>
-    </list>
-    `,
-});
-```
\ No newline at end of file
+export const ManyItems = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+};
+```
diff --git a/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
index 429fe6f3fb76..ad2be5eae619 100644
--- a/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
@@ -4,38 +4,51 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
 } as Meta<typeof List>;
 
-export const Empty: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List },
+    props: Object.keys(argTypes),
+    template: '<List v-bind="$props"/>',
+  }),
+};
 
-export const OneItem: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"><list-item/></list>',
-});
+export const OneItem: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item/>
+      </List>`,
+  }),
+};
 
-export const ManyItems: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: `
-    <list v-bind="$props">
-      <list-item/>
-      <list-item/>
-      <list-item/>
-    </list>
-    `,
-});
+export const ManyItems: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
index 74c9ea1a72b4..3034a470efcd 100644
--- a/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
+++ b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
@@ -4,44 +4,57 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
 } as Meta<typeof List>;
 
-export const Empty: StoryFn<typeof List> = (args) => ({
-  components: { List },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty: Story = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args">',
+  }),
+};
 
-export const OneItem: StoryFn<typeof List> = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"><list-item/></list>',
-});
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item/>
+      </List>`,
+  }),
+};
 
-export const ManyItems: StoryFn<typeof List> = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <list v-bind="args">
-      <list-item/>
-      <list-item/>
-      <list-item/>
-    </list>
-    `,
-});
+export const ManyItems: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item/>
+        <list-item/>
+        <list-item/>
+      </List>`,
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.2.js.mdx b/docs/snippets/vue/list-story-reuse-data.2.js.mdx
index 3f017761fae0..c85a025b01d1 100644
--- a/docs/snippets/vue/list-story-reuse-data.2.js.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.2.js.mdx
@@ -9,26 +9,32 @@ import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const ManyItems = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: `
-    <List v-bind="$props">
-      <list-item :isSelected="Selected"/>
-      <list-item :isSelected="Unselected"/>
-      <list-item :isSelected="Unselected"/>
-    </List>`,
-});
-
-ManyItems.args = {
-  Selected: Selected.args.isSelected,
-  Unselected: Unselected.args.isSelected,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.args.isSelected,
+    Unselected: Unselected.args.isSelected,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.3.js.mdx b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
index f4eb4c0f3836..5f0ee1cd7a32 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.js.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
@@ -9,29 +9,34 @@ import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-
-export const ManyItems = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { ...args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.args.isSelected,
+    Unselected: Unselected.args.isSelected,
   },
-  template: `
-    <List v-bind="args">
-      <list-item :isSelected="Selected"/>
-      <list-item :isSelected="Unselected"/>
-      <list-item :isSelected="Unselected"/>
-    </List>`,
-});
-
-ManyItems.args={
-  Selected: Selected.args.isSelected,
-  Unselected: Unselected.args.isSelected,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
index 225252c1575b..d0093f915537 100644
--- a/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
@@ -4,33 +4,39 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
 } as Meta<typeof List>;
 
-export const ManyItems: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List, ListItem },
-  props: Object.keys(argTypes),
-  template: `
-    <List v-bind="$props">
-      <list-item :isSelected="Selected"/>
-      <list-item :isSelected="Unselected"/>
-      <list-item :isSelected="Unselected"/>
-    </List>`,
-});
-
-ManyItems.args = {
-  Selected: Selected.args.isSelected,
-  Unselected: Unselected.args.isSelected,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List, ListItem },
+    props: Object.keys(argTypes),
+    template: `
+      <List v-bind="$props">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.args.isSelected,
+    Unselected: Unselected.args.isSelected,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
index ff0fe53148d8..7633181840a7 100644
--- a/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
@@ -4,35 +4,41 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
 } as Meta<typeof List>;
 
-export const ManyItems: StoryFn<typeof List> = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { ...args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <list-item :isSelected="Selected"/>
+        <list-item :isSelected="Unselected"/>
+        <list-item :isSelected="Unselected"/>
+      </List>`,
+  }),
+  args: {
+    Selected: Selected.args.isSelected,
+    Unselected: Unselected.args.isSelected,
   },
-  template: `
-    <List v-bind="args">
-      <list-item :isSelected="Selected"/>
-      <list-item :isSelected="Unselected"/>
-      <list-item :isSelected="Unselected"/>
-    </List>`,
-});
-
-ManyItems.args = {
-  Selected: Selected.args.isSelected,
-  Unselected: Unselected.args.isSelected,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.2.js.mdx b/docs/snippets/vue/list-story-starter.2.js.mdx
index 52914eb835c2..7132fc1ce3e1 100644
--- a/docs/snippets/vue/list-story-starter.2.js.mdx
+++ b/docs/snippets/vue/list-story-starter.2.js.mdx
@@ -5,17 +5,19 @@ import List from './ListComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
 // Always an empty list, not super interesting
-const Template = (args, { argTypes }) => ({
-  components: { List },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"/>',
-});
+export const Empty = {
+  render: (args, { argTypes }) => ({
+    components: { List },
+    props: Object.keys(argTypes),
+    template: '<List v-bind="$props"/>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.3.js.mdx b/docs/snippets/vue/list-story-starter.3.js.mdx
index c986f99ff11b..4eb68fcdf087 100644
--- a/docs/snippets/vue/list-story-starter.3.js.mdx
+++ b/docs/snippets/vue/list-story-starter.3.js.mdx
@@ -5,19 +5,21 @@ import List from './ListComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
 // Always an empty list, not super interesting
-const Template = (args) => ({
-  components: { List },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"/>',
-});
+export const Empty = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args">',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
index ff6266df96ac..3da1ee182503 100644
--- a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
@@ -3,11 +3,11 @@
 
 import List from './ListComponent.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -15,9 +15,11 @@ export default {
 } as Meta<typeof List>;
 
 // Always an empty list, not super interesting
-const Template: StoryFn<typeof List> = (args, { argTypes }) => ({
-  components: { List },
-  props: Object.keys(argTypes),
-  template: '<list v-bind="$props"/>',
-});
+export const Empty: Story = {
+  render: (args, { argTypes }) => ({
+    components: { List },
+    props: Object.keys(argTypes),
+    template: '<List v-bind="$props"/>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-3.ts.mdx b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
index c70cddcd7b08..58231b976371 100644
--- a/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
+++ b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
@@ -3,11 +3,11 @@
 
 import List from './ListComponent.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -15,11 +15,13 @@ export default {
 } as Meta<typeof LoginForm>;
 
 // Always an empty list, not super interesting
-const Template: StoryFn<typeof LoginForm> = (args) => ({
-  components: { List },
-  setup() {
-    return { args };
-  },
-  template: '<list v-bind="args"/>',
-});
+export const Empty: Story = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args">',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-template.2.js.mdx b/docs/snippets/vue/list-story-template.2.js.mdx
index 6cbc57b20b4a..f2ceb52f1e71 100644
--- a/docs/snippets/vue/list-story-template.2.js.mdx
+++ b/docs/snippets/vue/list-story-template.2.js.mdx
@@ -9,13 +9,14 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#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 = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { List, ListItem },
@@ -25,20 +26,24 @@ const ListTemplate = (args, { argTypes }) => ({
         <ListItem :item="item" />
       </div>
     </List>
-  `,
+    `,
 });
 
-export const Empty = ListTemplate.bind({});
-EmptyListTemplate.args = {
-  items: [],
+export const Empty = {
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
 };
 
-export const OneItem = ListTemplate.bind({});
-OneItem.args = {
-  items: [
-    {
-      ...Unchecked.args,
-    },
-  ],
+export const OneItem = {
+  ...ListTemplate,
+  args: {
+    items: [
+      {
+        ...Unchecked.args,
+      },
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-template.3.js.mdx b/docs/snippets/vue/list-story-template.3.js.mdx
index 76587aabeca3..20d9e6a66fde 100644
--- a/docs/snippets/vue/list-story-template.3.js.mdx
+++ b/docs/snippets/vue/list-story-template.3.js.mdx
@@ -9,38 +9,44 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-const ListTemplate = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <List v-bind="args">
-      <div v-for="item in items" :key="item.title">
-        <ListItem :item="item"/>
-      </div>
-    </List>
-  `,
-});
-
-export const Empty = ListTemplate.bind({});
-Empty.args = {
-  items: [],
+//👇 The ListTemplate construct will be spread to the existing stories.
+export const ListTemplate = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { ...args };
+    },
+    template: `
+      <List v-bind="args">
+        <div v-for="item in items" :key="item.title">
+          <ListItem :item="item"/>
+        </div>
+      </List>
+    `,
+  }),
 };
 
-export const OneItem = ListTemplate.bind({});
-OneItem.args = {
-  items: [
-    {
-      ...Unchecked.args,
-    },
-  ],
+export const Empty = {
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+};
+export const OneItem = {
+  ...ListTemplate,
+  args: {
+    items: [
+      {
+        ...Unchecked.args,
+      },
+    ],
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-unchecked.2.js.mdx b/docs/snippets/vue/list-story-unchecked.2.js.mdx
index cd4e5cecec46..9efb6d802874 100644
--- a/docs/snippets/vue/list-story-unchecked.2.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.2.js.mdx
@@ -9,23 +9,25 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
-
-export const OneItem = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { List, ListItem },
-  template: `
-    <List v-bind="$props">
-      <ListItem v-bind="$props"/>
-    </List>
-  `,
-});
-OneItem.args = {
-  ...Unchecked.args,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { List, ListItem },
+    template: '<List v-bind="$props"><ListItem v-bind="$props"/></List>',
+  }),
+  args: {
+    ...Unchecked.args,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx
index 5b7da6194f00..f29e1f9c91ce 100644
--- a/docs/snippets/vue/list-story-unchecked.3.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.js.mdx
@@ -9,26 +9,29 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
 
-export const OneItem = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = {
+  args: {
+    ...Unchecked.args,
   },
-  template: `
-    <List v-bind="args">
-      <ListItem v-bind="args"/>
-    </List>
-  `,
-});
-OneItem.args = {
-  ...Unchecked.args,
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
+  }),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
index 46b574b44665..67ef97d43b0c 100644
--- a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
@@ -6,23 +6,32 @@ import ListItem from './ListItem.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
 
-export const Empty = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { List },
-  template: '<List v-bind="$props"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { List },
+    template: '<List v-bind="$props"/>',
+  }),
+};
 
-export const OneItem = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { List, ListItem },
-  template: '<List v-bind="$props"><ListItem /></List>',
-});
+export const OneItem = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { List, ListItem },
+    template: '<List v-bind="$props"><ListItem /></List>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
index 0ffa0b326f6e..8230ff8d08fc 100644
--- a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
@@ -6,29 +6,37 @@ import ListItem from './ListItem.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
 
-export const Empty = (args) => ({
-  components: { List },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
-  }
-  template: '<List v-bind="args"/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: (args) => ({
+    components: { List },
+    setup() {
+      return { args };
+    },
+    template: '<List v-bind="args"/>',
+  }),
+};
 
-export const OneItem = (args) => ({
-  components: { List, ListItem },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
-  }
-  template: '<List v-bind="args"><ListItem /></List>',
-});
+export const OneItem = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/loader-story.3.js.mdx b/docs/snippets/vue/loader-story.3.js.mdx
index b99ff7360963..68009a29747e 100644
--- a/docs/snippets/vue/loader-story.3.js.mdx
+++ b/docs/snippets/vue/loader-story.3.js.mdx
@@ -7,26 +7,25 @@ import fetch from 'node-fetch';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Examples/Loader',
   component: TodoItem,
 };
 
-export const Primary = (args, { loaded: { todo } }) => {
-  return {
+export const Primary = {
+  render: (args, { loaded: { todo } }) => ({
     components: { TodoItem },
     setup() {
       return { args, todo: todo };
     },
-    template: `<TodoItem :todo="todo"/>`,
-  };
-};
-
-Primary.loaders = [
-  async () => ({
-    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    template: '<TodoItem :todo="todo" />',
   }),
-];
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/loader-story.mdx.mdx b/docs/snippets/vue/loader-story.mdx.mdx
index 493be08e80c6..976c57f594ec 100644
--- a/docs/snippets/vue/loader-story.mdx.mdx
+++ b/docs/snippets/vue/loader-story.mdx.mdx
@@ -9,21 +9,25 @@ import fetch from 'node-fetch';
 
 <Meta title="Examples/Loader" component={TodoItem} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 <Story
   name="Primary"
   loaders={[
     async () => ({
       todo: await (
-        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+        await fetch('https://jsonplaceholder.typicode.com/todos/1')
       ).json(),
     }),
   ]}>
-  {(args, { loaded: { todo } }) => ({
+  render={(args, { loaded: { todo } }) => ({
     components: { TodoItem },
     setup() {
       return { args, todo: todo };
     },
-    template: `<TodoItem :todo="todo"/>`,
-  })}
-</Story>
+    template: '<TodoItem :todo="todo" />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.2.js.mdx b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
index e82613674972..125d8e607521 100644
--- a/docs/snippets/vue/login-form-with-play-function.2.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
@@ -9,39 +9,50 @@ import LoginForm from './LoginForm.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Form',
   component: LoginForm,
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { LoginForm },
-  props: Object.keys(argTypes),
-  template: `<LoginForm v-bind="$props" v-on="$props" />`,
-});
-
-export const EmptyForm = Template.bind({});
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  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/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm = {
+  render: (args, { argTypes }) => ({
+    components: { LoginForm },
+    props: Object.keys(argTypes),
+    template: `<LoginForm v-bind="$props" v-on="$props" />`,
+  }),
+};
 
-  // 👇 Assert DOM structure
-  await expect(
-    canvas.getByText(
-      'Everything is perfect. Your account is ready and we should probably get you started!'
-    )
-  ).toBeInTheDocument();
+export const FilledForm = {
+  render: (args, { argTypes }) => ({
+    components: { LoginForm },
+    props: Object.keys(argTypes),
+    template: `<LoginForm v-bind="$props" v-on="$props" />`,
+  }),
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    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/7.0/vue/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();
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.3.js.mdx b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
index 19c529bd529a..60c4bb89d983 100644
--- a/docs/snippets/vue/login-form-with-play-function.3.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
@@ -9,41 +9,54 @@ import LoginForm from './LoginForm.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Form',
   component: LoginForm,
 };
 
-const Template = (args) => ({
-  components: { LoginForm },
-  setup() {
-    return args;
-  },
-  template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
-});
-
-export const EmptyForm = Template.bind({});
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  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/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm = {
+  render: (args) => ({
+    components: { LoginForm },
+    setup() {
+      return args;
+    },
+    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+  }),
+};
 
-  // 👇 Assert DOM structure
-  await expect(
-    canvas.getByText(
-      'Everything is perfect. Your account is ready and we should probably get you started!'
-    )
-  ).toBeInTheDocument();
+export const FilledForm = {
+  render: (args) => ({
+    components: { LoginForm },
+    setup() {
+      return args;
+    },
+    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    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/7.0/vue/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();
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
index c1e887057671..a6e449bc4f20 100644
--- a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
@@ -11,20 +11,23 @@ import LoginForm from './LoginForm.vue';
 
 <Meta title="Form" component={LoginForm} />
 
-export const Template = (args, { argTypes }) => ({
-  components: { LoginForm },
-  props: Object.keys(argTypes),
-  template: `<LoginForm v-bind="$props" v-on="$props" />`,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
-  <Story name="Empty Form">
-    {Template.bind({})}
-  </Story>
-
+  <Story 
+    name="Empty Form"
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { LoginForm },
+      template: `<LoginForm v-bind="$props" v-on="$props" />`,
+    })} />
   <Story
     name="Filled Form"
-    play={async ({ canvasElement }) => {
+    play={ async ({ canvasElement }) => {
       // Starts querying the component from its root element
       const canvas = within(canvasElement);
 
@@ -33,7 +36,7 @@ export const Template = (args, { argTypes }) => ({
 
       await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-      // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+      // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
       await userEvent.click(canvas.getByRole('button'));
 
       // 👇 Assert DOM structure
@@ -42,8 +45,11 @@ export const Template = (args, { argTypes }) => ({
           'Everything is perfect. Your account is ready and we should probably get you started!'
         )
       ).toBeInTheDocument();
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { LoginForm },
+      template: `<LoginForm v-bind="$props" v-on="$props" />`,
+   })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx
index ea842adea3c6..cc79337b989d 100644
--- a/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx
@@ -11,19 +11,22 @@ import LoginForm from './LoginForm.vue';
 
 <Meta title="Form" component={LoginForm} />
 
-export const Template = (args) => ({
-  components: { LoginForm },
-  setup() {
-    return { args };
-  },
-  template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
-  <Story name="Empty Form">
-    {Template.bind({})}
-  </Story>
-
+  <Story 
+    name="Empty Form"
+    render={(args) => ({
+      components: { LoginForm },
+      setup() {
+        return { args };
+      },
+      template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+    })} />
   <Story
     name="Filled Form"
     play={async ({ canvasElement }) => {
@@ -35,7 +38,7 @@ export const Template = (args) => ({
 
       await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-      // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+      // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
       await userEvent.click(canvas.getByRole('button'));
 
       // 👇 Assert DOM structure
@@ -44,8 +47,13 @@ export const Template = (args) => ({
           'Everything is perfect. Your account is ready and we should probably get you started!'
         )
       ).toBeInTheDocument();
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { LoginForm },
+      setup() {
+        return { args };
+      },
+      template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx
index 656daf2ec4e5..f40a38b1b6d4 100644
--- a/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx
@@ -7,43 +7,54 @@ import { expect } from '@storybook/jest';
 
 import LoginForm from './LoginForm.vue';
 
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
   component: LoginForm,
 } as Meta<typeof LoginForm>;
 
-const Template: StoryFn<typeof LoginForm> = (args, { argTypes }) => ({
-  components: { LoginForm },
-  props: Object.keys(argTypes),
-  template: `<LoginForm v-bind="$props" v-on="$props" />`,
-});
-
-export const EmptyForm = Template.bind({});
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  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/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm: Story = {
+  render: (args, { argTypes }) => ({
+    components: { LoginForm },
+    props: Object.keys(argTypes),
+    template: `<LoginForm v-bind="$props" v-on="$props" />`,
+  }),
+};
 
-  // 👇 Assert DOM structure
-  await expect(
-    canvas.getByText(
-      'Everything is perfect. Your account is ready and we should probably get you started!'
-    )
-  ).toBeInTheDocument();
+export const FilledForm: Story = {
+  render: (args, { argTypes }) => ({
+    components: { LoginForm },
+    props: Object.keys(argTypes),
+    template: `<LoginForm v-bind="$props" v-on="$props" />`,
+  }),
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    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/7.0/vue/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();
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx
index 1b676ae48dbc..39ab085cff4f 100644
--- a/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx
@@ -1,4 +1,4 @@
-```js
+```ts
 // LoginForm.stories.ts
 
 import { userEvent, within } from '@storybook/testing-library';
@@ -7,45 +7,58 @@ import { expect } from '@storybook/jest';
 
 import LoginForm from './LoginForm.vue';
 
-import { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
   component: LoginForm,
 } as Meta<typeof LoginForm>;
 
-const Template: StoryFn<typeof LoginForm> = (args) => ({
-  components: { LoginForm },
-  setup() {
-    return args;
-  },
-  template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
-});
-
-export const EmptyForm = Template.bind({});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm: Story = {
+  render: (args) => ({
+    components: { LoginForm },
+    setup() {
+      return args;
+    },
+    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+  }),
+};
 
-export const FilledForm = Template.bind({});
-FilledForm.play = async ({ canvasElement }) => {
-  // Starts querying the component from its root element
-  const canvas = within(canvasElement);
+export const FilledForm: Story = {
+  render: (args) => ({
+    components: { LoginForm },
+    setup() {
+      return args;
+    },
+    template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Starts querying the component from its root element
+    const canvas = within(canvasElement);
 
-  // 👇 Simulate interactions with the component
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
 
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(canvas.getByRole('button'));
+    // See https://storybook.js.org/docs/7.0/vue/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();
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx
index 32349dcf0594..3770bc3373f1 100644
--- a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx
@@ -7,11 +7,11 @@ import Badge from './Badge.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Badge },
-  template: '<Badge v-bind="$props" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story 
@@ -19,24 +19,33 @@ export const Template = (args, { argTypes }) => ({
     args={{
       status: 'warning', 
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral', 
       label: 'Neutral',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error', 
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      props: Object.keys(argTypes),
+      components: { Badge },
+      template: '<Badge v-bind="$props" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx
index 9acb775a0b80..49945de46736 100644
--- a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx
@@ -7,13 +7,11 @@ import Badge from './Badge.vue';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => ({
-  components: { Badge },
-  setup() {
-    return { args };
-  },
-  template: '<Badge v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story 
@@ -21,24 +19,39 @@ export const Template = (args) => ({
     args={{
       status: 'warning',
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
   <Story 
     name="neutral"
     args={{
       status: 'neutral',
       label: 'Neutral',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
   <Story 
     name="error"
     args={{
       status: 'error',
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { Badge },
+      setup() {
+        return { args };
+      },
+      template: '<Badge v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
index 511ad5034d8b..e08ee1f538e0 100644
--- a/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
@@ -7,27 +7,37 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'QueryMethods',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const ExampleWithRole = Template.bind({});
-ExampleWithRole.play = async () => {
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleWithRole = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+  },
 };
 
-export const ExampleWithText = Template.bind({});
-ExampleWithText.play = async () => {
-  // The play function interacts with the component and looks for the text
-  await screen.findByText('example string');
+export const ExampleWithText = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    // The play function interacts with the component and looks for the text
+    await screen.findByText('example string');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx b/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx
index e7cfac89bcfc..eb46c3de5a75 100644
--- a/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx
@@ -9,26 +9,29 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="QueryMethods" component={MyComponent} />
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
-<Story
+<Story 
   name="ExampleWithRole"
-  play={async () => {
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
-  }}>
-  {Template.bind({})}
-</Story>
-
-<Story
-  name="ExampleWithText"
-  play={async () => {
-    // The play function interacts with the component and looks for the text
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button'));
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
+<Story 
+  name="ExampleWithText" 
+  play={ async () => {
     await screen.findByText('example string');
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-composition.js.mdx b/docs/snippets/vue/my-component-play-function-composition.js.mdx
index 3f98c21f192c..f8476bdb8e60 100644
--- a/docs/snippets/vue/my-component-play-function-composition.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-composition.js.mdx
@@ -7,33 +7,48 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const FirstStory = Template.bind({});
-FirstStory.play = async () => {
-  userEvent.type(screen.getByTestId('an-element'), 'example-value');
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  },
 };
 
-export const SecondStory = Template.bind({});
-SecondStory.play = async () => {
-  await userEvent.type(screen.getByTestId('other-element'), 'another value');
+export const SecondStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  },
 };
 
-export const CombinedStories = Template.bind({});
-CombinedStories.play = async () => {
-  // Runs the FirstStory and Second story play function before running this story's play function
-  await FirstStory.play();
-  await SecondStory.play();
-  await userEvent.type(screen.getByTestId('another-element'), 'random value');
+export const CombinedStories = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    // Runs the FirstStory and Second story play function before running this story's play function
+    await FirstStory.play();
+    await SecondStory.play();
+    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-waitfor.js.mdx b/docs/snippets/vue/my-component-play-function-waitfor.js.mdx
index dcc1bbba2447..afe123c71c7e 100644
--- a/docs/snippets/vue/my-component-play-function-waitfor.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-waitfor.js.mdx
@@ -7,34 +7,39 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithAsync',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const ExampleAsyncStory = Template.bind({});
-ExampleAsyncStory.play = async () => {
-  const Input = screen.getByLabelText('Username', {
-    selector: 'input',
-  });
-
-  await userEvent.type(Input, 'WrongInput', {
-    delay: 100,
-  });
-
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  const Submit = screen.getByRole('button');
-  await userEvent.click(Submit);
-
-  await waitFor(async () => {
-    await userEvent.hover(screen.getByTestId('error'));
-  });
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleAsyncStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element', {
+      selector: 'input',
+    });
+
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'WrongInput', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = screen.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx b/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx
index 2767f7a0285c..b1622949bd40 100644
--- a/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx
@@ -9,14 +9,10 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="WithAsync" component={MyComponent} />
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
 
 <Story
   name="ExampleAsyncStory"
-  play={async () => {
+  play={ async () => {
     const Input = screen.getByLabelText('Username', {
       selector: 'input',
     });
@@ -25,14 +21,16 @@ export const Template = (args) => ({
       delay: 100,
     });
 
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     const Submit = screen.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
       await userEvent.hover(screen.getByTestId('error'));
     });
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
index af3918404fc9..c1ecae5aabfa 100644
--- a/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
@@ -7,25 +7,30 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithCanvasElement',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
 
-export const ExampleStory = Template.bind({});
-ExampleStory.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('another-element'));
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.type(canvas.getByTestId('another-element'), 'something else');
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx
index 4d2c1d9b0bfd..75e9c8b2c73c 100644
--- a/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx
@@ -9,21 +9,24 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="WithCanvasElement" component={MyComponent} />
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleStory"
-  play={async ({ canvasElement }) => {
+  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('another-element'));
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
index c51f1e86af46..c187bad1f38a 100644
--- a/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
@@ -7,27 +7,37 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ClickExamples',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const ClickExample = Template.bind({});
-ClickExample.play = async () => {
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await userEvent.click(screen.getByRole('button'));
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ClickExample = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(screen.getByRole('button'));
+  },
 };
 
-export const FireEventExample = Template.bind({});
-FireEventExample.play = async () => {
-  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  await fireEvent.click(screen.getByTestId('data-testid'));
+export const FireEventExample = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  play: async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(screen.getByTestId('data-testid'));
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx
index 15f8de3cb0fa..f0139a13bc10 100644
--- a/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx
@@ -9,26 +9,31 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="ClickExamples" component={MyComponent} />
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ClickExample"
-  play={async () => {
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(screen.getByRole('button'));
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 
 <Story
   name="FireEventExample"
-  play={async () => {
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  play={ async () => {
+    // See https://storybook.js.org/docs/7.0/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await fireEvent.click(screen.getByTestId('data-testid'));
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
index 2d1c49c9ac7f..f653741346ee 100644
--- a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
@@ -7,30 +7,35 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithDelay',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const DelayedStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element');
 
-export const DelayedStory = Template.bind({});
-DelayedStory.play = async () => {
-  const exampleElement= screen.getByLabelText('example-element');
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
 
-  // The delay option set the amount of milliseconds between characters being typed
-  await userEvent.type(exampleElement, 'random string', {
-    delay: 100,
-  });
-
-  const AnotherExampleElement= screen.getByLabelText('another-example-element');
-  await userEvent.type(AnotherExampleElement, 'another random string', {
-     delay: 100,
-  });
+    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
index 162a4e518842..b48c3eb4a727 100644
--- a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
@@ -9,14 +9,15 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="WithDelay" component={MyComponent} />
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="DelayedStory"
-  play={async () => {
+  play={ async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
     // The delay option set the amount of milliseconds between characters being typed
@@ -28,7 +29,9 @@ const Template = (args) => ({
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
index a72f05e4fed6..f62f6b8b2058 100644
--- a/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
@@ -7,12 +7,11 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'WithSelectEvent',
   component: MyComponent,
- 
 };
 
 // Custom function to emulate a pause
@@ -20,21 +19,26 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-
-export const ExampleChangeEvent = Template.bind({});
-ExampleChangeEvent.play = async () => {
-  const select = screen.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']);
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleChangeEvent = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  play: async () => {
+    const select = screen.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']);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx
index 60154d1ad9c7..edac1d7cd7cb 100644
--- a/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx
@@ -15,10 +15,11 @@ export const sleep= (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story 
   name="ExampleChangeEvent"
@@ -33,7 +34,9 @@ export const Template = (args) => ({
 
     await userEvent.selectOptions(select, ['Yet another item']);
 
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
index 0f0d9b9ac2d5..0ae747854f0e 100644
--- a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
@@ -5,20 +5,24 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Path/To/MyComponent',
   component: MyComponent,
 };
 
-export const Basic = () => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+export const Basic = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+};
 
-export const WithProp = () => ({
-  components: { MyComponent },
+export const WithProp = {
+  render: () => ({
+    components: { MyComponent },
     template: '<MyComponent prop="value"/>',
-});
+  }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
index c356aaf70e3d..4d5538c3552d 100644
--- a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
@@ -7,9 +7,9 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
   parameters: {
@@ -24,13 +24,20 @@ export default {
   },
 };
 
-export const MyStory = () => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
-MyStory.parameters = {
-  viewport: {
-    defaultViewport: 'iphonex'
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const MyStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx
index 9dbf1c2c759e..b87b7c293fdd 100644
--- a/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx
+++ b/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx
@@ -18,17 +18,21 @@ import MyComponent from './MyComponent.vue';
   component={MyComponent}
 />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
 <Story
   name="MyStory"
   parameters={{
     viewport: {
       defaultViewport: 'iphonex',
     }
-  }}>
-  {() => {
-    return {
-      template: `<MyComponent />`,
-    };
   }}
-</Story>
+  render={()=>({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
index c40b18ea44b5..d7dc941bface 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
@@ -5,9 +5,9 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
@@ -27,10 +27,17 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = (args, { globals: { locale } }) => {
-  const caption = getCaptionForLocale(locale);
-  return {
-    template: `<p>${caption}</p>`,
-  };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return {
+      template: `<p>${caption}</p>`,
+    };
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
index 6f6f74945f65..8397ad8f2c2b 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
@@ -18,12 +18,18 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<Story name="StoryWithLocale">
-  {(args, { globals: { locale } }) => {
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
+
+<Story 
+  name="StoryWithLocale"
+  render={(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
       template: `<p>${caption}</p>`,
     };
-  }}
-</Story>
+  }} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
index 4627965fe1ac..1c756ffc7701 100644
--- a/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
+++ b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
@@ -7,10 +7,10 @@ import someData from './data.json';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'MyComponent', 
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'],
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
@@ -19,21 +19,30 @@ export default {
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-
-const Template = (args, { argTypes }) => ({
-  components: { MyComponent },
-  props: Object.keys(argTypes),
-  template: `<MyComponent v-bind="$props"/>`,
-});
-
-
-export const SimpleStory = Template.bind({});
-SimpleStory,args = {
-  data: simpleData,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const SimpleStory = {
+  render: (args, { argTypes }) => ({
+    components: { MyComponent },
+    props: Object.keys(argTypes),
+    template: `<MyComponent v-bind="$props"/>`,
+  }),
+  args: {
+    data: simpleData,
+  },
 };
 
-export const ComplexStory = Template.bind({});
-ComplexStory,args = {
-  data: complexData,
+export const ComplexStory = {
+  render: (args, { argTypes }) => ({
+    components: { MyComponent },
+    props: Object.keys(argTypes),
+    template: `<MyComponent v-bind="$props"/>`,
+  }),
+  args: {
+    data: complexData,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx
index 25ea9cf96b39..539600f2ee9a 100644
--- a/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx
+++ b/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx
@@ -7,10 +7,10 @@ import someData from './data.json';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'MyComponent', 
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'],
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
@@ -19,21 +19,34 @@ export default {
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const SimpleStory = {
+  render: (args) => ({
+    components: { MyComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MyComponent v-bind="args"/>`,
+  }),
+  args: {
+    data: simpleData,
   },
-  template: `<MyComponent v-bind="args"/>`,
-});
-
-export const SimpleStory = Template.bind({});
-SimpleStory.args = {
-  data: simpleData,
 };
 
-export const ComplexStory = Template.bind({});
-ComplexStory.args = {
-  data: complexData,
+export const ComplexStory = {
+  render: (args) => ({
+    components: { MyComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MyComponent v-bind="args"/>`,
+  }),
+  args: {
+    data: complexData,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-with-env-variables.2.js.mdx b/docs/snippets/vue/my-component-with-env-variables.2.js.mdx
index e52e2a3bf63b..8186f3f7ee3b 100644
--- a/docs/snippets/vue/my-component-with-env-variables.2.js.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.2.js.mdx
@@ -5,21 +5,26 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { MyComponent },
-  props: Object.keys(argTypes),
-  template: '<MyComponent v-bind="$props"/>',
-});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: (args, { argTypes }) => ({
+    components: { MyComponent },
+    props: Object.keys(argTypes),
+    template: `<MyComponent v-bind="$props"/>`,
+  }),
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-with-env-variables.3.js.mdx b/docs/snippets/vue/my-component-with-env-variables.3.js.mdx
index e910c0d8e448..85f983d25af2 100644
--- a/docs/snippets/vue/my-component-with-env-variables.3.js.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.3.js.mdx
@@ -5,23 +5,28 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
-const Template = (args) => ({
-  components: { MyComponent },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: (args) => ({
+    components: { MyComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MyComponent v-bind="args"/>`,
+  }),
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
   },
-  template: '<MyComponent v-bind="args"/>',
-});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx b/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx
index e0521529431e..b86d8d38b61d 100644
--- a/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx
@@ -7,19 +7,22 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="MyComponent" component={MyComponent}/>
 
-export const Template = (args, { argTypes }) => ({
-  components: { MyComponent },
-  props: Object.keys(argTypes),
-  template: '<MyComponent v-bind="$props"/>',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
     name="ExampleStory"
     args={{
       propertyA: process.env.STORYBOOK_DATA_KEY,
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args, { argTypes }) => ({
+      components: { MyComponent },
+      props: Object.keys(argTypes),
+      template: '<MyComponent v-bind="$props"/>',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx b/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx
index 0f3c843518d3..90a944178731 100644
--- a/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx
@@ -7,21 +7,24 @@ import MyComponent from './MyComponent.vue';
 
 <Meta title="MyComponent" component={MyComponent}/>
 
-export const Template = (args) => ({
-  components: { MyComponent },
-  setup() {
-    return { args };
-  },
-  template: '<MyComponent v-bind="args" />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Canvas>
   <Story
     name="ExampleStory"
     args={{
       propertyA: process.env.STORYBOOK_DATA_KEY,
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      components: { MyComponent },
+      setup() {
+        return { args };
+      },
+      template: '<MyComponent v-bind="args" />',
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-slots.2.js.mdx b/docs/snippets/vue/page-story-slots.2.js.mdx
index ff119043c287..bea8a0bc4711 100644
--- a/docs/snippets/vue/page-story-slots.2.js.mdx
+++ b/docs/snippets/vue/page-story-slots.2.js.mdx
@@ -5,27 +5,32 @@ import Page from './Page.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-const Template = (args, { argTypes }) => ({
-  components: { Page },
-  props: Object.keys(argTypes),
-  template: `
-    <page v-bind="$props">
-      <template v-slot:footer>
-        <footer v-if="footer" v-html="footer"/>
-      </template>
-    </page>
-  `,
-});
-
-export const CustomFooter= Template.bind({});
-CustomFooter.args = {
-  footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const CustomFooter = {
+  render: (args, { argTypes }) => ({
+    components: { Page },
+    props: Object.keys(argTypes),
+    template: `
+      <page v-bind="$props">
+        <template v-slot:footer>
+          <footer v-if="footer" v-html="footer"/>
+        </template>
+      </page>
+    `,
+  }),
+  args: {
+    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-slots.3.js.mdx b/docs/snippets/vue/page-story-slots.3.js.mdx
index cf8b6b6106a3..42c640d6d786 100644
--- a/docs/snippets/vue/page-story-slots.3.js.mdx
+++ b/docs/snippets/vue/page-story-slots.3.js.mdx
@@ -5,29 +5,34 @@ import Page from './Page.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-const Template = (args) => ({
-  components: { Page },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const CustomFooter = {
+  render: (args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: `
+      <page v-bind="args">
+        <template v-slot:footer>
+          <footer v-if="args.footer" v-html="args.footer" />
+        </template>
+      </page>
+    `,
+  }),
+  args: {
+    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
   },
-  template: `
-    <page v-bind="args">
-      <template v-slot:footer>
-        <footer v-if="args.footer" v-html="args.footer" />
-      </template>
-    </page>
-  `,
-});
-
-export const CustomFooter = Template.bind({});
-CustomFooter.args = {
-  footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
index b6ce77d8a2f6..20150162787a 100644
--- a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
@@ -7,23 +7,26 @@ import Page from './Page.vue';
 
 <Meta title="Page" component={Page} />
 
-export const Template = (args, { argTypes }) => ({
-  components: { Page },
-  props: Object.keys(argTypes),
-  template: `
-    <page v-bind="$props">
-      <template v-slot:footer>
-        <footer v-if="footer" v-html="footer"/>
-      </template>
-    </page>
-  `,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="CustomFooter"
   args={{
-   footer: `<a href="https://storybook.js.org/">Built with Storybook</a>`,
-  }}>
-  {Template.bind({})}
-</Story>
+    footer: `<a href="https://storybook.js.org/">Built with Storybook</a>`,
+  }}
+  render={(args, { argTypes }) => ({
+    components: { Page },
+    props: Object.keys(argTypes),
+    template: `
+      <page v-bind="$props">
+        <template v-slot:footer>
+          <footer v-if="footer" v-html="footer"/>
+        </template>
+      </page>
+    `,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx b/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx
index 3567c4b8a6e0..dc304d091cd7 100644
--- a/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx
@@ -7,25 +7,28 @@ import Page from './Page.vue';
 
 <Meta title="Page" component={Page} />
 
-export const Template = (args) => ({
-  components: { Page },
-  setup() {
-    return { args };
-  },
-  template: `
-    <page v-bind="args">
-      <template v-slot:footer>
-        <footer v-if="args.footer" v-html="args.footer" />
-      </template>
-    </page>
-  `,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="CustomFooter"
   args={{
    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: `
+      <page v-bind="args">
+        <template v-slot:footer>
+          <footer v-if="args.footer" v-html="args.footer" />
+        </template>
+      </page>
+    `,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
index 090392985479..3a3b6c22a700 100644
--- a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
+++ b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
@@ -10,23 +10,28 @@ import * as DocumentListStories from './DocumentList.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { DocumentScreen },
-  template: '<DocumentScreen v-bind="$props"/>',
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  user: PageLayoutStories.Simple.args.user,
-  document: DocumentHeaderStories.Simple.args.document,
-  subdocuments: DocumentListStories.Simple.args.documents,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Simple = {
+  render: (args, { argTypes }) => ({
+    components: { DocumentScreen },
+    props: Object.keys(argTypes),
+    template: '<DocumentScreen v-bind="$props" />',
+  }),
+  args: {
+    user: PageLayoutStories.Simple.args.user,
+    document: DocumentHeaderStories.Simple.args.document,
+    subdocuments: DocumentListStories.Simple.args.documents,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
index bd47190804e4..d247267a9121 100644
--- a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
+++ b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
@@ -10,25 +10,30 @@ import * as DocumentListStories from './DocumentList.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-const Template = (args) => ({
-  components: { DocumentScreen },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Simple = {
+  render: (args) => ({
+    components: { DocumentScreen },
+    setup() {
+      return { args };
+    },
+    template: '<DocumentScreen v-bind="args" />',
+  }),
+  args: {
+    user: PageLayoutStories.Simple.args.user,
+    document: DocumentHeaderStories.Simple.args.document,
+    subdocuments: DocumentListStories.Simple.args.documents,
   },
-  template: '<DocumentScreen v-bind="args"/>',
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  user: PageLayoutStories.Simple.args.user,
-  document: DocumentHeaderStories.Simple.args.document,
-  subdocuments: DocumentListStories.Simple.args.documents,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story.2.js.mdx b/docs/snippets/vue/page-story.2.js.mdx
index 59f260eed46e..04352638586d 100644
--- a/docs/snippets/vue/page-story.2.js.mdx
+++ b/docs/snippets/vue/page-story.2.js.mdx
@@ -8,22 +8,26 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-
-const Template = (args, { argTypes }) => ({
-  components: { Page },
-  props: Object.keys(argTypes),
-  template: '<page v-bind="$props" />',
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  ...HeaderStories.LoggedIn.args,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const LoggedIn = {
+  render: (args, { argTypes }) => ({
+    components: { Page },
+    props: Object.keys(argTypes),
+    template: '<page v-bind="$props" />',
+  }),
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story.3.js.mdx b/docs/snippets/vue/page-story.3.js.mdx
index 30b6cb0cb5b8..07368d3cbad9 100644
--- a/docs/snippets/vue/page-story.3.js.mdx
+++ b/docs/snippets/vue/page-story.3.js.mdx
@@ -8,23 +8,28 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Page',
   component: Page,
 };
 
-const Template = (args) => ({
-  components: { Page },
-  setup() {
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const LoggedIn = {
+  render: (args) => ({
+    components: { Page },
+    setup() {
+      return { args };
+    },
+    template: '<page v-bind="args" />',
+  }),
+  args: {
+    ...HeaderStories.LoggedIn.args,
   },
-  template: '<page v-bind="args" />',
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  ...HeaderStories.LoggedIn.args,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/register-component-with-play-function.js.mdx b/docs/snippets/vue/register-component-with-play-function.js.mdx
index c898c389ff0a..9dc018d2ad58 100644
--- a/docs/snippets/vue/register-component-with-play-function.js.mdx
+++ b/docs/snippets/vue/register-component-with-play-function.js.mdx
@@ -7,28 +7,32 @@ import RegistrationForm from './RegistrationForm.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'RegistrationForm',
   component: RegistrationForm,
 };
 
-const Template = (args) => ({
-  components: { RegistrationForm },
-  template: '<RegistrationForm />',
-});
-
-export const FilledForm = Template.bind({});
-FilledForm.play = async () => {
-  const emailInput = screen.getByLabelText('email', {
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const FilledForm = {
+  render: () => ({
+    components: { RegistrationForm },
+    template: '<RegistrationForm />',
+  }),
+  play: async () => {
+    const emailInput = screen.getByLabelText('email', {
       selector: 'input',
     });
 
     await userEvent.type(emailInput, 'example-email@email.com', {
       delay: 100,
     });
-    
+
     const passwordInput = screen.getByLabelText('password', {
       selector: 'input',
     });
@@ -36,9 +40,11 @@ FilledForm.play = async () => {
     await userEvent.type(passwordInput, 'ExamplePassword', {
       delay: 100,
     });
-    
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const Submit = screen.getByRole('button');
-    await userEvent.click(Submit);
+
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = screen.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/register-component-with-play-function.mdx.mdx b/docs/snippets/vue/register-component-with-play-function.mdx.mdx
index f85c8b1afa87..d133cc0e8fbd 100644
--- a/docs/snippets/vue/register-component-with-play-function.mdx.mdx
+++ b/docs/snippets/vue/register-component-with-play-function.mdx.mdx
@@ -9,14 +9,15 @@ import RegistrationForm from './RegistrationForm.vue';
 
 <Meta title="RegistrationForm" component={RegistrationForm} />
 
-export const Template = (args) => ({
-  components: { RegistrationForm },
-  template: '<RegistrationForm />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="FilledForm"
-  play={async () => {
+  play={ async () => {
     const emailInput = screen.getByLabelText('email', {
       selector: 'input',
     });
@@ -33,10 +34,12 @@ export const Template = (args) => ({
       delay: 100,
     });
     
-    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     const Submit = screen.getByRole('button');
     await userEvent.click(Submit);
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { RegistrationForm },
+    template: '<RegistrationForm />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
index 7be7ee2c227c..0fde60b15579 100644
--- a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
@@ -5,23 +5,28 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Disable a11y addon',
   component: MyComponent,
 };
 
-const Template = () => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
-
-export const NonA11yStory = Template.bind({});
-NonA11yStory.parameters = {
-  a11y: {
-    // This option disables all a11y checks on this story
-    disable: true,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const NonA11yStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  parameters: {
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
index 9e9addbb4ac7..76609c6f8423 100644
--- a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
@@ -5,38 +5,43 @@ import MyComponent from './MyComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Configure a11y addon',
   component: MyComponent,
 };
 
-const Template = () => ({
-  components: { MyComponent },
-  template: '<MyComponent/>',
-});
-
-export const ExampleStory = Template.bind({});
-ExampleStory.parameters = {
-  a11y: {
-    element: '#root',
-    config: {
-      rules: [
-        {
-          // The autocomplete rule will not run based on the CSS selector provided
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // Setting the enabled option to false will disable checks for this particular rule on all stories.
-          id: 'image-alt',
-          enabled: false,
-        },
-      ],
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent/>',
+  }),
+  parameters: {
+    a11y: {
+      element: '#root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
     },
-    options: {},
-    manual: true,
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx
index e76f552f1d4e..e41bc9806563 100644
--- a/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx
@@ -9,10 +9,11 @@ import MyComponent from './MyComponent.vue';
   title="Configure a11y addon" 
   component={MyComponent} />
 
-export const Template = () => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="ExampleStory"
@@ -36,7 +37,9 @@ export const Template = () => ({
       options: {},
       manual: true,
     },
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
index ade9b4a326ca..b15cca26de0d 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
@@ -5,34 +5,40 @@ import Table from './Table.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Custom Table',
   component: Table,
 };
 
-const TableStory = (args, { argTypes }) => ({
-  components: { Table },
-  props: Object.keys(argTypes),
-  template: `
-    <Table v-bind="$props">
-      <tr v-for="(row, idx1) in data">
-        <td v-for="(col, idx2) in row">
-          {{ data[idx1][idx2] }}
-        </td>
-      </tr>
-    </Table>`,
-});
-
-export const Numeric = TableStory.bind({});
-Numeric.args = {
-  //👇 This arg is for the story component
-  data: [
-    [1, 2, 3],
-    [4, 5, 6],
-  ],
-  //👇 The remaining args get passed to the `Table` component
-  size: 'large',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const TableStory = {
+  render: (args, { argTypes }) => ({
+    components: { Table },
+    props: Object.keys(argTypes),
+    template: `
+      <Table v-bind="$props">
+        <tr v-for="(row, idx1) in data">
+          <td v-for="(col, idx2) in row">
+            {{ data[idx1][idx2] }}
+          </td>
+        </tr>
+    </Table>
+    `,
+  }),
+  args: {
+    //👇 This arg is for the story component
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
index 0623762a7da3..c80f5663c165 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
@@ -5,37 +5,42 @@ import Table from './Table.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Custom Table',
   component: Table,
 };
 
-const TableStory = (args) => ({
-  components: { Table },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Table v-bind="args">
-      <tr v-for="(row, idx1) in data">
-        <td v-for="(col, idx2) in row">
-          {{ data[idx1][idx2] }}
-        </td>
-      </tr>
-    </Table>
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const TableStory = {
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Table v-bind="args">
+        <tr v-for="(row, idx1) in data">
+          <td v-for="(col, idx2) in row">
+            {{ data[idx1][idx2] }}
+          </td>
+        </tr>
+      </Table>
   `,
-});
-
-export const Numeric = TableStory.bind({});
-Numeric.args = {
-  //👇 This arg is for the story component
-  data: [
-    [1, 2, 3],
-    [4, 5, 6],
-  ],
-  //👇 The remaining args get passed to the `Table` component
-  size: 'large',
+  }),
+  args: {
+    //👇 This arg is for the story component
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx b/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx
index ed39b60e5e4e..fc432b4e13ad 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx
@@ -7,18 +7,11 @@ import Table from './Table.vue';
 
 <Meta title="Custom Table" component={Table} />
 
-export const TableStory = (args, { argTypes }) => ({
-  components: { Table },
-  props: Object.keys(argTypes),
-  template: `
-    <Table v-bind="$props">
-      <tr v-for="(row, idx1) in data">
-        <td v-for="(col, idx2) in row">
-          {{ data[idx1][idx2] }}
-        </td>
-      </tr>
-    </Table>`,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="Numeric"
@@ -28,7 +21,17 @@ export const TableStory = (args, { argTypes }) => ({
       [4, 5, 6],
     ],
     size: 'large',
-  }}>
-  {TableStory.bind({})}
-</Story>
+  }}
+  render={(args, { argTypes }) =>({
+    components: { Table },
+    props: Object.keys(argTypes),
+    template: `
+      <Table v-bind="$props">
+        <tr v-for="(row, idx1) in data">
+          <td v-for="(col, idx2) in row">
+            {{ data[idx1][idx2] }}
+          </td>
+        </tr>
+      </Table>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx b/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx
index dacb19795659..c5176464e49b 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx
@@ -7,20 +7,11 @@ import Table from './Table.vue';
 
 <Meta title="Custom Table" component={Table} />
 
-export const TableStory = (args) => ({
-  components: { Table },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Table v-bind="args">
-      <tr v-for="(row, idx1) in data">
-        <td v-for="(col, idx2) in row">
-          {{ data[idx1][idx2] }}
-        </td>
-      </tr>
-    </Table>`,
-});
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/vue/api/csf
+  to learn how to use render functions.
+-->
 
 <Story
   name="Numeric"
@@ -30,7 +21,19 @@ export const TableStory = (args) => ({
       [4, 5, 6],
     ],
     size: 'large',
-  }}>
-  {TableStory.bind({})}
-</Story>
+  }}
+  render={(args) => ({
+    components: { Table },
+    setup() {
+      return { args };
+    },
+    template: `
+    <Table v-bind="args">
+      <tr v-for="(row, idx1) in data">
+        <td v-for="(col, idx2) in row">
+          {{ data[idx1][idx2] }}
+        </td>
+      </tr>
+    </Table>`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/your-component-with-decorator.js.mdx b/docs/snippets/vue/your-component-with-decorator.js.mdx
index 15f560e26f4a..d6bd32c0d686 100644
--- a/docs/snippets/vue/your-component-with-decorator.js.mdx
+++ b/docs/snippets/vue/your-component-with-decorator.js.mdx
@@ -5,7 +5,7 @@ import YourComponent from './YourComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'YourComponent',
diff --git a/docs/snippets/vue/your-component.2.js.mdx b/docs/snippets/vue/your-component.2.js.mdx
index 4e31094af482..faf3cd115f9c 100644
--- a/docs/snippets/vue/your-component.2.js.mdx
+++ b/docs/snippets/vue/your-component.2.js.mdx
@@ -6,22 +6,26 @@ import YourComponent from './YourComponent.vue';
 //👇 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/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args, { argTypes }) => ({
-  components: { YourComponent },
-  props: Object.keys(argTypes),
-  template: '<YourComponent v-bind="$props"/>',
-});
-
-export const FirstStory = Template.bind({});
-FirstStory.args = {
-  //👇 The args you need here will depend on your component
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: (args, { argTypes }) => ({
+    components: { YourComponent },
+    props: Object.keys(argTypes),
+    template: '<Button v-bind="$props" />',
+  }),
+  args: {
+    //👇 The args you need here will depend on your component
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/your-component.3.js.mdx b/docs/snippets/vue/your-component.3.js.mdx
index 9acd73d1c783..02dfb7653b4d 100644
--- a/docs/snippets/vue/your-component.3.js.mdx
+++ b/docs/snippets/vue/your-component.3.js.mdx
@@ -6,26 +6,28 @@ import YourComponent from './YourComponent.vue';
 //👇 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/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => ({
-  components: { YourComponent },
-  setup() {
-    //👇 The args will now be passed down to the template
-    return { args };
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: (args) => ({
+    components: { YourComponent },
+    setup() {
+      return { args };
+    },
+    template: '<YourComponent v-bind="args" />',
+  }),
+  args: {
+    //👇 The args you need here will depend on your component
   },
-  template: '<YourComponent v-bind="args"/>',
-});
-
-export const FirstStory = Template.bind({});
-
-FirstStory.args = {
-  /* 👇 The args you need here will depend on your component */
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/your-component.mdx-2.mdx.mdx b/docs/snippets/vue/your-component.mdx-2.mdx.mdx
index 8250437df8f8..e2f2af44bb57 100644
--- a/docs/snippets/vue/your-component.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/your-component.mdx-2.mdx.mdx
@@ -8,17 +8,14 @@ import YourComponent from './YourComponent.vue';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!--👇 We create a “template” of how args map to rendering -->
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { YourComponent },
-  template: `<YourComponent v-bind="$props" />`,
-});
 
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}>
-  {Template.bind({})}
-</Story>
+  args={{}}
+  render={(args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { YourComponent },
+    template: `<YourComponent v-bind="$props" />`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/your-component.mdx-3.mdx.mdx b/docs/snippets/vue/your-component.mdx-3.mdx.mdx
index f5c6d9d6f784..40643976fa13 100644
--- a/docs/snippets/vue/your-component.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/your-component.mdx-3.mdx.mdx
@@ -8,19 +8,15 @@ import YourComponent from './YourComponent.vue';
 <!--👇 The title prop determines where your story goes in the story list -->
 <Meta title="YourComponent" component={YourComponent} />
 
-<!--👇 We create a “template” of how args map to rendering -->
-export const Template = (args) => ({
-  components: { YourComponent },
-  setup() {
-    return { args };
-  },
-  template: `<YourComponent v-bind="args" />`,
-});
-
 <!-- 👇 The args you need here will depend on your component -->
 <Story
   name="FirstStory"
-  args={{}}>
-  {Template.bind({})}
-</Story>
+  args={{}}
+  render={(args) => ({
+    components: { YourComponent },
+    setup() {
+      return { args };
+    },
+    template: `<YourComponent v-bind="args" />`,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-group-story.js.mdx b/docs/snippets/web-components/button-group-story.js.mdx
index a73c25d09706..be5be5ad4afc 100644
--- a/docs/snippets/web-components/button-group-story.js.mdx
+++ b/docs/snippets/web-components/button-group-story.js.mdx
@@ -1,26 +1,30 @@
 ```js
 // demo-button-group.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button-group';
+import { ButtonGroup } from './demo-button-group';
 
 //👇 Imports the Button stories
 import * as ButtonStories from './demo-button.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
 };
 
-const Template = ({ buttons, orientation }) => {
-  return html`
-    <demo-button-group .buttons=${buttons} .orientation=${orientation}></demo-button-group>
-  `;
-};
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
 
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
-  orientation: 'horizontal',
+export const Pair = {
+  render: (args) => ButtonGroup(args),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-component-args-primary.js.mdx b/docs/snippets/web-components/button-story-component-args-primary.js.mdx
index 58a22394f3be..00f18b087cc2 100644
--- a/docs/snippets/web-components/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/web-components/button-story-component-args-primary.js.mdx
@@ -1,11 +1,13 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   //👇 Creates specific argTypes
   argTypes: {
@@ -17,5 +19,12 @@ export default {
   },
 };
 
-export const Primary = ({ primary }) => html`<demo-button ?primary=${primary}></demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: ({ primary }) => Button({ primary }),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-component-decorator.js.mdx b/docs/snippets/web-components/button-story-component-decorator.js.mdx
index 7d1de7f44e5b..d48c3b57a715 100644
--- a/docs/snippets/web-components/button-story-component-decorator.js.mdx
+++ b/docs/snippets/web-components/button-story-component-decorator.js.mdx
@@ -6,9 +6,20 @@ import { html } from 'lit-html';
 import './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
 
-export const Primary = () => html`<demo-button primary></demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => html`<demo-button primary></demo-button>`,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-decorator.js.mdx b/docs/snippets/web-components/button-story-decorator.js.mdx
index bba7d7bf7539..affc293914c9 100644
--- a/docs/snippets/web-components/button-story-decorator.js.mdx
+++ b/docs/snippets/web-components/button-story-decorator.js.mdx
@@ -1,15 +1,26 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
+import { Button } from './demo-button';
 
-import './demo-button'; 
+import { html } from 'lit-html';
 
 export default {
-    title: 'Button',
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
 };
 
-export const Primary = () => html`<demo-button>Hello World</demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
 
-Primary.decorators = [(story) => html`<div style="margin: 3em">${story()}</div>`]
+export const Primary = {
+  render: (args) => Button(args),
+  decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx b/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
index 9c5daceab5fd..d0319e8ce8a3 100644
--- a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
@@ -1,9 +1,13 @@
 ```js
 // demo-button.stories.js
 
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-rename-story.js.mdx b/docs/snippets/web-components/button-story-rename-story.js.mdx
index bf448006efa3..02576065c63b 100644
--- a/docs/snippets/web-components/button-story-rename-story.js.mdx
+++ b/docs/snippets/web-components/button-story-rename-story.js.mdx
@@ -1,15 +1,23 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
 
-export const Primary = () => html`<demo-button primary></demo-button>`;
-
-Primary.storyName = 'I am the primary';
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  name: 'I am the primary',
+  render: (args) => Button(args),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-using-args.js.mdx b/docs/snippets/web-components/button-story-using-args.js.mdx
index a76dcb9266fd..ef689a882c1f 100644
--- a/docs/snippets/web-components/button-story-using-args.js.mdx
+++ b/docs/snippets/web-components/button-story-using-args.js.mdx
@@ -1,25 +1,43 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = ({ background, label }) =>
-  html`<demo-button .background=${background} .label=${label}></demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
 
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+export const Primary = {
+  render: (args) => Button(args),
+  args: {
+    background: '#ff0',
+    label: 'Button',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+export const Secondary = {
+  render: (args) => Button(args),
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary = {
+  render: (args) => Button(args),
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-with-args.js.mdx b/docs/snippets/web-components/button-story-with-args.js.mdx
index 0ab143262f91..deed847c6c3b 100644
--- a/docs/snippets/web-components/button-story-with-args.js.mdx
+++ b/docs/snippets/web-components/button-story-with-args.js.mdx
@@ -1,23 +1,26 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = ({ primary, label }) =>
-  html`<demo-button ?primary=${primary} .label=${label}></demo-button>`;
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-
-Primary.args = {
-  primary: true,
-  label: 'Button',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => Button(args),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-with-blue-args.js.mdx b/docs/snippets/web-components/button-story-with-blue-args.js.mdx
index 25ae55d76e7f..3c9621d38cf8 100644
--- a/docs/snippets/web-components/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/web-components/button-story-with-blue-args.js.mdx
@@ -1,11 +1,13 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   //👇 Creates specific parameters for the story
   parameters: {
diff --git a/docs/snippets/web-components/button-story-with-emojis.js.mdx b/docs/snippets/web-components/button-story-with-emojis.js.mdx
index b02251d5283b..1d2cd87784b8 100644
--- a/docs/snippets/web-components/button-story-with-emojis.js.mdx
+++ b/docs/snippets/web-components/button-story-with-emojis.js.mdx
@@ -1,4 +1,4 @@
-```ts
+```js
 // demo-button.stories.js
 
 import { html } from 'lit-html';
@@ -6,9 +6,27 @@ import { html } from 'lit-html';
 import './demo-button';
 
 export default {
-    title: 'Button',
-}
-export const Primary = () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`;
-export const Secondary = () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`;
-export const Tertiary = () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`;
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`,
+};
+
+export const Secondary = {
+  render: () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`,
+};
+
+export const Tertiary = {
+  render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story.js.mdx b/docs/snippets/web-components/button-story.js.mdx
index 85b6bb491f9d..e3ccba0a62e4 100644
--- a/docs/snippets/web-components/button-story.js.mdx
+++ b/docs/snippets/web-components/button-story.js.mdx
@@ -6,8 +6,19 @@ import { html } from 'lit-html';
 import './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
 
-export const Primary = () => html`<demo-button primary></demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => html`<demo-button primary></demo-button>`,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/component-story-with-custom-render-function.js.mdx b/docs/snippets/web-components/component-story-with-custom-render-function.js.mdx
new file mode 100644
index 000000000000..9893084eb937
--- /dev/null
+++ b/docs/snippets/web-components/component-story-with-custom-render-function.js.mdx
@@ -0,0 +1,30 @@
+```js
+// MyComponent.stories.js
+
+import { html } from 'lit-html';
+
+import './Layout';
+import './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+};
+
+// This story uses a render function to fully control how the component renders.
+export const Example = {
+  render: () => html`
+    <layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <my-component />
+      </article>
+    </layout>
+  `,
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/web-components/list-story-expanded.js.mdx b/docs/snippets/web-components/list-story-expanded.js.mdx
index 88a988979f20..2d34e8cb48d9 100644
--- a/docs/snippets/web-components/list-story-expanded.js.mdx
+++ b/docs/snippets/web-components/list-story-expanded.js.mdx
@@ -7,26 +7,35 @@ import './demo-list';
 import './demo-list-item';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 };
 
-export const Empty = (args) => html`<demo-list></demo-list>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: () => html`<demo-list></demo-list>`,
+};
 
-export const OneItem = (args) => {
-  return html`
+export const OneItem = {
+  render: () => html`
     <demo-list>
       <demo-list-item></demo-list-item>
     </demo-list>
-  `;
+  `,
 };
 
-export const ManyItems = (args) => {
-  return html`
-    <demo-list>
-      <demo-list-item></demo-list-item>
-      <demo-list-item></demo-list-item>
-      <demo-list-item></demo-list-item>
-    </demo-list>
-  `;
+export const ManyItems = {
+  render: () => html` <demo-list>
+    <demo-list-item></demo-list-item>
+    <demo-list-item></demo-list-item>
+    <demo-list-item></demo-list-item>
+  </demo-list>`,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/list-story-reuse-data.js.mdx b/docs/snippets/web-components/list-story-reuse-data.js.mdx
index 90b453e02fb2..e46cd323079b 100644
--- a/docs/snippets/web-components/list-story-reuse-data.js.mdx
+++ b/docs/snippets/web-components/list-story-reuse-data.js.mdx
@@ -7,19 +7,28 @@ import './demo-list';
 import './demo-list-item';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 };
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './demo-list-item.stories';
 
-export const ManyItems = (args) => {
-  return html`
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems = {
+  render: (args) => html`
     <demo-list>
-      ${Selected({ ...args, ...Selected.args })}
-      ${Unselected({ ...args, ...Unselected.args })}
-      ${Unselected({ ...args, ...Unselected.args })}
+      ${Selected({ ...args, ...Selected.args })} ${Unselected({ ...args, ...Unselected.args })} ${Unselected(
+        { ...args, ...Unselected.args }
+      )}
     </demo-list>
-  `;
+  `,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/list-story-starter.js.mdx b/docs/snippets/web-components/list-story-starter.js.mdx
index 58a7a4b1d691..174406588fef 100644
--- a/docs/snippets/web-components/list-story-starter.js.mdx
+++ b/docs/snippets/web-components/list-story-starter.js.mdx
@@ -6,9 +6,15 @@ import { html } from 'lit-html';
 import './demo-list';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 };
 
 // Always an empty list, not super interesting
-const Template = (args) => html`<demo-list></demo-list>`
+export const Empty = {
+  render: () => html`<demo-list></demo-list>`,
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/list-story-unchecked.js.mdx b/docs/snippets/web-components/list-story-unchecked.js.mdx
index 79946a547334..cd4d7bf3fb9a 100644
--- a/docs/snippets/web-components/list-story-unchecked.js.mdx
+++ b/docs/snippets/web-components/list-story-unchecked.js.mdx
@@ -10,15 +10,22 @@ import { Unchecked } from './my-list-item.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/web-components/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'my-list',
 };
 
-export const OneItem = () => html`
-  <List>
-    ${Unchecked({ ...Unchecked.args })}
-  </List>
-`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = {
+  render: () => html`
+    <List>
+      ${Unchecked({ ...Unchecked.args })}
+    </List>
+  `,
+};
 ```
diff --git a/docs/snippets/web-components/list-story-unchecked.ts.mdx b/docs/snippets/web-components/list-story-unchecked.ts.mdx
index e491afd8c265..11843216e964 100644
--- a/docs/snippets/web-components/list-story-unchecked.ts.mdx
+++ b/docs/snippets/web-components/list-story-unchecked.ts.mdx
@@ -12,7 +12,7 @@ import { Unchecked } from './my-list-item.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/web-components/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'my-list',
diff --git a/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx b/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx
index 4a8b594dc42d..1a12e9d642ea 100644
--- a/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx
@@ -1,13 +1,15 @@
 ```js
 // my-component.stories.js
 
-import { html } from 'lit-html';
-
-import './my-component';
+import { MyComponent } from'./my-component';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   parameters: {
     //👇 The viewports object from the Essentials addon
@@ -20,10 +22,17 @@ export default {
   };
 };
 
-export const MyStory = () => html`<my-component></my-component>`;
-MyStory.parameters = {
-  viewport: {
-    defaultViewport: 'iphonex'
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const InitialButton = {
+  render: () => MyComponent(),
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex'
+    },
   },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
index 00291479a6b4..a659bd8a7fc5 100644
--- a/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -3,8 +3,10 @@
 
 import { html } from 'lit-html';
 
-export const StoryWithLocale = ({ globals: { locale } }) => {
-  const caption = getCaptionForLocale(locale);
-  return html`<p>${caption}</p>`;
+export const StoryWithLocale = {
+  render: ({ globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return html`<p>${caption}</p>`;
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx b/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx
index 63873a57924b..27f0e890bb9c 100644
--- a/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx
@@ -18,8 +18,10 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = ({ propA, propB }, { globals: { locale } }) => {
-  const caption = getCaptionForLocale(locale);
-  return html`<p>${caption}</p>`;
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return html`<p>${caption}</p>`;
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/my-component-with-env-variables.js.mdx b/docs/snippets/web-components/my-component-with-env-variables.js.mdx
index 5fd5ff24bcb6..b19ba2898945 100644
--- a/docs/snippets/web-components/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/web-components/my-component-with-env-variables.js.mdx
@@ -1,19 +1,25 @@
 ```js
 // my-component.stories.js
 
-import { html } from 'lit-html';
-
-import './my-component';
+import { MyComponent } from './my-component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
 };
 
-const Template = ({ propertyA }) => html`<my-component .propertyA=${propertyA}></my-component>`;
-
-export const Default = Template.bind({});
-
-Default.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: (args) => MyComponent({ propertyA }),
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/web-components/your-component.js.mdx b/docs/snippets/web-components/your-component.js.mdx
index c8461f952f49..cbb4c9c76ca2 100644
--- a/docs/snippets/web-components/your-component.js.mdx
+++ b/docs/snippets/web-components/your-component.js.mdx
@@ -1,22 +1,26 @@
 ```js
 // your-component.stories.js
 
-import { html } from 'lit-html';
-
-import './your-component';
+import { MyComponent } from './your-component';
 
 // 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/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
 };
 
-// 👇 We create a “template” of how args map to rendering
-const Template = ({ aProperty }) => html`<your-component .yourProperty=${aProperty}></your-component>`;
-
-export const FirstStory = Template.bind({});
-
-FirstStory.args = {
-  /* 👇 The args you need here will depend on your component */
-  aProperty: 'aProperty'
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: (args) => MyComponent(args),
+  args: {
+    //👇 The args you need here will depend on your component
+  },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 6d10a8faab72..2ee7027d196b 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -30,7 +30,6 @@ To define the args of a single story, use the `args` CSF story key:
     'angular/button-story-with-args.ts.mdx',
     'angular/button-story-with-args.mdx.mdx',
     'svelte/button-story-with-args.js.mdx',
-    'svelte/button-story-with-args.native-format.mdx',
     'svelte/button-story-with-args.mdx.mdx',
     'web-components/button-story-with-args.js.mdx',
     'html/button-story-with-args.ts.mdx',
@@ -70,7 +69,6 @@ You can also define args at the component level; they will apply to all the comp
     'angular/button-story-component-args-primary.ts.mdx',
     'angular/button-story-component-args-primary.mdx.mdx',
     'svelte/button-story-component-args-primary.js.mdx',
-    'svelte/button-story-component-args-primary.native-format.mdx',
     'svelte/button-story-component-args-primary.mdx.mdx',
     'web-components/button-story-component-args-primary.js.mdx',
   ]}
@@ -146,7 +144,6 @@ You can use args in your stories to configure the component's appearance, simila
     'vue/page-story-slots.mdx-3.mdx.mdx',
     'angular/page-story-slots.ts.mdx',
     'angular/page-story-slots.mdx.mdx',
-    'svelte/page-story-slots.native-format.mdx',
   ]}
 />
 
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index bc8509b7c2d8..717514e6502b 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -26,7 +26,6 @@ Some components require a “harness” to render in a useful way. For instance,
     'angular/your-component-with-decorator.ts.mdx',
     'angular/your-component-with-decorator.mdx.mdx',
     'svelte/your-component-with-decorator.js.mdx',
-    'svelte/your-component-with-decorator.native-format.mdx',
     'svelte/your-component-with-decorator.mdx.mdx',
     'web-components/your-component-with-decorator.js.mdx',
   ]}
@@ -121,7 +120,6 @@ To define a decorator for all stories of a component, use the `decorators` key o
     'angular/button-story-component-decorator.ts.mdx',
     'angular/button-story-component-decorator.mdx.mdx',
     'svelte/button-story-component-decorator.js.mdx',
-    'svelte/button-story-component-decorator.native-format.mdx',
     'svelte/button-story-component-decorator.mdx.mdx',
     'web-components/button-story-component-decorator.js.mdx',
   ]}
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 15e4c456516b..8ac21987ca01 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -59,7 +59,6 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
     'vue/button-story.ts-3.ts.mdx',
     'angular/button-story.ts.mdx',
     'svelte/button-story.js.mdx',
-    'svelte/button-story.native-format.mdx',
     'web-components/button-story.js.mdx',
     'html/button-story.js.mdx',
     'html/button-story.ts.mdx',
@@ -98,8 +97,7 @@ You can rename any particular story you need. For instance, to give it a more ac
     'react/button-story-rename-story.js.mdx',
     'react/button-story-rename-story.ts.mdx',
     'vue/button-story-rename-story.js.mdx',
-    'vue/button-story-rename-story.ts-2.ts.mdx',
-    'vue/button-story-rename-story.ts-3.ts.mdx',
+    'vue/button-story-rename-story.ts.mdx',
     'angular/button-story-rename-story.ts.mdx',
     'svelte/button-story-rename-story.js.mdx',
     'web-components/button-story-rename-story.js.mdx',
@@ -130,7 +128,6 @@ A story is a function that describes how to render a component. You can have mul
     'angular/button-story-with-emojis.ts.mdx',
     'angular/button-story-with-emojis.mdx.mdx',
     'svelte/button-story-with-emojis.js.mdx',
-    'svelte/button-story-with-emojis.native-format.mdx',
     'svelte/button-story-with-emojis.mdx.mdx',
     'web-components/button-story-with-emojis.js.mdx',
     'html/button-story-with-emojis.js.mdx',
@@ -158,7 +155,6 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
     'vue/button-story-using-args.ts-3.ts.mdx',
     'angular/button-story-using-args.ts.mdx',
     'svelte/button-story-using-args.js.mdx',
-    'svelte/button-story-using-args.native-format.mdx',
     'web-components/button-story-using-args.js.mdx',
     'html/button-story-using-args.js.mdx',
     'html/button-story-using-args.ts.mdx',
@@ -167,11 +163,6 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-💡 `Template.bind({})` is a [standard JavaScript technique](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) for making a copy of a function. We copy the `Template` so each exported story can set its own properties on it.
-
-</div>
 
 By introducing args into your component's stories, you're not only reducing the amount of code you need to write, but you're also decreasing data duplication, as shown by spreading the `Primary` story's args into the other stories.
 
@@ -261,7 +252,6 @@ For instance, suppose you wanted to test your Button component against a differe
     'angular/button-story-with-blue-args.ts.mdx',
     'angular/button-story-with-blue-args.mdx.mdx',
     'svelte/button-story-with-blue-args.js.mdx',
-    'svelte/button-story-with-blue-args.native-format.mdx',
     'svelte/button-story-with-blue-args.mdx.mdx',
     'web-components/button-story-with-blue-args.js.mdx',
     'html/button-story-with-blue-args.js.mdx',
@@ -295,7 +285,6 @@ A simple example is adding padding to a component’s stories. Accomplish this u
     'angular/button-story-component-decorator.ts.mdx',
     'angular/button-story-component-decorator.mdx.mdx',
     'svelte/button-story-component-decorator.js.mdx',
-    'svelte/button-story-component-decorator.native-format.mdx',
     'svelte/button-story-component-decorator.mdx.mdx',
     'web-components/button-story-component-decorator.js.mdx',
     'html/button-story-component-decorator.js.mdx',
@@ -322,7 +311,6 @@ When building design systems or component libraries, you may have two or more co
     'vue/list-story-starter.ts-2.ts.mdx',
     'vue/list-story-starter.3.js.mdx',
     'vue/list-story-starter.ts-3.ts.mdx',
-    'svelte/list-story-starter.native-format.mdx',
     'web-components/list-story-starter.js.mdx',
     'html/list-story-starter.js.mdx',
     'html/list-story-starter.ts.mdx',
@@ -344,7 +332,6 @@ In such cases, it makes sense to render a different function for each story:
     'vue/list-story-expanded.ts-2.ts.mdx',
     'vue/list-story-expanded.3.js.mdx',
     'vue/list-story-expanded.ts-3.ts.mdx',
-    'svelte/list-story-expanded.native-format.mdx',
     'web-components/list-story-expanded.js.mdx',
     'html/list-story-expanded.js.mdx',
     'html/list-story-expanded.ts.mdx',
diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md
index f7093ef0289c..7758681099dd 100644
--- a/docs/writing-stories/parameters.md
+++ b/docs/writing-stories/parameters.md
@@ -38,7 +38,6 @@ We can set the parameters for all stories of a component using the `parameters`
     'angular/button-story-with-blue-args.ts.mdx',
     'angular/button-story-with-blue-args.mdx.mdx',
     'svelte/button-story-with-blue-args.js.mdx',
-    'svelte/button-story-with-blue-args.native-format.mdx',
     'svelte/button-story-with-blue-args.mdx.mdx',
     'web-components/button-story-with-blue-args.js.mdx',
   ]}
diff --git a/docs/writing-stories/play-function.md b/docs/writing-stories/play-function.md
index 0923ee57a2c3..b95c7514ff0f 100644
--- a/docs/writing-stories/play-function.md
+++ b/docs/writing-stories/play-function.md
@@ -55,6 +55,12 @@ Storybook's `play` functions are small code snippets that run once the story fin
 
 <!-- prettier-ignore-end -->
 
+<div class="aside">
+
+💡 See the [Interaction testing documentation](../writing-tests/interaction-testing.md#api-for-user-events) for an overview of the available API events.
+
+</div>
+
 When Storybook finishes rendering the story, it executes the steps defined within the `play` function, interacting with the component and filling the form's information. All of this without the need for user intervention. If you check your `Interactions` panel, you'll see the step-by-step flow.
 
 ## Composing stories
diff --git a/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte b/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte
index 7306df6a054a..e0e809cec8bd 100644
--- a/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte
+++ b/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <h1>Button view</h1>
-<Button {rounded} on:click={handleClick}>{text}: {count}</Button>
+<Button {rounded} on:click on:click={handleClick}>{text}: {count}</Button>
 <p>A little text to show this is a view.</p>
 <p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
 <p>then wrapping the component up in a view</p>
diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
index 1071db277dc2..50eb00383f3c 100644
--- a/lib/cli/src/generators/baseGenerator.ts
+++ b/lib/cli/src/generators/baseGenerator.ts
@@ -90,7 +90,7 @@ export async function baseGenerator(
   // make sure to update `canUsePrebuiltManager` in dev-server.js and build-manager-config/main.js when this list changes
   const addons = ['@storybook/addon-links', '@storybook/addon-essentials'];
   // added to package.json
-  const addonPackages = [...addons, '@storybook/addon-actions'];
+  const addonPackages = [...addons];
 
   if (hasInteractiveStories(framework)) {
     addons.push('@storybook/addon-interactions');
diff --git a/lib/core-client/package.json b/lib/core-client/package.json
index 42a78a1754c4..fdde9f327daa 100644
--- a/lib/core-client/package.json
+++ b/lib/core-client/package.json
@@ -63,8 +63,7 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "webpack": "*"
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
diff --git a/lib/core-common/package.json b/lib/core-common/package.json
index b18b7c14eef4..743416e18308 100644
--- a/lib/core-common/package.json
+++ b/lib/core-common/package.json
@@ -88,8 +88,7 @@
     "slash": "^3.0.0",
     "telejson": "^6.0.8",
     "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2",
-    "webpack": "4"
+    "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
@@ -97,7 +96,8 @@
     "@types/interpret": "^1.1.1",
     "@types/mock-fs": "^4.13.0",
     "@types/picomatch": "^2.3.0",
-    "mock-fs": "^4.13.0"
+    "mock-fs": "^4.13.0",
+    "webpack": "4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
diff --git a/scripts/dts-localize.ts b/scripts/dts-localize.ts
index f3b558903147..00c6b74f3d1c 100644
--- a/scripts/dts-localize.ts
+++ b/scripts/dts-localize.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import path from 'path';
+import path, { dirname, isAbsolute, join, resolve } from 'path';
 import fs from 'fs-extra';
 import { sync } from 'read-pkg-up';
 import slash from 'slash';
@@ -14,8 +14,8 @@ const parseConfigHost = {
 };
 
 function getAbsolutePath(fileName: string, cwd?: string) {
-  if (!path.isAbsolute(fileName)) {
-    fileName = path.join(cwd !== undefined ? cwd : process.cwd(), fileName);
+  if (!isAbsolute(fileName)) {
+    fileName = join(cwd !== undefined ? cwd : process.cwd(), fileName);
   }
 
   return fileName;
@@ -28,7 +28,7 @@ function getCompilerOptions(inputFileNames: string[], preferredConfigPath?: stri
   const compilerOptionsParseResult = ts.parseJsonConfigFileContent(
     configParseResult.config,
     parseConfigHost,
-    path.resolve(path.dirname(configFileName)),
+    resolve(dirname(configFileName)),
     undefined,
     getAbsolutePath(configFileName)
   );
@@ -107,17 +107,17 @@ export const run = async (entrySourceFiles: string[], outputPath: string, option
 
     */
 
-    if (relative.includes('node_modules/')) {
-      const [, ...parts] = relative.split('node_modules/');
-      const filename = parts.join('node_modules/').split('/').join('-');
-      newPath = path.join(outputPath, '_modules', filename);
-    } else if (relative.includes('dist/ts-tmp/')) {
-      const [, ...parts] = relative.split('dist/ts-tmp/');
-      const filename = parts.join('').split('/').join('-');
-      newPath = path.join(outputPath, filename);
+    if (relative.includes(`node_modules${path.sep}`)) {
+      const [, ...parts] = relative.split(`node_modules${path.sep}`);
+      const filename = parts.join(`node_modules${path.sep}`).split(path.sep).join('-');
+      newPath = join(outputPath, '_modules', filename);
+    } else if (relative.includes(join('dist', `ts-tmp${path.sep}`))) {
+      const [, ...parts] = relative.split(join('dist', `ts-tmp${path.sep}`));
+      const filename = parts.join('').split(path.sep).join('-');
+      newPath = join(outputPath, filename);
     } else {
-      const filename = relative.split('/').join('-');
-      newPath = path.join(outputPath, filename);
+      const filename = relative.split(path.sep).join('-');
+      newPath = join(outputPath, filename);
     }
     return newPath;
   }
diff --git a/yarn.lock b/yarn.lock
index 9c430c7b44c1..e9fa5045bb35 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7645,7 +7645,6 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    webpack: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
@@ -8950,6 +8949,9 @@ __metadata:
     "@babel/core": "*"
     svelte: ^3.1.0
     svelte-loader: "*"
+  peerDependenciesMeta:
+    svelte-loader:
+      optional: true
   bin:
     build-storybook: ./bin/build.js
     start-storybook: ./bin/index.js