Email Templates

BunShip Pro includes 13 pre-built email templates using React Email. They’re fully styled, responsive, and ready to customize.

Included Templates

All templates live in packages/emails/src/templates/:

Template	File	When It’s Sent
Welcome	`welcome.tsx`	After a new user registers
Verify Email	`verify-email.tsx`	When email verification is required
Reset Password	`reset-password.tsx`	When a user requests a password reset
Password Changed	`password-changed.tsx`	After a successful password change
Login Alert	`login-alert.tsx`	When a login from a new device is detected
Team Invite	`team-invite.tsx`	When a user is invited to an organization
Invoice	`invoice.tsx`	After a successful payment
Payment Failed	`payment-failed.tsx`	When a payment fails
Subscription Canceled	`subscription-canceled.tsx`	When a subscription is canceled
Trial Ending	`trial-ending.tsx`	Before a trial period expires
Newsletter	`newsletter.tsx`	For newsletter campaigns
Product Update	`product-update.tsx`	For product announcement emails

All templates use a shared layout component at packages/emails/src/components/Layout.tsx that provides consistent header, footer, and styling.

Previewing Templates

React Email has a built-in preview server:

cd packages/emails
bun run dev

This opens a browser where you can see every template rendered with sample data. You can also preview templates from the admin panel at /admin/email-templates.

Editing Templates

Each template is a React component. Open the file and change the text, colors, or layout. For example, to update the welcome email subject line and body:

// packages/emails/src/templates/welcome.tsx
export default function WelcomeEmail({ name }: { name: string }) {
  return (
    <Layout>
      <Heading>Welcome aboard, {name}</Heading>
      <Text>Your account is ready. Here's how to get started...</Text>
      {/* Edit content here */}
    </Layout>
  );
}

Templates use React Email components (<Heading>, <Text>, <Button>, <Section>, etc.) for cross-client email compatibility.

Changing Branding

The shared layout in packages/emails/src/components/Layout.tsx controls:

Logo image
Header background color
Footer text and links
Font choices

Edit this file to change the branding across all emails at once.

Configuring the Email Provider

BunShip Pro supports three email providers, configured via EMAIL_PROVIDER in .env:

Provider	Value	Notes
Resend	`resend`	Default. Set `RESEND_API_KEY`.
SMTP	`smtp`	Works with Gmail, SendGrid, Mailgun, Postmark, or any SMTP server.
Console	`console`	Logs emails to the terminal. Used when no API key is set.

Resend Setup

RESEND_API_KEY=re_xxx
RESEND_FROM_EMAIL="YourApp <hello@yourdomain.com>"

SMTP Setup

EMAIL_PROVIDER=smtp
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
SMTP_USER=your-email@gmail.com
SMTP_PASS=your-app-password

Adding New Templates

Create a new file in packages/emails/src/templates/:

// packages/emails/src/templates/account-locked.tsx
import { Layout } from "../components/Layout";
import { Heading, Text, Button } from "@react-email/components";

interface AccountLockedEmailProps {
  name: string;
  unlockUrl: string;
}

export default function AccountLockedEmail({ name, unlockUrl }: AccountLockedEmailProps) {
  return (
    <Layout>
      <Heading>Account Locked</Heading>
      <Text>Hi {name}, your account has been locked due to too many login attempts.</Text>
      <Button href={unlockUrl}>Unlock Account</Button>
    </Layout>
  );
}

Add the template to the API’s email service to trigger sending from your backend logic
The template will automatically appear in the React Email preview server

Next Steps

Theming & Branding — Change the app’s colors and fonts to match your email branding
Configuration — Full environment variable reference

​Email Templates

​Included Templates

​Previewing Templates

​Editing Templates

​Changing Branding

​Configuring the Email Provider

​Resend Setup

​SMTP Setup

​Adding New Templates

​Next Steps