Loading...
React Email Logo

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.
Explore components

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/components';


interface WelcomeEmailProps {
  username?: string;
  company?: string;
}


const WelcomeEmail = ({
  username = 'Nicole',
  company = 'Helix',
}: WelcomeEmailProps) => {
  const previewText = `Welcome to ${company}, ${username}!`;


  return (
    <Html>
      <Head />
      <Preview>{previewText}</Preview>
      <Tailwind>
        <Body className="bg-black m-auto font-sans">
          <Container className="mb-10 mx-auto p-5 max-w-[465px]">
            <Section className="mt-10">
              <Img
                src={`https://example.com/brand/example-logo.png`}
                width="60"
                height="60"
                alt="Logo Example"
                className="my-0 mx-auto"
              />
            </Section>
            <Heading className="text-2xl text-white font-normal text-center p-0 my-8 mx-0">
              Welcome to <strong>{company}</strong>, {username}!
            </Heading>
            <Text className="text-start text-sm text-white">
              Hello {username},
            </Text>
            <Text className="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 questions
              or need assistance, feel free to reach out.
            </Text>
            <Section className="text-center mt-[32px] mb-[32px]">
              <Button
                className="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>
            <Text className="text-start text-sm text-white">
              Cheers,
              <br />
              The {company} Team
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};


export default WelcomeEmail;

Building email UI is annoyingly difficult, especially trying to make things look correct in all clients. React Email makes this way easier.

Lee Robinson's profile image
Lee RobinsonVP of DX, Cursor

Ready-to-use Components

Copy and paste. Add your own data. Send.
View all components

Gallery

4 components

Ecommerce

5 components

Articles

6 components

Buttons

3 components

Headers

3 components

Footers

2 components

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
Linter

Integrate with any service

Convert your React code into HTML or Plain Text and send it with any email service provider.