Email Templates in the React Router Supabase Starter Kit

Learn how to write email templates in the React Router Supabase Starter Kit with React.Email

Email templates are a great way to send beautiful and consistent emails to your users. In the React Router Supabase Starter Kit, we use React.Email to create email templates.

Templates are stored in the package @kit/email-templates which you can find in the packages/email-templates directory.

For example, here is our template for accepting an invitation to join a team:

import {
  Body,
  Button,
  Column,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Row,
  Section,
  Tailwind,
  Text,
  render,
} from '@react-email/components';
interface Props {
  teamName: string;
  teamLogo?: string;
  inviter: string | undefined;
  invitedUserEmail: string;
  link: string;
  productName: string;
}
export function renderInviteEmail(props: Props) {
  const previewText = `Join ${props.invitedUserEmail} on ${props.productName}`;
  return render(
    <Html>
      <Head />
      <Preview>{previewText}</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-gray-50 font-sans">
          <Container className="mx-auto my-[40px] w-[465px] rounded-lg border border-solid border-[#eaeaea] bg-white p-[20px]">
            <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">
              Join <strong>{props.teamName}</strong> on{' '}
              <strong>{props.productName}</strong>
            </Heading>
            <Text className="text-[14px] leading-[24px] text-black">
              Hello {props.invitedUserEmail},
            </Text>
            <Text className="text-[14px] leading-[24px] text-black">
              <strong>{props.inviter}</strong> has invited you to the{' '}
              <strong>{props.teamName}</strong> team on{' '}
              <strong>{props.productName}</strong>.
            </Text>
            {props.teamLogo && (
              <Section>
                <Row>
                  <Column align="center">
                    <Img
                      className="rounded-full"
                      src={props.teamLogo}
                      width="64"
                      height="64"
                    />
                  </Column>
                </Row>
              </Section>
            )}
            <Section className="mb-[32px] mt-[32px] text-center">
              <Button
                className="rounded bg-[#000000] px-[20px] py-[12px] text-center text-[12px] font-semibold text-white no-underline"
                href={props.link}
              >
                Join {props.teamName}
              </Button>
            </Section>
            <Text className="text-[14px] leading-[24px] text-black">
              or copy and paste this URL into your browser:{' '}
              <Link href={props.link} className="text-blue-600 no-underline">
                {props.link}
              </Link>
            </Text>
            <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
            <Text className="text-[12px] leading-[24px] text-[#666666]">
              This invitation was intended for{' '}
              <span className="text-black">{props.invitedUserEmail}</span>.
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>,
  );
}

If you want to create your own email templates, you can create a new file in the packages/email-templates/src directory and export a function that returns the email template.

Then, import the function and transform the template into HTML that you can send using the mailer.

import { getMailer } from '@kit/mailers';
import { renderInviteEmail } from '@kit/email-templates';
async function sendEmail() {
  const emailHtml = renderInviteEmail({
    teamName: 'My Team',
    teamLogo: 'https://example.com/logo.png',
    inviter: 'John Doe',
    invitedUserEmail: ''
  });
  const mailer = await getMailer();
  return mailer.sendEmail({
    to: '',
    from: '',
    subject: 'Join the team!',
    html: emailHtml
  });
}

import { Body, Button, Column, Container, Head, Heading, Hr, Html, Img, Link, Preview, Row, Section, Tailwind, Text, render, } from '@react-email/components'; interface Props { teamName: string; teamLogo?: string; inviter: string | undefined; invitedUserEmail: string; link: string; productName: string; } export function renderInviteEmail(props: Props) { const previewText = `Join ${props.invitedUserEmail} on ${props.productName}`; return render( <Html> <Head /> <Preview>{previewText}</Preview> <Tailwind> <Body className="mx-auto my-auto bg-gray-50 font-sans"> <Container className="mx-auto my-[40px] w-[465px] rounded-lg border border-solid border-[#eaeaea] bg-white p-[20px]"> <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black"> Join <strong>{props.teamName}</strong> on{' '} <strong>{props.productName}</strong> </Heading> <Text className="text-[14px] leading-[24px] text-black"> Hello {props.invitedUserEmail}, </Text> <Text className="text-[14px] leading-[24px] text-black"> <strong>{props.inviter}</strong> has invited you to the{' '} <strong>{props.teamName}</strong> team on{' '} <strong>{props.productName}</strong>. </Text> {props.teamLogo && ( <Section> <Row> <Column align="center"> <Img className="rounded-full" src={props.teamLogo} width="64" height="64" /> </Column> </Row> </Section> )} <Section className="mb-[32px] mt-[32px] text-center"> <Button className="rounded bg-[#000000] px-[20px] py-[12px] text-center text-[12px] font-semibold text-white no-underline" href={props.link} > Join {props.teamName} </Button> </Section> <Text className="text-[14px] leading-[24px] text-black"> or copy and paste this URL into your browser:{' '} <Link href={props.link} className="text-blue-600 no-underline"> {props.link} </Link> </Text> <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" /> <Text className="text-[12px] leading-[24px] text-[#666666]"> This invitation was intended for{' '} <span className="text-black">{props.invitedUserEmail}</span>. </Text> </Container> </Body> </Tailwind> </Html>, ); }

import { getMailer } from '@kit/mailers'; import { renderInviteEmail } from '@kit/email-templates'; async function sendEmail() { const emailHtml = renderInviteEmail({ teamName: 'My Team', teamLogo: 'https://example.com/logo.png', inviter: 'John Doe', invitedUserEmail: '' }); const mailer = await getMailer(); return mailer.sendEmail({ to: '', from: '', subject: 'Join the team!', html: emailHtml }); }