diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index 40ee1a6e034..6db9c990779 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -24,6 +24,7 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'svelte/your-component.mdx.mdx',
     'web-components/your-component.js.mdx',
     'html/your-component.js.mdx',
+    'html/your-component.ts.mdx',
   ]}
 />
 
diff --git a/docs/snippets/html/your-component.ts.mdx b/docs/snippets/html/your-component.ts.mdx
new file mode 100644
index 00000000000..b41050449f7
--- /dev/null
+++ b/docs/snippets/html/your-component.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// YourComponent.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+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/docsreact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  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
+};
+```