From c1708723b649a292ac0bc965d81ec50713e9ccd3 Mon Sep 17 00:00:00 2001
From: D-K-P <8297864+D-K-P@users.noreply.github.com>
Date: Wed, 19 Mar 2025 11:31:56 +0000
Subject: [PATCH 1/3] Added react email docs
---
docs/docs.json | 1 +
docs/guides/examples/react-email.mdx | 123 +++++++++++++++++++++++++++
docs/images/react-email.png | Bin 0 -> 14041 bytes
3 files changed, 124 insertions(+)
create mode 100644 docs/guides/examples/react-email.mdx
create mode 100644 docs/images/react-email.png
diff --git a/docs/docs.json b/docs/docs.json
index ba9fb7bde2..e7a5dec70b 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -336,6 +336,7 @@
"guides/examples/supabase-database-operations",
"guides/examples/supabase-storage-upload",
"guides/examples/react-pdf",
+ "guides/examples/react-email",
"guides/examples/resend-email-sequence",
"guides/examples/vercel-ai-sdk",
"guides/examples/vercel-sync-env-vars"
diff --git a/docs/guides/examples/react-email.mdx b/docs/guides/examples/react-email.mdx
new file mode 100644
index 0000000000..0abd7efb76
--- /dev/null
+++ b/docs/guides/examples/react-email.mdx
@@ -0,0 +1,123 @@
+---
+title: "Send emails using React Email"
+sidebarTitle: "React Email"
+description: "Learn how to send beautiful emails using React Email and Trigger.dev."
+---
+
+## Overview
+
+This example demonstrates how to use Trigger.dev to send emails using React Email.
+
+
+ This example uses [Resend](https://resend.com) as the email provider. You can use other email
+ providers like [SendGrid](https://sendgrid.com) or [Loops](https://loops.so) as well. Full list of
+ their integrations can be found [here](https://react.email/docs/introduction#integrations).
+
+
+## Task code
+
+
+ This email is built using React components. To use React components in your task, it must be a
+ .tsx file.
+
+
+```tsx trigger/sendReactEmail.tsx
+import { Body, Button, Container, Head, Heading, Html, Preview } from "@react-email/components";
+import { logger, task } from "@trigger.dev/sdk/v3";
+import { Resend } from "resend";
+
+// Initialize Resend client
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+// React Email template component
+const EmailTemplate = ({ name, message }: { name: string; message: string }) => (
+
+
+