@repo/email

Send beautiful, reliable emails from your app using React components. Pre-built templates for password resets, magic links, and team invitations. Powered by Resend for 99% deliverability.

Quick Start

Send emails in 5 minutes:

pnpm add @repo/email

Design emails with React, preview locally, and send with one function call. Skip to Quick Start →

Why @repo/email?

Email infrastructure is complex. SMTP configuration, deliverability issues, spam filters, and email design are all hard problems. Building and maintaining email templates manually leads to inconsistent branding and broken layouts across email clients.

@repo/email solves this by providing pre-built templates and React components for email design. Send transactional emails reliably without managing infrastructure.

Production-ready with automatic retries, bounce handling, analytics, and responsive design that works across all email clients.

Use cases

User authentication — Password resets, email verification, magic link login
Team collaboration — Organization invites, @mentions, activity notifications
Transactional emails — Welcome messages, order confirmations, receipts
Product updates — Feature announcements, newsletters, release notes
Custom workflows — Build any email template with React components

How it works

@repo/email provides pre-built templates and a simple API for sending emails:

import { sendWelcome } from "@repo/email";

// Send welcome email
await sendWelcome({
  to: "user@example.com",
  name: "John Doe"
});

Emails are designed with React components, preview locally, and send via Resend's infrastructure.

Key features

Pre-built templates — Welcome, password reset, magic link, email verification, team invites

React components — Design emails with code, version control changes, reuse components

Resend infrastructure — 99.9% uptime, automatic retries, bounce handling, SPF/DKIM/DMARC

Local preview — See email designs in development before sending

Attachments — Send PDFs, images, or any file type

Batch sending — Send to multiple recipients efficiently

Quick Start

1. Install the package

pnpm add @repo/email resend @react-email/components

2. Configure your Resend API key

.env.local

RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxxxxx
EMAIL_FROM=noreply@yourdomain.com

3. Send a welcome email

app/actions/auth.ts

"use server";

import { sendWelcome } from "@repo/email";

export async function onUserSignup(email: string, name: string) {
  await sendWelcome({
    to: email,
    name: name
  });
}

4. Send a password reset email

app/actions/password.ts

"use server";

import { sendPasswordReset } from "@repo/email";

export async function requestPasswordReset(email: string, token: string) {
  await sendPasswordReset({
    to: email,
    resetLink: `https://yourapp.com/reset?token=${token}`,
    expiresIn: "1 hour"
  });
}

That's it! Your app now sends professional, responsive emails with one function call.

Custom templates

Create custom email templates with React components:

import { sendEmail } from "@repo/email";

await sendEmail({
  to: "user@example.com",
  subject: "Custom Email",
  template: "custom",
  data: { orderNumber: "12345" }
});

Distribution

This package is available as @oneapp/email for use outside the monorepo.

npm install @oneapp/email

Build configuration: Uses tsdown with createDistConfig('react', ...) for distribution builds.

Technical Details

For Developers: Technical implementation details

Email service integration with Resend. Provides type-safe email sending, template management, and React Email components.

Installation

pnpm add @repo/email

Prerequisite

Requires a Resend API key. Sign up for free to get started.

Overview

Property	Value
Location	`packages/email`
Dependencies	`resend`, `@react-email/components`
Provider	Resend

Export Paths

Path	Description
`@repo/email`	Main exports
`@repo/email/templates`	Email templates
`@repo/email/components`	Shared email components

Basic Usage

Send Email

import { sendEmail } from "@repo/email";

await sendEmail({
  to: "user@example.com";
  subject: "Welcome!",
  // highlight-start
  template: "welcome",
  data: {
    name: "John",
  },
  // highlight-end
});

Send Raw HTML

import { sendEmail } from "@repo/email";

await sendEmail({
  to: "user@example.com",
  subject: "Important Update",
  // highlight-next-line
  html: "<h1>Hello!</h1><p>This is an important message.</p>"
});

Templates

Magic Link

import { sendMagicLink } from "@repo/email";

