// 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 SubscriptionUpdateProps { companyName: string; url: string; userName: string; planName: string; nextBillingDate: string; } export const SubscriptionUpdate = ({ companyName, url, userName, planName, nextBillingDate, }: SubscriptionUpdateProps) => { return ( Your {planName} plan with {companyName} renewed

Plan renewed Hi {userName}, your subscription has been renewed. 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.

{/* 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.

); }; SubscriptionUpdate.PreviewProps = { companyName: 'Dither', url: 'https://example.com/', userName: 'Name Surname', planName: 'Pro', nextBillingDate: 'Jun 15, 2026', } satisfies SubscriptionUpdateProps; export default SubscriptionUpdate;