diff --git a/.changeset/react-wrappers.md b/.changeset/react-wrappers.md
new file mode 100644
index 0000000000..82f2144cfe
--- /dev/null
+++ b/.changeset/react-wrappers.md
@@ -0,0 +1,19 @@
+---
+"@rhds/elements": minor
+---
+React wrappers: Add automatically-generated react wrapper components
+
+```jsx
+import { Card } from '@rhds/elements/react/rh-card/rh-card.js';
+import { Cta } from '@rhds/elements/react/rh-cta/rh-cta.js';
+
+export const CardView = () => (
+  <Card>
+    <h2 slot="header">Card!</h2>
+    <p>For a legacy-compatible framework experience</p>
+    <Cta slot="footer">
+      <a href="https://ux.redhat.com">Read more</a>
+    </Cta>
+  </Card>
+)
+```
diff --git a/.changeset/tangy-sloths-scream.md b/.changeset/tangy-sloths-scream.md
new file mode 100644
index 0000000000..bc4dbf572a
--- /dev/null
+++ b/.changeset/tangy-sloths-scream.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-navigation-secondary>`: moves the deprecated `<rh-secondary-nav>` tag to a separate module
diff --git a/.gitignore b/.gitignore
index 12b4b78b54..959995f895 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@ test-results.xml
 rhds.min.js
 *LEGAL.txt
 *.tgz
+react/**/*
 
 # e2e
 test-results
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.ts b/elements/rh-navigation-secondary/rh-navigation-secondary.ts
index 1060191e01..938e397b19 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary.ts
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary.ts
@@ -14,6 +14,9 @@ import '@rhds/elements/rh-surface/rh-surface.js';
 import './rh-navigation-secondary-menu-section.js';
 import './rh-navigation-secondary-overlay.js';
 
+/** @deprecated */
+import './rh-secondary-nav.js';
+
 import { RhNavigationSecondaryDropdown, SecondaryNavDropdownExpandEvent } from './rh-navigation-secondary-dropdown.js';
 
 import { DirController } from '../../lib/DirController.js';
@@ -432,19 +435,8 @@ export class RhNavigationSecondary extends LitElement {
   }
 }
 
-@customElement('rh-secondary-nav')
-class RhSecondaryNav extends RhNavigationSecondary {
-  #logger = new Logger(this);
-
-  constructor() {
-    super();
-    this.#logger.warn('rh-secondary-nav is deprecated. Use rh-navigation-secondary instead.');
-  }
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'rh-navigation-secondary': RhNavigationSecondary;
-    'rh-secondary-nav': RhSecondaryNav;
   }
 }
diff --git a/elements/rh-navigation-secondary/rh-secondary-nav.ts b/elements/rh-navigation-secondary/rh-secondary-nav.ts
new file mode 100644
index 0000000000..7dfe2405e5
--- /dev/null
+++ b/elements/rh-navigation-secondary/rh-secondary-nav.ts
@@ -0,0 +1,20 @@
+/** @deprecated */
+
+import { customElement } from 'lit/decorators/custom-element.js';
+import { RhNavigationSecondary } from './rh-navigation-secondary.js';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+
+@customElement('rh-secondary-nav')
+class RhSecondaryNav extends RhNavigationSecondary {
+  constructor() {
+    super();
+    new Logger(this).warn('rh-secondary-nav is deprecated. Use rh-navigation-secondary instead.');
+  }
+}
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'rh-secondary-nav': RhSecondaryNav;
+  }
+}
diff --git a/package.json b/package.json
index 9021ff9341..fdf5057676 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,21 @@
         "analyze",
         "compile",
         "bundle",
-        "docs"
+        "docs",
+        "build:react"
+      ]
+    },
+    "build:react": {
+      "command": "ts-node --esm scripts/generate-react-wrappers.ts",
+      "dependencies": [
+        "analyze"
+      ],
+      "files": [
+        "custom-elements.json",
+        "scripts/generate-react-wrappers.ts"
+      ],
+      "output": [
+        "react/**/*"
       ]
     },
     "test": {
@@ -136,6 +150,7 @@
     "bundle": {
       "command": "node scripts/bundle.js"
     },
+
     "analyze": {
       "command": "cem analyze && node scripts/cem-tokens.js && node scripts/system-tokens.js",
       "files": [
diff --git a/scripts/generate-react-wrappers.ts b/scripts/generate-react-wrappers.ts
new file mode 100644
index 0000000000..89ebf1e8b4
--- /dev/null
+++ b/scripts/generate-react-wrappers.ts
@@ -0,0 +1,7 @@
+import { generateReactWrappers } from '@patternfly/pfe-tools/react/generate-wrappers.js';
+
+const inURL = new URL('../custom-elements.json', import.meta.url);
+const outURL = new URL('../react/', import.meta.url);
+
+await generateReactWrappers(inURL, outURL, '@rhds/elements', 'rh');
+
diff --git a/tsconfig.json b/tsconfig.json
index 6fe483f68d..f672e633ec 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,7 +27,7 @@
     "importHelpers": true,
     "incremental": true,
     "inlineSources": true,
-    "module": "es2020",
+    "module": "es2022",
     "moduleResolution": "node",
     "noEmitOnError": false,
     "preserveValueImports": true,
@@ -58,6 +58,7 @@
       "DOM",
       "es2015.iterable",
       "es2020",
+      "es2022",
       "es5",
       "es6",
       "ScriptHost"