React Components For Building And Sending Emails

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

It reduces the pain of coding responsive emails with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you.

Components Included:

  • Html
  • Head
  • Button
  • Link
  • Image
  • Divider
  • Paragraph
  • Container
  • Code
  • Preview

How to use it:

1. Install and import the components.

import { Html } from '@react-email/html';
import { Head } from '@react-email/head';
import { Button } from '@react-email/button';
import { A } from '@react-email/a';
import { Img } from '@react-email/img';
import { Hr } from '@react-email/hr';
import { P } from '@react-email/p';
import { Container } from '@react-email/container';
import { Code } from '@react-email/code';
import { Preview } from '@react-email/preview';

2. Add the components to the app.

// html
const Email = () => {
  return (
    <Html lang="en">
      <Button href="https://example.com" style={{ color: '#61dafb' }}>
        Click me
      </Button>
    </Html>
  );
};
// head
const Email = () => {
  return (
    <Head>
      <title>My email title</title>
    </Head>
  );
};
// button
const Email = () => {
  return (
    <Button href="https://example.com" style={{ color: '#61dafb' }}>
      Click me
    </Button>
  );
};
// Link
const Email = () => {
  return <A href="https://example.com">Example</A>;
};
// image
const Email = () => {
  return <Img src="cat.jpg" alt="Cat" width="300" height="300" />;
};
// divider
const Email = () => {
  return <Hr />;
};
// paragraph
const Email = () => {
  return <Hr />;
};
// container
const Email = () => {
  return (
    <Container>
      <Button href="https://example.com" style={{ color: '#61dafb' }}>
        Click me
      </Button>
    </Container>
  );
};
// code
const Email = () => {
  return (
    <Container>
      <Code style={{ color: '#000' }}>const foo = 'bar';</Code>
    </Container>
  );
};
// preview
const Email = () => {
  return <Preview>Email preview text</Preview>;
};

Preview:

Download Details:

Author: zenorocha

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/zenorocha/react-email

License: MIT

You Might Be Interested In:

Tags:

Add Comment