Skip to content

README.md

Latest commit

 

History

History
127 lines (90 loc) · 3.1 KB

README.md

File metadata and controls

127 lines (90 loc) · 3.1 KB

react-email-kit

Five production-ready email templates built with React Email and wired to Resend. Preview locally, send with one function call.

Templates

Template File Description
Welcome emails/welcome.tsx New user onboarding — confirms signup, shows next steps, CTA to log in
Invite emails/invite.tsx Team/org invitation with expiry — accepts an invite token URL
Password Reset emails/password-reset.tsx Secure reset link with expiry time, red CTA, reassurance copy
Receipt emails/receipt.tsx Line-item purchase receipt with subtotal, tax, and total
Notification emails/notification.tsx Configurable info / success / warning / alert with optional CTA

Preview

Start the live preview server — each template renders with its PreviewProps:

npm install
npm run dev

Opens at http://localhost:3030. Edit templates and see changes instantly.

Send via Resend

1. Copy .env.example → .env and fill in your values:

cp .env.example .env
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
FROM_EMAIL=hello@yourdomain.com
FROM_NAME=Your Company
TEST_TO_EMAIL=you@yourdomain.com

Your sending domain must be verified in Resend.

2. Import and send:

import { sendEmail } from "./src/send";
import WelcomeEmail from "./emails/welcome";
import * as React from "react";

await sendEmail({
  to: "user@example.com",
  subject: "Welcome to Acme!",
  react: React.createElement(WelcomeEmail, {
    firstName: "Jordan",
    companyName: "Acme",
    loginUrl: "https://app.acme.com/login",
    supportEmail: "support@acme.com",
  }),
});

3. Smoke test all templates:

npm run send:test

Sends one of each template to TEST_TO_EMAIL.

Customizing templates

Each template accepts typed props — swap in your colors, logo URL, and copy. The props interface is at the top of each file.

To change the brand color, find the button style object and update backgroundColor. All templates follow the same style pattern so changes are consistent.

Add your logo:

<WelcomeEmail
  logoUrl="https://yourcdn.com/logo.png"
  companyName="Acme"
  ...
/>

Using in a Next.js app

Drop the emails/ folder into your project and call sendEmail from an API route or server action:

// app/api/welcome/route.ts
import { sendEmail } from "@/lib/send";
import WelcomeEmail from "@/emails/welcome";
import * as React from "react";

export async function POST(req: Request) {
  const { email, firstName } = await req.json();
  await sendEmail({
    to: email,
    subject: `Welcome to Acme, ${firstName}!`,
    react: React.createElement(WelcomeEmail, { firstName }),
  });
  return new Response("ok");
}

Stack

  • React Email — component library and preview server
  • Resend — email delivery
  • TypeScript throughout

Built by ProtoNodeLabs. MIT licensed.