> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bunship.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Email Templates

> Edit, preview, and add email templates in BunShip Pro.

# Email Templates

BunShip Pro includes 13 pre-built email templates using [React Email](https://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:

```bash theme={null}
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:

```tsx theme={null}
// 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

```bash theme={null}
RESEND_API_KEY=re_xxx
RESEND_FROM_EMAIL="YourApp <hello@yourdomain.com>"
```

### SMTP Setup

```bash theme={null}
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/`:

```tsx theme={null}
// 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>
  );
}
```

2. Add the template to the API's email service to trigger sending from your backend logic

3. The template will automatically appear in the React Email preview server

## Next Steps

* [Theming & Branding](/pro/theming) — Change the app's colors and fonts to match your email branding
* [Configuration](/pro/configuration) — Full environment variable reference