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