engagement

Welcome Email Template

Greet new users and help them get started with your product

Preview

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
} from "@react-email/components";

type WelcomeEmailProps = {
  name: string;
  companyName: string;
  loginUrl: string;
};

export function WelcomeEmail({ name, companyName, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to {companyName}!</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>Welcome to {companyName}!</Heading>
          <Text style={text}>Hi {name},</Text>
          <Text style={text}>
            We're thrilled to have you join us! Your account is all set up and
            ready to go.
          </Text>
          <Text style={text}>Here's what you can do next:</Text>
          <ul>
            <li style={text}>Complete your profile</li>
            <li style={text}>Explore our features</li>
            <li style={text}>Connect with other users</li>
          </ul>
          <Section style={buttonContainer}>
            <Button style={button} href={loginUrl}>
              Get Started
            </Button>
          </Section>
          <Text style={muted}>
            If you have any questions, just reply to this email.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

const main = {
  backgroundColor: "#f6f9fc",
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
};

const container = {
  backgroundColor: "#ffffff",
  margin: "0 auto",
  padding: "40px 20px",
  maxWidth: "480px",
};

const h1 = {
  color: "#1f2937",
  fontSize: "24px",
  fontWeight: "600",
  margin: "0 0 20px",
};

const text = {
  color: "#374151",
  fontSize: "16px",
  lineHeight: "24px",
  margin: "0 0 16px",
};

const muted = {
  color: "#6b7280",
  fontSize: "14px",
  lineHeight: "20px",
};

const buttonContainer = {
  textAlign: "center" as const,
  margin: "32px 0",
};

const button = {
  backgroundColor: "#4f46e5",
  borderRadius: "8px",
  color: "#fff",
  fontSize: "16px",
  fontWeight: "600",
  padding: "12px 24px",
  textDecoration: "none",
};

Install: npm install @react-email/components

Template Variables

Pass these props to your email component:

Variable	Description
`name`	User's first name
`companyName`	Your company or product name
`loginUrl`	URL to your login page

Best Practices

Timing

•Send within 5 minutes of signup for highest engagement
•Use a queue to ensure reliable delivery even during traffic spikes

Content

•Keep it short—welcome emails have 50-60% open rates, don't waste them
•Include one clear CTA (don't overwhelm with options)
•Personalize with the user's name when available

Technical

•Set up email authentication (SPF, DKIM, DMARC) before sending
•Use a recognizable 'from' name (e.g., 'Sarah from Acme')
•Include a plain text version for accessibility

Ready to send emails?

Get started with 1,000 free emails per month.

Start for free