> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Updating React Email

> How to update from previous React Email majors

## 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 theme={"theme":{"light":"github-light","dark":"vesper"}}
     npm uninstall @react-email/components @react-email/preview-server
     npm install react-email@latest @react-email/ui@latest
     ```

     ```sh yarn theme={"theme":{"light":"github-light","dark":"vesper"}}
     yarn remove @react-email/components @react-email/preview-server
     yarn install react-email@latest @react-email/ui@latest
     ```

     ```sh pnpm theme={"theme":{"light":"github-light","dark":"vesper"}}
     pnpm remove @react-email/components @react-email/preview-server
     pnpm install react-email@latest @react-email/ui@latest
     ```

     ```sh bun theme={"theme":{"light":"github-light","dark":"vesper"}}
     bun remove @react-email/components @react-email/preview-server
     bun install react-email@latest @react-email/ui@latest
     ```
   </CodeGroup>

2. **Update your imports**:

   ```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
   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.