Transactional Emails

We use Resend to send transactional emails. The templates, located in @repo/email, are powered by React Email - a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

​

Email Templates

The email package is separated from the app folder for two reasons:

1. We can import the templates into the email app, allowing for previewing them in the UI; and
2. We can import both the templates and the SDK into our other apps and use them to send emails.

Resend and React Email play nicely together. For example, here’s how you can send a transactional email using a React email template:

import { resend } from '@repo/email';
import { ContactTemplate } from '@repo/email/templates/contact';

await resend.emails.send({
  from: 'sender@acme.com',
  to: 'recipient@acme.com',
  subject: 'The email subject',
  react: <ContactTemplate name={name} email={email} message={message} />,
});

​

Previewing Emails

To preview the emails templates, simply run the email app:

pnpm dev --filter email