// Get the full source code, including the theme and Tailwind config: // https://github.com/resend/react-email/tree/canary/apps/demo/emails import { Body, Button, Column, Container, Head, Html, Img, Link, Preview, Row, Section, Tailwind, Text, } from 'react-email'; import { DitherFonts } from './dither-fonts'; import { ditherTailwindConfig } from './theme'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; interface SubscriptionConfirmationProps { companyName: string; url: string; planName: string; userName: string; nextBillingDate: string; } export const SubscriptionConfirmation = ({ companyName, url, planName, userName, nextBillingDate, }: SubscriptionConfirmationProps) => { return ( You're on {planName} with {companyName}

welcome to {planName} Thanks for starting your {planName} subscription, {userName}. Your payment method has been charged. The next charge will be on{' '} {nextBillingDate}. You can modify your payment method or cancel your subscription anytime by visiting the {companyName}{' '} billing settings {' '} page.

Get started

Set up your workspace Complete the basics to get the most out of your account. Complete Setup

Invite your team Collaboration works best when everyone's in. Invite Teammates

Need help? Find guides, tips, and best practices anytime, visit our{' '} Help Center .

{/* Footer */}

{companyName} helps teams cut through noise—clear priorities, fewer tabs, and less busywork from idea to shipped work.

123 Market Street, Floor 1
Tech City, CA, 94102 Unsubscribe {' '} from {companyName} marketing emails.

); }; SubscriptionConfirmation.PreviewProps = { companyName: 'Dither', url: 'https://example.com/', planName: 'Pro', userName: 'Alex', nextBillingDate: 'April 22, 2026', } satisfies SubscriptionConfirmationProps; export default SubscriptionConfirmation;