14 SaaS Product Emails — Sonar / Billing
Free React Email Receipt Template
The amount as the headline, the line items under it, and the PDF one tap away. Customize it in the free React Email playground and export production-ready TSX — no sign-up.
- Sample subject
- Receipt for August — $99.00
- Format
- React Email TSX · Free
Template details
What this receipt template includes
The amount as the headline, the line items under it, and the PDF one tap away. Customize it in the free React Email playground and export production-ready TSX — no sign-up. The source is standard TypeScript and React Email, so it can be sent with Resend or rendered to HTML for another email provider.
- Production-ready billing email structure
- Editable in the visual React Email playground
- Free TSX source for personal and commercial projects
How to use it
- 1. Customize the copy and styles in the playground above.
- 2. Export or copy the typed TSX source.
- 3. Pass dynamic props and send it from a server route with your email provider.
React Email TSX source
Free for personal, commercial, and client projects under the site license.
View full source code
import * as React from 'react';
import {
Band,
Brand,
CTAButton,
DataRow,
DataTable,
Display,
EmailLayout,
InlineLink,
Kicker,
Lead,
Note,
} from './components';
export interface ReceiptEmailProps {
brand?: Brand;
subject?: string;
preview?: string;
label?: string;
kicker?: string;
/** The amount, set as the headline. */
amount?: string;
lead?: React.ReactNode;
lines?: DataRow[];
cta?: { label: string; href: string };
note?: React.ReactNode;
}
/**
* Receipt — the amount is the headline, because that is the only thing anyone
* opens a receipt to check.
*/
export function ReceiptEmail({
brand,
subject = 'Receipt for August — $99.00',
preview = 'Invoice INV-2026-0842 is paid. PDF attached inside.',
label = 'Receipt',
kicker = 'Paid · Aug 1, 2026',
amount = '$99.00',
lead = (
<>
Thanks, Northwind. Invoice <strong>INV-2026-0842</strong> was charged to
Visa •• 4429.
</>
),
lines = [
{ label: 'Sonar Pro — monthly (9 seats)', value: '$99.00' },
{ label: 'Event overage (0.4M @ $0)', value: '$0.00' },
{ label: 'VAT (PT, 0% reverse charge)', value: '$0.00' },
{ label: 'Total charged', value: '$99.00', emphasis: true },
],
cta = {
label: 'Download PDF invoice',
href: 'https://sonar.example.com/invoices/0842.pdf',
},
note = (
<>
{'Next charge: Sep 1, 2026. Manage seats or switch to annual in '}
<InlineLink href="https://sonar.example.com/billing">
billing settings
</InlineLink>
{'.'}
</>
),
}: ReceiptEmailProps = {}) {
return (
<EmailLayout
brand={brand}
subject={subject}
preview={preview}
label={label}
accent="mint"
>
<Band padding="46px 32px 0 32px">
<Kicker>{kicker}</Kicker>
<Display size={64}>{amount}</Display>
<Lead size={16}>{lead}</Lead>
</Band>
<Band padding="22px 32px 40px 32px">
<DataTable rows={lines} />
<CTAButton href={cta.href} background="ink" color="mint">
{cta.label}
</CTAButton>
<Note>{note}</Note>
</Band>
</EmailLayout>
);
}
export default ReceiptEmail;
Related templates
More from 14 SaaS Product Emails — Sonar.
