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
