### Install React Email Dependencies (yarn)

Source: https://react.email/docs/getting-started/manual-setup

Installs React Email and essential components using yarn. This step sets up the project with the necessary React Email packages and their dependencies. It is crucial for initializing the project's frontend components.

```sh
yarn add react-email -D -E
yarn add @react-email/components react react-dom -E
```

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

### Configure Development Script (package.json)

Source: https://react.email/docs/getting-started/manual-setup

Adds a development script to your `package.json` file, enabling the React Email development server.  This script provides a convenient way to start the server and preview your emails locally.

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

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

### Install React Email Components

Source: https://github.com/resend/react-email

Instructions for installing the core React Email components using different package managers. This is the first step to start using the library in your project.

```bash
yarn add @react-email/components -E
```

```bash
npm install @react-email/components -E
```

```bash
pnpm install @react-email/components -E
```

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

### Install React Email Dependencies (pnpm)

Source: https://react.email/docs/getting-started/manual-setup

Installs React Email and essential components using pnpm. This step sets up the project with the necessary React Email packages and their dependencies. It is crucial for initializing the project's frontend components.

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

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

### Run Development Server (npm, yarn, pnpm, bun)

Source: https://react.email/docs/getting-started/manual-setup

Starts the React Email development server using the chosen package manager.  This command launches a local server to preview your email templates in a browser.

```sh
npm run dev
```

```sh
yarn dev
```

```sh
pnpm dev
```

```sh
bun dev
```

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

### Install React Email Dependencies on Bun

Source: https://react.email/docs/getting-started/monorepo-setup/bun

Installs React Email and its core components as development dependencies in a Bun workspace. Ensures React and ReactDOM are also added for component rendering.

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

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

### Configure npm Scripts for React Email Dev Server

Source: https://react.email/docs/getting-started/monorepo-setup/bun

Adds a 'dev' script to the package.json file to easily start the React Email development server. This script is essential for previewing emails during development.

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

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

### Run React Email Development Server on Bun

Source: https://react.email/docs/getting-started/monorepo-setup/bun

Executes the 'bun dev' command to start the React Email development server within the Bun workspace. This command is configured in the package.json scripts.

```sh
bun dev
```

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

### Install React Email Button Component

Source: https://react.email/docs/components/button

Instructions for installing the Button component and the entire @react-email/components package using npm, yarn, and pnpm. It also shows how to install the individual package.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/button -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/button -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/button -E
```

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

### email start

Source: https://react.email/docs/cli

Runs the built preview app that is inside .react-email. This command starts a local development server to preview your email templates.

```APIDOC
## email start

### Description
Runs the built preview app that is inside .react-email.

### Method
CLI Command

### Endpoint
email start

### Request Example
```bash
email start
```

### Response
#### Success Response
Starts local development server for previewing emails

#### Response Example
```
Starting preview server...
Server running on http://localhost:3000
```
```

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

### Install Container Component (Shell)

Source: https://react.email/docs/components/container

This shell script snippet demonstrates installing the Container component using npm, yarn, or pnpm. It allows installing the full @react-email/components package or just the @react-email/container package. The -E flag ensures exact version pinning for consistency. No inputs are required, and it outputs installation confirmation.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/container -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/container -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/container -E
```

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

### Install @react-email/preview Component

Source: https://react.email/docs/components/preview

