MHJahanbakhsh · Aug 16, 2026 · coderabbitai · Aug 16, 2026
diff --git a/code/e2e-sandbox/addon-mcp.spec.ts b/code/e2e-sandbox/addon-mcp.spec.ts
@@ -209,7 +209,7 @@ test.describe('addon-mcp', () => {
             stories: [
               {
                 exportName: storyName,
-                absoluteStoryPath: path.join(sandboxDir, 'src', 'stories', 'Button.stories.ts'),
+                absoluteStoryPath: path.join(sandboxDir, 'src', 'stories', 'Button.stories.tsx'),
               },
             ],
           },

diff --git a/...js-vite/template/cli/ts/Button.stories.ts → ...s-vite/template/cli/ts/Button.stories.tsx b/...js-vite/template/cli/ts/Button.stories.ts → ...s-vite/template/cli/ts/Button.stories.tsx
diff --git a/...js-vite/template/cli/ts/Header.stories.ts → ...s-vite/template/cli/ts/Header.stories.tsx b/...js-vite/template/cli/ts/Header.stories.ts → ...s-vite/template/cli/ts/Header.stories.tsx
diff --git a/...xtjs-vite/template/cli/ts/Page.stories.ts → ...tjs-vite/template/cli/ts/Page.stories.tsx b/...xtjs-vite/template/cli/ts/Page.stories.ts → ...tjs-vite/template/cli/ts/Page.stories.tsx
diff --git a/.../nextjs/template/cli/ts/Button.stories.ts → ...nextjs/template/cli/ts/Button.stories.tsx b/.../nextjs/template/cli/ts/Button.stories.ts → ...nextjs/template/cli/ts/Button.stories.tsx
diff --git a/.../nextjs/template/cli/ts/Header.stories.ts → ...nextjs/template/cli/ts/Header.stories.tsx b/.../nextjs/template/cli/ts/Header.stories.ts → ...nextjs/template/cli/ts/Header.stories.tsx
diff --git a/...ks/nextjs/template/cli/ts/Page.stories.ts → ...s/nextjs/template/cli/ts/Page.stories.tsx b/...ks/nextjs/template/cli/ts/Page.stories.ts → ...s/nextjs/template/cli/ts/Page.stories.tsx
diff --git a/...ct-vite/template/cli/ts/Button.stories.ts → ...t-vite/template/cli/ts/Button.stories.tsx b/...ct-vite/template/cli/ts/Button.stories.ts → ...t-vite/template/cli/ts/Button.stories.tsx
diff --git a/...ct-vite/template/cli/ts/Header.stories.ts → ...t-vite/template/cli/ts/Header.stories.tsx b/...ct-vite/template/cli/ts/Header.stories.ts → ...t-vite/template/cli/ts/Header.stories.tsx
diff --git a/...eact-vite/template/cli/ts/Page.stories.ts → ...act-vite/template/cli/ts/Page.stories.tsx b/...eact-vite/template/cli/ts/Page.stories.ts → ...act-vite/template/cli/ts/Page.stories.tsx
diff --git a/...ebpack5/template/cli/ts/Button.stories.ts → ...bpack5/template/cli/ts/Button.stories.tsx b/...ebpack5/template/cli/ts/Button.stories.ts → ...bpack5/template/cli/ts/Button.stories.tsx
diff --git a/...ebpack5/template/cli/ts/Header.stories.ts → ...bpack5/template/cli/ts/Header.stories.tsx b/...ebpack5/template/cli/ts/Header.stories.ts → ...bpack5/template/cli/ts/Header.stories.tsx
diff --git a/...-webpack5/template/cli/ts/Page.stories.ts → ...webpack5/template/cli/ts/Page.stories.tsx b/...-webpack5/template/cli/ts/Page.stories.ts → ...webpack5/template/cli/ts/Page.stories.tsx
diff --git a/...k-react/template/cli/ts/Button.stories.ts → ...-react/template/cli/ts/Button.stories.tsx b/...k-react/template/cli/ts/Button.stories.ts → ...-react/template/cli/ts/Button.stories.tsx
diff --git a/...k-react/template/cli/ts/Header.stories.ts → ...-react/template/cli/ts/Header.stories.tsx b/...k-react/template/cli/ts/Header.stories.ts → ...-react/template/cli/ts/Header.stories.tsx
diff --git a/...ack-react/template/cli/ts/Page.stories.ts → ...ck-react/template/cli/ts/Page.stories.tsx b/...ack-react/template/cli/ts/Page.stories.ts → ...ck-react/template/cli/ts/Page.stories.tsx
@@ -7,7 +7,7 @@ sidebar:
 
 Now that you’ve learned what stories are and how to browse them, let’s demo working on one of your components.
 
-Pick a simple component from your project, like a Button, and write a `.stories.js`, `.stories.ts`, or `.stories.svelte` file to go along with it. It might look something like this:
+Pick a simple component from your project, like a Button, and write a `.stories.js`, `.stories.ts`, `.stories.tsx`, or `.stories.svelte` file to go along with it. It might look something like this:
 
 <CodeSnippets path="your-component.md" />
 

@@ -6,6 +6,16 @@ Writing your stories in [TypeScript](https://www.typescriptlang.org/) makes you
 
 Storybook has built-in TypeScript support, so you can get started with zero configuration required.
 
+<If renderer="react">
+
+<Callout variant="info">
+
+For React projects, prefer the `.stories.tsx` extension (the CLI scaffolds TypeScript examples this way). Using `.tsx` avoids confusing Vite errors if you later add JSX—for example in a custom `render`, decorator, or inline template—inside the story file.
+
+</Callout>
+
+</If>
+
 <If renderer={['react', 'vue', 'angular', 'web-components']}>
 
 <Callout variant="info" icon="💡">