### Lower-level setup: Basic EditorProvider

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/getting-started.mdx

A basic manual setup using Tiptap's `EditorProvider` with `StarterKit` extensions and no UI overlays, offering more control.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

const content = `
  <h1>Welcome</h1>
  <p>Start typing or edit this text.</p>
`;

export function MyEditor() {
  return <EditorProvider extensions={extensions} content={content} />;
}
```

--------------------------------

### Install all the dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/contributing/development-workflow/1-setup.mdx

Install all project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Quick start editor setup

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/features/buttons.mdx

Example showing how to add default button bubble menu and slash command for inserting buttons in the editor.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { BUTTON, BubbleMenu, SlashCommand } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

const content = `
  <p>Click the button below to see its bubble menu.</p>
  <div class="align-left"><a class="node-button button" data-id="react-email-button" href="https://react.email">Click me</a></div>
  <p>Use the slash command menu (type /) to insert more buttons.</p>
`;

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu.ButtonDefault />
      <SlashCommand items={[BUTTON]} />
    </EditorProvider>
  );
}
```

--------------------------------

### Run locally

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/manual-setup.mdx

Start the development server.

```npm
npm run email:dev
```

```yarn
yarn email:dev
```

```pnpm
pnpm email:dev
```

```bun
bun email:dev
```

--------------------------------

### Quick start example

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/features/inspector.mdx

Example showing how to integrate the Inspector with a custom editor setup, rendering Inspector.Root next to the editor content.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EmailTheming } from '@react-email/editor/plugins';
import { Inspector } from '@react-email/editor/ui';
import { EditorContent, EditorContext, useEditor } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit, EmailTheming];

export function MyEditor() {
  const editor = useEditor({
    extensions,
    content,
  });

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="flex min-h-0 overflow-hidden">
        <div className="flex-1 min-w-0 p-4">
          <EditorContent editor={editor} />
        </div>

        <Inspector.Root className="w-60 shrink-0 border-l p-4">
          <Inspector.Breadcrumb />
          <Inspector.Document />
          <Inspector.Node />
          <Inspector.Text />
        </Inspector.Root>
      </div>
    </EditorContext.Provider>
  );
}
```

--------------------------------

### Install dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/manual-setup.mdx

Install the React Email packages locally.

```npm
npm install @react-email/ui -D -E
npm install react-email react react-dom -E
```

```yarn
yarn add @react-email/ui -D -E
yarn add react-email react react-dom -E
```

```pnpm
pnpm add @react-email/ui -D -E
pnpm add react-email react react-dom -E
```

```bun
bun add @react-email/ui -D -E
bun add react-email react react-dom -E
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/section.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Section, Column, Row, Text } from "react-email";

const Email = () => {
  return (
    {/* A simple `section` */}
    <Section>
      <Text>Hello World</Text>
    </Section>

    {/* Formatted with `rows` and `columns` */}
     <Section>
      <Row>
        <Column>Column 1, Row 1</Column>
        <Column>Column 2, Row 1</Column>
      </Row>
      <Row>
        <Column>Column 1, Row 2</Column>
        <Column>Column 2, Row 2</Column>
      </Row>
    </Section>
  );
};
```

--------------------------------

### Docs Setup Guide

Source: https://github.com/resend/react-email/blob/canary/apps/docs/contributing.mdx

Commands to set up the documentation development environment.

```sh
git clone https://github.com/resend/react-email.git
```

```sh
pnpm install
```

```sh
cd apps/docs
```

```sh
pnpm dev
```

--------------------------------

### Quick start with EmailEditor

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/getting-started.mdx

The recommended way to start is with the standalone `EmailEditor` component. It provides a working editor with default bubble menus, slash commands, theming, and export helpers already wired up.

```tsx
import { EmailEditor } from '@react-email/editor';

const content = `
  <h1>Welcome</h1>
  <p>
    This is the simplest way to use the editor. Try selecting text to see the
    bubble menu, or type "/" for slash commands.
  </p>
`;

