resend · rahulbhadja · Mar 22, 2026 · Mar 22, 2026 · Mar 22, 2026 · cubic-dev-ai
diff --git a/README.md b/README.md
@@ -87,6 +87,7 @@ Emails built with React Email can be converted into HTML and sent using any emai
 - [SendGrid](https://github.com/resend/react-email/tree/main/examples/sendgrid)
 - [Postmark](https://github.com/resend/react-email/tree/main/examples/postmark)
 - [AWS SES](https://github.com/resend/react-email/tree/main/examples/aws-ses)
+- [Azure Communication Email](https://github.com/resend/react-email/tree/main/examples/azure-communication-email)
 - [Plunk](https://github.com/resend/react-email/tree/main/examples/plunk)
 - [Scaleway](https://github.com/resend/react-email/tree/main/examples/scaleway)
 

diff --git a/apps/docs/docs.json b/apps/docs/docs.json
@@ -97,6 +97,7 @@
               "integrations/sendgrid",
               "integrations/postmark",
               "integrations/aws-ses",
+              "integrations/azure-communication-email",
               "integrations/mailersend",
               "integrations/scaleway",
               "integrations/plunk"

diff --git a/apps/docs/integrations/azure-communication-email.mdx b/apps/docs/integrations/azure-communication-email.mdx
@@ -0,0 +1,88 @@
+---
+title: 'Send email using Azure Communication Email'
+sidebarTitle: 'Azure Communication Email'
+description: 'Learn how to send an email using React Email and the Azure Communication Email SDK.'
+'og:image': 'https://react.email/static/covers/react-email.png'
+---
+
+## 1. Install dependencies
+
+Get the [@react-email/components](https://www.npmjs.com/package/@react-email/components) package and the [Azure Communication Email SDK](https://www.npmjs.com/package/@azure/communication-email).
+
+<CodeGroup>
+
+```sh npm
+npm install @azure/communication-email @react-email/components
+```
+
+```sh yarn
+yarn add @azure/communication-email @react-email/components
+```
+
+```sh pnpm
+pnpm add @azure/communication-email @react-email/components
+```
+
+</CodeGroup>
+
+## 2. Create an email using React
+
+Start by building your email template in a `.jsx` or `.tsx` file.
+
+```tsx email.tsx
+import * as React from 'react';
+import { Html, Button } from "@react-email/components";
+
+export function Email(props) {
+  const { url } = props;
+
+  return (
+    <Html lang="en">
+      <Button href={url}>Click me</Button>
+    </Html>
+  );
+}
+```
+
+## 3. Convert to HTML and send email
+
+Import the email template you just built, convert into an HTML string, and use the Azure Communication Email SDK to send it.
+
+```tsx
+import { EmailClient } from '@azure/communication-email';
+import { render } from '@react-email/components';
+import { Email } from './email';
+
+const client = new EmailClient(process.env.AZURE_EMAIL_CONNECTION_STRING);
+
+const from ='you@example.com';
+const emailHtml = await render(<Email url="https://example.com" />);
+
+const message = {
+  senderAddress: from,
+  content: {
+    subject: 'hello world',
+    html: emailHtml,
+  },
+  recipients: {
+    to: [{ address: 'user@gmail.com' }],
+  },
+};
+
+const poller = await client.beginSend(message);
+
+await poller.pollUntilDone();
+```
+
+<Info>Azure Communication Email expects the sender in the `senderAddress` field.</Info>
+
+## Try it yourself
+
+<Card
+  title="Azure Communication Email example"
+  icon='arrow-up-right-from-square'
+  iconType="duotone"
+  href="https://github.com/resend/react-email/tree/main/examples/azure-communication-email"
+>
+  See the full source code.
+</Card>
diff --git a/apps/docs/snippets/integrations.mdx b/apps/docs/snippets/integrations.mdx
@@ -14,6 +14,12 @@
   <Card title="AWS SES" href="/integrations/aws-ses">
     Send email using AWS SES
   </Card>
+  <Card
+    title="Azure Communication Email"
+    href="/integrations/azure-communication-email"
+  >
+    Send email using Azure Communication Email
+  </Card>
   <Card title="MailerSend" href="/integrations/mailersend">
     Send email using MailerSend
   </Card>

diff --git a/examples/azure-communication-email/package.json b/examples/azure-communication-email/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "react-email-with-azure-communication-email",
+  "license": "MIT",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsdown src/index.tsx --format esm --target node20",
+    "dev": "tsdown src/index.tsx --format esm --target node20 --watch",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@azure/communication-email": "^1",
+    "@react-email/components": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/examples/azure-communication-email/src/email.tsx b/examples/azure-communication-email/src/email.tsx
@@ -0,0 +1,13 @@
+import { Button, Html } from '@react-email/components';
+
+interface EmailProps {
+  url: string;
+}
+
+export const Email: React.FC<Readonly<EmailProps>> = ({ url }) => {
+  return (
+    <Html lang="en">
+      <Button href={url}>Click me</Button>
+    </Html>
+  );
+};
diff --git a/examples/azure-communication-email/src/index.tsx b/examples/azure-communication-email/src/index.tsx
@@ -0,0 +1,23 @@
+import { EmailClient } from '@azure/communication-email';
+import { render } from '@react-email/components';
+import { Email } from './email';
+
+const client = new EmailClient(process.env.AZURE_EMAIL_CONNECTION_STRING);
+
+const from = 'you@example.com';
+const emailHtml = await render(<Email url="https://example.com" />);
+
+const message = {
+  senderAddress: from,
+  content: {
+    subject: 'hello world',
+    html: emailHtml,
+  },
+  recipients: {
+    to: [{ address: 'user@gmail.com' }],
+  },
+};
+
+const poller = await client.beginSend(message);
+
+await poller.pollUntilDone();
diff --git a/examples/azure-communication-email/tsconfig.json b/examples/azure-communication-email/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "target": "ESNext",
+    "types": ["vitest/globals"]
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}