Email
Configure email sending with React Email templates
Datyze uses React Email for building beautiful, responsive email templates. Emails can be sent via Resend or Brevo (formerly Sendinblue).
packages/email/
├── src/
│ ├── templates/ # React Email templates
│ │ ├── verification.tsx
│ │ ├── password-reset.tsx
│ │ └── invitation.tsx
│ └── index.ts # Email sending functions
Choose your email provider:
RESEND_API_KEY="re_..."
EMAIL_FROM="noreply@yourdomain.com"
BREVO_API_KEY="xkeysib-..."
EMAIL_FROM="noreply@yourdomain.com"
import { sendVerificationEmail } from "@lucashochart/email";
await sendVerificationEmail({
to: user.email,
verificationUrl: `${env.NEXT_PUBLIC_APP_URL}/verify?token=${token}`,
});
import { sendPasswordResetEmail } from "@lucashochart/email";
await sendPasswordResetEmail({
to: user.email,
resetUrl: `${env.NEXT_PUBLIC_APP_URL}/reset-password?token=${token}`,
});
import { sendInvitationEmail } from "@lucashochart/email";
await sendInvitationEmail({
to: invitation.email,
inviterName: inviter.name,
teamName: team.name,
inviteUrl: `${env.NEXT_PUBLIC_APP_URL}/invite/${invitation.token}`,
});
Templates use React Email components:
// packages/email/src/templates/example.tsx
import {
Body,
Button,
Container,
Head,
Html,
Preview,
Section,
Text,
} from "@react-email/components";
interface ExampleEmailProps {
name: string;
actionUrl: string;
}
export function ExampleEmail({ name, actionUrl }: ExampleEmailProps) {
return (
<Html>
<Head />
<Preview>Your email preview text</Preview>
<Body style={main}>
<Container style={container}>
<Section>
<Text style={heading}>Hello {name}!</Text>
<Text style={paragraph}>This is an example email template.</Text>
<Button style={button} href={actionUrl}>
Take Action
</Button>
</Section>
</Container>
</Body>
</Html>
);
}
const main = {
backgroundColor: "#f6f9fc",
fontFamily: "sans-serif",
};
const container = {
backgroundColor: "#ffffff",
margin: "0 auto",
padding: "20px",
borderRadius: "8px",
};
const heading = {
fontSize: "24px",
fontWeight: "bold",
color: "#333",
};
const paragraph = {
fontSize: "16px",
color: "#666",
};
const button = {
backgroundColor: "#000",
color: "#fff",
padding: "12px 24px",
borderRadius: "6px",
textDecoration: "none",
};
React Email includes a preview server:
cd packages/email
pnpm dev
Open http://localhost:3001 to preview templates.
import { Resend } from "resend";
import { ExampleEmail } from "./templates/example";
import { render } from "@react-email/render";
const resend = new Resend(env.RESEND_API_KEY);
export async function sendExampleEmail(to: string, name: string) {
const html = await render(ExampleEmail({ name, actionUrl: "..." }));
await resend.emails.send({
from: env.EMAIL_FROM,
to,
subject: "Example Email",
html,
});
}
import * as brevo from "@sendinblue/client";
import { ExampleEmail } from "./templates/example";
import { render } from "@react-email/render";
const apiInstance = new brevo.TransactionalEmailsApi();
apiInstance.setApiKey(brevo.TransactionalEmailsApiApiKeys.apiKey, env.BREVO_API_KEY);
export async function sendExampleEmail(to: string, name: string) {
const html = await render(ExampleEmail({ name, actionUrl: "..." }));
await apiInstance.sendTransacEmail({
sender: { email: env.EMAIL_FROM },
to: [{ email: to }],
subject: "Example Email",
htmlContent: html,
});
}
- Use Preview Text - First 35-50 characters shown in inbox
- Keep Templates Simple - Not all email clients support advanced CSS
- Test Across Clients - Gmail, Outlook, Apple Mail render differently
- Include Plain Text - Some users prefer plain text emails