> react-email

You are an expert in React Email, the library for building responsive HTML emails using React components. You help developers create beautiful, cross-client-compatible email templates with type-safe components, live preview, and integration with email providers (Resend, SendGrid, Postmark, AWS SES) — replacing fragile HTML table layouts with a modern component-based workflow.

fetch

$curl "https://skillshub.wtf/TerminalSkills/skills/react-email?format=md"

SKILL.md•react-email

React Email — Build Emails with React Components

Core Capabilities

Email Components

// emails/welcome.tsx
import {
  Html, Head, Body, Container, Section, Row, Column,
  Heading, Text, Button, Link, Img, Hr, Preview,
  Font, Tailwind,
} from "@react-email/components";

interface WelcomeEmailProps {
  name: string;
  teamName: string;
  inviteUrl: string;
}

export default function WelcomeEmail({ name, teamName, inviteUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head>
        <Font fontFamily="Inter" fallbackFontFamily="Arial"
          webFont={{ url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700", format: "woff2" }} />
      </Head>
      <Preview>You've been invited to join {teamName}</Preview>
      <Tailwind>
        <Body className="bg-gray-50 font-sans">
          <Container className="mx-auto max-w-[600px] p-8">
            <Section className="bg-white rounded-xl p-8 shadow-sm">
              <Img src="https://app.example.com/logo.png" width={120} height={40} alt="Logo" className="mb-6" />

              <Heading className="text-2xl font-bold text-gray-900 mb-4">
                Welcome aboard, {name}! 🎉
              </Heading>

              <Text className="text-gray-600 text-base leading-relaxed mb-6">
                You've been invited to join <strong>{teamName}</strong>. Click below to accept
                your invitation and get started.
              </Text>

              <Button href={inviteUrl}
                className="bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg text-base">
                Accept Invitation
              </Button>

              <Hr className="my-6 border-gray-200" />

              <Section>
                <Heading as="h3" className="text-lg font-semibold mb-3">What's next?</Heading>
                <Row>
                  <Column className="w-1/3 text-center p-2">
                    <Text className="text-3xl mb-1">📋</Text>
                    <Text className="text-sm text-gray-600">Set up your profile</Text>
                  </Column>
                  <Column className="w-1/3 text-center p-2">
                    <Text className="text-3xl mb-1">👥</Text>
                    <Text className="text-sm text-gray-600">Meet the team</Text>
                  </Column>
                  <Column className="w-1/3 text-center p-2">
                    <Text className="text-3xl mb-1">🚀</Text>
                    <Text className="text-sm text-gray-600">Start building</Text>
                  </Column>
                </Row>
              </Section>

              <Hr className="my-6 border-gray-200" />

              <Text className="text-xs text-gray-400 text-center">
                If you didn't expect this email, you can safely ignore it.
                <br />
                <Link href="https://example.com/unsubscribe" className="text-gray-400 underline">
                  Unsubscribe
                </Link>
              </Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

Rendering and Sending

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

// Render to HTML string
const html = await render(WelcomeEmail({
  name: "Alice",
  teamName: "Acme Engineering",
  inviteUrl: "https://app.example.com/invite/abc123",
}));

// Render plain text version
const text = await render(WelcomeEmail({ name: "Alice", teamName: "Acme", inviteUrl: "..." }), {
  plainText: true,
});

// Send with any provider
await resend.emails.send({ from: "team@example.com", to: "alice@example.com", subject: "Welcome!", html, text });

Preview Server

npx email dev                             # Opens http://localhost:3000
# Live preview of all emails in /emails directory
# Hot reload on file changes
# Send test emails directly from preview UI

Installation

npm install @react-email/components react-email
npm install -D react-email                 # CLI for preview

Best Practices

Tailwind in emails — Wrap with <Tailwind> component; React Email inlines styles for email client compatibility
Preview text — Use <Preview> component; shows in inbox preview without appearing in email body
Test across clients — Preview in Gmail, Outlook, Apple Mail; React Email handles quirks but test edge cases
Plain text fallback — Always render plain text version; improves deliverability and accessibility
Responsive layout — Use <Row> and <Column> for grid layouts; they render as tables for email client support
Web fonts — Use <Font> with fallback; not all clients support web fonts
Props for personalization — Pass data via props; type-safe, reusable across different sends
Preview server — Run email dev during development; hot reload + test sends from the browser

> related_skills --same-repo

> zustand

You are an expert in Zustand, the small, fast, and scalable state management library for React. You help developers manage global state without boilerplate using Zustand's hook-based stores, selectors for performance, middleware (persist, devtools, immer), computed values, and async actions — replacing Redux complexity with a simple, un-opinionated API in under 1KB.

> zoho

Integrate and automate Zoho products. Use when a user asks to work with Zoho CRM, Zoho Books, Zoho Desk, Zoho Projects, Zoho Mail, or Zoho Creator, build custom integrations via Zoho APIs, automate workflows with Deluge scripting, sync data between Zoho apps and external systems, manage leads and deals, automate invoicing, build custom Zoho Creator apps, set up webhooks, or manage Zoho organization settings. Covers Zoho CRM, Books, Desk, Projects, Creator, and cross-product integrations.

> zod

You are an expert in Zod, the TypeScript-first schema declaration and validation library. You help developers define schemas that validate data at runtime AND infer TypeScript types at compile time — eliminating the need to write types and validators separately. Used for API input validation, form validation, environment variables, config files, and any data boundary.

> zipkin

Deploy and configure Zipkin for distributed tracing and request flow visualization. Use when a user needs to set up trace collection, instrument Java/Spring or other services with Zipkin, analyze service dependencies, or configure storage backends for trace data.

┌ stats

installs/wk0

░░░░░░░░░░

github stars17

███░░░░░░░

first seenMar 17, 2026

└────────────

┌ repo

TerminalSkills/skills

by TerminalSkills

└────────────

┌ tags

#frontend #react

└────────────