react-email

Name: react-email
Author: resend

4.6kinstalls19forks

How to install react-email?

resend/resend-skills/react-email

$npx -y skills add resend/resend-skills --skill react-email

Installs into the current project.

Summary

Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, n

Files · 1

View on GitHub

SKILL.md

1	# React Email
2
3	Build and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients.
4
5	## Installation
6
7	```sh
8	npm i react-email
9	```
10
11	Or scaffold a new project:
12
13	```sh
14	npx create-email@latest
15	cd react-email-starter
16	npm install
17	npm run dev
18	```
19
20	This works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly.
21
22	The dev server runs at localhost:3000 with a preview interface for templates in the `emails` folder.
23
24	### Adding to an Existing Project
25
26	Install the packages and add a script to your `package.json`:
27
28	```json
29	{
30	"scripts": {
31	"email": "email dev --dir emails --port 3000"
32	}
33	}
34	```
35
36	Make sure the path to the emails folder is relative to the base project directory. Ensure `tsconfig.json` includes proper support for JSX.
37
38	## Basic Email Template
39
40	Create an email component with proper structure using the Tailwind component for styling:
41
42	```tsx
43	import {
44	Html,
45	Head,
46	Preview,
47	Body,
48	Container,
49	Heading,
50	Text,
51	Button,
52	Tailwind,
53	pixelBasedPreset
54	} from 'react-email';
55
56	interface WelcomeEmailProps {
57	name: string;
58	verificationUrl: string;
59	}
60
61	export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
62	return (
63	<Html lang="en">
64	<Tailwind
65	config={{
66	presets: [pixelBasedPreset],
67	theme: {
68	extend: {
69	colors: {
70	brand: '#007bff',
71	},
72	},
73	},
74	}}
75	>
76	<Head />
77	<Body className="bg-gray-100 font-sans">
78	<Preview>Welcome - Verify your email</Preview>
79	<Container className="max-w-xl mx-auto p-5">
80	<Heading className="text-2xl text-gray-800">
81	Welcome!
82	</Heading>
83	<Text className="text-base text-gray-800">
84	Hi {name}, thanks for signing up!
85	</Text>
86	<Button
87	href={verificationUrl}
88	className="bg-brand text-white px-5 py-3 rounded block text-center no-underline box-border"
89	>
90	Verify Email
91	</Button>
92	</Container>
93	</Body>
94	</Tailwind>
95	</Html>
96	);
97	}
98
99	// Preview props for testing
100	WelcomeEmail.PreviewProps = {
101	name: 'John Doe',
102	verificationUrl: 'https://example.com/verify/abc123'
103	} satisfies WelcomeEmailProps;
104
105	export { WelcomeEmail };
106	```
107
108	## Behavioral Guidelines
109
110	- When iterating over the code, only update what the user asked for. Keep the rest intact.
111	- If the user asks to use media queries, inform them that most email clients don't support them and suggest a different approach.
112	- Never use template variables (like `{{name}}`) directly in TypeScript code. Instead, reference the underlying properties directly. If the user explicitly asks for `{{variableName}}`, place the mustache string only in PreviewProps, never in the component JSX:
113
114	```typescript
115	const EmailTemplate = (props) => {
116	return (
117	<h1>Hello, {props.variableName}!</h1>
118	);
119	}
120
121	EmailTemplate.PreviewProps = {
122	variableName: "{{variableName}}",
123	};
124
125	export default EmailTemplate;
126	```
127
128	- Never write the `{{variableName}}` pattern directly in the component structure. If the user insists, explain that this would make the template invalid.
129
130	## Essential Components
131
132	See [references/COMPONENTS.md](references/COMPONENTS.md) for complete component documentation.
133
134	Core Structure:
135	- `Html` - Root wrapper with `lang` attribute
136	- `Head` - Meta elements, styles, fonts
137	- `Body` - Main content wrapper
138	- `Container` - Outermost centering wrapper (has built-in `max-width: 37.5em`). Use only once per email.
139	- `Section` - Interior content blocks (no built-in max-width). Use for grouping content inside `Container`.
140	- `Row` & `Column` - Multi-column layouts
141	- `Tailwind` - Enables Tailwind CSS utility classes
142
143	Content:
144	- `Preview` - Inbox preview text, always first inside `<Body>`
145	- `Heading` - h1-h6 headings
146	- `Text` - Paragraphs
147	- `Button` - Styled link buttons (always include `box-border`)
148	- `Link` - Hyperlinks
149	- `Img` - Images (see Static Files section below)
150	- `Hr` - Horizontal dividers
151
152	Specialized:
153	- `CodeBlock` - Syntax-highlighted code
154	- `CodeIn

People who liked this also viewed

6 picks

Type

react-email

4.6kinstalls19forks

View on GitHub

How to install react-email?

resend/resend-skills/react-email

$npx -y skills add resend/resend-skills --skill react-email

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# React Email
2
3	Build and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients.
4
5	## Installation
6
7	```sh
8	npm i react-email
9	```
10
11	Or scaffold a new project:
12
13	```sh
14	npx create-email@latest
15	cd react-email-starter
16	npm install
17	npm run dev
18	```
19
20	This works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly.
21
22	The dev server runs at localhost:3000 with a preview interface for templates in the `emails` folder.
23
24	### Adding to an Existing Project
25
26	Install the packages and add a script to your `package.json`:
27
28	```json
29	{
30	"scripts": {
31	"email": "email dev --dir emails --port 3000"
32	}
33	}
34	```
35
36	Make sure the path to the emails folder is relative to the base project directory. Ensure `tsconfig.json` includes proper support for JSX.
37
38	## Basic Email Template
39
40	Create an email component with proper structure using the Tailwind component for styling:
41
42	```tsx
43	import {
44	Html,
45	Head,
46	Preview,
47	Body,
48	Container,
49	Heading,
50	Text,
51	Button,
52	Tailwind,
53	pixelBasedPreset
54	} from 'react-email';
55
56	interface WelcomeEmailProps {
57	name: string;
58	verificationUrl: string;
59	}
60
61	export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
62	return (
63	<Html lang="en">
64	<Tailwind
65	config={{
66	presets: [pixelBasedPreset],
67	theme: {
68	extend: {
69	colors: {
70	brand: '#007bff',
71	},
72	},
73	},
74	}}
75	>
76	<Head />
77	<Body className="bg-gray-100 font-sans">
78	<Preview>Welcome - Verify your email</Preview>
79	<Container className="max-w-xl mx-auto p-5">
80	<Heading className="text-2xl text-gray-800">
81	Welcome!
82	</Heading>
83	<Text className="text-base text-gray-800">
84	Hi {name}, thanks for signing up!
85	</Text>
86	<Button
87	href={verificationUrl}
88	className="bg-brand text-white px-5 py-3 rounded block text-center no-underline box-border"
89	>
90	Verify Email
91	</Button>
92	</Container>
93	</Body>
94	</Tailwind>
95	</Html>
96	);
97	}
98
99	// Preview props for testing
100	WelcomeEmail.PreviewProps = {
101	name: 'John Doe',
102	verificationUrl: 'https://example.com/verify/abc123'
103	} satisfies WelcomeEmailProps;
104
105	export { WelcomeEmail };
106	```
107
108	## Behavioral Guidelines
109
110	- When iterating over the code, only update what the user asked for. Keep the rest intact.
111	- If the user asks to use media queries, inform them that most email clients don't support them and suggest a different approach.
112	- Never use template variables (like `{{name}}`) directly in TypeScript code. Instead, reference the underlying properties directly. If the user explicitly asks for `{{variableName}}`, place the mustache string only in PreviewProps, never in the component JSX:
113
114	```typescript
115	const EmailTemplate = (props) => {
116	return (
117	<h1>Hello, {props.variableName}!</h1>
118	);
119	}
120
121	EmailTemplate.PreviewProps = {
122	variableName: "{{variableName}}",
123	};
124
125	export default EmailTemplate;
126	```
127
128	- Never write the `{{variableName}}` pattern directly in the component structure. If the user insists, explain that this would make the template invalid.
129
130	## Essential Components
131
132	See [references/COMPONENTS.md](references/COMPONENTS.md) for complete component documentation.
133
134	Core Structure:
135	- `Html` - Root wrapper with `lang` attribute
136	- `Head` - Meta elements, styles, fonts
137	- `Body` - Main content wrapper
138	- `Container` - Outermost centering wrapper (has built-in `max-width: 37.5em`). Use only once per email.
139	- `Section` - Interior content blocks (no built-in max-width). Use for grouping content inside `Container`.
140	- `Row` & `Column` - Multi-column layouts
141	- `Tailwind` - Enables Tailwind CSS utility classes
142
143	Content:
144	- `Preview` - Inbox preview text, always first inside `<Body>`
145	- `Heading` - h1-h6 headings
146	- `Text` - Paragraphs
147	- `Button` - Styled link buttons (always include `box-border`)
148	- `Link` - Hyperlinks
149	- `Img` - Images (see Static Files section below)
150	- `Hr` - Horizontal dividers
151
152	Specialized:
153	- `CodeBlock` - Syntax-highlighted code
154	- `CodeIn

People who liked this also viewed

6 picks

Type