Free transactional email templates

Groundmail/email-templates is a free, MIT-licensed set of 12 production-ready transactional emails. Each one comes as a React Email component, MJML, HTML and plain text, works in light and dark mode, and restyles from a single theme file.

Browse the live preview to see every template in light and dark mode, switch formats, and copy the code.

The templates are provider-neutral: the HTML and text files use plain {{variable}} placeholders, which match the templates API and also work with Handlebars, Mustache and most other engines.

1. Make them yours

git clone https://github.com/Groundmail/email-templates.git
cd email-templates
npm install

Edit theme.ts (product name, logo, address, colors for light and dark mode), then preview with React Email's dev server:

npm run dev

2. Create them in your account

Each template is created (or updated) under an alias that matches its folder name, such as password-reset, and published. Use an API key with the templates:write scope.

export GROUNDMAIL_API_KEY=gm_your_key_here
npm run push -- --all
# or pick some: npm run push -- password-reset receipt

Under the hood this is groundmail templates push, so you can also push a single file yourself:

npx -y --package=groundmail-cli -- groundmail templates push templates/password-reset/password-reset.html \
  --alias password-reset \
  --name "Password reset" \
  --subject "Reset your Acme password" \
  --text templates/password-reset/password-reset.txt \
  --publish

To try one template without cloning, each template's README in the repo has a curl command that creates it from the repo's default theme.

3. Send

Send by alias and pass the variables the template lists:

import { Groundmail } from 'groundmail'

const groundmail = new Groundmail(process.env.GROUNDMAIL_API_KEY!)

await groundmail.emails.send({
  from: 'Acme <noreply@yourdomain.com>',
  to: 'ada@example.com',
  template: {
    id: 'password-reset',
    variables: {
      name: 'Ada',
      reset_url: 'https://yourapp.com/reset?token=…',
      expires_in: '60 minutes',
    },
  },
})

groundmail.emails.send(
    from_="Acme <noreply@yourdomain.com>",
    to="ada@example.com",
    template={"id": "password-reset", "variables": {"name": "Ada", "reset_url": "https://yourapp.com/reset?token=…", "expires_in": "60 minutes"}},
)

Every template folder in the repo lists its variables and has the same send code for Node.js, Python, PHP and cURL.

Or send the React component directly

If you'd rather keep templates in your codebase, copy the React components into your app and pass them with react. See Send React Email.

import PasswordReset from './emails/templates/password-reset/password-reset'

await groundmail.emails.send({
  from: 'Acme <noreply@yourdomain.com>',
  to: 'ada@example.com',
  subject: 'Reset your Acme password',
  react: <PasswordReset name="Ada" resetUrl="https://yourapp.com/reset?token=…" expiresIn="60 minutes" />,
})

Dark mode and client support

The light design is always inline, so clients that strip <style> still show a finished email. Apple Mail, iOS Mail, Outlook for Mac and Outlook.com get the dark palette from theme.ts. Gmail applies its own dark-mode inversion and ignores author dark styles. Outlook for Windows shows square corners. Every template is checked against caniemail data in the repo's CI and stays well under Gmail's 102 KB clipping limit.

Related

• Templates API
• Send React Email
• Password reset email best practices