diff --git a/apps/angular/react-in-angular/src/app/react/ReactPost.tsx b/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
index 6ff7b4d..a49d932 100644
--- a/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
+++ b/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
@@ -1,4 +1,4 @@
-// import React from 'react';
+import React from 'react';
 
 export default function ReactPost(props: {
   title?: string,
diff --git a/apps/angular/react-in-angular/src/app/react/post.component.tsx b/apps/angular/react-in-angular/src/app/react/post.component.tsx
new file mode 100644
index 0000000..882e21b
--- /dev/null
+++ b/apps/angular/react-in-angular/src/app/react/post.component.tsx
@@ -0,0 +1,48 @@
+import { AfterViewInit, Component, ElementRef, EventEmitter, input, OnChanges, Output, ViewChild } from '@angular/core';
+import { createRoot, Root } from 'react-dom/client';
+import React from 'react';
+import ReactPost from './ReactPost';
+
+type Post = { title: string; description: string, pictureLink: string };
+
+
+@Component({
+  standalone: true,
+  selector: 'app-post',
+  template: `
+    <div #react></div>`,
+  styles: ['']
+})
+export class PostComponent implements AfterViewInit, OnChanges {
+  @ViewChild('react', { static: true }) containerRef!: ElementRef;
+
+  post = input<Post | undefined>(undefined);
+  isSelected = input<boolean>(false);
+  @Output() selectPost = new EventEmitter<void>();
+  root?: Root;
+
+  ngOnChanges(): void {
+    this.render();
+  }
+
+  ngAfterViewInit() {
+    this.root = createRoot(this.containerRef.nativeElement);
+    this.render();
+  }
+
+  private render() {
+    if (this.root) {
+      this.root.render(
+        <React.StrictMode>
+          <ReactPost
+            title={this.post()?.title}
+            description={this.post()?.description}
+            pictureLink={this.post()?.pictureLink}
+            handleClick={() => this.selectPost.emit()}
+            selected={this.isSelected()}
+          />
+        </React.StrictMode>
+      );
+    }
+  }
+}
diff --git a/apps/angular/react-in-angular/tailwind.config.js b/apps/angular/react-in-angular/tailwind.config.js
index 38183db..99b4c14 100644
--- a/apps/angular/react-in-angular/tailwind.config.js
+++ b/apps/angular/react-in-angular/tailwind.config.js
@@ -4,7 +4,7 @@ const { join } = require('path');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html,tsx}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {
diff --git a/apps/angular/react-in-angular/tsconfig.json b/apps/angular/react-in-angular/tsconfig.json
index 7a9f4b7..3c5ef57 100644
--- a/apps/angular/react-in-angular/tsconfig.json
+++ b/apps/angular/react-in-angular/tsconfig.json
@@ -9,6 +9,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "jsx": "react",
   },
   "files": [],
   "include": [],
diff --git a/package-lock.json b/package-lock.json
index 7952718..b292ca4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,8 @@
         "@rx-angular/template": "^17.0.0",
         "@swc/helpers": "0.5.3",
         "@tanstack/angular-query-experimental": "^5.12.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "rxjs": "7.8.1",
         "tailwindcss": "^3.3.5",
         "tslib": "^2.3.0",
@@ -71,6 +73,8 @@
         "@testing-library/user-event": "^14.5.1",
         "@types/jest": "29.4.0",
         "@types/node": "18.16.9",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
         "@typescript-eslint/eslint-plugin": "6.11.0",
         "@typescript-eslint/parser": "6.11.0",
         "all-contributors-cli": "^6.26.1",
@@ -8837,6 +8841,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.11",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "dev": true
+    },
     "node_modules/@types/qs": {
       "version": "6.9.11",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.11.tgz",
@@ -8847,6 +8857,26 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
+    "node_modules/@types/react": {
+      "version": "18.2.55",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
+      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
+      "dev": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.2.19",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
+      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -8867,6 +8897,12 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "dev": true
+    },
     "node_modules/@types/semver": {
       "version": "7.5.6",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
@@ -12674,6 +12710,12 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "devOptional": true
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
+    },
     "node_modules/cuint": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
@@ -20348,6 +20390,17 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -24012,6 +24065,29 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -24972,6 +25048,14 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
diff --git a/package.json b/package.json
index 3507f1b..a4aa3dd 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,8 @@
     "@rx-angular/template": "^17.0.0",
     "@swc/helpers": "0.5.3",
     "@tanstack/angular-query-experimental": "^5.12.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rxjs": "7.8.1",
     "tailwindcss": "^3.3.5",
     "tslib": "^2.3.0",
@@ -74,6 +76,8 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "29.4.0",
     "@types/node": "18.16.9",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "6.11.0",
     "@typescript-eslint/parser": "6.11.0",
     "all-contributors-cli": "^6.26.1",