Email Package

The @yeetcode/email package (packages/email/) contains transactional email templates built with React Email. Templates are React components styled with Tailwind CSS that compile to HTML for sending via email providers.

Structure

packages/email/
├── emails/
│   ├── welcome.tsx      # Welcome email template
│   └── index.ts         # Exports all templates + render utility
├── components/
│   └── logo.tsx         # Reusable logo component
├── package.json
└── tsconfig.json

Available Templates

WelcomeEmail

A welcome email sent to new users after signup.

import { WelcomeEmail } from "@yeetcode/email";

<WelcomeEmail userName="Jason" />

Props:

Prop	Type	Description
`userName`	`string`	User's name for personalization

Shared Components

Logo

A reusable logo image component:

import { Logo } from "./components/logo";

<Logo baseUrl="https://your-domain.com" />

Rendering Emails

The package re-exports render from @react-email/render for converting React components to HTML:

import { WelcomeEmail, render } from "@yeetcode/email";

const html = await render(<WelcomeEmail userName="Jason" />);
// Send `html` via your email provider (Resend, etc.)

Development

Preview email templates in the browser:

cd packages/email
bun run dev    # Opens preview at localhost:3003

The React Email preview server gives you a live-reloading visual preview of every template.

Commands

bun run dev          # Preview at localhost:3003
bun run build        # Build email templates
bun run lint         # Lint with Biome
bun run format       # Format with Biome
bun run typecheck    # Type-check with tsc

Adding New Templates

Create a new .tsx file in emails/
Use React Email components (@react-email/components) for layout
Wrap content in <Tailwind> for styling
Export from emails/index.ts

// emails/invoice.tsx
import { Html, Preview, Tailwind, Body, Container, Heading } from "@react-email/components";

export default function InvoiceEmail({ amount }: { amount: string }) {
  return (
    <Html>
      <Preview>Your invoice for {amount}</Preview>
      <Tailwind>
        <Body>
          <Container>
            <Heading>Invoice: {amount}</Heading>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

Then export it:

// emails/index.ts
export { default as WelcomeEmail } from "./welcome";
export { default as InvoiceEmail } from "./invoice";
export { render } from "@react-email/render";

Email Package

On this page