mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Lauren Dorman
69 lines
2.8 KiB
Plaintext
69 lines
2.8 KiB
Plaintext
---
|
|
title: 'Updating React Email'
|
|
sidebarTitle: 'Updating React Email'
|
|
description: 'How to update from previous React Email majors'
|
|
'og:image': 'https://react.email/static/covers/react-email.png'
|
|
icon: 'arrow-up-wide-short'
|
|
---
|
|
|
|
import NextSteps from '/snippets/next-steps.mdx';
|
|
|
|
## Update from React Email 5.0 to 6.0
|
|
|
|
All components (previously in `@react-email/components` or individual packages like `@react-email/button`) and rendering utilities (previously in `@react-email/render`) are now exported directly from `react-email`. This unifies the install and import experience into a single package.
|
|
|
|
Now, what was previously `@react-email/preview-server` was moved over to `@react-email/ui`, so you will also need to replace that.
|
|
|
|
To update:
|
|
|
|
1. **Update your dependencies** -- remove `@react-email/components` and `@react-email/preview-server`, keep `react-email` and add `@react-email/ui`:
|
|
|
|
<CodeGroup>
|
|
|
|
```sh npm
|
|
npm uninstall @react-email/components @react-email/preview-server
|
|
npm install react-email@latest @react-email/ui@latest
|
|
```
|
|
|
|
```sh yarn
|
|
yarn remove @react-email/components @react-email/preview-server
|
|
yarn install react-email@latest @react-email/ui@latest
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm remove @react-email/components @react-email/preview-server
|
|
pnpm install react-email@latest @react-email/ui@latest
|
|
```
|
|
|
|
```sh bun
|
|
bun remove @react-email/components @react-email/preview-server
|
|
bun install react-email@latest @react-email/ui@latest
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
2. **Update your imports**:
|
|
|
|
```tsx
|
|
import { Button, Html, Head, render } from "@react-email/components"; // [!code --]
|
|
import { Button, Html, Head, render } from "react-email"; // [!code ++]
|
|
```
|
|
|
|
3. The `@react-email/ui` and `@react-email/editor` packages are not included in `react-email`
|
|
|
|
## Update from React Email 4.0 to 5.0
|
|
|
|
1. Update your React Email packages: `npm install @react-email/components@latest react-email@latest`.
|
|
2. Replace all `renderAsync` uses with `render`.
|
|
|
|
Make sure you update `@react-email/components` alongside `react-email`. The compatibility checker now only supports Tailwind 4, so you need to update both in sync.
|
|
|
|
### Tailwind 4
|
|
|
|
This update includes Tailwind 4 via `@react-email/components@latest`. Some utilities have changed since Tailwind 3—review their [upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) to adjust your code if needed.
|
|
|
|
Tailwind 4 also changes how classes are handled in components. Previously, passing `className` added an equivalent inlined `style` prop, which caused confusion and performance issues. Now, styles are only inlined on elements, not components. If you were merging utilities with the `style` prop, consider using [tailwind-merge](https://github.com/dcastil/tailwind-merge) instead.
|
|
|
|
The configuration remains in the `config` prop.
|
|
|