export function MyEditor() {
  return <EmailEditor content={content} />;
}
```

--------------------------------

### Installation

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

Install next-intl package.

```bash
npm install next-intl
```

--------------------------------

### Install Dependencies and Build

Source: https://github.com/resend/react-email/blob/canary/apps/web/README.md

Commands to install project dependencies and build workspace packages in the root directory.

```bash
pnpm i && pnpm build
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/preview.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Preview } from "react-email";

const Email = () => {
  return <Preview>Email preview text</Preview>;
};
```

--------------------------------

### Getting Started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/code-block.mdx

Example of how to use the CodeBlock component in an email component.

```jsx
import { CodeBlock, dracula } from 'react-email';

const Email = () => {
  const code = `export default async (req, res) => {
  try {
    const html = await renderAsync(
      EmailTemplate({ firstName: 'John' })
    );
    return NextResponse.json({ html });
  } catch (error) {
    return NextResponse.json({ error });
  }
}`;

  return (<CodeBlock
    code={code}
    lineNumbers // add this so that there are line numbers beside each code line
    theme={dracula}
    language="javascript"
  />);
};
```

--------------------------------

### Run the development server

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/automatic-setup.mdx

Start the local development server to preview email templates.

```sh
npm run dev
```

```sh
yarn dev
```

```sh
pnpm dev
```

```sh
bun dev
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/heading.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Heading } from "react-email";

const Email = () => {
  return <Heading as="h2">Lorem ipsum</Heading>;
};
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/README.md

Example of defining an email template with React components.

```jsx
import { Button } from "react-email";

export default function Email() {
  return (
    <Button href="https://example.com" style={{ color: "#61dafb" }}>
      Click me
    </Button>
  );
};
```

--------------------------------

### Installation

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

Install react-intl package.

```bash
npm install react-intl
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/packages/create-email/readme.md

Command to initialize a new React Email project.

```sh
npx create-email
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/html.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Html, Button } from "react-email";

const Email = () => {
  return (
    <Html lang="en" dir="ltr">
      <Button href="https://example.com" style={{ color: "#61dafb" }}>
        Click me
      </Button>
    </Html>
  );
};
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/text.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Text } from "react-email";

const Email = () => {
  return <Text>Lorem ipsum</Text>;
};
```

--------------------------------

### Quick start

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/features/column-layouts.mdx

Example showing how to include column extensions using StarterKit and EditorProvider.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

export function MyEditor() {
  return <EditorProvider extensions={extensions} content={content} />;
}
```

--------------------------------

### Image Usage Examples

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/STYLING.md

Examples demonstrating how to use the `Img` component for meaningful and decorative images, including `alt` text and responsive sizing.

```tsx
{/* Meaningful image — describe purpose and details */}
<Img
  src="https://example.com/hero.png"
  alt="A team of engineers reviewing code on a laptop"
  className="w-full h-auto"
/>

{/* Decorative image — always pass an empty alt string so screen readers skip it */}
<Img
  src="https://example.com/divider.png"
  alt=""
  className="w-full"
/>
```

--------------------------------

### Install project dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/automatic-setup.mdx

Install the necessary dependencies for the new React Email project.

```sh
npm install
```

```sh
yarn
```

```sh
pnpm install
```

```sh
bun install
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/link.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Link } from "react-email";

const Email = () => {
  return <Link href="https://example.com">Example</Link>;
};
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/image.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Img } from "react-email";

const Email = () => {
  return <Img src="cat.jpg" alt="Cat" width="300" height="300" />;
};
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/markdown.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Markdown, Html } from "react-email";

const Email = () => {
  return (
    <Html lang="en" dir="ltr">
      <Markdown
        markdownCustomStyles={{
          h1: { color: "red" },
          h2: { color: "blue" },
          codeInline: { background: "grey" }
        }}
        markdownContainerStyles={{
          padding: "12px",
          border: "solid 1px black"
        }}
      >{`# Hello, World!`}</Markdown>

      {/* OR */}

      <Markdown children={`# This is a ~~strikethrough~~`} />
    </Html>
  );
};
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/column.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Column, Row } from "react-email";

const Email = () => {
  return (
    <Row>
      <Column>A</Column>
      <Column>B</Column>
      <Column>C</Column>
    </Row>
  );
};
```

--------------------------------

### Install react-i18next dependencies

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

Command to install react-i18next, i18next, and i18next-resources-to-backend.

```bash
npm install react-i18next i18next i18next-resources-to-backend
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/head.mdx

Add the component to your email template. Include children tags where needed.

```jsx
import { Head } from "react-email";

const Email = () => {
  return (
    <Head>
      <title>My email title</title>
    </Head>
  );
};
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/row.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Row, Column, Section } from "react-email";

const Email = () => {
  return (
    <Section>
      <Row>
        <Column>A</Column>
      </Row>
      <Row>
        <Column>B</Column>
      </Row>
      <Row>
        <Column>C</Column>
      </Row>
    </Section>
  );
};
```

--------------------------------

### Adding a BubbleMenu to EditorProvider

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/getting-started.mdx

Example of adding a floating formatting toolbar (`BubbleMenu`) as a child of `EditorProvider` to enable text formatting when selecting text.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { BubbleMenu } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

const content = `
  <p>
    Select this text to see the bubble menu. Try <strong>bold</strong>,
    <em>italic</em>, and other formatting options.
  </p>
`;

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu />
    </EditorProvider>
  );
}
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/button.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Button } from "react-email";

const Email = () => {
  return (
    <Button
      href="https://example.com"
      style={{ color: "#61dafb", padding: "10px 20px" }}
    >
      Click me
    </Button>
  );
};
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/container.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Container, Button } from "react-email";

const Email = () => {
  return (
    <Container>
      <Button href="https://example.com" style={{ color: "#61dafb" }}>
        Click me
      </Button>
    </Container>
  );
};
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/hr.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { Hr } from "react-email";

const Email = () => {
  return <Hr />;
};
```

--------------------------------

### Getting Started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/code-inline.mdx

Add the component to your email template. Include styles where needed.

```jsx
import { CodeInline } from "react-email";

const Email = () => {
    return <CodeInline>@react-email/code-inline</CodeInline>;
}
```

--------------------------------

### Minimal Setup (Extensions Only)

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/EDITOR.md

Example of using EditorProvider with StarterKit for more control.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

const content = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [{ type: 'text', text: 'Start typing or edit this text.' }],
    },
  ],
};

export function MyEditor() {
  return <EditorProvider extensions={extensions} content={content} />;
}
```

--------------------------------

### Install React Email automatically

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/automatic-setup.mdx

Use `create-email` to automatically set up React Email with a starter project.

```sh
npx create-email@latest
```

```sh
yarn create email
```

```sh
pnpm create email
```

```sh
bun create email
```

--------------------------------

### Quick start

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/features/image-upload.mdx

Example demonstrating how to import and use `useEditorImage`, add the extension, register `imageSlashCommand`, and render `BubbleMenu.ImageDefault` for inline editing.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { imageSlashCommand, useEditorImage } from '@react-email/editor/plugins';
import {
  BubbleMenu,
  defaultSlashCommands,
  SlashCommand,
} from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import { useCallback } from 'react';
import '@react-email/editor/themes/default.css';

export function MyEditor() {
  const uploadImage = useCallback(async (file: File) => {
    const url = await uploadToStorage(file);
    return { url };
  }, []);

  const imageExtension = useEditorImage({ uploadImage });

  return (
    <EditorProvider extensions={[StarterKit, imageExtension]}>
      <BubbleMenu.ImageDefault />
      <SlashCommand.Root items={[...defaultSlashCommands, imageSlashCommand]} />
    </EditorProvider>
  );
}
```

--------------------------------

### Multi-Column Layout

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/STYLING.md

Example of creating a multi-column layout using `Row` and `Column` components.

```tsx
<Row>
  <Column className="w-1/2">Left content</Column>
  <Column className="w-1/2">Right content</Column>
</Row>
```

--------------------------------

### Quick start

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/features/link-editing.mdx

Example demonstrating how to add an inline link editing toolbar using `BubbleMenu.LinkDefault`.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { BubbleMenu } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

const content = `
  <p>Click on <a href="https://react.email" target="_blank">this link</a> to see the link bubble menu.</p>
  <p>Try adding more links by selecting text and pressing Cmd+K.</p>
`;

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu.LinkDefault />
    </EditorProvider>
  );
}
```

--------------------------------

### Configure i18next

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

Setup file for i18next, including supported languages and resource loading.

```js
// i18n.js
import i18next from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import { initReactI18next } from 'react-i18next';

i18next
  .use(initReactI18next)
  .use(resourcesToBackend((language, namespace) =>
    import(`./messages/${language}/${namespace}.json`)
  ))
  .init({
    supportedLngs: ['en', 'es', 'fr', 'de'],
    fallbackLng: 'en',
    lng: undefined,
    preload: ['en', 'es', 'fr', 'de']
  });

export { i18next };
```

--------------------------------

### Install dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/integrations/postmark.mdx

Get the react-email package and the Postmark Node.js SDK.

```sh
npm install postmark react-email
```

```sh
yarn add postmark react-email
```

```sh
pnpm add postmark react-email
```

--------------------------------

### Content format: HTML string

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/getting-started.mdx

The editor accepts content as an HTML string, which is automatically parsed into its document model.

```tsx
const content = `
  <h1>Welcome</h1>
  <p>This is a <a href="https://react.email">link</a>.</p>
`;

<EmailEditor content={content} />
```

--------------------------------

### Content format: TipTap JSON

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/getting-started.mdx

The editor also accepts content as TipTap JSON, representing a structured document tree.

```json
{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "Hello world" }
      ]
    }
  ]
}
```

--------------------------------

### Run preview server

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/monorepo-setup/npm.mdx

Start the email previews development server:

```sh
npm run dev
```

--------------------------------

### Correct Border Handling

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/STYLING.md

Examples demonstrating the correct way to specify border styles, including single-side borders with resets.

```tsx
// Correct - specify border style
<div className="border-solid border border-gray-300" />

// Correct - single side border with reset
<div className="border-none border-l border-solid border-l-gray-300" />

// Incorrect - missing border style
<div className="border border-gray-300" />
```

--------------------------------

### Getting started with Tailwind component

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/tailwind.mdx

Example of wrapping email content with the Tailwind component and configuring custom theme colors.

```jsx
import { Tailwind, pixelBasedPreset, Button } from "react-email";

const Email = () => {
  return (
    <Tailwind
      config={{
        presets: [pixelBasedPreset],
        theme: {
          extend: {
            colors: {
              brand: "#007291"
            }
          }
        }
      }}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};
```

--------------------------------

### Run preview server

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/monorepo-setup/bun.mdx

Command to start the email previews development server.

```sh
bun dev
```

--------------------------------

### Add scripts

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/manual-setup.mdx

Include the following script in your `package.json` file.

```json
{
  "scripts": {
    "email:dev": "email dev"
  }
}
```

--------------------------------

### Install dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/integrations/nodemailer.mdx

Get the react-email and nodemailer packages.

```sh
npm install nodemailer react-email
```

```sh
yarn add nodemailer react-email
```

```sh
pnpm add nodemailer react-email
```

--------------------------------

### Run development server

Source: https://github.com/resend/react-email/blob/canary/packages/create-email/template/readme.md

Start the development server to preview emails.

```sh
npm run dev
# or
yarn dev
```

--------------------------------

### Install

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/code-inline.mdx

Install the component from your command line.

```sh
npm install react-email -E
```

```sh
yarn add react-email -E
```

```sh
pnpm add react-email -E
```

--------------------------------

### Clone the repository

Source: https://github.com/resend/react-email/blob/canary/apps/docs/contributing/development-workflow/1-setup.mdx

Clone the react-email project repository from GitHub.

```bash
git clone https://github.com/resend/react-email
```

--------------------------------

### Install dependencies

Source: https://github.com/resend/react-email/blob/canary/packages/create-email/template/readme.md

Install project dependencies using npm or yarn.

```sh
npm install
# or
yarn
```

--------------------------------

### Run email preview server

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/monorepo-setup/yarn.mdx

Command to start the email previews development server from the `transactional` workspace.

```sh
yarn dev
```

--------------------------------

### Install dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/monorepo-setup/pnpm.mdx

Install React Email in the `transactional` workspace.

```sh
pnpm add @react-email/ui -D -E
pnpm add react-email react react-dom -E
```

--------------------------------

### PreviewProps Definition

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/STYLING.md

Example of defining `PreviewProps` for an email component, including only necessary props.

```tsx
const Email = ({ source }: { source: string }) => {
  return (
    <div>
      <a href={source}>Click here</a>
    </div>
  );
};

Email.PreviewProps = {
  source: "https://example.com",
};
```

--------------------------------

### Base Email Template

Source: https://github.com/resend/react-email/blob/canary/apps/docs/guides/internationalization/react-i18next.mdx

An example React Email template before internationalization, used as a base for the guide.

```jsx
export default function WelcomeEmail({ name }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to Acme</Preview>
      <Tailwind>
        <Body className="bg-gray-100 font-sans">
          <Container className="mx-auto py-10 px-5">
            <Section className="bg-white rounded-lg p-8">
              <Heading className="text-2xl font-bold text-gray-900 m-0 mb-6">
                Welcome to Acme
              </Heading>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Hi {name}
              </Text>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Thanks for signing up! We're excited to have you on board.
              </Text>
              <Button
                href="https://example.com/dashboard"
                className="bg-indigo-600 rounded-md text-white text-base font-semibold no-underline text-center block py-3 px-6 my-6"
              >
                Get Started
              </Button>
              <Hr className="border-gray-200 my-6" />
              <Text className="text-sm text-gray-400 m-0">
                If you have any questions, reply to this email. We're here to help!
              </Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

WelcomeEmail.PreviewProps = {
  name: 'John Lennon'
};
```

--------------------------------

### Install dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/integrations/sendgrid.mdx

Get the react-email package and the SendGrid Node.js SDK.

```sh npm
npm install @sendgrid/mail react-email
```

```sh yarn
yarn add @sendgrid/mail react-email
```

```sh pnpm
pnpm add @sendgrid/mail react-email
```

--------------------------------

### Install dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/monorepo-setup/bun.mdx

Install React Email UI components, React Email core, React, and React DOM to the `transactional` workspace using bun.

```sh
bun add @react-email/ui -D -E
bun add react-email react react-dom -E
```

--------------------------------

### Install dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/integrations/mailersend.mdx

Get the react-email package and the MailerSend Node.js SDK.

```npm
npm install mailersend react-email
```

```yarn
yarn add mailersend react-email
```

```pnpm
pnpm add mailersend react-email
```

--------------------------------

### Previewing Documentation

Source: https://github.com/resend/react-email/blob/canary/apps/docs/contributing/development-workflow/5-writing-docs.mdx

Command to start the development server for previewing the documentation.

```sh
pnpm dev
```

--------------------------------

### Getting started

Source: https://github.com/resend/react-email/blob/canary/apps/docs/components/font.mdx

Add the component to your email template. This applies your font to all tags inside your email.

```jsx
import { Font, Head, Html } from "react-email";

const Email = () => {
  return (
    <Html lang="en">
      <Head>
        <Font
          fontFamily="Roboto"
          fallbackFontFamily="Verdana"
          webFont={{
            url: "https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
            format: "woff2"
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
    </Html>
  );
};
```

--------------------------------

### Install Babel Preset Typescript

Source: https://github.com/resend/react-email/blob/canary/apps/docs/integrations/overview.mdx

Install `@babel/preset-typescript` using npm, yarn, or pnpm.

```sh
npm install -D @babel/preset-typescript
```

```sh
yarn add -D @babel/preset-typescript
```

```sh
pnpm add -D @babel/preset-typescript
```

--------------------------------

### Spanish Message File

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

Example es.json message file for the order confirmation email.

```json
{
  "order-confirmation": {
    "preview": "Tu pedido ha sido confirmado",
    "title": "Pedido Confirmado",
    "order-number": "Número de pedido",
    "order-date": "Fecha del pedido",
    "total": "Total",
    "view-order": "Ver Pedido",
    "footer": "¡Gracias por tu compra!"
  }
}
```

--------------------------------

### English Message File

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

Example en.json message file for the order confirmation email.

```json
{
  "order-confirmation": {
    "preview": "Your order has been confirmed",
    "title": "Order Confirmed",
    "order-number": "Order number",
    "order-date": "Order date",
    "total": "Total",
    "view-order": "View Order",
    "footer": "Thank you for your purchase!"
  }
}
```

--------------------------------

### Test All Locales

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

Example of setting `PreviewProps` to test email rendering for different locales.

```tsx
WelcomeEmail.PreviewProps = {
  name: 'Test User',
  locale: 'en'  // Change to test different locales
} as WelcomeEmailProps;
```

--------------------------------

### Install dependencies

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/monorepo-setup/npm.mdx

Install React Email in the `transactional` workspace.

```sh
npm install @react-email/ui -D -E
npm install react-email react react-dom -E
```

--------------------------------

### Dark Mode Styling

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/STYLING.md

Example of applying dark mode styles to the `Body` and `Container` components.

```tsx
<Body className="bg-[#151516]">
  <Container className="bg-black text-white">

```

--------------------------------

### Run Development Server

Source: https://github.com/resend/react-email/blob/canary/packages/render/e2e/nextjs/README.md

Commands to start the development server for the Next.js project.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Add scripts

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/monorepo-setup/pnpm.mdx

Include the following script in your `package.json` file.

```json
{
  // ...
  "scripts": {
    "dev": "email dev"
  }
  // ...
}
```

--------------------------------

### Update email template

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

Example of a React Email template using next-intl for internationalization.

```tsx
import { createTranslator } from 'next-intl';
import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Heading,
  Text,
  Button,
  Hr,
  Tailwind,
  pixelBasedPreset
} from 'react-email';

interface WelcomeEmailProps {
  name: string;
  verificationUrl: string;
  locale: string;
}

export default async function WelcomeEmail({
  name,
  verificationUrl,
  locale
}: WelcomeEmailProps) {
  const t = createTranslator({
    messages: await import(`../messages/${locale}.json`),
    namespace: 'welcome-email',
    locale
  });

  return (
    <Html lang={locale}>
      <Tailwind config={{ presets: [pixelBasedPreset] }}>
        <Head />
        <Body className="bg-gray-100 font-sans">
          <Preview>{t('subject')}</Preview>
          <Container className="mx-auto py-10 px-5 max-w-xl">
            <Heading className="text-2xl font-bold text-gray-800">
              {t('subject')}
            </Heading>
            <Text className="text-base leading-7 text-gray-800 my-4">
              {t('greeting')} {name},
            </Text>
            <Text className="text-base leading-7 text-gray-800 my-4">
              {t('body')}
            </Text>
            <Button
              href={verificationUrl}
              className="bg-blue-600 text-white px-5 py-3 rounded block text-center no-underline box-border"
            >
              {t('cta')}
            </Button>
            <Hr className="border-solid border-gray-200 my-5" />
            <Text className="text-sm text-gray-500">
              {t('footer')}
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// Preview props
WelcomeEmail.PreviewProps = {
  name: 'John',
  verificationUrl: 'https://example.com/verify',
  locale: 'en'
} as WelcomeEmailProps;
```

--------------------------------

### Using pixelBasedPreset

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/STYLING.md

Example of including `pixelBasedPreset` in the Tailwind configuration to convert rem units to pixels.

```tsx
import { pixelBasedPreset } from 'react-email';

<Tailwind config={{ presets: [pixelBasedPreset] }}>
```

--------------------------------

### Tailwind Component Configuration

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/STYLING.md

Example of configuring the `Tailwind` component with a custom preset and theme extension.

```tsx
import { Tailwind, pixelBasedPreset } from 'react-email';

<Tailwind
  config={{
    presets: [pixelBasedPreset],
    theme: {
      extend: {
        colors: {
          brand: '#007bff',
        },
      },
    },
  }}
>
  {/* Email content */}
</Tailwind>
```

--------------------------------

### Write your emails

Source: https://github.com/resend/react-email/blob/canary/apps/docs/getting-started/monorepo-setup/pnpm.mdx

Create a new folder called `emails`, create a file inside called `email.tsx` and add the following example code:

```jsx
import { Button, Html, Head, Body } from "react-email";
import * as React from "react";

export default function Email() {
  return (
    <Html>
      <Head />
      <Body>
        <Button
          href="https://example.com"
          style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
        >
          Click me
        </Button>
      </Body>
    </Html>
  );
}
```

--------------------------------

### Quick start

Source: https://github.com/resend/react-email/blob/canary/apps/docs/editor/features/theming.mdx

Imports the `EmailTheming` plugin and adds it to extensions.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EmailTheming } from '@react-email/editor/plugins';
import { BubbleMenu } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit, EmailTheming];

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu />
    </EditorProvider>
  );
}
```

--------------------------------

### Install next-intl

Source: https://github.com/resend/react-email/blob/canary/apps/docs/guides/internationalization/next-intl.mdx

Commands to install next-intl using different package managers.

```bash npm
npm i -S next-intl
```

```bash bun
bun add next-intl
```

```bash yarn
yarn add next-intl
```

```bash pnpm
pnpm add next-intl
```

--------------------------------

### Default Footer Structure

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/STYLING.md

Example of a footer structure including physical address, copyright, and an unsubscribe link.

```tsx
<Section className="text-center text-gray-500 text-sm">
  <Text className="m-0">123 Main St, City, State 12345</Text>
  <Text className="m-0">&copy; {new Date().getFullYear()} Company Name</Text>
  <Link href={unsubscribeUrl}>Unsubscribe</Link>
</Section>
```

--------------------------------

### Create message files

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

English message file for welcome email.

```json
// messages/en.json
{
  "welcome-email": {
    "subject": "Welcome to Acme",
    "greeting": "Hi",
    "body": "Thanks for signing up! We're excited to have you on board.",
    "cta": "Get Started",
    "footer": "If you have questions, reply to this email."
  }
}
```

--------------------------------

### Complete Multi-locale Email Component

Source: https://github.com/resend/react-email/blob/canary/skills/react-email/references/I18N.md

An example of an OrderConfirmation React Email component using next-intl for internationalization.

```tsx
import { createTranslator } from 'next-intl';
import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Section,
  Heading,
  Text,
  Button,
  Hr,
  Tailwind,
  pixelBasedPreset
} from 'react-email';

interface OrderConfirmationProps {
  orderNumber: string;
  total: number;
  currency: string;
  locale: string;
  orderDate: Date;
}

export default async function OrderConfirmation({
  orderNumber,
  total,
  currency,
  locale,
  orderDate
}: OrderConfirmationProps) {
  const t = createTranslator({
    messages: await import(`../messages/${locale}.json`),
    namespace: 'order-confirmation',
    locale
  });

  const isRTL = ['ar', 'he'].includes(locale);

  const currencyFormatter = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency
  });

  const dateFormatter = new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  return (
    <Html lang={locale} dir={isRTL ? 'rtl' : 'ltr'}>
      <Tailwind config={{ presets: [pixelBasedPreset] }}>
        <Head />
        <Body className="bg-gray-100 font-sans">
          <Preview>{t('preview')}</Preview>
          <Container className="mx-auto py-10 px-5 max-w-xl">
            <Heading className="text-2xl font-bold text-gray-800">
              {t('title')}
            </Heading>
            <Text className="text-base text-gray-800 my-2">
              {t('order-number')}: {orderNumber}
            </Text>
            <Text className="text-base text-gray-800 my-2">
              {t('order-date')}: {dateFormatter.format(orderDate)}
            </Text>
            <Section className="bg-white p-5 rounded my-4">
              <Text className="text-xl font-bold text-gray-800">
                {t('total')}: {currencyFormatter.format(total)}
              </Text>
            </Section>
            <Button
              href={`https://example.com/orders/${orderNumber}`}
              className="bg-blue-600 text-white px-5 py-3 rounded block text-center no-underline my-5 box-border"
            >
              {t('view-order')}
            </Button>
            <Hr className="border-solid border-gray-200 my-5" />
            <Text className="text-sm text-gray-500">
              {t('footer')}
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}
```