Instructions for installing the @react-email/preview component and the main @react-email/components package using npm, yarn, and pnpm.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/preview -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/preview -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/preview -E
```

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

### Start Email Development Server (npm/sh)

Source: https://react.email/docs/getting-started/monorepo-setup/npm

Command to execute the 'dev' script defined in the package.json. This command starts the React Email development server, typically accessible at localhost:3000, for live email previews.

```sh
npm run dev
```

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

### Run React Email playground server

Source: https://react.email/docs/contributing/development-workflow/6-editing-the-components

Starts the development server for the React Email playground with hot reloading enabled. Requires pnpm package manager to be installed.

```shell
pnpm dev
```

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

### Getting Started with Tailwind Component in React Email

Source: https://react.email/docs/components/tailwind

Example of how to integrate the Tailwind component into a React email template. It demonstrates wrapping content with Tailwind for custom theming, using the pixelBasedPreset to ensure compatibility with email clients that do not support rem units.

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

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 React Email development server

Source: https://react.email/docs/getting-started/monorepo-setup/yarn

Command to start the email preview development server. This enables live preview of email components in the browser during development.

```bash
yarn dev
```

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

### Install @react-email/code-block Component

Source: https://react.email/docs/components/code-block

Instructions for installing the CodeBlock component using npm, yarn, or pnpm. It can be installed individually or as part of the main @react-email/components package.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/code-block -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/code-block -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/code-block -E
```

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

### Install Section Component Package

Source: https://react.email/docs/components/section

Install the Section component using your preferred package manager. Choose between npm, yarn, or pnpm. The component can be installed as part of the full @react-email/components package or individually as @react-email/section.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/section -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/section -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/section -E
```

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

### Usage Example - React JSX Component Implementation

Source: https://react.email/docs/components/html

Basic usage of the Html component in a React email template. Demonstrates component import, JSX structure, and prop configuration. The example shows how to set language and text direction, along with a styled button example.

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

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

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

### Create a Sample React Email Component

Source: https://react.email/docs/getting-started/monorepo-setup/bun

A basic React component for an email, using React Email's Html and Button components. Demonstrates how to structure a simple email with a clickable button.

```jsx
import { Button, Html } from "@react-email/components";
import * as React from "react";

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

export default MyEmail;
```

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

### email resend setup

Source: https://react.email/docs/cli

Sets up a configuration in your home directory with your Resend API Key by prompting interactively. This command prepares your environment for sending emails through Resend.

```APIDOC
## email resend setup

### Description
Sets up a configuration in your home directory with your Resend API Key by prompting interactively.

### Method
CLI Command

### Endpoint
email resend setup

### Request Example
```bash
email resend setup
```

### Response
#### Success Response
Configures Resend API Key in home directory

#### Response Example
```
Enter your Resend API Key: <hidden_input>
Configuration saved successfully
```
```

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

### Install React Email and Core Components (npm/sh)

Source: https://react.email/docs/getting-started/monorepo-setup/npm

Installs React Email as a dev dependency and core React Email components along with react and react-dom as direct dependencies within the 'transactional' npm workspace. Ensures these are correctly linked in the monorepo.

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

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

### Install Dependencies for Postmark and React Email

Source: https://react.email/docs/integrations/postmark

Installs the necessary packages for using Postmark and React Email. This includes the 'postmark' SDK and '@react-email/components' for building email templates.

```sh
npm install postmark @react-email/components
```

```sh
yarn add postmark @react-email/components
```

```sh
pnpm add postmark @react-email/components
```

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

### Install Resend and React Email Dependencies

Source: https://react.email/docs/integrations/resend

Installs the Resend Node.js SDK and React Email components package using various Node.js package managers. Requires Node.js and npm/yarn/pnpm. No inputs needed; outputs installed packages for email functionality. Limited to supported package managers.

```sh
npm install resend @react-email/components
```

```sh
yarn add resend @react-email/components
```

```sh
pnpm add resend @react-email/components
```

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

### Install dependencies (npm/yarn/pnpm)

Source: https://react.email/docs/integrations/sendgrid

Install the required packages for React Email and SendGrid Node.js SDK. Supports npm, yarn, and pnpm package managers.

```shell
npm install @sendgrid/mail @react-email/components
```

```shell
yarn add @sendgrid/mail @react-email/components
```

```shell
pnpm add @sendgrid/mail @react-email/components
```

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

### Install Link Component (npm, yarn, pnpm)

Source: https://react.email/docs/components/link

Installs the React Email Link component using various package managers. It shows how to install the entire @react-email/components package or the individual @react-email/link package.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/link -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/link -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/link -E
```

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

### Create Email Template (my-email.tsx)

Source: https://react.email/docs/getting-started/manual-setup

Creates a basic email template using React Email components.  This template demonstrates how to include a button and other HTML elements within an email structure.

```jsx
import { Button, Html } from "@react-email/components";
import * as React from "react";

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

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

### Install @react-email/code-inline Component (npm, yarn, pnpm)

Source: https://react.email/docs/components/code-inline

Instructions for installing the CodeInline component using various package managers. It can be installed as part of the main @react-email/components package or as an individual package.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/code-inline -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/code-inline -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/code-inline -E
```

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

### React Email Text Component Usage

Source: https://react.email/docs/introduction

This example illustrates the use of the `Text` component for displaying blocks of text in React Email. It handles spacing and formatting for text content within emails. Ensure the `@react-email/text` package is installed.

```jsx
import { Text } from '@react-email/text';

function MyEmailWithText() {
  return (
    <Text style={{ fontSize: '16px', lineHeight: '24px' }}>
      This is a paragraph of text within the email.
    </Text>
  );
}
```

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

### Install and Activate pnpm with Corepack

Source: https://react.email/docs/contributing/codebase-overview

These commands are used to enable and activate the latest version of pnpm using Corepack, the Node.js package manager for Node.js. This is a prerequisite for managing the react-email monorepo.

```bash
corepack enable
corepack prepare pnpm@latest --activate
```

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

### Install React Email Img Component

Source: https://react.email/docs/components/image

Install the Img component for React Email using npm, yarn, or pnpm. You can install the entire @react-email/components package or just the @react-email/img package individually.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/img -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/img -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/img -E
```

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

### Install React Email Heading Component

Source: https://react.email/docs/components/heading

Install the React Email Heading component and its core package using npm, yarn, or pnpm. This step is necessary before using the component in your email templates.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/heading -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/heading -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/heading -E
```

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

### Install @react-email/render package

Source: https://react.email/docs/utilities/render

Install the @react-email/render package using npm, yarn, or pnpm. This package is used to convert React components into HTML email templates.

```sh
npm install @react-email/render -E
```

```sh
yarn add @react-email/render -E
```

```sh
pnpm add @react-email/render -E
```

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

### Install React Email Markdown Component

Source: https://react.email/docs/components/markdown

Installs the @react-email/markdown component using popular package managers. The component can be installed individually or as part of the full @react-email/components package. All commands use exact version matching (-E flag) to ensure consistent deployments.

```shell
npm install @react-email/components -E

# or get the individual package

npm install @react-email/markdown -E
```

```shell
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/markdown -E
```

```shell
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/markdown -E
```

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

### Install React Email Text Component

Source: https://react.email/docs/components/text

Install the Text component using your preferred package manager. Choose between the complete @react-email/components package or the individual @react-email/text package for minimal bundle size.

```shell
npm install @react-email/components -E

# or get the individual package

npm install @react-email/text -E
```

```shell
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/text -E
```

```shell
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/text -E
```

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

### Install Hr Component via Package Managers

Source: https://react.email/docs/components/hr

Install the Hr component or the full components package using npm, yarn, or pnpm. The -E flag ensures exact version installation without running postinstall scripts. This is required for using Hr in React email projects.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/hr -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/hr -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/hr -E
```

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

### Install React Email Row Component (npm, yarn, pnpm)

Source: https://react.email/docs/components/row

Instructions for installing the '@react-email/row' package using different package managers (npm, yarn, pnpm). This component is part of the '@react-email/components' package or can be installed individually.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/row -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/row -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/row -E
```

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

### Install Column component via package managers

Source: https://react.email/docs/components/column

Install the Column component using npm, yarn, or pnpm package managers. Install either the complete @react-email/components package or the individual @react-email/column package. These commands add the necessary dependencies to your email project.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/column -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/column -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/column -E
```

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

### Install Dependencies for React Email and Scaleway SDK

Source: https://react.email/docs/integrations/scaleway

Installs the necessary packages for building emails with React Email and sending them via Scaleway. Supports npm, yarn, and pnpm package managers.

```sh
npm install @scaleway/sdk @react-email/components
```

```sh
yarn add @scaleway/sdk @react-email/components
```

```sh
pnpm add @scaleway/sdk @react-email/components
```

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

### Install @react-email/tailwind with npm, yarn, or pnpm

Source: https://react.email/docs/components/tailwind

Instructions for installing the @react-email/tailwind and @react-email/components packages using different package managers (npm, yarn, pnpm). This component relies on the core components package.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/tailwind -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/tailwind -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/tailwind -E
```

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

### Basic HTML Email Structure with React Email

Source: https://react.email/docs/introduction

This example demonstrates the basic structure of an email using React Email components. It includes the core `Html` wrapper and a `Container` for content. This forms the foundation for more complex email layouts.

```jsx
import { Html, Container } from '@react-email/components';

function BasicEmail() {
  return (
    <Html>
      <Container>
        {/* Email content goes here */}
      </Container>
    </Html>
  );
}
```

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

### Install HTML Component - Shell/Bash Package Managers

Source: https://react.email/docs/components/html

Install the React Email HTML component using different package managers. Choose between the full components package or the individual HTML component. The -E flag ensures exact version matching for dependency consistency.

```bash
npm install @react-email/components -E

# or get the individual package

npm install @react-email/html -E
```

```bash
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/html -E
```

```bash
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/html -E
```

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

### Install React Email Components (pnpm)

Source: https://react.email/docs/components/head

This snippet demonstrates how to install the @react-email/components package using pnpm. It provides both the full components package and the individual Head package. No limitations.

```sh
pnpm add @react-email/components -E
# or get the individual package
pnpm add @react-email/head -E
```

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

### Install Dependencies for React Email and Plunk

Source: https://react.email/docs/integrations/plunk

Installs the necessary packages for using React Email components and the Plunk Node.js SDK. Supports npm, yarn, and pnpm package managers.

```sh
npm install @plunk/node @react-email/components
```

```sh
yarn add @plunk/node @react-email/components
```

```sh
pnpm add @plunk/node @react-email/components
```

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

### Install React Email Components (npm)

Source: https://react.email/docs/components/head

This snippet demonstrates how to install the @react-email/components package using npm. It provides both the full components package and the individual Head package. No limitations.

```sh
npm install @react-email/components -E
# or get the individual package
npm install @react-email/head -E
```

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

### Install Nodemailer and React Email Components

Source: https://react.email/docs/integrations/nodemailer

Installs the necessary packages for sending emails with Nodemailer and creating email templates with React Email. Supports npm, yarn, and pnpm package managers.

```sh
npm install nodemailer @react-email/components
```

```sh
yarn add nodemailer @react-email/components
```

```sh
pnpm add nodemailer @react-email/components
```

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

### Install React Email Components (yarn)

Source: https://react.email/docs/components/head

This snippet demonstrates how to install the @react-email/components package using yarn. It provides both the full components package and the individual Head package. No limitations.

```sh
yarn add @react-email/components -E
# or get the individual package
yarn add @react-email/head -E
```

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

### Install MailerSend and React Email components

Source: https://react.email/docs/integrations/mailersend

Installs the required npm packages using npm, yarn, or pnpm. These dependencies are needed to build and send emails via MailerSend. Run the appropriate command in your project directory.

```sh
npm install mailersend @react-email/components
```

```sh
yarn add mailersend @react-email/components
```

```sh
pnpm add mailersend @react-email/components
```

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

### Basic React Email Component Usage

Source: https://github.com/resend/react-email

A simple example demonstrating how to import and use a Button component from React Email within a React functional component. This illustrates the basic structure for creating an email template.

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

const Email = () => {
  return (
    <Button>
      Click me
    </Button>
  );
};

