transactional

Invoice Template

Send invoices and payment receipts to customers

Preview

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

type InvoiceEmailProps = {
  name: string;
  invoiceNumber: string;
  amount: string;
  dueDate: string;
  invoiceUrl: string;
  companyName: string;
};

export function InvoiceEmail({
  name,
  invoiceNumber,
  amount,
  dueDate,
  invoiceUrl,
  companyName,
}: InvoiceEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Invoice #{invoiceNumber} from {companyName}</Preview>
      <Body style={main}>
        <Container style={container}>
          <Row style={headerRow}>
            <Column>
              <Heading style={h1}>Invoice</Heading>
            </Column>
            <Column style={invoiceNumberCol}>
              <Text style={invoiceNumberText}>#{invoiceNumber}</Text>
            </Column>
          </Row>
          <Text style={text}>Hi {name},</Text>
          <Text style={text}>Here's your invoice from {companyName}.</Text>
          <Section style={detailsBox}>
            <Row>
              <Column>
                <Text style={detailLabel}>Amount due</Text>
              </Column>
              <Column style={detailValueCol}>
                <Text style={amountText}>{amount}</Text>
              </Column>
            </Row>
            <Row>
              <Column>
                <Text style={detailLabel}>Due date</Text>
              </Column>
              <Column style={detailValueCol}>
                <Text style={detailValue}>{dueDate}</Text>
              </Column>
            </Row>
          </Section>
          <Section style={buttonContainer}>
            <Button style={button} href={invoiceUrl}>
              View Invoice
            </Button>
          </Section>
          <Text style={muted}>
            Questions about this invoice? 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 headerRow = {
  marginBottom: "20px",
};

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

const invoiceNumberCol = {
  textAlign: "right" as const,
};

const invoiceNumberText = {
  color: "#6b7280",
  fontSize: "16px",
  margin: "0",
};

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

const detailsBox = {
  backgroundColor: "#f9fafb",
  borderRadius: "8px",
  padding: "20px",
  margin: "20px 0",
};

const detailLabel = {
  color: "#6b7280",
  fontSize: "14px",
  margin: "0 0 8px",
};

const detailValueCol = {
  textAlign: "right" as const,
};

const detailValue = {
  color: "#1f2937",
  fontSize: "16px",
  margin: "0 0 8px",
};

const amountText = {
  color: "#1f2937",
  fontSize: "24px",
  fontWeight: "700",
  margin: "0 0 8px",
};

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

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

const button = {
  backgroundColor: "#059669",
  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
`invoiceNumber`	Unique invoice identifier
`amount`	Total amount due (e.g., '$99.00')
`dueDate`	Payment due date
`invoiceUrl`	Link to view/pay invoice
`companyName`	Your company name

Best Practices

Legal Requirements

•Include your business name, address, and tax ID
•Clearly state payment terms and accepted methods
•Provide itemized breakdown for tax purposes

Payment Experience

•Link directly to a payment page (reduce friction)
•Support multiple payment methods
•Send reminders before and after due date

Record Keeping

•Attach PDF invoice for easy downloading/printing
•Include unique invoice number for reference
•Store sent invoices for accounting compliance

Ready to send emails?

Get started with 1,000 free emails per month.

Start for free