chore: Add direct support for React 19

.changeset/fast-countries-marry.md

@@ -0,0 +1,27 @@
+---
+"create-email": patch
+"@react-email/code-inline": patch
+"react-email": patch
+"@react-email/code-block": patch
+"@react-email/components": patch
+"@react-email/container": patch
+"@react-email/markdown": patch
+"@react-email/tailwind": patch
+"@react-email/heading": patch
+"@react-email/preview": patch
+"@react-email/section": patch
+"@react-email/button": patch
+"@react-email/column": patch
+"@react-email/render": patch
+"@react-email/body": patch
+"@react-email/font": patch
+"@react-email/head": patch
+"@react-email/html": patch
+"@react-email/link": patch
+"@react-email/text": patch
+"@react-email/img": patch
+"@react-email/row": patch
+"@react-email/hr": patch
+---
+
+Updated peer dependencies to allow for React 19 release candidated and React 19 itself

.github/workflows/tests.yml

@@ -120,6 +120,9 @@ jobs:
               if (version.startsWith("workspace:")) {
                 return true;
               }
+              if (version.startsWith("npm:")) {
+                return true;
+              }
               return /^\d+\.\d+\.\d+$|^[a-z]+:[a-z]+@\d+$/.test(version);
             }
 

apps/demo/package.json

@@ -10,14 +10,14 @@
   },
   "dependencies": {
     "@react-email/components": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc.0",
+    "react-dom": "19.0.0-rc.0",
     "react-email": "workspace:*"
   },
   "devDependencies": {
-    "next": "14.1.4",
-    "@types/react": "18.2.47",
-    "@types/react-dom": "18.2.18",
+    "next": "14.2.3",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "tsx": "4.9.0"
   }
 }

apps/web/package.json

