authentication

Email Verification Template

Verify user email addresses during signup

Preview

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

type EmailVerificationProps = {
  name: string;
  verificationUrl: string;
  companyName: string;
};

export function EmailVerificationEmail({
  name,
  verificationUrl,
  companyName,
}: EmailVerificationProps) {
  return (
    <Html>
      <Head />
      <Preview>Verify your email for {companyName}</Preview>
      <Body style={main}>
        <Container style={container}>
          <Section style={iconContainer}>
            <span style={icon}>✉️</span>
          </Section>
          <Heading style={h1}>Verify your email</Heading>
          <Text style={text}>Hi {name},</Text>
          <Text style={text}>
            Thanks for signing up for {companyName}! Please verify your email
            address by clicking the button below:
          </Text>
          <Section style={buttonContainer}>
            <Button style={button} href={verificationUrl}>
              Verify Email
            </Button>
          </Section>
          <Text style={muted}>
            If you didn't create an account, you can safely ignore 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 iconContainer = {
  textAlign: "center" as const,
  marginBottom: "24px",
};

const icon = {
  fontSize: "48px",
};

const h1 = {
  color: "#1f2937",
  fontSize: "24px",
  fontWeight: "600",
  textAlign: "center" as const,
  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: "#2563eb",
  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
`verificationUrl`	Unique verification link
`companyName`	Your company or product name

Best Practices

Timing

•Send immediately after signup
•Set expiration to 24-48 hours for first-time verification
•Allow users to request a new link easily

User Experience

•Auto-login users after successful verification
•Show clear success/error pages after clicking
•Consider magic link login as an alternative

Deliverability

•Use a subdomain for transactional email (e.g., mail.yourapp.com)
•Monitor bounce rates—high bounces hurt sender reputation
•Implement double opt-in for marketing emails

Ready to send emails?

Get started with 1,000 free emails per month.

Start for free