await sendMagicLink({
  to: "user@example.com",
  // highlight-next-line
  magicLink: "https://app.example.com/auth/verify?token=xxx"
});

Welcome Email

import { sendWelcome } from "@repo/email";

await sendWelcome({
  to: "user@example.com",
  name: "John Doe"
});

Password Reset

import { sendPasswordReset } from "@repo/email";

await sendPasswordReset({
  to: "user@example.com",
  // highlight-start
  resetLink: "https://app.example.com/reset?token=xxx",
  expiresIn: "1 hour"
  // highlight-end
});

Email Verification

import { sendVerificationEmail } from "@repo/email";

await sendVerificationEmail({
  to: "user@example.com",
  verifyLink: "https://app.example.com/verify?token=xxx"
});

Organization Invitation

import { sendOrgInvitation } from "@repo/email";

await sendOrgInvitation({
  to: "invitee@example.com",
  // highlight-start
  inviterName: "John Doe",
  orgName: "Acme Inc",
  inviteLink: "https://app.example.com/invite/xxx"
  // highlight-end
});

Custom Templates

Create Template

React Email

Templates are built with React Email components for consistent, responsive emails.

// templates/CustomEmail.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text,
} from "@react-email/components";
import { EmailLayout } from "@repo/email/components";

interface CustomEmailProps {
  title: string;
  message: string;
}

export function CustomEmail({ title, message }: CustomEmailProps) {
  return (
    // highlight-start
    <EmailLayout preview={title}>
      <Heading>{title}</Heading>
      <Text>{message}</Text>
    </EmailLayout>
    // highlight-end
  );
}

Register Template

import { registerTemplate } from "@repo/email";
import { CustomEmail } from "./templates/CustomEmail";

// highlight-next-line
registerTemplate("custom", CustomEmail);

// Use it
await sendEmail({
  to: "user@example.com",
  subject: "Custom Email",
  template: "custom",
  data: {
    title: "Hello!",
    message: "This is a custom email."
  }
});

Batch Sending

import { sendBatch } from "@repo/email";

// highlight-start
await sendBatch([
  {
    to: "user1@example.com",
    subject: "Newsletter",
    template: "newsletter",
    data: { name: "User 1" }
  },
  {
    to: "user2@example.com",
    subject: "Newsletter",
    template: "newsletter",
    data: { name: "User 2" }
  }
]);
// highlight-end

Attachments

import { sendEmail } from "@repo/email";

await sendEmail({
  to: "user@example.com",
  subject: "Your Report",
  template: "report",
  // highlight-start
  attachments: [
    {
      filename: "report.pdf",
      content: pdfBuffer
    },
    {
      filename: "data.csv",
      path: "/path/to/data.csv"
    }
  ]
  // highlight-end
});

Email Components

Button

import { EmailButton } from "@repo/email/components";

// highlight-next-line
<EmailButton href="https://example.com/action">
  Click Here
</EmailButton>

Header/Footer

import { EmailHeader, EmailFooter } from "@repo/email/components";

<EmailHeader logo="/logo.png" />
<EmailFooter
  company="Acme Inc"
  address="123 Main St"
  unsubscribeLink="/unsubscribe"
/>

Testing

Preview Mode

# Start email preview server
pnpm --filter email dev

Send Test Email

Development Only

Test emails only work in development mode to prevent accidental sends.

import { sendTestEmail } from "@repo/email";

// highlight-start
// Only works in development
await sendTestEmail({
  to: "dev@example.com",
  template: "welcome",
  data: { name: "Test User" }
});
// highlight-end

Environment Variables

Required for Production

RESEND_API_KEY must be set in production. Emails will fail silently without it.

# Resend
RESEND_API_KEY="re_..."
EMAIL_FROM="noreply@yourdomain.com"

# Optional
EMAIL_REPLY_TO="support@yourdomain.com"

@repo/auth - Authentication (uses email for magic links)
email app - Email template preview server

@repo/email

On this page