diff --git a/CHANGELOG.md b/CHANGELOG.md
index 076226ae9e77..6f4d663ad990 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 7.3.2
+
+- Maintenance: Revert "WebpackBuilder: Remove need for `react` as peerDependency" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!
+
 ## 7.3.1
 
 - Index: Fix `*.story.*` CSF indexing - [#23852](https://github.com/storybookjs/storybook/pull/23852), thanks [@shilman](https://github.com/shilman)!
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index be1dedb5a660..9d31c809a045 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -56,15 +56,23 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.0",
+    "@babel/core": "^7.22.9",
+    "@storybook/addons": "workspace:*",
     "@storybook/channels": "workspace:*",
+    "@storybook/client-api": "workspace:*",
     "@storybook/client-logger": "workspace:*",
+    "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
+    "@storybook/router": "workspace:*",
+    "@storybook/store": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "@swc/core": "^1.3.49",
     "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
@@ -102,6 +110,10 @@
     "slash": "^5.0.0",
     "typescript": "~4.9.3"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index 704d8fe2b98b..c99a1df1da81 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -36,29 +36,19 @@ const storybookPaths: Record<string, string> = {
     `@storybook/components`
   )}/dist/experimental`,
   ...[
-    // these packages are not pre-bundled because of react dependencies.
-    // these are not dependencies of the builder anymore, thus resolving them can fail.
-    // we should remove the aliases in 8.0, I'm not sure why they are here in the first place.
+    // these packages are not pre-bundled because of react dependencies
     'components',
     'global',
     'manager-api',
     'router',
     'theming',
-  ].reduce((acc, sbPackage) => {
-    let packagePath;
-    try {
-      packagePath = getAbsolutePath(`@storybook/${sbPackage}`);
-    } catch (e) {
-      // ignore
-    }
-    if (packagePath) {
-      return {
-        ...acc,
-        [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`),
-      };
-    }
-    return acc;
-  }, {}),
+  ].reduce(
+    (acc, sbPackage) => ({
+      ...acc,
+      [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`),
+    }),
+    {}
+  ),
   // deprecated, remove in 8.0
   [`@storybook/api`]: getAbsolutePath(`@storybook/manager-api`),
 };
diff --git a/code/yarn.lock b/code/yarn.lock
index 88afaae488c0..a576cddaf7a5 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -453,7 +453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.0, @babel/core@npm:^7.22.1, @babel/core@npm:^7.22.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.22.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
   version: 7.22.9
   resolution: "@babel/core@npm:7.22.9"
   dependencies:
@@ -6466,15 +6466,23 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack5@workspace:builders/builder-webpack5"
   dependencies:
-    "@babel/core": ^7.22.0
+    "@babel/core": ^7.22.9
+    "@storybook/addons": "workspace:*"
     "@storybook/channels": "workspace:*"
+    "@storybook/client-api": "workspace:*"
     "@storybook/client-logger": "workspace:*"
+    "@storybook/components": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/core-webpack": "workspace:*"
+    "@storybook/global": ^5.0.0
+    "@storybook/manager-api": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview": "workspace:*"
     "@storybook/preview-api": "workspace:*"
+    "@storybook/router": "workspace:*"
+    "@storybook/store": "workspace:*"
+    "@storybook/theming": "workspace:*"
     "@swc/core": ^1.3.49
     "@types/node": ^16.0.0
     "@types/pretty-hrtime": ^1.0.0
@@ -6509,6 +6517,9 @@ __metadata:
     webpack-dev-middleware: ^6.1.1
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 5266c0760f02..cc0f937ec97b 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -123,26 +123,26 @@ If you haven't used the CLI to setup the configuration, or if you want to define
 
 ## Fully custom args
 
-Until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component.
+Until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component. For example, here's how you could use a `footer` arg to populate a child component:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/table-story-fully-customize-controls.js.mdx',
-    'react/table-story-fully-customize-controls.ts.mdx',
-    'vue/table-story-fully-customize-controls.2.js.mdx',
-    'vue/table-story-fully-customize-controls.2.ts.mdx',
-    'vue/table-story-fully-customize-controls.3.js.mdx',
-    'vue/table-story-fully-customize-controls.3.ts.mdx',
-    'angular/table-story-fully-customize-controls.ts.mdx',
-    'web-components/table-story-fully-customize-controls.js.mdx',
-    'web-components/table-story-fully-customize-controls.ts.mdx',
-    'solid/table-story-fully-customize-controls.js.mdx',
-    'solid/table-story-fully-customize-controls.ts.mdx',
+    'react/page-story-slots.js.mdx',
+    'react/page-story-slots.ts.mdx',
+    'vue/page-story-slots.2.js.mdx',
+    'vue/page-story-slots.2.ts.mdx',
+    'vue/page-story-slots.3.js.mdx',
+    'vue/page-story-slots.3.ts.mdx',
+    'angular/page-story-slots.ts.mdx',
+    'web-components/page-story-slots.js.mdx',
+    'web-components/page-story-slots.ts.mdx',
+    'solid/page-story-slots.js.mdx',
+    'solid/page-story-slots.ts.mdx',
   ]}
   usesCsf3
-  csf2Path="essentials/controls#snippet-table-story-fully-customize-controls"
+  csf2Path="writing-stories/args#snippet-page-story-slots"
 />
 
 <!-- prettier-ignore-end -->
diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
index 2b79a6caa3e3..63ac7f3309cc 100644
--- a/docs/snippets/angular/page-story-slots.ts.mdx
+++ b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -5,26 +5,23 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Page } from './page.component';
 
-const meta: Meta<Page> = {
-  component: Page,
-};
-
-export default meta;
-type Story = StoryObj<Page>;
+type PagePropsAndCustomArgs = Page & { footer?: string };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/angular/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter: Story = {
-  render: (args) => ({
+const meta: Meta<PagePropsAndCustomArgs> = {
+  component: Page,
+  render: ({ footer, ...args }) => ({
     props: args,
     template: `
       <storybook-page>
-        <ng-container footer>${args.footer}</ng-container>
+        <ng-container footer>${footer}</ng-container>
       </storybook-page>`,
   }),
+};
+export default meta;
+
+type Story = StoryObj<PagePropsAndCustomArgs>;
+
+export const CustomFooter: Story = {
   args: {
     footer: 'Built with Storybook',
   },
diff --git a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
deleted file mode 100644
index 387ca9506c93..000000000000
--- a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```ts
-// Table.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { Table } from './Table.component';
-
-const meta: Meta<Table> = {
-  component: Table,
-};
-
-export default meta;
-type Story = StoryObj<Table>;
-
-export const Numeric: 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>
-    `,
-  }),
-  args: {
-    data: [
-      [1, 2, 3],
-      [4, 5, 6],
-    ],
-    //👇 The remaining args get passed to the `Table` component
-    size: 'large',
-  },
-};
-```
diff --git a/docs/snippets/angular/typed-csf-file.ts.mdx b/docs/snippets/angular/typed-csf-file.ts.mdx
new file mode 100644
index 000000000000..6ac8b473a93b
--- /dev/null
+++ b/docs/snippets/angular/typed-csf-file.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const Basic: Story = {};
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};
+```
diff --git a/docs/snippets/common/typed-csf-file.ts-4-9.mdx b/docs/snippets/common/typed-csf-file.ts-4-9.mdx
new file mode 100644
index 000000000000..103c3317cd41
--- /dev/null
+++ b/docs/snippets/common/typed-csf-file.ts-4-9.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {} satisfies Story;
+
+export const Primary = {
+  args: {
+    primary: true,
+  },
+} satisfies Story;
+```
diff --git a/docs/snippets/common/typed-csf-file.ts.mdx b/docs/snippets/common/typed-csf-file.ts.mdx
new file mode 100644
index 000000000000..1380398b0ac7
--- /dev/null
+++ b/docs/snippets/common/typed-csf-file.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {};
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};
+```
diff --git a/docs/snippets/react/page-story-slots.js.mdx b/docs/snippets/react/page-story-slots.js.mdx
index cf8edcd1e059..18b06c59a907 100644
--- a/docs/snippets/react/page-story-slots.js.mdx
+++ b/docs/snippets/react/page-story-slots.js.mdx
@@ -5,19 +5,14 @@ import { Page } from './Page';
 
 export default {
   component: Page,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter = {
-  render: (args) => (
+  render: ({ footer, ...args }) => (
     <Page {...args}>
-      <footer>{args.footer}</footer>
+      <footer>{footer}</footer>
     </Page>
   ),
+};
+
+export const CustomFooter = {
   args: {
     footer: 'Built with Storybook',
   },
diff --git a/docs/snippets/react/page-story-slots.ts-4-9.mdx b/docs/snippets/react/page-story-slots.ts-4-9.mdx
index e6ff4614b750..d67486842a2e 100644
--- a/docs/snippets/react/page-story-slots.ts-4-9.mdx
+++ b/docs/snippets/react/page-story-slots.ts-4-9.mdx
@@ -5,26 +5,23 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
 
+type PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & { footer?: string };
+
 const meta = {
   component: Page,
-} satisfies Meta<typeof Page>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter: Story = {
-  render: (args) => (
+  render: ({ footer, ...args }) => (
     <Page {...args}>
-      <footer>{args.footer}</footer>
+      <footer>{footer}</footer>
     </Page>
   ),
+} satisfies Meta<PagePropsAndCustomArgs>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomFooter = {
   args: {
     footer: 'Built with Storybook',
   },
-};
+} satisfies Story;
 ```
diff --git a/docs/snippets/react/page-story-slots.ts.mdx b/docs/snippets/react/page-story-slots.ts.mdx
index 7eda492eb484..d28aadf26523 100644
--- a/docs/snippets/react/page-story-slots.ts.mdx
+++ b/docs/snippets/react/page-story-slots.ts.mdx
@@ -5,24 +5,21 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
 
-const meta: Meta<typeof Page> = {
+type PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & { footer?: string };
+
+const meta: Meta<PagePropsAndCustomArgs> = {
   component: Page,
+  render: ({ footer, ...args }) => (
+    <Page {...args}>
+      <footer>{footer}</footer>
+    </Page>
+  ),
 };
-
 export default meta;
-type Story = StoryObj<typeof Page>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
+type Story = StoryObj<PagePropsAndCustomArgs>;
+
 export const CustomFooter: Story = {
-  render: (args) => (
-    <Page {...args}>
-      <footer>{args.footer}</footer>
-    </Page>
-  ),
   args: {
     footer: 'Built with Storybook',
   },
diff --git a/docs/snippets/react/table-story-fully-customize-controls.js.mdx b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
deleted file mode 100644
index 72cd87b25b30..000000000000
--- a/docs/snippets/react/table-story-fully-customize-controls.js.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-```js
-// Table.stories.js|jsx
-
-import { Table } from './Table';
-import { TD } from './TableDataCell';
-import { TR } from './TableRow';
-
-export default {
-  component: Table,
-};
-
-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',
-  },
-};
-```
diff --git a/docs/snippets/react/table-story-fully-customize-controls.ts-4-9.mdx b/docs/snippets/react/table-story-fully-customize-controls.ts-4-9.mdx
deleted file mode 100644
index 1ad523541be6..000000000000
--- a/docs/snippets/react/table-story-fully-customize-controls.ts-4-9.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```tsx
-// Table.stories.ts|tsx
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Table } from './Table';
-import { TD } from './TableDataCell';
-import { TR } from './TableRow';
-
-const meta = {
-  component: Table,
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const TableStory: Story = {
-  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',
-  },
-};
-```
diff --git a/docs/snippets/react/table-story-fully-customize-controls.ts.mdx b/docs/snippets/react/table-story-fully-customize-controls.ts.mdx
deleted file mode 100644
index e596caaa7712..000000000000
--- a/docs/snippets/react/table-story-fully-customize-controls.ts.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```ts
-// Table.stories.ts|tsx
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Table } from './Table';
-import { TD } from './TableDataCell';
-import { TR } from './TableRow';
-
-const meta: Meta<typeof Table> = {
-  component: Table,
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-export const TableStory: Story = {
-  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',
-  },
-};
-```
diff --git a/docs/snippets/solid/page-story-slots.js.mdx b/docs/snippets/solid/page-story-slots.js.mdx
index 272341d2f4ac..18b06c59a907 100644
--- a/docs/snippets/solid/page-story-slots.js.mdx
+++ b/docs/snippets/solid/page-story-slots.js.mdx
@@ -5,19 +5,14 @@ import { Page } from './Page';
 
 export default {
   component: Page,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/solid/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter = {
-  render: (args) => (
+  render: ({ footer, ...args }) => (
     <Page {...args}>
-      <footer>{args.footer}</footer>
+      <footer>{footer}</footer>
     </Page>
   ),
+};
+
+export const CustomFooter = {
   args: {
     footer: 'Built with Storybook',
   },
diff --git a/docs/snippets/solid/page-story-slots.ts-4-9.mdx b/docs/snippets/solid/page-story-slots.ts-4-9.mdx
index 6d4c0002bde4..83431768d59e 100644
--- a/docs/snippets/solid/page-story-slots.ts-4-9.mdx
+++ b/docs/snippets/solid/page-story-slots.ts-4-9.mdx
@@ -1,30 +1,28 @@
 ```tsx
 // Page.stories.ts|tsx
 
+import type { ComponentProps } from 'solid-js';
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Page } from './Page';
 
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
+
 const meta = {
   component: Page,
-} satisfies Meta<typeof Page>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/solid/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter: Story = {
-  render: (args) => (
+  render: ({ footer, ...args }) => (
     <Page {...args}>
-      <footer>{args.footer}</footer>
+      <footer>{footer}</footer>
     </Page>
   ),
+} satisfies Meta<PagePropsAndCustomArgs>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomFooter = {
   args: {
     footer: 'Built with Storybook',
   },
-};
+} satisfies Story;
 ```
diff --git a/docs/snippets/solid/page-story-slots.ts.mdx b/docs/snippets/solid/page-story-slots.ts.mdx
index 5c0c690c9267..c372bf6e38d7 100644
--- a/docs/snippets/solid/page-story-slots.ts.mdx
+++ b/docs/snippets/solid/page-story-slots.ts.mdx
@@ -1,28 +1,26 @@
 ```tsx
 // Page.stories.ts|tsx
 
+import type { ComponentProps } from 'solid-js';
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Page } from './Page';
 
-const meta: Meta<typeof Page> = {
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
+
+const meta: Meta<PagePropsAndCustomArgs> = {
   component: Page,
+  render: ({ footer, ...args }) => (
+    <Page {...args}>
+      <footer>{footer}</footer>
+    </Page>
+  ),
 };
-
 export default meta;
-type Story = StoryObj<typeof Page>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/solid/api/csf
- * to learn how to use render functions.
- */
+type Story = StoryObj<PagePropsAndCustomArgs>;
+
 export const CustomFooter: Story = {
-  render: (args) => (
-    <Page {...args}>
-      <footer>{args.footer}</footer>
-    </Page>
-  ),
   args: {
     footer: 'Built with Storybook',
   },
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.js.mdx b/docs/snippets/solid/table-story-fully-customize-controls.js.mdx
deleted file mode 100644
index 72cd87b25b30..000000000000
--- a/docs/snippets/solid/table-story-fully-customize-controls.js.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-```js
-// Table.stories.js|jsx
-
-import { Table } from './Table';
-import { TD } from './TableDataCell';
-import { TR } from './TableRow';
-
-export default {
-  component: Table,
-};
-
-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',
-  },
-};
-```
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx b/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
deleted file mode 100644
index 5ded59fc9a23..000000000000
--- a/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```tsx
-// Table.stories.ts|tsx
-
-import type { Meta, StoryObj } from 'storybook-solidjs';
-
-import { Table } from './Table';
-import { TD } from './TableDataCell';
-import { TR } from './TableRow';
-
-const meta = {
-  component: Table,
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const TableStory: Story = {
-  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',
-  },
-};
-```
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx b/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx
deleted file mode 100644
index 739e7b775eb2..000000000000
--- a/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```ts
-// Table.stories.ts|tsx
-
-import type { Meta, StoryObj } from 'storybook-solidjs';
-
-import { Table } from './Table';
-import { TD } from './TableDataCell';
-import { TR } from './TableRow';
-
-const meta: Meta<typeof Table> = {
-  component: Table,
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-export const TableStory: Story = {
-  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',
-  },
-};
-```
diff --git a/docs/snippets/vue/page-story-slots.2.js.mdx b/docs/snippets/vue/page-story-slots.2.js.mdx
index 9eee4ad2fa64..cd3774707be6 100644
--- a/docs/snippets/vue/page-story-slots.2.js.mdx
+++ b/docs/snippets/vue/page-story-slots.2.js.mdx
@@ -5,14 +5,6 @@ import Page from './Page.vue';
 
 export default {
   component: Page,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter = {
   render: (args, { argTypes }) => ({
     components: { Page },
     props: Object.keys(argTypes),
@@ -24,8 +16,11 @@ export const CustomFooter = {
       </page>
     `,
   }),
+};
+
+export const CustomFooter = {
   args: {
-    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+    footer: 'Built with Storybook',
   },
 };
 ```
diff --git a/docs/snippets/vue/page-story-slots.2.ts-4-9.mdx b/docs/snippets/vue/page-story-slots.2.ts-4-9.mdx
index 61c04f793bfe..2d6c35078af6 100644
--- a/docs/snippets/vue/page-story-slots.2.ts-4-9.mdx
+++ b/docs/snippets/vue/page-story-slots.2.ts-4-9.mdx
@@ -1,23 +1,16 @@
 ```ts
 // Page.stories.ts
 
+// https://www.npmjs.com/package/vue-component-type-helpers
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue';
 
 import Page from './Page.vue';
 
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
+
 const meta = {
   component: Page,
-} satisfies Meta<typeof Page>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
   render: (args, { argTypes }) => ({
     components: { Page },
     props: Object.keys(argTypes),
@@ -29,8 +22,14 @@ export const Primary: Story = {
       </page>
     `,
   }),
+} satisfies Meta<PagePropsAndCustomArgs>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary = {
   args: {
-    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+    footer: 'Built with Storybook',
   },
-};
+} satisfies Story;
 ```
diff --git a/docs/snippets/vue/page-story-slots.2.ts.mdx b/docs/snippets/vue/page-story-slots.2.ts.mdx
index 195cf8ad9753..b43d05f9b85e 100644
--- a/docs/snippets/vue/page-story-slots.2.ts.mdx
+++ b/docs/snippets/vue/page-story-slots.2.ts.mdx
@@ -1,23 +1,16 @@
 ```ts
 // Page.stories.ts
 
+// https://www.npmjs.com/package/vue-component-type-helpers
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue';
 
 import Page from './Page.vue';
 
-const meta: Meta<typeof Page> = {
-  component: Page,
-};
-
-export default meta;
-type Story = StoryObj<typeof Page>;
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
+const meta: Meta<PagePropsAndCustomArgs> = {
+  component: Page,
   render: (args, { argTypes }) => ({
     components: { Page },
     props: Object.keys(argTypes),
@@ -29,8 +22,14 @@ export const Primary: Story = {
       </page>
     `,
   }),
+};
+export default meta;
+
+type Story = StoryObj<PagePropsAndCustomArgs>;
+
+export const Primary: Story = {
   args: {
-    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+    footer: 'Built with Storybook',
   },
 };
 ```
diff --git a/docs/snippets/vue/page-story-slots.3.js.mdx b/docs/snippets/vue/page-story-slots.3.js.mdx
index 5a61cd309477..b15a0fab3d48 100644
--- a/docs/snippets/vue/page-story-slots.3.js.mdx
+++ b/docs/snippets/vue/page-story-slots.3.js.mdx
@@ -5,14 +5,6 @@ import Page from './Page.vue';
 
 export default {
   component: Page,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter = {
   render: (args) => ({
     components: { Page },
     setup() {
@@ -26,8 +18,11 @@ export const CustomFooter = {
       </page>
     `,
   }),