```

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

### Usage Example for React Email Img Component

Source: https://react.email/docs/components/image

Demonstrates how to import and use the Img component within a React Email template. The example shows basic usage with `src`, `alt`, `width`, and `height` props.

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

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

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

### Basic Usage of React Email Preview Component

Source: https://react.email/docs/components/preview

A simple React example demonstrating how to import and use the Preview component within an email template to set the preview text. This component is essential for providing context in email inboxes.

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

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

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

### Example Theme Structure - JSON

Source: https://react.email/docs/components/code-block

Illustrates the structure of a theme object for the CodeBlock component. It includes base styles for the wrapper element and specific styles for different token types recognized by Prism.js.

```json
{
  "base": {
    "color": "#f8f8f2",
    "background": "#282a36",
    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    "textAlign": "left",
    "whiteSpace": "pre",
    "wordSpacing": "normal",
    "wordBreak": "normal",
    "wordWrap": "normal",
    "lineHeight": "1.5",
    "MozTabSize": "4",
    "OTabSize": "4",
    "tabSize": "4",
    "WebkitHyphens": "none",
    "MozHyphens": "none",
    "MsHyphens": "none",
    "hyphens": "none",
    "padding": "1em",
    "margin": ".5em 0",
    "overflow": "auto",
    "borderRadius": "0.3em"
  },
  "comment": {
    "color": "#6272a4"
  },
  "prolog": {
    "color": "#6272a4"
  },
  "doctype": {
    "color": "#6272a4"
  },
  "cdata": {
    "color": "#6272a4"
  },
  "punctuation": {
    "color": "#f8f8f2"
  },
  "property": {
    "color": "#ff79c6"
  },
  "// ...": "// ..."
}

```

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

### Install dependencies for AWS SES and React Email

Source: https://react.email/docs/integrations/aws-ses

Install the required packages for using React Email components and AWS SES SDK. This includes @react-email/components for email templates and @aws-sdk/client-ses for AWS SES integration.

```shell
npm install @aws-sdk/client-ses @react-email/components
```

```shell
yarn add @aws-sdk/client-ses @react-email/components
```

```shell
pnpm add @aws-sdk/client-ses @react-email/components
```

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

### Basic Usage of React Email Button Component

Source: https://react.email/docs/components/button

A basic example demonstrating how to import and use the Button component within a React email template. It shows how to provide an `href` and inline styles.

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

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

```

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

### Create React Email Component

Source: https://react.email/docs/integrations/postmark

Defines a basic email template using React Email components. This example creates a simple email with a button, demonstrating how to structure email content in a JSX/TSX file.

```tsx
import * as React from 'react';
import { Html, Button } from "@react-email/components";

export function Email(props) {
  const { url } = props;

  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
}
```

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

### Render Code with Syntax Highlighting - React

Source: https://react.email/docs/components/code-block

Example of how to import and use the CodeBlock component in a React email. It demonstrates passing the code, enabling line numbers, specifying a theme (dracula), and setting the language to JavaScript.

```jsx
import { CodeBlock, dracula } from '@react-email/code-block';

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"
  />);
};

```

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

### Basic Usage of React Email Heading Component

Source: https://react.email/docs/components/heading

Demonstrates how to import and use the Heading component in a React email template. The 'as' prop allows you to specify the HTML heading tag (h2 in this example).

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

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

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

### email build

Source: https://react.email/docs/cli

Copies the preview app for onto .react-email and builds it. This command prepares your email templates for previewing and testing.

```APIDOC
## email build

### Description
Copies the preview app onto .react-email and builds it.

### Method
CLI Command

### Endpoint
email build

### Parameters
#### Options
- **--dir** (string) - Optional - Change the directory of your email templates. Default: "emails"
- **--packageManager** (string) - Optional - Package manager to use on the installation of `.react-email`. Default: "npm"

### Request Example
```bash
email build --dir my-emails --packageManager yarn
```

### Response
#### Success Response
Returns built preview app in .react-email directory

#### Response Example
```
Building preview app...
Preview app built successfully in .react-email
```
```

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

