Email Templates

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

Email templates are a great way to send beautiful and consistent emails to your users. In the Next.js 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 }); }

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS