Inbound - React Email

1. Install dependencies

Get the @react-email/components package and the Inbound Node.js SDK.

Make sure you have an account on inbound, you will need an inbound API key.

npm install inboundemail @react-email/components

yarn add inboundemail @react-email/components

pnpm add inboundemail @react-email/components

bun add inboundemail @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. Inbound takes care of that for you. You can just directly pass the React template to the SDK.</Info>

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

tsx

import { Inbound } from 'inboundemail';
import { Email } from './email';

const inbound = new Inbound(process.env.INBOUND_API_KEY);

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

4. Reply to an email

Use the Inbound SDK to reply to an email with the same template you just created.

tsx

import { Inbound } from 'inboundemail';
import { Email } from './email';

const inbound = new Inbound({
    apiKey: process.env.INBOUND_API_KEY
});

// sending an email via inbound
await inbound.emails.send(email.id,{
  from: "React Email <[email protected]>",
  react: <Email url="https://example.com" />
});

// replying to an email that was received via inbound
await inbound.emails.reply(email.id,{
  from: "React Email <[email protected]>",
  react: <Email url="https://example.com" />
});

Try it yourself

<Card title="Get started on Inbound" icon='arrow-up-right-from-square' iconType="duotone" href="https://inbound.new?utm_source=react-email%20docs&utm_medium=email&utm_campaign=react_email_campaign"

See it on our examples. </Card>