### email help <cmd>

Source: https://react.email/docs/cli

Shows all the options for a specific command. This command provides detailed help information for any React Email CLI command.

```APIDOC
## email help <cmd>

### Description
Shows all the options for a specific command.

### Method
CLI Command

### Endpoint
email help [command]

### Parameters
#### Path Parameters
- **cmd** (string) - Required - The command to show help for

### Request Example
```bash
email help export
```

### Response
#### Success Response
Displays help information for the specified command

#### Response Example
```
Usage: email export [options]

Options:
  --outDir <string>    Change the output directory (default: "out")
  --pretty             Minify or prettify the generated HTML file (default: false)
  --plainText          Set output format as plain text (default: false)
  --dir <string>       Change the directory of your email templates (default: "emails")
```
```

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

### Add 'build' script to package.json for Vercel Deployment

Source: https://react.email/docs/deployment

This snippet shows how to add the 'email build' script to the 'scripts' section of your package.json file. This script is essential for Vercel to build the email preview server during deployment.

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

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

### Render email component with preview props in React Email (JSX)

Source: https://react.email/docs/cli

Illustrates importing an email component and spreading its PreviewProps for a preview render. Demonstrates how the preview server injects these props automatically. Works with any component that defines PreviewProps.

```jsx
import Email from "./path-to-my-email";

<Email {...Email.PreviewProps} />;
```

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

### Include 'next' in devDependencies for Vercel's Next.js Preset

Source: https://react.email/docs/deployment

When using Vercel's Next.js Framework Preset, it's necessary to include 'next' in your project's devDependencies. This ensures compatibility and proper functionality of the preset with the react.email preview server.

```json
{
  "devDependencies": {
    "next": "*"
  }
}
```

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

### Install @react-email/font with npm, yarn, or pnpm

Source: https://react.email/docs/components/font

Installs the @react-email/font package or the entire @react-email/components package using different package managers. This is the first step to using the Font component in your project.

```sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/font -E
```

```sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/font -E
```

```sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/font -E
```

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

### Set Up Resend Integration with CLI

Source: https://react.email/docs/integrations/resend

Configures Resend API key using React Email CLI for template uploads. Requires free Resend account and API key with full access. Run in terminal; prompts for key input. Enables dashboard collaboration; reset with 'resend reset' command.

```bash
npx react-email@latest resend setup
```

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

### Ignore directories in React Email preview server using underscore prefix (Bash example)

Source: https://react.email/docs/cli

Provides a sample project structure showing how prefixing a folder with an underscore (e.g., _components) prevents it from appearing in the preview sidebar. This helps keep helper files out of the email list. No code execution required, just directory naming convention.

```bash
my-project
├── emails
│   ├── _components
│   │   └── this-is-not-going-to-appear-in-the-sidebar.tsx
│   ├── email.tsx
│   └── static
├── package.json
└── tsconfig.json
```

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

### Open New Issue Link (HTML)

Source: https://react.email/docs/contributing/opening-issues

This HTML snippet creates a button to redirect users to the project's issue creation page. It provides a visual component for users to easily open a new bug report.

```HTML
<div className="w-full flex">
  <a className="border-none transition-colors text-white rounded-md px-3 items-center flex text-small h-10 transition colors" href="https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml" style="{ backgroundColor: '#238636' }">
    Open new issue
  </a>
</div>
```

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

### Create Email Template with React

Source: https://react.email/docs/utilities/render

Create a React component for your email template using @react-email/components. This example shows a simple email with text, a horizontal rule, and a button.

```jsx
import * as React from 'react';
import { Html, Button, Hr, Text } from "@react-email/components";

export function MyTemplate(props) {
  return (
    <Html lang="en">
      <Text>Some title</Text>
      <Hr />
      <Button href="https://example.com">Click me</Button>
    </Html>
  );
}

export default MyTemplate;
```