Skip to content

Conversation

@gabrielmfern
Copy link
Member

@gabrielmfern gabrielmfern commented Dec 9, 2025

Summary by cubic

Refreshes the getting-started guides to streamline setup, standardize examples, and add Bun support. Updates screenshots with dedicated images for automatic and manual setup.

  • Refactors
    • Manual setup: add @react-email/preview-server, rename script to email:dev, use emails/email.tsx with Head/Body, and simplify steps/commands.
    • Automatic setup: include Bun create/install/dev commands and update the dev screenshot.
    • Monorepo guides (npm, yarn, pnpm, bun): add @react-email/preview-server, switch examples to emails/email.tsx with a default export and Head/Body, and update screenshots.
    • Assets: replace local-dev.jpg with automatic-setup-dev.png and manual-setup-dev.png.

Written for commit 4afe3d7. Summary will update automatically on new commits.

@changeset-bot
Copy link

changeset-bot bot commented Dec 9, 2025

⚠️ No Changeset found

Latest commit: 4afe3d7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link

vercel bot commented Dec 9, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
react-email Ready Ready Preview Comment Dec 9, 2025 6:15pm
react-email-demo Ready Ready Preview Comment Dec 9, 2025 6:15pm

@gabrielmfern gabrielmfern requested review from a team, pedro-stramantinoli and vieiralucas and removed request for a team and pedro-stramantinoli December 9, 2025 18:17
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4 issues found across 9 files

