diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
index 2b4272a0a0c8..9c8662fa2ace 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
@@ -59,6 +59,21 @@ test('Default', () => {
   );
 });
 
+test('Synthesizes self-closing when no children', () => {
+  const input = dedent`
+    import type { Meta } from '@storybook/react';
+    import { Button } from '@design-system/button';
+
+    const meta: Meta<typeof Button> = {
+      component: Button,
+    };
+    export default meta;
+
+    export const NoChildren: Story = {};
+  `;
+  expect(generateExample(input)).toMatchInlineSnapshot(`"const NoChildren = () => <Button />;"`);
+});
+
 test('Default satisfies or as', () => {
   const input = withCSF3(`
     export const Default = {} satisfies Story;
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index f89e21868681..5e94ae84d50b 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -222,13 +222,15 @@ export function getCodeSnippet(
   const name = t.jsxIdentifier(componentName);
   const openingElAttrs = invalidSpread ? [...injectedAttrs, invalidSpread] : injectedAttrs;
 
+  const children = toJsxChildren(merged.children);
+  const selfClosing = children.length === 0;
   const arrow = t.arrowFunctionExpression(
     [],
     t.jsxElement(
-      t.jsxOpeningElement(name, openingElAttrs, false),
-      t.jsxClosingElement(name),
-      toJsxChildren(merged.children),
-      false
+      t.jsxOpeningElement(name, openingElAttrs, selfClosing),
+      selfClosing ? null : t.jsxClosingElement(name),
+      children,
+      selfClosing
     )
   );
 
diff --git a/code/renderers/react/src/componentManifest/generator.test.ts b/code/renderers/react/src/componentManifest/generator.test.ts
index a6a7f9602a6a..4129953ac264 100644
--- a/code/renderers/react/src/componentManifest/generator.test.ts
+++ b/code/renderers/react/src/componentManifest/generator.test.ts
@@ -20,222 +20,222 @@ test('componentManifestGenerator generates correct id, name, description and exa
   } as unknown as StoryIndexGenerator);
 
   expect(manifest).toMatchInlineSnapshot(`
-    {
-      "components": {
-        "example-button": {
-          "description": "Primary UI component for user interaction",
-          "error": undefined,
-          "id": "example-button",
-          "import": "import { Button } from "@design-system/components/override";",
-          "jsDocTags": {
-            "import": [
-              "import { Button } from '@design-system/components/override';",
-            ],
-          },
-          "name": "Button",
-          "path": "./src/stories/Button.stories.ts",
-          "reactDocgen": {
-            "actualName": "Button",
-            "definedInFile": "./src/stories/Button.tsx",
-            "description": "Primary UI component for user interaction
-    @import import { Button } from '@design-system/components/override';",
-            "displayName": "Button",
-            "exportName": "Button",
-            "methods": [],
-            "props": {
-              "backgroundColor": {
-                "description": "",
-                "required": false,
-                "tsType": {
-                  "name": "string",
-                },
+  {
+    "components": {
+      "example-button": {
+        "description": "Primary UI component for user interaction",
+        "error": undefined,
+        "id": "example-button",
+        "import": "import { Button } from "@design-system/components/override";",
+        "jsDocTags": {
+          "import": [
+            "import { Button } from '@design-system/components/override';",
+          ],
+        },
+        "name": "Button",
+        "path": "./src/stories/Button.stories.ts",
+        "reactDocgen": {
+          "actualName": "Button",
+          "definedInFile": "./src/stories/Button.tsx",
+          "description": "Primary UI component for user interaction
+  @import import { Button } from '@design-system/components/override';",
+          "displayName": "Button",
+          "exportName": "Button",
+          "methods": [],
+          "props": {
+            "backgroundColor": {
+              "description": "",
+              "required": false,
+              "tsType": {
+                "name": "string",
               },
-              "label": {
-                "description": "",
-                "required": true,
-                "tsType": {
-                  "name": "string",
-                },
+            },
+            "label": {
+              "description": "",
+              "required": true,
+              "tsType": {
+                "name": "string",
               },
-              "onClick": {
-                "description": "",
-                "required": false,
-                "tsType": {
-                  "name": "signature",
-                  "raw": "() => void",
-                  "signature": {
-                    "arguments": [],
-                    "return": {
-                      "name": "void",
-                    },
+            },
+            "onClick": {
+              "description": "",
+              "required": false,
+              "tsType": {
+                "name": "signature",
+                "raw": "() => void",
+                "signature": {
+                  "arguments": [],
+                  "return": {
+                    "name": "void",
                   },
-                  "type": "function",
                 },
+                "type": "function",
               },
-              "primary": {
-                "defaultValue": {
-                  "computed": false,
-                  "value": "false",
-                },
-                "description": "Description of primary",
-                "required": false,
-                "tsType": {
-                  "name": "boolean",
-                },
+            },
+            "primary": {
+              "defaultValue": {
+                "computed": false,
+                "value": "false",
               },
-              "size": {
-                "defaultValue": {
-                  "computed": false,
-                  "value": "'medium'",
-                },
-                "description": "",
-                "required": false,
-                "tsType": {
-                  "elements": [
-                    {
-                      "name": "literal",
-                      "value": "'small'",
-                    },
-                    {
-                      "name": "literal",
-                      "value": "'medium'",
-                    },
-                    {
-                      "name": "literal",
-                      "value": "'large'",
-                    },
-                  ],
-                  "name": "union",
-                  "raw": "'small' | 'medium' | 'large'",
-                },
+              "description": "Description of primary",
+              "required": false,
+              "tsType": {
+                "name": "boolean",
               },
             },
-          },
-          "stories": [
-            {
-              "description": undefined,
-              "name": "Primary",
-              "snippet": "const Primary = () => <Button onClick={fn()} primary label="Button"></Button>;",
-              "summary": undefined,
-            },
-            {
-              "description": undefined,
-              "name": "Secondary",
-              "snippet": "const Secondary = () => <Button onClick={fn()} label="Button"></Button>;",
-              "summary": undefined,
-            },
-            {
-              "description": undefined,
-              "name": "Large",
-              "snippet": "const Large = () => <Button onClick={fn()} size="large" label="Button"></Button>;",
-              "summary": undefined,
-            },
-            {
-              "description": undefined,
-              "name": "Small",
-              "snippet": "const Small = () => <Button onClick={fn()} size="small" label="Button"></Button>;",
-              "summary": undefined,
+            "size": {
+              "defaultValue": {
+                "computed": false,
+                "value": "'medium'",
+              },
+              "description": "",
+              "required": false,
+              "tsType": {
+                "elements": [
+                  {
+                    "name": "literal",
+                    "value": "'small'",
+                  },
+                  {
+                    "name": "literal",
+                    "value": "'medium'",
+                  },
+                  {
+                    "name": "literal",
+                    "value": "'large'",
+                  },
+                ],
+                "name": "union",
+                "raw": "'small' | 'medium' | 'large'",
+              },
             },
-          ],
-          "summary": undefined,
+          },
         },
-        "example-header": {
-          "description": "Description from meta and very long.",
-          "error": undefined,
-          "id": "example-header",
-          "import": "import { Header } from "some-package";",
-          "jsDocTags": {
-            "summary": [
-              "Component summary",
-            ],
+        "stories": [
+          {
+            "description": undefined,
+            "name": "Primary",
+            "snippet": "const Primary = () => <Button onClick={fn()} primary label="Button" />;",
+            "summary": undefined,
+          },
+          {
+            "description": undefined,
+            "name": "Secondary",
+            "snippet": "const Secondary = () => <Button onClick={fn()} label="Button" />;",
+            "summary": undefined,
+          },
+          {
+            "description": undefined,
+            "name": "Large",
+            "snippet": "const Large = () => <Button onClick={fn()} size="large" label="Button" />;",
+            "summary": undefined,
           },
-          "name": "Header",
-          "path": "./src/stories/Header.stories.ts",
-          "reactDocgen": {
-            "actualName": "",
-            "definedInFile": "./src/stories/Header.tsx",
-            "description": "",
-            "exportName": "default",
-            "methods": [],
-            "props": {
-              "onCreateAccount": {
-                "description": "",
-                "required": false,
-                "tsType": {
-                  "name": "signature",
-                  "raw": "() => void",
-                  "signature": {
-                    "arguments": [],
-                    "return": {
-                      "name": "void",
-                    },
+          {
+            "description": undefined,
+            "name": "Small",
+            "snippet": "const Small = () => <Button onClick={fn()} size="small" label="Button" />;",
+            "summary": undefined,
+          },
+        ],
+        "summary": undefined,
+      },
+      "example-header": {
+        "description": "Description from meta and very long.",
+        "error": undefined,
+        "id": "example-header",
+        "import": "import { Header } from "some-package";",
+        "jsDocTags": {
+          "summary": [
+            "Component summary",
+          ],
+        },
+        "name": "Header",
+        "path": "./src/stories/Header.stories.ts",
+        "reactDocgen": {
+          "actualName": "",
+          "definedInFile": "./src/stories/Header.tsx",
+          "description": "",
+          "exportName": "default",
+          "methods": [],
+          "props": {
+            "onCreateAccount": {
+              "description": "",
+              "required": false,
+              "tsType": {
+                "name": "signature",
+                "raw": "() => void",
+                "signature": {
+                  "arguments": [],
+                  "return": {
+                    "name": "void",
                   },
-                  "type": "function",
                 },
+                "type": "function",
               },
-              "onLogin": {
-                "description": "",
-                "required": false,
-                "tsType": {
-                  "name": "signature",
-                  "raw": "() => void",
-                  "signature": {
-                    "arguments": [],
-                    "return": {
-                      "name": "void",
-                    },
+            },
+            "onLogin": {
+              "description": "",
+              "required": false,
+              "tsType": {
+                "name": "signature",
+                "raw": "() => void",
+                "signature": {
+                  "arguments": [],
+                  "return": {
+                    "name": "void",
                   },
-                  "type": "function",
                 },
+                "type": "function",
               },
-              "onLogout": {
-                "description": "",
-                "required": false,
-                "tsType": {
-                  "name": "signature",
-                  "raw": "() => void",
-                  "signature": {
-                    "arguments": [],
-                    "return": {
-                      "name": "void",
-                    },
+            },
+            "onLogout": {
+              "description": "",
+              "required": false,
+              "tsType": {
+                "name": "signature",
+                "raw": "() => void",
+                "signature": {
+                  "arguments": [],
+                  "return": {
+                    "name": "void",
                   },
-                  "type": "function",
                 },
+                "type": "function",
               },
-              "user": {
-                "description": "",
-                "required": false,
-                "tsType": {
-                  "name": "User",
-                },
+            },
+            "user": {
+              "description": "",
+              "required": false,
+              "tsType": {
+                "name": "User",
               },
             },
           },
-          "stories": [
-            {
-              "description": undefined,
-              "name": "LoggedIn",
-              "snippet": "const LoggedIn = () => <Header
-        onLogin={fn()}
-        onLogout={fn()}
-        onCreateAccount={fn()}
-        user={{ name: 'Jane Doe' }}></Header>;",
-              "summary": undefined,
-            },
-            {
-              "description": undefined,
-              "name": "LoggedOut",
-              "snippet": "const LoggedOut = () => <Header onLogin={fn()} onLogout={fn()} onCreateAccount={fn()}></Header>;",
-              "summary": undefined,
-            },
-          ],
-          "summary": "Component summary",
         },
+        "stories": [
+          {
+            "description": undefined,
+            "name": "LoggedIn",
+            "snippet": "const LoggedIn = () => <Header
+      onLogin={fn()}
+      onLogout={fn()}
+      onCreateAccount={fn()}
+      user={{ name: 'Jane Doe' }} />;",
+            "summary": undefined,
+          },
+          {
+            "description": undefined,
+            "name": "LoggedOut",
+            "snippet": "const LoggedOut = () => <Header onLogin={fn()} onLogout={fn()} onCreateAccount={fn()} />;",
+            "summary": undefined,
+          },
+        ],
+        "summary": "Component summary",
       },
-      "v": 0,
-    }
-  `);
+    },
+    "v": 0,
+  }
+`);
 });
 
 async function getManifestForStory(code: string) {
diff --git a/code/renderers/react/src/enrichCsf.test.ts b/code/renderers/react/src/enrichCsf.test.ts
index 38b998782744..8e133c862fa9 100644
--- a/code/renderers/react/src/enrichCsf.test.ts
+++ b/code/renderers/react/src/enrichCsf.test.ts
@@ -50,7 +50,7 @@ test('should enrich csf with code parameters', async () => {
       docs: {
         ...Primary.input.parameters?.docs,
         source: {
-          code: "const Primary = () => <Button primary label=\\"Button\\"></Button>;\\n",
+          code: "const Primary = () => <Button primary label=\\"Button\\" />;\\n",
           ...Primary.input.parameters?.docs?.source
         }
       }
@@ -60,7 +60,7 @@ test('should enrich csf with code parameters', async () => {
       docs: {
         ...Secondary.input.parameters?.docs,
         source: {
-          code: "const Secondary = () => <Button label=\\"Button\\"></Button>;\\n",
+          code: "const Secondary = () => <Button label=\\"Button\\" />;\\n",
           ...Secondary.input.parameters?.docs?.source
         }
       }