+};
+
+export const CustomFooter = {
   args: {
-    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+    footer: 'Built with Storybook',
   },
 };
 ```
diff --git a/docs/snippets/vue/page-story-slots.3.ts-4-9.mdx b/docs/snippets/vue/page-story-slots.3.ts-4-9.mdx
index 538769a1e4cb..afb00a498398 100644
--- a/docs/snippets/vue/page-story-slots.3.ts-4-9.mdx
+++ b/docs/snippets/vue/page-story-slots.3.ts-4-9.mdx
@@ -1,23 +1,16 @@
 ```ts
 // Page.stories.ts
 
+// https://www.npmjs.com/package/vue-component-type-helpers
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Page from './Page.vue';
 
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
+
 const meta = {
   component: Page,
-} satisfies Meta<typeof Page>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
   render: (args) => ({
     components: { Page },
     setup() {
@@ -31,8 +24,14 @@ export const Primary: Story = {
       </page>
     `,
   }),
+} satisfies Meta<PagePropsAndCustomArgs>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary = {
   args: {
-    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+    footer: 'Built with Storybook',
   },
-};
+} satisfies Story;
 ```
diff --git a/docs/snippets/vue/page-story-slots.3.ts.mdx b/docs/snippets/vue/page-story-slots.3.ts.mdx
index 6f216f2f0d0d..fc7eb08b54fd 100644
--- a/docs/snippets/vue/page-story-slots.3.ts.mdx
+++ b/docs/snippets/vue/page-story-slots.3.ts.mdx
@@ -1,23 +1,16 @@
 ```ts
 // Page.stories.ts
 
+// https://www.npmjs.com/package/vue-component-type-helpers
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Page from './Page.vue';
 
-const meta: Meta<typeof Page> = {
-  component: Page,
-};
-
-export default meta;
-type Story = StoryObj<typeof Page>;
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
+const meta: Meta<PagePropsAndCustomArgs> = {
+  component: Page,
   render: (args) => ({
     components: { Page },
     setup() {
@@ -31,8 +24,14 @@ export const Primary: Story = {
       </page>
     `,
   }),
+};
+export default meta;
+
+type Story = StoryObj<PagePropsAndCustomArgs>;
+
+export const Primary: Story = {
   args: {
-    footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+    footer: 'Built with Storybook',
   },
 };
 ```
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
deleted file mode 100644
index 9f9c9d621d1e..000000000000
--- a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-```js
-// Table.stories.js
-
-import Table from './Table.vue';
-
-export default {
-  component: Table,
-};
-
-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',
-  },
-};
-```
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.2.ts-4-9.mdx b/docs/snippets/vue/table-story-fully-customize-controls.2.ts-4-9.mdx
deleted file mode 100644
index 737a1933197a..000000000000
--- a/docs/snippets/vue/table-story-fully-customize-controls.2.ts-4-9.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```ts
-// Table.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Table from './Table.vue';
-
-const meta = {
-  component: Table,
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const TableStory: 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>
-    `,
-  }),
-  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',
-  },
-};
-```
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.2.ts.mdx b/docs/snippets/vue/table-story-fully-customize-controls.2.ts.mdx
deleted file mode 100644
index 832325d33b27..000000000000
--- a/docs/snippets/vue/table-story-fully-customize-controls.2.ts.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```ts
-// Table.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Table from './Table.vue';
-
-const meta: Meta<typeof Table> = {
-  component: Table,
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-export const TableStory: 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>
-    `,
-  }),
-  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',
-  },
-};
-```
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
deleted file mode 100644
index 6ae643b8bf05..000000000000
--- a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-```js
-// Table.stories.js
-
-import Table from './Table.vue';
-
-export default {
-  component: Table,
-};
-
-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>
-  `,
-  }),
-  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',
-  },
-};
-```
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.3.ts-4-9.mdx b/docs/snippets/vue/table-story-fully-customize-controls.3.ts-4-9.mdx
deleted file mode 100644
index 902a14e014d8..000000000000
--- a/docs/snippets/vue/table-story-fully-customize-controls.3.ts-4-9.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-```ts
-// Table.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Table from './Table.vue';
-
-const meta = {
-  component: Table,
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const TableStory: 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>
-  `,
-  }),
-  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',
-  },
-};
-```
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.3.ts.mdx b/docs/snippets/vue/table-story-fully-customize-controls.3.ts.mdx
deleted file mode 100644
index dc7872b4978e..000000000000
--- a/docs/snippets/vue/table-story-fully-customize-controls.3.ts.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-```ts
-// Table.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Table from './Table.vue';
-
-const meta: Meta<typeof Table> = {
-  component: Table,
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-export const TableStory: 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>
-  `,
-  }),
-  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',
-  },
-};
-```
diff --git a/docs/snippets/web-components/page-story-slots.js.mdx b/docs/snippets/web-components/page-story-slots.js.mdx
index 29103c0ea603..1d464c2976a9 100644
--- a/docs/snippets/web-components/page-story-slots.js.mdx
+++ b/docs/snippets/web-components/page-story-slots.js.mdx
@@ -6,19 +6,14 @@ import { html } from 'lit';
 export default {
   title: 'Page',
   component: 'demo-page',
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/web-components/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter = {
-  render: (args) => html`
+  render: ({ footer }) => html`
     <demo-page>
-      <footer>${args.footer}</footer>
+      <footer>${footer}</footer>
     </demo-page>
   `,
+};
+
+export const CustomFooter = {
   args: {
     footer: 'Built with Storybook',
   },
diff --git a/docs/snippets/web-components/page-story-slots.ts.mdx b/docs/snippets/web-components/page-story-slots.ts.mdx
index 6b1f0f287994..aa4d7c7a09c9 100644
--- a/docs/snippets/web-components/page-story-slots.ts.mdx
+++ b/docs/snippets/web-components/page-story-slots.ts.mdx
@@ -5,20 +5,22 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 
 import { html } from 'lit';
 
-const meta: Meta = {
+type CustomArgs = { footer?: string };
+
+const meta: Meta<CustomArgs> = {
   title: 'Page',
   component: 'demo-page',
+  render: ({ footer }) => html`
+    <demo-page>
+      <footer>${footer}</footer>
+    </demo-page>
+  `,
 };
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<CustomArgs>;
 
 export const CustomFooter: Story = {
-  render: (args) => html`
-    <demo-page>
-      <footer>${args.footer}</footer>
-    </demo-page>
-  `,
   args: {
     footer: 'Built with Storybook',
   },
diff --git a/docs/snippets/web-components/table-story-fully-customize-controls.js.mdx b/docs/snippets/web-components/table-story-fully-customize-controls.js.mdx
deleted file mode 100644
index ddb5f7b5bbb5..000000000000
--- a/docs/snippets/web-components/table-story-fully-customize-controls.js.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
-```js
-// Table.stories.js
-
-import { html } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
-
-export default {
-  component: 'custom-table',
-};
-
-export const TableStory = {
-  render: ({ data, size }) => {
-    return html`
-      <table>
-        <tbody>
-          ${repeat(
-            data,
-            (row, rowIndex) =>
-              html`
-                <tr>
-                  ${repeat(row, (col, colIndex) => html`<td>${data[rowIndex][colIndex]}</td>`)}
-                </tr>
-              `
-          )}
-        </tbody>
-      </table>
-    `;
-  },
-  args: {
-    data: [
-      [1, 2, 3],
-      [4, 5, 6],
-    ],
-    size: 'large',
-  },
-};
-```
diff --git a/docs/snippets/web-components/table-story-fully-customize-controls.ts.mdx b/docs/snippets/web-components/table-story-fully-customize-controls.ts.mdx
deleted file mode 100644
index 9743917c5667..000000000000
--- a/docs/snippets/web-components/table-story-fully-customize-controls.ts.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-```ts
-// Table.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/web-components';
-
-import { html } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
-
-const meta: Meta = {
-  component: 'custom-table',
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const TableStory: Story = {
-  render: ({ data, size }) => {
-    return html`
-      <table>
-        <tbody>
-          ${repeat(
-            data,
-            (row, rowIndex) =>
-              html`
-                <tr>
-                  ${repeat(row, (col, colIndex) => html`<td>${data[rowIndex][colIndex]}</td>`)}
-                </tr>
-              `
-          )}
-        </tbody>
-      </table>
-    `;
-  },
-  args: {
-    data: [
-      [1, 2, 3],
-      [4, 5, 6],
-    ],
-    size: 'large',
-  },
-};
-```
diff --git a/docs/snippets/web-components/typed-csf-file.ts.mdx b/docs/snippets/web-components/typed-csf-file.ts.mdx
new file mode 100644
index 000000000000..7814ea60fdda
--- /dev/null
+++ b/docs/snippets/web-components/typed-csf-file.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+};
+export default meta;
+
+export const Basic: StoryObj = {};
+
+export const Primary: StoryObj = {
+  args: {
+    primary: true,
+  },
+};
+```
diff --git a/docs/toc.js b/docs/toc.js
index 314a7f60412b..7093616940f1 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -94,6 +94,11 @@ module.exports = {
           title: 'Stories for multiple components',
           type: 'link',
         },
+        {
+          pathSegment: 'typescript',
+          title: 'Writing stories in TypeScript',
+          type: 'link',
+        },
       ],
     },
     {
diff --git a/docs/writing-stories/typescript.md b/docs/writing-stories/typescript.md
new file mode 100644
index 000000000000..17d2c0b6eaca
--- /dev/null
+++ b/docs/writing-stories/typescript.md
@@ -0,0 +1,139 @@
+---
+title: 'Writing stories in TypeScript'
+---
+
+Writing your stories in [TypeScript](https://www.typescriptlang.org/) makes you more productive. You don't have to jump between files to look up component props. Your code editor will alert you about missing required props and even autocomplete prop values, just like when using your components within your app. Plus, Storybook infers those component types to auto-generate the [Controls](../api/doc-block-controls.md) table.
+
+Storybook has built-in TypeScript support, so you can get started with zero configuration required.
+
+## Typing stories with `Meta` and `StoryObj`
+
+When writing stories, there are two aspects that are helpful to type. The first is the [component meta](./introduction.md#default-export), which describes and configures the component and its stories. In a [CSF file](../api/csf.md), this is the default export. The second is the [stories themselves](./introduction.md#defining-stories).
+
+Storybook provides utility types for each of these, named `Meta` and `StoryObj`. Here's an example CSF file using those types:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/typed-csf-file.ts.mdx',
+    'web-components/typed-csf-file.ts.mdx',
+    'common/typed-csf-file.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### Props type parameter
+
+`Meta` and `StoryObj` types are both [generics](https://www.typescriptlang.org/docs/handbook/2/generics.html#working-with-generic-type-variables), so you can provide them with an optional prop type parameter for the component type or the component's props type (e.g., the `typeof Button` portion of `Meta<typeof Button>`). By doing so, TypeScript will prevent you from defining an invalid arg, and all [decorators](./decorators.md), [play functions](./play-function.md), or [loaders](./loaders.md) will type their function arguments.
+
+The example above passes a component type. See [**Typing custom args**](#typing-custom-args) for an example of passing a props type.
+
+## Using `satisfies` for better type safety
+
+<IfRenderer renderer={['angular', 'web-components']}>
+
+<div class="aside">
+
+ℹ️ We are not yet able to provide additional type safety using the `satisfies` operator with Angular and Web components.
+
+<details>
+<summary>More info</summary>
+
+Both Angular and Web components utilize a class plus decorator approach. The decorators provide runtime metadata, but do not offer metadata at compile time.
+
+As a result, it appears impossible to determine if a property in the class is a required property or an optional property (but non-nullable due to a default value) or a non-nullable internal state variable.
+
+For more information, please refer to [this discussion](https://github.com/storybookjs/storybook/discussions/20988).
+
+</details>
+
+</div>
+
+</IfRenderer>
+
+If you are using TypeScript 4.9+, you can take advantage of the new [`satisfies`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html) operator to get stricter type checking. Now you will receive type errors for missing required args, not just invalid ones.
+
+Using `satisfies` to apply a story's type helps maintain type safety when sharing a `play` function across stories. Without it, TypeScript will throw an error that the `play` function may be undefined. The `satisfies` operator enables TypeScript to infer whether the play function is defined or not.
+
+Finally, use of `satisfies` allows you to pass `typeof meta` to the `StoryObj` generic. This informs TypeScript of the connection between the `meta` and `StoryObj` types, which allows it to infer the `args` type from the `meta` type. In other words, TypeScript will understand that args can be defined both at the story and meta level and won't throw an error when a required arg is defined at the meta level, but not at the story level.
+
+## Typing custom args
+
+Sometimes stories need to define args that aren’t included in the component's props. For this case, you can use an [intersection type](https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types) to combine a component's props type and your custom args' type. For example, here's how you could use a `footer` arg to populate a child component:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/page-story-slots.ts.mdx',
+    'vue/page-story-slots.2.ts.mdx',
+    'vue/page-story-slots.3.ts.mdx',
+    'angular/page-story-slots.ts.mdx',
+    'web-components/page-story-slots.ts.mdx',
+    'solid/page-story-slots.ts.mdx',
+  ]}
+  usesCsf3
+  csf2Path="writing-stories/args#snippet-page-story-slots"
+/>
+
+<!-- prettier-ignore-end -->
+
+<IfRenderer renderer={['vue']}>
+
+### Vue specific tips
+
+Vue has excellent support for TypeScript, and we have done our utmost to take advantage of that in the stories files. For example, consider the following strongly typed Vue3 single file component (SFC):
+
+```html
+<script setup lang="ts">
+  defineProps<{ count: number; disabled: boolean }>();
+
+  const emit = defineEmits<{
+    (e: 'increaseBy', amount: number): void;
+    (e: 'decreaseBy', amount: number): void;
+  }>();
+</script>
+
+<template>
+  <div class="card">
+    {{ count }}
+    <button @click="emit('increaseBy', 1)" :disabled="disabled">Increase by 1</button>
+    <button @click="$emit('decreaseBy', 1)" :disabled="disabled">Decrease by 1</button>
+  </div>
+</template>
+```
+
+You can type check SFC files with vue-tsc and get editor support in VSCode by installing the [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) and [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) extensions.
+
+This setup will add type support for `*.vue` imports to your `*.stories.ts` files, providing the same type safety and autocomplete features.
+
+</IfRenderer>
+
+<IfRenderer renderer={['svelte']}>
+
+### Svelte specific tips
+
+Svelte offers excellent TypeScript support for .svelte files. For example, consider the following component. You can run type checks using svelte-check and add VSCode editor support with the [Svelte for VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode&ssr=false#overview).
+
+```html
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let count: number;
+  export let disabled: boolean;
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<div class="card">
+  {count}
+  <button on:click={() => dispatch('increaseBy', 1)} {disabled}> Increase by 1 </button>
+  <button on:click={() => dispatch('decreaseBy', 1)} {disabled}> Decrease by 1 </button>
+</div>
+```
+
+The same setup works with Svelte stories files too, providing both type safety and autocompletion.
+
+</IfRenderer>