@@ -10,15 +10,15 @@
   },
   "dependencies": {
     "@radix-ui/colors": "1.0.1",
-    "@radix-ui/react-slot": "1.0.2",
+    "@radix-ui/react-slot": "1.1.0",
     "@sindresorhus/is": "6.1.0",
     "@supabase/supabase-js": "2.39.3",
     "@vercel/analytics": "1.0.1",
     "classnames": "2.3.2",
-    "next": "14.2.3",
+    "next": "15.0.0-canary.27",
     "prism-react-renderer": "2.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc.0",
+    "react-dom": "19.0.0-rc.0",
     "resend": "3.2.0"
   },
   "devDependencies": {

apps/web/src/components/heading.tsx

@@ -26,35 +26,27 @@ interface HeadingOwnProps {
 
 type HeadingProps = As<"h1", "h2", "h3", "h4", "h5", "h6"> & HeadingOwnProps;
 
-export const Heading = React.forwardRef<
-  HTMLHeadingElement,
-  Readonly<HeadingProps>
->(
-  (
-    {
-      as: Tag = "h1",
-      size = "3",
+export const Heading = ({
+  as: Tag = "h1",
+  size = "3",
+  className,
+  color = "white",
+  children,
+  weight = "bold",
+  ...props
+}: HeadingProps) => (
+  <SlotPrimitive.Slot
+    className={classnames(
       className,
-      color = "white",
-      children,
-      weight = "bold",
-      ...props
-    },
-    forwardedRef,
-  ) => (
-    <SlotPrimitive.Slot
-      className={classnames(
-        className,
-        getSizesClassNames(size),
-        getColorClassNames(color),
-        getWeightClassNames(weight),
-      )}
-      ref={forwardedRef}
-      {...props}
-    >
-      <Tag>{children}</Tag>
-    </SlotPrimitive.Slot>
-  ),
+      getSizesClassNames(size),
+      getColorClassNames(color),
+      getWeightClassNames(weight),
+    )}
+    {...props}
+    ref={props.ref as React.Ref<HTMLElement>}
+  >
+    <Tag>{children}</Tag>
+  </SlotPrimitive.Slot>
 );
 
 const getSizesClassNames = (size: HeadingSize | undefined) => {

apps/web/src/components/text.tsx

@@ -18,34 +18,29 @@ interface TextOwnProps {
 
 type TextProps = As<"span", "div", "p"> & TextOwnProps;
 
-export const Text = React.forwardRef<HTMLSpanElement, Readonly<TextProps>>(
-  (
-    {
-      as: Tag = "span",
-      size = "2",
-      color = "gray",
-      transform,
-      weight = "normal",
+export const Text = ({
+  as: Tag = "span",
+  size = "2",
+  color = "gray",
+  transform,
+  weight = "normal",
+  className,
+  children,
+  ...props
+}: TextProps) => (
+  <SlotPrimitive.Slot
+    className={classnames(
       className,
-      children,
-      ...props
-    },
-    forwardedRef,
-  ) => (
-    <SlotPrimitive.Slot
-      className={classnames(
-        className,
-        transform,
-        getSizesClassNames(size),
-        getColorClassNames(color),
-        getWeightClassNames(weight),
-      )}
-      ref={forwardedRef}
-      {...props}
-    >
-      <Tag>{children}</Tag>
-    </SlotPrimitive.Slot>
-  ),
+      transform,
+      getSizesClassNames(size),
+      getColorClassNames(color),
+      getWeightClassNames(weight),
+    )}
+    {...props}
+    ref={props.ref as React.Ref<HTMLElement>}
+  >
+    <Tag>{children}</Tag>
+  </SlotPrimitive.Slot>
 );
 
 const getSizesClassNames = (size: TextSize | undefined) => {

benchmarks/tailwind-component/package.json

@@ -23,7 +23,7 @@
     "@react-email/components": "workspace:*",
     "@react-email/render": "workspace:*",
     "@react-email/tailwind": "workspace:*",
-    "react": "^18.2.0",
+    "react": "19.0.0-rc.0",
     "tailwind-0.0.12": "npm:@react-email/tailwind@0.0.12",
     "tailwind-0.0.15": "npm:@react-email/tailwind@0.0.15",
     "tinybench": "2.5.1"

examples/aws-ses/package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@aws-sdk/client-ses": "3.341.0",
     "@react-email/components": "*",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc.0"
   },
   "devDependencies": {
     "tsup": "6.2.3",

examples/mailersend/package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@react-email/components": "*",
     "mailersend": "^2.0.0",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc.0"
   },
   "devDependencies": {
     "tsup": "6.2.3",

examples/nodemailer/package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@react-email/components": "*",
     "nodemailer": "6.9.9",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc.0"
   },
   "devDependencies": {
     "tsup": "6.2.3",

examples/plunk/package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@plunk/node": "1.1.1",
     "@react-email/components": "*",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc.0"
   },
   "devDependencies": {
     "tsup": "6.2.3",

examples/postmark/package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@react-email/components": "*",
     "postmark": "3.0.14",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc.0"
   },
   "devDependencies": {
     "tsup": "6.2.3",

examples/resend/package.json

@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "next": "13.5.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc.0",
+    "react-dom": "19.0.0-rc.0",
     "resend": "^3.2.0"
   },
   "devDependencies": {
     "@types/node": "^20.2.5",
-    "@types/react": "18.2.23",
-    "@types/react-dom": "18.2.8",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "typescript": "^5.1.3"
   }
 }

examples/scaleway/next/package.json

@@ -13,13 +13,13 @@
     "@react-email/render": "*",
     "@scaleway/sdk": "1.5.0",
     "next": "13.5.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-rc.0",
+    "react-dom": "19.0.0-rc.0"
   },
   "devDependencies": {
     "@types/node": "18.14.6",
-    "@types/react": "18.2.23",
-    "@types/react-dom": "18.2.8",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "typescript": "4.9.5"
   }
 }

examples/scaleway/node/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@scaleway/sdk": "1.4.0",
     "@react-email/components": "*",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc.0"
   },
   "devDependencies": {
     "tsup": "6.2.3",

examples/sendgrid/package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@sendgrid/mail": "7.7.0",
     "@react-email/components": "*",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc.0"
   },
   "devDependencies": {
     "tsup": "6.2.3",

package.json

@@ -16,8 +16,8 @@
   "devDependencies": {
     "@changesets/cli": "2.27.1",
     "@types/node": "18.18.0",
-    "@types/react": "18.2.47",
-    "@types/react-dom": "18.2.14",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "eslint": "8.50.0",
     "happy-dom": "12.2.2",
     "prettier": "3.0.3",
@@ -29,6 +29,10 @@
   },
   "packageManager": "pnpm@9.1.2",
   "pnpm": {
+    "overrides": {
+      "@types/react": "npm:types-react@19.0.0-rc.1",
+      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
+    },
     "patchedDependencies": {
       "postcss-css-variables@0.19.0": "patches/postcss-css-variables@0.19.0.patch",
       "process@0.11.10": "patches/process@0.11.10.patch",

packages/body/package.json

@@ -31,7 +31,7 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
     "@babel/core": "7.23.9",

packages/button/package.json

@@ -43,7 +43,7 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
     "@babel/preset-react": "7.23.3",

packages/code-block/package.json

@@ -41,7 +41,7 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
     "@babel/preset-react": "7.23.3",

packages/code-inline/package.json

@@ -35,7 +35,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
     "@babel/preset-react": "7.23.3",

packages/column/package.json

@@ -43,7 +43,7 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
     "@babel/preset-react": "7.23.3",

packages/components/package.json

@@ -63,7 +63,7 @@
     "@react-email/text": "workspace:0.0.9"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
     "@babel/preset-react": "7.23.3",

packages/container/package.json

@@ -43,7 +43,7 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
     "@babel/preset-react": "7.23.3",

packages/create-email/template/package.json

@@ -10,10 +10,10 @@
   "dependencies": {
     "@react-email/components": "workspace:0.0.22",
     "react-email": "workspace:2.1.6",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.33",
-    "@types/react-dom": "18.2.14"
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   }
 }