Send email using Resend - React Email

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/components package and the Resend Node.js SDK.

npm install resend @react-email/components

yarn add resend @react-email/components

pnpm add resend @react-email/components

</CodeGroup>

2. Create an email using React

Start by building your email template in a .jsx or .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>
  );
}

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

import { Resend } from 'resend';
import { Email } from './email';

const resend = new Resend('re_123456789');

await resend.emails.send({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'hello world',
  react: <Email url="https://example.com" />,
});

Set up Templates with Resend

Resend Templates 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.

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

bash

npx react-email@latest resend setup

This will prompt you to enter your Resend API Key. To get one, navigate to 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.

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>