> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Send email using Resend

> Learn how to send an email and set up Templates using React Email and the Resend Node.js SDK.

## Send email with Resend

<Tip>Resend was built by the same team that created React Email, which makes this our recommendation to send emails.</Tip>

### 1. Install dependencies

Get the [react-email](https://www.npmjs.com/package/react-email) package and the [Resend Node.js SDK](https://www.npmjs.com/package/resend).

<CodeGroup>
  ```sh npm theme={"theme":{"light":"github-light","dark":"vesper"}}
  npm install resend react-email
  ```

  ```sh yarn theme={"theme":{"light":"github-light","dark":"vesper"}}
  yarn add resend react-email
  ```

  ```sh pnpm theme={"theme":{"light":"github-light","dark":"vesper"}}
  pnpm add resend react-email
  ```
</CodeGroup>

### 2. Create an email using React

Start by building your email template in a `.jsx` or `.tsx` file.

```tsx email.tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import * as React from 'react';
import { Html, Button } from "react-email";

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

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

export default Email;
```

### 3. Send email

<Info>When integrating with other services, you need to convert your React template into HTML before sending. Resend takes care of that for you.</Info>

Import the email template you just built and use the Resend SDK to send it.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { Resend } from 'resend';
import { Email } from './email';

const resend = new Resend('re_123456789');

await resend.emails.send({
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  react: <Email url="https://example.com" />,
});
```

## Set up Templates with Resend

[Resend Templates](https://resend.com/docs/dashboard/templates/introduction) are a great way to collaborate on emails with your team, even if they're not technical. Upload a React Email Template to Resend and your entire team can collaborate in real-time in the visual editor.

Here's how to get started.

### 1. Add your Resend API Key

First, sign up for a [free Resend account](https://resend.com/signup).

Next, set up the Resend integration using the React Email CLI:

```bash theme={"theme":{"light":"github-light","dark":"vesper"}}
npx react-email@latest resend setup
```

This will prompt you to enter your Resend API Key. To get one, navigate to [API Keys](https://resend.com/api-keys) in your Resend dashboard, click **Create API key**, and ensure that the API Key is scoped to **Full Access**.

Paste the API Key into the terminal and press enter.

### 2. Upload a Template to Resend

Run React Email and visit the **Resend** tab of the toolbar, located at the bottom of the window.

Choose **Upload** or **Bulk Upload** to import your Template to Resend.

<video src="https://cdn.resend.com/posts/react-email-resend-integration.mp4" autoPlay loop playsInline class="extraWidth" />

If you want to remove the Resend integration, run `npx react-email@latest resend reset`.

## Try it yourself

<Card title="Resend example" icon="arrow-up-right-from-square" iconType="duotone" href="https://github.com/resend/react-email/tree/main/examples/resend">
  See the full source code.
</Card>
