transactional

Shipping Notification Template

Notify customers when their order has shipped

Preview

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

type ShippingNotificationProps = {
  name: string;
  orderNumber: string;
  trackingNumber: string;
  trackingUrl: string;
  carrier: string;
};

export function ShippingNotificationEmail({
  name,
  orderNumber,
  trackingNumber,
  trackingUrl,
  carrier,
}: ShippingNotificationProps) {
  return (
    <Html>
      <Head />
      <Preview>Your order #{orderNumber} has shipped</Preview>
      <Body style={main}>
        <Container style={container}>
          <Section style={iconContainer}>
            <span style={icon}>📦</span>
          </Section>
          <Heading style={h1}>Your order is on its way!</Heading>
          <Text style={text}>Hi {name},</Text>
          <Text style={text}>
            Great news! Your order #{orderNumber} has shipped and is on its way
            to you.
          </Text>
          <Section style={detailsBox}>
            <Text style={detailRow}>
              <span style={detailLabel}>Carrier:</span>
              <span style={detailValue}> {carrier}</span>
            </Text>
            <Text style={detailRow}>
              <span style={detailLabel}>Tracking number:</span>
              <span style={detailValue}> {trackingNumber}</span>
            </Text>
          </Section>
          <Section style={buttonContainer}>
            <Button style={button} href={trackingUrl}>
              Track Package
            </Button>
          </Section>
        </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 detailsBox = {
  backgroundColor: "#f9fafb",
  borderRadius: "8px",
  padding: "20px",
  margin: "20px 0",
};

const detailRow = {
  color: "#374151",
  fontSize: "16px",
  margin: "0 0 8px",
};

const detailLabel = {
  color: "#6b7280",
};

const detailValue = {
  fontWeight: "600",
  color: "#1f2937",
};

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`	Customer's name
`orderNumber`	Order identifier
`trackingNumber`	Carrier tracking number
`trackingUrl`	Link to track shipment
`carrier`	Shipping carrier name

Best Practices

Tracking Information

•Include clickable tracking link (not just number)
•Show carrier name and estimated delivery
•Consider embedding tracking widget if available

Timing

•Send immediately when tracking number is generated
•Consider delivery notification as follow-up
•Send reminder if package appears stuck

Customer Experience

•Include order summary for reference
•Show delivery address for verification
•Provide contact info for delivery issues

Ready to send emails?

Get started with 1,000 free emails per month.

Start for free