The next generation of writing emails
React Email is a next-generation collection of unstyled components for creating beautiful emails using React, Tailwind, and TypeScript.
Style with any tools
Make your emails look beautiful with Tailwind or inline CSS.
email-template.tsx
import{Body,Button,Container,Head,Heading,Html,Img,Preview,Section,Tailwind,Text}from'react-email';interfaceWelcomeEmailProps{username?:string;company?:string;}constWelcomeEmail=({username ='Nicole',company ='Helix',}:WelcomeEmailProps)=>{const previewText =`Welcome to ${company}, ${username}!`;return(<Html><Head/><Preview>{previewText}</Preview><Tailwind><BodyclassName="bg-black m-auto font-sans"><ContainerclassName="mb-10 mx-auto p-5 max-w-[465px]"><SectionclassName="mt-10"><Imgsrc={`https://example.com/brand/example-logo.png`}width="60"height="60"alt="Logo Example"className="my-0 mx-auto"/></Section><HeadingclassName="text-2xl text-white font-normal text-center p-0 my-8 mx-0">Welcome to <strong>{company}</strong>, {username}!</Heading><TextclassName="text-start text-sm text-white">Hello {username},</Text><TextclassName="text-start text-sm text-white leading-relaxed">We're excited to have you onboard at <strong>{company}</strong>.We hope you enjoy your journey with us. If you have any questionsor need assistance, feel free to reach out.</Text><SectionclassName="text-center mt-[32px] mb-[32px]"><ButtonclassName="py-2.5 px-5 bg-white rounded-md text-black text-sm font-semibold no-underline text-center"href={`https://example.com/get-started`}>Get Started</Button></Section><TextclassName="text-start text-sm text-white">Cheers,<br/>The {company} Team</Text></Container></Body></Tailwind></Html>);};exportdefaultWelcomeEmail;
Building email UI is annoyingly difficult, especially trying to make things look correct in all clients. React Email makes this way easier.
Lee RobinsonVP of DX, Cursor
Ready-to-use Components
Copy and paste. Add your own data. Send.
Battle-tested Primitives
All components are tested on the most popular email clients.Gmail
Apple Mail
Outlook
Yahoo! Mail
HEY
Superhuman
Built-in deliverability tools
Before you hit “send”, check how your email is doing with a set of tools to help you build better emails.
fetch attempt
There was a redirect, the content may have been movedhttps://amazon.com
fetch attempt
There was a redirect, the content may have been movedhttps://amazon.com
Add an email editor
to your product
Let your users write beautiful emails without leaving your product.Integrate with any service
Convert your React code into HTML or Plain Text and send it with any email service provider.