diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
index 9612456a8bef..63ac7f3309cc 100644
--- a/docs/snippets/angular/page-story-slots.ts.mdx
+++ b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -5,10 +5,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Page } from './page.component';
 
-// TODO: Is this correct?
-//       If not, is it expected that an Angular component exports its props type?
-//       What if it's an interface instead of a type (which seems to be the convention)?
-//       Or, how do you extract an Angular component's props type?
 type PagePropsAndCustomArgs = Page & { footer?: string };
 
 const meta: Meta<PagePropsAndCustomArgs> = {
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 ecae504fb858..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,12 +1,12 @@
 ```tsx
 // Page.stories.ts|tsx
 
+import type { ComponentProps } from 'solid-js';
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Page } from './Page';
 
-// TODO: How do you extract a Solid component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta = {
   component: Page,
diff --git a/docs/snippets/solid/page-story-slots.ts.mdx b/docs/snippets/solid/page-story-slots.ts.mdx
index e7a718c92a65..c372bf6e38d7 100644
--- a/docs/snippets/solid/page-story-slots.ts.mdx
+++ b/docs/snippets/solid/page-story-slots.ts.mdx
@@ -1,12 +1,12 @@
 ```tsx
 // Page.stories.ts|tsx
 
+import type { ComponentProps } from 'solid-js';
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Page } from './Page';
 
-// TODO: How do you extract a Solid component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta: Meta<PagePropsAndCustomArgs> = {
   component: Page,
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 6b1b4716c0c5..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,12 +1,13 @@
 ```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';
 
-// TODO: How do you extract a Vue2 component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta = {
   component: Page,
diff --git a/docs/snippets/vue/page-story-slots.2.ts.mdx b/docs/snippets/vue/page-story-slots.2.ts.mdx
index 6d419658802c..b43d05f9b85e 100644
--- a/docs/snippets/vue/page-story-slots.2.ts.mdx
+++ b/docs/snippets/vue/page-story-slots.2.ts.mdx
@@ -1,12 +1,13 @@
 ```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';
 
-// TODO: How do you extract a Vue2 component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta: Meta<PagePropsAndCustomArgs> = {
   component: Page,
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 26ffa616088f..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,12 +1,13 @@
 ```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';
 
-// TODO: How do you extract a Vue3 component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta = {
   component: Page,
diff --git a/docs/snippets/vue/page-story-slots.3.ts.mdx b/docs/snippets/vue/page-story-slots.3.ts.mdx
index b850a423e22c..fc7eb08b54fd 100644
--- a/docs/snippets/vue/page-story-slots.3.ts.mdx
+++ b/docs/snippets/vue/page-story-slots.3.ts.mdx
@@ -1,12 +1,13 @@
 ```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';
 
-// TODO: How do you extract a Vue3 component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta: Meta<PagePropsAndCustomArgs> = {
   component: Page,
diff --git a/docs/snippets/web-components/page-story-slots.ts.mdx b/docs/snippets/web-components/page-story-slots.ts.mdx
index 255014b3f7f6..aa4d7c7a09c9 100644
--- a/docs/snippets/web-components/page-story-slots.ts.mdx
+++ b/docs/snippets/web-components/page-story-slots.ts.mdx
@@ -5,10 +5,9 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 
 import { html } from 'lit';
 
-// TODO: How do you extract a web component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type CustomArgs = { footer?: string };
 
-const meta: Meta<PagePropsAndCustomArgs> = {
+const meta: Meta<CustomArgs> = {
   title: 'Page',
   component: 'demo-page',
   render: ({ footer }) => html`
@@ -19,7 +18,7 @@ const meta: Meta<PagePropsAndCustomArgs> = {
 };
 export default meta;
 
-type Story = StoryObj<PagePropsAndCustomArgs>;
+type Story = StoryObj<CustomArgs>;
 
 export const CustomFooter: Story = {
   args: {
diff --git a/docs/snippets/web-components/typed-csf-file.ts.mdx b/docs/snippets/web-components/typed-csf-file.ts.mdx
index e34f97ca1bc0..7814ea60fdda 100644
--- a/docs/snippets/web-components/typed-csf-file.ts.mdx
+++ b/docs/snippets/web-components/typed-csf-file.ts.mdx
@@ -3,8 +3,6 @@
 
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-// TODO: How do you extract a web component's props type?
-
 const meta: Meta = {
   title: 'Button',
   component: 'demo-button',