Skip to main content

Beautiful Email Templates
Built with React & Tailwind CSS

Effortlessly design professional emails with our collection of customizable React components. Fast, responsive, and developer-friendly.

Quick Start

Get up and running with ReactUI Email in just a few minutes

1

Install the package

Install ReactUI Email and its peer dependencies using your preferred package manager.
npm install @react-email/components react
2

Copy a template

Browse our collection of templates and copy the one that fits your needs. All templates are built with React Email components and styled with Tailwind CSS.
import { Html, Head, Body, Container, Text, Button } from '@react-email/components';

export default function WelcomeEmail() {
  return (
    <Html>
      <Head />
      <Body className="bg-white font-sans">
        <Container className="mx-auto py-8">
          <Text className="text-2xl font-bold">Welcome!</Text>
          <Button href="https://example.com">Get Started</Button>
        </Container>
      </Body>
    </Html>
  );
}
3

Customize with Tailwind CSS

Modify the template to match your brand. All components support Tailwind CSS classes for easy customization.
ReactUI Email uses the Tailwind component from @react-email/components to enable full Tailwind CSS support in email clients.
4

Render and send

Use the render function from @react-email/render to convert your React component to HTML, then send it with your preferred email service.
import { render } from '@react-email/render';
import WelcomeEmail from './emails/welcome';

const html = render(<WelcomeEmail />);
// Send the HTML with your email service (Resend, SendGrid, etc.)

Explore by Topic

Discover templates, components, and guides to build beautiful emails

Email Templates

Browse brand-inspired email templates from Peerlist, Framer, Notion, and more

Components

Reusable React Email components for buttons, headers, grids, and layouts

Tailwind Styling

Learn how to customize email styles with Tailwind CSS classes

Sending Emails

Integrate with Resend, SendGrid, and other email services

Why ReactUI Email?

Lightning Fast

Copy and paste templates to get started in seconds

Production Ready

Tested across major email clients for consistent rendering

Fully Customizable

Tailwind CSS makes it easy to match your brand

Ready to get started?

Start building beautiful emails with ReactUI Email templates today

Get Started