diff --git a/packages/react-output-target/package.json b/packages/react-output-target/package.json
index 1078f26e..e9554776 100644
--- a/packages/react-output-target/package.json
+++ b/packages/react-output-target/package.json
@@ -36,7 +36,7 @@
     "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
   },
   "peerDependencies": {
-    "@stencil/core": "^2.9.0"
+    "@stencil/core": "^2.17.2"
   },
   "devDependencies": {
     "@types/react": "^16.7.0",
diff --git a/packages/react-output-target/src/output-react.ts b/packages/react-output-target/src/output-react.ts
index fbb5f251..9fc41500 100644
--- a/packages/react-output-target/src/output-react.ts
+++ b/packages/react-output-target/src/output-react.ts
@@ -134,7 +134,9 @@ export function createComponentDefinition(
   includeCustomElement: boolean = false
 ): ReadonlyArray<string> {
   const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-  let template = `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}'`;
+  const classTypeParams =
+  cmpMeta.componentClassTypeParameters.length > 0 ? `<${cmpMeta.componentClassTypeParameters.join(',')}>` : '';
+  let template = `export const ${tagNameAsPascal}${classTypeParams} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}${classTypeParams}, HTML${tagNameAsPascal}Element${classTypeParams}>('${cmpMeta.tagName}'`;
 
   if (includeCustomElement) {
     template += `, undefined, undefined, define${tagNameAsPascal}`;