Email Module

Transactional emails with Resend and React Email — beautiful templates that just work.

Overview

KitRocket uses Resend for email delivery and React Email for templates. This gives you:

Reliable email delivery with high deliverability
Type-safe email templates written in React
Preview templates in a dev server
Automatic handling of welcome emails, magic links, and receipts

Email logic lives in src/lib/email/ and templates in src/lib/email/templates/.

Configuration

Environment variables

RESEND_API_KEY="re_your-api-key"
EMAIL_FROM="noreply@yourdomain.com"

Get your API key

Sign up at resend.com
Go to API Keys > Create API Key
Name it (e.g., "KitRocket Production")
Copy the key into .env.local

Verify your domain

For production, verify your sending domain:

Go to Domains in Resend dashboard
Click Add Domain
Add the DNS records Resend provides (MX, TXT, DKIM)
Wait for verification (usually a few minutes)

In development, emails are logged in the Resend dashboard without domain verification.

Usage

Send an email

import { Resend } from "resend";
import { WelcomeEmail } from "./templates/welcome";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendWelcomeEmail(to: string, name: string) {
  const { data, error } = await resend.emails.send({
    from: process.env.EMAIL_FROM!,
    to,
    subject: "Welcome to our platform",
    react: WelcomeEmail({ name }),
  });

  if (error) {
    console.error("Failed to send welcome email:", error);
    throw new Error("Email delivery failed");
  }

  return data;
}

Built-in templates

KitRocket includes three email templates:

Welcome email — sent after registration:

import { Html, Head, Body, Container, Text, Button } from "@react-email/components";

interface WelcomeEmailProps {
  name: string;
}

export function WelcomeEmail({ name }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif" }}>
        <Container>
          <Text>Hey {name},</Text>
          <Text>Welcome aboard. Your account is ready.</Text>
          <Button href={`${process.env.BETTER_AUTH_URL}/dashboard`}>
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Magic link email — sent for passwordless login:

export function MagicLinkEmail({ url }: { url: string }) {
  // Renders a clean email with a "Sign In" button
}

Receipt email — sent after payment:

export function ReceiptEmail({ amount, plan, date }: ReceiptProps) {
  // Renders payment confirmation with details
}

Send email from an API route

import { sendWelcomeEmail } from "@/lib/email/send";

// After creating a new user:
await sendWelcomeEmail(user.email, user.name);

Preview templates locally

React Email includes a dev server for previewing templates:

pnpm email:dev

This opens a browser at localhost:3001 where you can preview and iterate on templates with hot reload.

Customization

Create a new template

Create a new file in src/lib/email/templates/:

import { Html, Head, Body, Container, Text, Button } from "@react-email/components";

interface InviteEmailProps {
  inviterName: string;
  teamName: string;
  inviteUrl: string;
}

export function InviteEmail({ inviterName, teamName, inviteUrl }: InviteEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif" }}>
        <Container>
          <Text>{inviterName} invited you to join {teamName}.</Text>
          <Button href={inviteUrl}>Accept Invite</Button>
        </Container>
      </Body>
    </Html>
  );
}

Add a send function in src/lib/email/send.ts:

export async function sendInviteEmail(to: string, props: InviteEmailProps) {
  return resend.emails.send({
    from: process.env.EMAIL_FROM!,
    to,
    subject: `You're invited to join ${props.teamName}`,
    react: InviteEmail(props),
  });
}

See the full guide at Custom Email Template.

Change the sender name

EMAIL_FROM="YourApp <noreply@yourdomain.com>"

Switch email provider

Resend's API is simple enough to swap. Replace the resend.emails.send() call with any provider's SDK (SendGrid, Postmark, AWS SES). The React Email templates render to HTML that works with any provider.

Removing this module

Delete src/lib/email/ directory
Remove email sending calls from auth and payment handlers
Remove dependencies:

pnpm remove resend @react-email/components

Remove RESEND_API_KEY and EMAIL_FROM from .env.local