Free React Email Order Confirmation Template

import * as React from 'react';

import {
  Band,
  Brand,
  Columns,
  Display,
  EmailLayout,
  Eyebrow,
  Figure,
  LineItem,
  LineItems,
  OutlineButton,
  Prose,
  Rule,
  TotalRow,
  Totals,
  colors,
  tnum,
} from './components';

export interface OrderConfirmationEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  eyebrow?: string;
  headline?: React.ReactNode;
  intro?: React.ReactNode;
  items?: LineItem[];
  totals?: TotalRow[];
  shipping?: {
    /** Heading over the address. */
    eyebrow: string;
    /** One line per line of the address. */
    address: string[];
  };
  delivery?: {
    eyebrow: string;
    /** The window, set large in the heading face. */
    window: string;
    cta: { label: string; href: string };
  };
  /** The closing offer to change something before it ships. */
  amend?: {
    body: string;
    cta: { label: string; href: string };
  };
}

/**
 * Order confirmation — the receipt. Everything the customer needs to check is
 * above the fold: what they bought, what they paid, where it is going and
 * when it lands.
 */
export function OrderConfirmationEmail({
  brand,
  subject = 'Order DC-48210 confirmed',
  preview = 'Roasting Monday. Shipping Tuesday. Nothing required from you.',
  eyebrow = 'Order confirmed · 23 August 2026',
  headline = (
    <>
      Thank you.
      <br />
      It is happening.
    </>
  ),
  intro = (
    <>
      Order <span style={{ ...tnum, color: colors.ink }}>DC-48210</span> is in
      the queue. We roast Monday morning and it leaves the building Tuesday.
    </>
  ),
  items = [
    {
      image: {
        src: 'https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=168&h=168&q=75&auto=format&fit=crop',
        alt: 'Solstice',
      },
      name: 'Solstice',
      meta: '12 oz · Whole bean',
      quantity: 1,
      price: '$21.00',
    },
    {
      image: {
        src: 'https://images.unsplash.com/photo-1524350876685-274059332603?w=168&h=168&q=75&auto=format&fit=crop',
        alt: 'Ethiopia Guji',
      },
      name: 'Ethiopia Guji',
      meta: '12 oz · Whole bean',
      quantity: 1,
      price: '$26.00',
    },
    {
      image: {
        src: 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=168&h=168&q=75&auto=format&fit=crop',
        alt: 'Wildflower Honey',
      },
      name: 'Wildflower Honey',
      meta: '340g jar',
      quantity: 1,
      price: '$12.00',
    },
  ],
  totals = [
    { label: 'Subtotal', value: '$59.00' },
    { label: 'Shipping (Standard, 2–4 days)', value: '$0.00' },
    { label: 'Tax', value: '$5.24' },
    { label: 'Paid · Visa ending 4417', value: '$64.24', emphasis: true },
  ],
  shipping = {
    eyebrow: 'Shipping to',
    address: [
      'Marguerite Oyelaran',
      '44 Provost Street, Apt 3R',
      'Brooklyn, NY 11222',
      'United States',
    ],
  },
  delivery = {
    eyebrow: 'Estimated delivery',
    window: 'Thu 27 – Sat 29 Aug',
    cta: { label: 'Track this order', href: '#' },
  },
  amend = {
    body: 'Need to change the grind, the address, or your mind? Reply within 24 hours and we can still catch it.',
    cta: { label: 'Manage order', href: '#' },
  },
}: OrderConfirmationEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      <Band padding="36px 40px 28px" align="center">
        <Eyebrow>{eyebrow}</Eyebrow>
        <Display size={40}>{headline}</Display>
        <Prose margin="16px 0 0">{intro}</Prose>
      </Band>

      <Band padding="0 40px">
        <Rule />
      </Band>

      <Band padding="6px 40px 30px">
        <LineItems items={items} />
        <Totals rows={totals} />
      </Band>

      <Band tone="paper" padding="30px 40px">
        <Columns
          left={
            <>
              <Eyebrow>{shipping.eyebrow}</Eyebrow>
              <Prose
                size={14}
                lineHeight={1.7}
                margin="0"
                color={colors.ink}
                figures
              >
                {shipping.address.map((line, index) => (
                  <React.Fragment key={index}>
                    {index > 0 ? <br /> : null}
                    {line}
                  </React.Fragment>
                ))}
              </Prose>
            </>
          }
          right={
            <>
              <Eyebrow>{delivery.eyebrow}</Eyebrow>
              <Figure size={26} letterSpacing="normal" margin="0 0 12px">
                {delivery.window}
              </Figure>
              <OutlineButton href={delivery.cta.href}>
                {delivery.cta.label}
              </OutlineButton>
            </>
          }
        />
      </Band>

      <Band padding="30px 40px 36px" align="center">
        <Prose size={14} margin="0 0 16px">
          {amend.body}
        </Prose>
        <OutlineButton href={amend.cta.href} align="center">
          {amend.cta.label}
        </OutlineButton>
      </Band>
    </EmailLayout>
  );
}

export default OrderConfirmationEmail;