Skip to main content
A React html component to wrap emails. This is the root component that wraps all other email content.

Installation

npm install @react-email/html -E

Usage

Add the component to your email template. Include styles where needed.
import { Button } from "@react-email/button";
import { Html } from "@react-email/html";

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

Props

The Html component accepts all standard HTML attributes for the <html> element, plus:
lang
string
default:"en"
The language of the email content
dir
string
default:"ltr"
The text direction of the email content. Use "rtl" for right-to-left languages
children
ReactNode
The content of your email
style
CSSProperties
Inline styles for the html element

TypeScript

export type HtmlProps = Readonly<React.ComponentPropsWithoutRef<'html'>>;

Email Client Support

This component was tested using the most popular email clients.
GmailApple MailOutlookYahoo! MailHEYSuperhuman

Build docs developers (and LLMs) love