Emails

13 transactional email templates built with React Email, sent via Resend from Edge Functions.

Overview

ScaleRocket includes 13 pre-built email templates using React Email and sends them via Resend. Templates live in packages/emails/ and are sent from Supabase Edge Functions.

Templates

Template	Trigger	Description
`welcome`	After user signs up	Welcome message with getting started steps
`onboarding-day3`	3 days after signup (cron)	Follow-up onboarding tips and guidance
`trial-started`	When trial begins	Confirms trial activation with details
`trial-ending`	3 days before trial ends (cron)	Reminder to upgrade before trial expires
`subscription-activated`	After successful payment	Confirms new subscription and plan details
`payment-failed`	When payment fails	Alert with retry info and update card link
`payment-recovered`	When failed payment succeeds	Confirms payment issue is resolved
`invoice`	Monthly invoice generated	Receipt with amount and invoice link
`plan-changed`	When user upgrades/downgrades	Confirms plan change with new plan details
`goodbye`	When subscription is cancelled	Cancellation confirmation with access end date
`winback`	7 days after cancellation (cron)	Win-back offer to re-subscribe
`feedback-request`	14 days after signup (cron)	Asks user for product feedback
`inactivity`	30 days without login (cron)	Re-engagement nudge for inactive users

Template Anatomy

Each template is a React component in packages/emails/src/templates/:

// packages/emails/src/templates/welcome.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Link,
  Preview,
  Text,
} from "@react-email/components";

interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}

export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to ScaleRocket</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>Welcome, {name}!</Heading>
          <Text style={text}>
            Thanks for signing up. Your account is ready.
          </Text>
          <Link href={loginUrl} style={button}>
            Go to Dashboard
          </Link>
        </Container>
      </Body>
    </Html>
  );
}

const main = { backgroundColor: "#f6f9fc", fontFamily: "sans-serif" };
const container = { margin: "0 auto", padding: "40px 20px", maxWidth: "560px" };
const h1 = { color: "#1a1a1a", fontSize: "24px" };
const text = { color: "#4a4a4a", fontSize: "16px", lineHeight: "26px" };
const button = {
  backgroundColor: "#000",
  color: "#fff",
  padding: "12px 24px",
  borderRadius: "6px",
  textDecoration: "none",
  display: "inline-block",
};

Customizing Templates

Change branding

Update colors, logo, and company name in the shared layout:

// packages/emails/src/components/layout.tsx
export const brandColors = {
  primary: "#000000",
  background: "#f6f9fc",
  text: "#1a1a1a",
};

export const companyInfo = {
  name: "ScaleRocket",
  logo: "https://yourdomain.com/logo.png",
  address: "Your Company Address",
};

Modify content

Edit the template file directly. All templates export a React component with typed props.

Add a new template

Create the template in packages/emails/src/templates/my-email.tsx.
Export it from packages/emails/src/index.ts:

export { MyEmail } from "./templates/my-email";

Send it from an Edge Function (see below).

Sending Emails from Edge Functions

The packages/emails/ package exports a sendEmail utility:

// packages/emails/src/send.ts
import { Resend } from "resend";

const resend = new Resend(Deno.env.get("RESEND_API_KEY"));

export async function sendEmail({
  to,
  subject,
  react,
}: {
  to: string;
  subject: string;
  react: React.ReactElement;
}) {
  const { data, error } = await resend.emails.send({
    from: "ScaleRocket <noreply@yourdomain.com>",
    to,
    subject,
    react,
  });

  if (error) {
    console.error("Email send failed:", error);
    throw error;
  }

  return data;
}

Use it in an Edge Function:

// supabase/functions/send-welcome/index.ts
import { sendEmail } from "@saas/emails";
import { WelcomeEmail } from "@saas/emails";

await sendEmail({
  to: user.email,
  subject: "Welcome to ScaleRocket!",
  react: WelcomeEmail({
    name: user.full_name,
    loginUrl: `${SITE_URL}/auth/login`,
  }),
});

Preview Mode

Preview emails locally during development:

cd packages/emails
pnpm dev

This starts a local server at http://localhost:3000 where you can browse and preview all templates with sample data. Each template file can export a default preview:

// At the bottom of welcome.tsx
export default function Preview() {
  return <WelcomeEmail name="John" loginUrl="https://app.example.com/login" />;
}

Done reading? Mark this page as complete.

Emails

On this page