#729 feat(email): Add React Email package with StandardLayout

Summary

Add complete React Email package for transactional emails with StandardLayout, reusable components, and welcome template example.

What's Included

Package Structure

• StandardLayout: Base layout with header, footer, and consistent styling
• Components: Reusable Button and Logo components
• Welcome Email: Example template demonstrating the pattern
• Email Assets: Logos and social icons (PNG, hosted on marketing site)

Technical Implementation

• React Email 5.0.7 (compatible with Bun)
• Tailwind CSS via @react-email/tailwind
• TypeScript config matches UI package (react-jsx transform, no React imports)
• Environment variables managed with t3-env-core
• Colors converted from app theme (OKLCH → hex for email compatibility)
• Proper folder structure with co-located components

Assets

• Header logo: Desktop cube icon (240x240)
• Footer logo: Pixelated SUPERSET text (512x83)
• Social icons: X, Instagram, LinkedIn (48x48, darkened to neutral-950)

Environment Setup

Loads NEXT_PUBLIC_MARKETING_URL from root .env:

• Local dev: http://localhost:3002 (marketing app)
• Production: https://superset.sh

Usage

import { WelcomeEmail } from "@superset/email/emails/welcome";
import { render } from "@react-email/render";

const html = render(<WelcomeEmail userName="Satya" />);
await resend.emails.send({
  from: "noreply@superset.sh",
  to: user.email,
  subject: "Welcome to Superset!",
  html,
});

Preview

Run bun dev in packages/email to preview templates at http://localhost:3000

Test Plan

• Lint and format pass
• TypeScript type checking passes
• Dev server runs successfully
• Images load correctly with environment variable
• Welcome email renders properly

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added a new email package with standardized templates, reusable UI components (layout, logo, button, footer) and a welcome onboarding email.
• Styling
  • Consistent email styling and Tailwind-driven design tokens for brand-consistent layouts.
• Documentation
  • New README with setup, template authoring, previewing, and testing guidance.

_{✏️ Tip: You can customize this high-level summary in your review settings.}