Prompt for AI agents (all 4 issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/docs/getting-started/monorepo-setup/yarn.mdx">

<violation number="1" location="apps/docs/getting-started/monorepo-setup/yarn.mdx:64">
P2: File name inconsistency: The code block now references `email.tsx` but the surrounding documentation (step 5 prose and step 7) still references `MyEmail.tsx`. Consider updating step 5 to say &quot;create a file inside called `email.tsx`&quot; and step 7 to reference `emails/email.tsx`.</violation>
</file>

<file name="apps/docs/getting-started/monorepo-setup/pnpm.mdx">

<violation number="1" location="apps/docs/getting-started/monorepo-setup/pnpm.mdx:48">
P2: Documentation inconsistency: The code block path changed to `email.tsx`, but Step 4&#39;s text still instructs creating `MyEmail.tsx` and Step 6 references editing `emails/MyEmail.tsx`. Consider updating the prose to match the new filename or keeping the original filename.</violation>
</file>

<file name="apps/docs/getting-started/monorepo-setup/bun.mdx">

<violation number="1" location="apps/docs/getting-started/monorepo-setup/bun.mdx:49">
P2: Documentation inconsistency: The code block filename was changed to `email.tsx` but the instruction text above still says to create `MyEmail.tsx`. Users following this guide will be confused about which filename to use. Consider updating the instruction text to match the new filename.</violation>
</file>

<file name="apps/docs/getting-started/monorepo-setup/npm.mdx">

<violation number="1" location="apps/docs/getting-started/monorepo-setup/npm.mdx:49">
P2: Documentation inconsistency: The code block path was changed to `email.tsx` but the prose in Step 4 still instructs users to create `MyEmail.tsx`, and Step 6 still references `emails/MyEmail.tsx`. Either the prose descriptions should be updated to match the new filename, or the code block path should remain as `MyEmail.tsx`.</violation>
</file>

Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR


```jsx packages/transactional/emails/MyEmail.tsx
import { Button, Html } from "@react-email/components";
```jsx packages/transactional/emails/email.tsx
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: File name inconsistency: The code block now references email.tsx but the surrounding documentation (step 5 prose and step 7) still references MyEmail.tsx. Consider updating step 5 to say "create a file inside called email.tsx" and step 7 to reference emails/email.tsx.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/getting-started/monorepo-setup/yarn.mdx, line 64:

<comment>File name inconsistency: The code block now references `email.tsx` but the surrounding documentation (step 5 prose and step 7) still references `MyEmail.tsx`. Consider updating step 5 to say &quot;create a file inside called `email.tsx`&quot; and step 7 to reference `emails/email.tsx`.</comment>

<file context>
@@ -61,24 +61,25 @@ Include the following script in your `package.json` file.
 
-```jsx packages/transactional/emails/MyEmail.tsx
-import { Button, Html } from &quot;@react-email/components&quot;;
+```jsx packages/transactional/emails/email.tsx
+import { Button, Html, Head, Body } from &quot;@react-email/components&quot;;
 import * as React from &quot;react&quot;;
</file context>
Fix with Cubic


```jsx packages/transactional/emails/MyEmail.tsx
import { Button, Html } from "@react-email/components";
```jsx packages/transactional/emails/email.tsx
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Documentation inconsistency: The code block path changed to email.tsx, but Step 4's text still instructs creating MyEmail.tsx and Step 6 references editing emails/MyEmail.tsx. Consider updating the prose to match the new filename or keeping the original filename.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/getting-started/monorepo-setup/pnpm.mdx, line 48:

<comment>Documentation inconsistency: The code block path changed to `email.tsx`, but Step 4&#39;s text still instructs creating `MyEmail.tsx` and Step 6 references editing `emails/MyEmail.tsx`. Consider updating the prose to match the new filename or keeping the original filename.</comment>

<file context>
@@ -45,24 +45,25 @@ Include the following script in your `package.json` file.
 
-```jsx packages/transactional/emails/MyEmail.tsx
-import { Button, Html } from &quot;@react-email/components&quot;;
+```jsx packages/transactional/emails/email.tsx
+import { Button, Html, Head, Body } from &quot;@react-email/components&quot;;
 import * as React from &quot;react&quot;;
</file context>
Suggested change
```jsx packages/transactional/emails/email.tsx
```jsx packages/transactional/emails/MyEmail.tsx
Fix with Cubic


```jsx packages/transactional/emails/MyEmail.tsx
import { Button, Html } from "@react-email/components";
```jsx packages/transactional/emails/email.tsx
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Documentation inconsistency: The code block filename was changed to email.tsx but the instruction text above still says to create MyEmail.tsx. Users following this guide will be confused about which filename to use. Consider updating the instruction text to match the new filename.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/getting-started/monorepo-setup/bun.mdx, line 49:

<comment>Documentation inconsistency: The code block filename was changed to `email.tsx` but the instruction text above still says to create `MyEmail.tsx`. Users following this guide will be confused about which filename to use. Consider updating the instruction text to match the new filename.</comment>

<file context>
@@ -46,24 +46,25 @@ Include the following script in your `package.json` file.
 
-```jsx packages/transactional/emails/MyEmail.tsx
-import { Button, Html } from &quot;@react-email/components&quot;;
+```jsx packages/transactional/emails/email.tsx
+import { Button, Html, Head, Body } from &quot;@react-email/components&quot;;
 import * as React from &quot;react&quot;;
</file context>
Fix with Cubic


```jsx packages/transactional/emails/MyEmail.tsx
import { Button, Html } from "@react-email/components";
```jsx packages/transactional/emails/email.tsx
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Documentation inconsistency: The code block path was changed to email.tsx but the prose in Step 4 still instructs users to create MyEmail.tsx, and Step 6 still references emails/MyEmail.tsx. Either the prose descriptions should be updated to match the new filename, or the code block path should remain as MyEmail.tsx.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/getting-started/monorepo-setup/npm.mdx, line 49:

<comment>Documentation inconsistency: The code block path was changed to `email.tsx` but the prose in Step 4 still instructs users to create `MyEmail.tsx`, and Step 6 still references `emails/MyEmail.tsx`. Either the prose descriptions should be updated to match the new filename, or the code block path should remain as `MyEmail.tsx`.</comment>

<file context>
@@ -46,24 +46,25 @@ Include the following script in your `package.json` file.
 
-```jsx packages/transactional/emails/MyEmail.tsx
-import { Button, Html } from &quot;@react-email/components&quot;;
+```jsx packages/transactional/emails/email.tsx
+import { Button, Html, Head, Body } from &quot;@react-email/components&quot;;
 import * as React from &quot;react&quot;;
</file context>
Fix with Cubic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants