Skip to main content

​
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/:
TemplateFileWhen It’s Sent
Welcomewelcome.tsxAfter a new user registers
Verify Emailverify-email.tsxWhen email verification is required
Reset Passwordreset-password.tsxWhen a user requests a password reset
Password Changedpassword-changed.tsxAfter a successful password change
Login Alertlogin-alert.tsxWhen a login from a new device is detected
Team Inviteteam-invite.tsxWhen a user is invited to an organization
Invoiceinvoice.tsxAfter a successful payment
Payment Failedpayment-failed.tsxWhen a payment fails
Subscription Canceledsubscription-canceled.tsxWhen a subscription is canceled
Trial Endingtrial-ending.tsxBefore a trial period expires
Newsletternewsletter.tsxFor newsletter campaigns
Product Updateproduct-update.tsxFor 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:
ProviderValueNotes
ResendresendDefault. Set RESEND_API_KEY.
SMTPsmtpWorks with Gmail, SendGrid, Mailgun, Postmark, or any SMTP server.
ConsoleconsoleLogs 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

  1. 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>
  );
}
  1. Add the template to the API’s email service to trigger sending from your backend logic
  2. The template will automatically appear in the React Email preview server

​
Next Steps