Overview
Transactional email architecture, React Email templates, and local sandbox testing.
VibeKit provides a typed, responsive transactional email system in packages/mail. Instead of writing fragile raw HTML strings or wrestling with outdated email table layouts, you build modern email templates with React components and send them reliably across any email provider.
Beautiful Transactional Emails with React Email
All email templates live in packages/mail/emails and are built using React Email. You get component-driven composition, type-safe props, and responsive styling that renders consistently across Gmail, Apple Mail, and Outlook:
- Component-Based Styling: Build buttons, containers, headings, and dividers using standard JSX and inline styling utilities.
- Type-Safe Dynamic Data: Every template defines explicit TypeScript interfaces for its data (such as recipient names, invite URLs, or invoice totals), catching missing variables at build time.
- Pre-Built Starter Templates: VibeKit includes ready-to-use templates for email verification, password reset, magic links, team invitations, and waitlist confirmations.
Safe Local Mail Sandbox
Developing transactional emails locally should never accidentally email real users or require real SMTP credentials:
- Terminal Console Trap: When
MOCK_SERVICES=trueis active (the default in local development), outgoing emails are intercepted and logged cleanly in your terminal. - Clickable Auth and Invite Links: Login links, OTP codes, and team invitations print directly to your console, allowing you to test entire onboarding flows offline with zero external dependencies.
- Visual Preview Tooling: Run React Email's visual preview server to inspect and refine your email designs in real time with hot reloading.
Asynchronous and Reliable Delivery
Sending emails during synchronous user requests can slow down response times or fail if a third-party email API experiences a momentary outage. VibeKit protects user experience with smart delivery tiers:
| Mail Type | Delivery Strategy | Reason |
|---|---|---|
| Authentication and OTPs | Synchronous bounded path | Time-sensitive login codes and password resets require immediate delivery. |
| Business Notifications | Durable background jobs | Team invites, billing receipts, and digest summaries are enqueued via OperationalJob to guarantee delivery even if the server restarts. |
Multi-Language Email Templates
Keep your international users informed in their native tongue:
- Localized Subjects and Bodies: Sourced directly from
packages/i18n, your email templates adapt dynamically to the recipient's preferred locale. - Fallback Safety: If a translation string is missing, VibeKit automatically falls back to your default locale without crashing the email dispatch.
Asking Your Agent to Add New Notification Emails
You can instruct your coding agent to add a new transactional email template and dispatch it from your application logic:
Create a new transactional email template for weekly activity summaries in 'packages/mail/emails/WeeklySummary.tsx'.
Include the user's name, active project count, and a direct link to their dashboard.
Register the template in 'packages/mail/templates.ts'.
Create a helper function to send this email via 'sendEmail'.
Verify the template renders correctly in development using the console mail trap.