Setting up Email Templates using React Email

During this episode, we create an email template using React Email.

We will talk through setting up React Email and building the email template from a figma design. We also use Tailwind for styling as it has support out of the box in React Email.

This project was set up using the T3 stack and Nextjs

React Email Website -

import * as React from 'react' import { Body, Button, Container, Heading, Html, Img, Link, Section, Tailwind, Text, } from '@react-email/components' import type { Project } from '@prisma/client' const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : 'http://localhost:3001' const defaultProject = { title: '2023 Ford Ranger Raptor Next Gen', } type WeeklyDigestEmailProps = { daysSinceCreation: number, generationDate: string, project: Project, projectImageUrl: string, newLikeCount: number, newViewCount: number, totalViewCount: number, totalLikeCount: number, similarNewProjectsCount: number, userEmail: string, } const WeeklyDigestEmail = (props: WeeklyDigestEmailProps) => { const { daysSinceCreation = 124, generationDate = '12th May 2023', project = defaultProject, projectImageUrl = ',h-200,w-200/images/7d150f97-28dd-44d0-9854-7ba4af307316.png', newLikeCount = 4, newViewCount = 46, totalViewCount = 1253, totalLikeCount = 23, similarNewProjectsCount = 4, userEmail = '', } = props return ( <Html> <Tailwind> <Body className="bg-white my-auto mx-auto font-sans"> <Container className="border border-solid border-[#eaeaea] rounded-xl mt-8 mx-auto p-6 pb-10 w-[465px]"> <Section className="mt-[16px]"> <Img src={`${baseUrl}/logo@2x.png`} width="90" height="40" alt="MY4X4" className="my-0 mx-auto" /> </Section> <Section className="mt-8"> <Text className="mb-0 text-gray-400">{generationDate}</Text> <Heading className="mt-0">Weekly Update</Heading> </Section> <Section className="mt-0"> <Img src={projectImageUrl} width="100" height="100" alt="MY4X4" className="rounded-full mt-4" /> <Heading className="text-[16px]"> {project.title} </Heading> <Text className="flex items-center border rounded border-solid border-[#eaeaea] p-2 mb-0 mt-4"> <Img className="mr-2" height="14" width="16" alt="Heart" src={`${baseUrl}/heart.png`} /> +{newLikeCount} Likes </Text> <Text className="flex items-center border rounded border-solid border-[#eaeaea] p-2 mt-2"> <Img className="mr-2" height="14" width="18" alt="Eye" src={`${baseUrl}/eye.png`} /> +{newViewCount} Views </Text> </Section> <Section className="mt-0"> <Text>Your build has been on the site for {daysSinceCreation} days.</Text> <Text>In that time you have received a total of {totalViewCount} views and {totalLikeCount} likes.</Text> <Text> In the last week there have been {similarNewProjectsCount} new builds matching your make & model uploaded. </Text> <Button className="bg-[#000000] rounded text-white text-[16px] mt-4 py-4 px-8" href="/"> View New Builds </Button> </Section> </Container> <Container className="w-[465px] mb-8"> <Text className="text-[12px] leading-snug"> This message was sent to {userEmail}. If you don't want to receive these emails from MY4X4 in the future, you can edit your profile or <Link href={`/unsubscribe?email=${userEmail}&type=weekly_digest`}>unsubscribe</Link>. </Text> </Container> </Body> </Tailwind> </Html> ) } export default WeeklyDigestEmail
View More Posts

Portfolio built using the open source project by

Ken Greeff

Create your own Next.js Portfolio with Contentful CMS by forking this repo onGitHub












2024 Greeff Consulting Pty Ltd