diff --git a/apps/demo/emails/airbnb-review.tsx b/apps/demo/emails/airbnb-review.tsx
index 3b86e428..2f0e873b 100644
--- a/apps/demo/emails/airbnb-review.tsx
+++ b/apps/demo/emails/airbnb-review.tsx
@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface AirbnbReviewEmailProps {
diff --git a/apps/demo/emails/amazon-review.tsx b/apps/demo/emails/amazon-review.tsx
index b2530d6f..b4b79652 100644
--- a/apps/demo/emails/amazon-review.tsx
+++ b/apps/demo/emails/amazon-review.tsx
@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface AmazonReviewEmailProps {
diff --git a/apps/demo/emails/apple-receipt.tsx b/apps/demo/emails/apple-receipt.tsx
index db70b011..1484932e 100644
--- a/apps/demo/emails/apple-receipt.tsx
+++ b/apps/demo/emails/apple-receipt.tsx
@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';
diff --git a/apps/demo/emails/codepen-challengers.tsx b/apps/demo/emails/codepen-challengers.tsx
index 5ac0cc54..1adbf5e5 100644
--- a/apps/demo/emails/codepen-challengers.tsx
+++ b/apps/demo/emails/codepen-challengers.tsx
@@ -12,7 +12,7 @@ import {
   Section,
   Text,
   Row
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';
diff --git a/apps/demo/emails/dropbox-reset-password.tsx b/apps/demo/emails/dropbox-reset-password.tsx
index dd0bbcf9..f3638c5e 100644
--- a/apps/demo/emails/dropbox-reset-password.tsx
+++ b/apps/demo/emails/dropbox-reset-password.tsx
@@ -9,7 +9,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface DropboxResetPasswordEmailProps {
diff --git a/apps/demo/emails/github-access-token.tsx b/apps/demo/emails/github-access-token.tsx
index 7ae02485..433f2250 100644
--- a/apps/demo/emails/github-access-token.tsx
+++ b/apps/demo/emails/github-access-token.tsx
@@ -9,7 +9,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface GithubAccessTokenEmailProps {
diff --git a/apps/demo/emails/google-play-policy-update.tsx b/apps/demo/emails/google-play-policy-update.tsx
index a5b80a0f..cd53d2b8 100644
--- a/apps/demo/emails/google-play-policy-update.tsx
+++ b/apps/demo/emails/google-play-policy-update.tsx
@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';
diff --git a/apps/demo/emails/koala-welcome.tsx b/apps/demo/emails/koala-welcome.tsx
index 4f3f3cf6..e2ca638e 100644
--- a/apps/demo/emails/koala-welcome.tsx
+++ b/apps/demo/emails/koala-welcome.tsx
@@ -9,7 +9,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface KoalaWelcomeEmailProps {
diff --git a/apps/demo/emails/linear-login-code.tsx b/apps/demo/emails/linear-login-code.tsx
index 7072e6ea..48f98970 100644
--- a/apps/demo/emails/linear-login-code.tsx
+++ b/apps/demo/emails/linear-login-code.tsx
@@ -11,7 +11,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface LinearLoginCodeEmailProps {
diff --git a/apps/demo/emails/netlify-welcome.tsx b/apps/demo/emails/netlify-welcome.tsx
index 5f2f7e8e..0876afab 100644
--- a/apps/demo/emails/netlify-welcome.tsx
+++ b/apps/demo/emails/netlify-welcome.tsx
@@ -13,7 +13,7 @@ import {
   Section,
   Tailwind,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface NetlifyWelcomeEmailProps {
diff --git a/apps/demo/emails/nike-receipt.tsx b/apps/demo/emails/nike-receipt.tsx
index 8779bac4..da7fb318 100644
--- a/apps/demo/emails/nike-receipt.tsx
+++ b/apps/demo/emails/nike-receipt.tsx
@@ -12,7 +12,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';
diff --git a/apps/demo/emails/notion-magic-link.tsx b/apps/demo/emails/notion-magic-link.tsx
index 4981880e..0326ef6e 100644
--- a/apps/demo/emails/notion-magic-link.tsx
+++ b/apps/demo/emails/notion-magic-link.tsx
@@ -1,14 +1,4 @@
-import {
-  Body,
-  Container,
-  Head,
-  Heading,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Text
-} from '@jsx-email/components';
+import { Body, Container, Head, Heading, Html, Img, Link, Preview, Text } from '@jsx-email/all';
 import * as React from 'react';
 
 interface NotionMagicLinkEmailProps {
diff --git a/apps/demo/emails/plaid-verify-identity.tsx b/apps/demo/emails/plaid-verify-identity.tsx
index 3076e7d7..acfb4105 100644
--- a/apps/demo/emails/plaid-verify-identity.tsx
+++ b/apps/demo/emails/plaid-verify-identity.tsx
@@ -1,14 +1,4 @@
-import {
-  Body,
-  Container,
-  Head,
-  Heading,
-  Html,
-  Img,
-  Link,
-  Section,
-  Text
-} from '@jsx-email/components';
+import { Body, Container, Head, Heading, Html, Img, Link, Section, Text } from '@jsx-email/all';
 import * as React from 'react';
 
 interface PlaidVerifyIdentityEmailProps {
diff --git a/apps/demo/emails/raycast-magic-link.tsx b/apps/demo/emails/raycast-magic-link.tsx
index e6167000..c30043ce 100644
--- a/apps/demo/emails/raycast-magic-link.tsx
+++ b/apps/demo/emails/raycast-magic-link.tsx
@@ -10,7 +10,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface RaycastMagicLinkEmailProps {
diff --git a/apps/demo/emails/slack-confirm.tsx b/apps/demo/emails/slack-confirm.tsx
index 0fc0e6a0..88980d0e 100644
--- a/apps/demo/emails/slack-confirm.tsx
+++ b/apps/demo/emails/slack-confirm.tsx
@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface SlackConfirmEmailProps {
diff --git a/apps/demo/emails/stack-overflow-tips.tsx b/apps/demo/emails/stack-overflow-tips.tsx
index a2c39d89..d395e61e 100644
--- a/apps/demo/emails/stack-overflow-tips.tsx
+++ b/apps/demo/emails/stack-overflow-tips.tsx
@@ -12,7 +12,7 @@ import {
   Section,
   Text,
   Row
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface StackOverflowTipsEmailProps {
diff --git a/apps/demo/emails/stripe-welcome.tsx b/apps/demo/emails/stripe-welcome.tsx
index b6cbed78..34c08dd9 100644
--- a/apps/demo/emails/stripe-welcome.tsx
+++ b/apps/demo/emails/stripe-welcome.tsx
@@ -10,7 +10,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';
diff --git a/apps/demo/emails/twitch-reset-password.tsx b/apps/demo/emails/twitch-reset-password.tsx
index 9a2158ca..67a667a5 100644
--- a/apps/demo/emails/twitch-reset-password.tsx
+++ b/apps/demo/emails/twitch-reset-password.tsx
@@ -10,7 +10,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface TwitchResetPasswordEmailProps {
diff --git a/apps/demo/emails/vercel-invite-user.tsx b/apps/demo/emails/vercel-invite-user.tsx
index 32b40f6d..a0804def 100644
--- a/apps/demo/emails/vercel-invite-user.tsx
+++ b/apps/demo/emails/vercel-invite-user.tsx
@@ -14,7 +14,7 @@ import {
   Section,
   Tailwind,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface VercelInviteUserEmailProps {
diff --git a/apps/demo/emails/yelp-recent-login.tsx b/apps/demo/emails/yelp-recent-login.tsx
index aab5d08d..b1e2912f 100644
--- a/apps/demo/emails/yelp-recent-login.tsx
+++ b/apps/demo/emails/yelp-recent-login.tsx
@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface YelpRecentLoginEmailProps {
diff --git a/packages/body/src/body.tsx b/packages/body/src/body.tsx
index 8ce4b7e0..3daa66cd 100644
--- a/packages/body/src/body.tsx
+++ b/packages/body/src/body.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type React from 'react';
 
 type RootProps = React.ComponentPropsWithoutRef<'body'>;
 
diff --git a/packages/button/src/button.tsx b/packages/button/src/button.tsx
index 9cae5500..9e2de112 100644
--- a/packages/button/src/button.tsx
+++ b/packages/button/src/button.tsx
@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type React from 'react';
 
 import { pxToPt, parsePadding } from './utils';
 
-type ButtonElement = React.ElementRef<'a'>;
 type RootProps = React.ComponentPropsWithoutRef<'a'>;
 
 export interface ButtonProps extends RootProps {
@@ -40,40 +39,38 @@ const buttonTextStyle = (pb?: number) => {
   };
 };
 
-export const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(
-  ({ children, style, target = '_blank', ...props }, forwardedRef) => {
-    const { pt, pr, pb, pl } = parsePadding({
-      padding: style?.padding,
-      paddingBottom: style?.paddingBottom,
-      paddingLeft: style?.paddingLeft,
-      paddingRight: style?.paddingRight,
-      paddingTop: style?.paddingTop
-    });
+export const Button: React.FC<Readonly<ButtonProps>> = ({
+  children,
+  style,
+  target = '_blank',
+  ...props
+}) => {
+  const { pt, pr, pb, pl } = parsePadding({
+    padding: style?.padding,
+    paddingBottom: style?.paddingBottom,
+    paddingLeft: style?.paddingLeft,
+    paddingRight: style?.paddingRight,
+    paddingTop: style?.paddingTop
+  });
 
-    const y = pt + pb;
-    const textRaise = pxToPt(y);
+  const y = pt + pb;
+  const textRaise = pxToPt(y);
 
-    return (
-      <a
-        {...props}
-        ref={forwardedRef}
-        target={target}
-        style={buttonStyle({ ...style, pb, pl, pr, pt })}
-      >
-        <span
-          dangerouslySetInnerHTML={{
-            __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
-          }}
-        />
-        <span style={buttonTextStyle(pb)}>{children}</span>
-        <span
-          dangerouslySetInnerHTML={{
-            __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
-          }}
-        />
-      </a>
-    );
-  }
-);
+  return (
+    <a {...props} target={target} style={buttonStyle({ ...style, pb, pl, pr, pt })}>
+      <span
+        dangerouslySetInnerHTML={{
+          __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
+        }}
+      />
+      <span style={buttonTextStyle(pb)}>{children}</span>
+      <span
+        dangerouslySetInnerHTML={{
+          __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
+        }}
+      />
+    </a>
+  );
+};
 
 Button.displayName = 'Button';
diff --git a/packages/cli/app/src/css/globals.css b/packages/cli/app/src/css/globals.css
index ac98e5e4..e716e454 100644
--- a/packages/cli/app/src/css/globals.css
+++ b/packages/cli/app/src/css/globals.css
@@ -1,13 +1,23 @@
 @import url(https://fonts.bunny.net/css?family=andika:400,400i,700,700i|inter:400,600|montserrat:100,200,300,400,500,600);
-@import './monokai4.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
-  html, body {
-    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  html,
+  body {
+    font-family:
+      'Montserrat',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Helvetica,
+      Arial,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol';
   }
 
   .shiki {
@@ -27,11 +37,13 @@
     white-space: pre;
   }
 
-  .shiki .line:last-child:before, .shiki .line:last-child span {
+  .shiki .line:last-child:before,
+  .shiki .line:last-child span {
     padding-bottom: 30px;
   }
 
-  .shiki .line:first-child:before, .shiki .line:first-child span {
+  .shiki .line:first-child:before,
+  .shiki .line:first-child span {
     padding-top: 10px;
   }
 
diff --git a/packages/column/src/column.tsx b/packages/column/src/column.tsx
index 7ff5db9d..9cb8d74c 100644
--- a/packages/column/src/column.tsx
+++ b/packages/column/src/column.tsx
@@ -1,16 +1,17 @@
-import * as React from 'react';
+import type React from 'react';
 
-type ColumnElement = React.ElementRef<'td'>;
 type RootProps = React.ComponentPropsWithoutRef<'td'>;
 
 export interface ColumnProps extends RootProps {}
 
-export const Column = React.forwardRef<ColumnElement, Readonly<ColumnProps>>(
-  ({ children, style, ...props }, forwardedRef) => (
-    <td {...props} ref={forwardedRef} data-id="@jsx-email/column" style={style}>
-      {children}
-    </td>
-  )
+export const Column = ({
+  children,
+  style,
+  ...props
+}: React.PropsWithChildren<Readonly<ColumnProps>>) => (
+  <td {...props} data-id="@jsx-email/column" style={style}>
+    {children}
+  </td>
 );
 
 Column.displayName = 'Column';
diff --git a/packages/container/src/container.tsx b/packages/container/src/container.tsx
index f75a860b..02d8c8eb 100644
--- a/packages/container/src/container.tsx
+++ b/packages/container/src/container.tsx
@@ -1,31 +1,27 @@
-import * as React from 'react';
+import type React from 'react';
 
-type ContainerElement = React.ElementRef<'table'>;
 type RootProps = React.ComponentPropsWithoutRef<'table'>;
 
 export interface ContainerProps extends RootProps {}
 
-export const Container = React.forwardRef<ContainerElement, Readonly<ContainerProps>>(
-  ({ children, style, ...props }, forwardedRef) => (
-    <table
-      align="center"
-      width="100%"
-      {...props}
-      ref={forwardedRef}
-      data-id="@jsx-email/container"
-      role="presentation"
-      cellSpacing="0"
-      cellPadding="0"
-      border={0}
-      style={{ maxWidth: '37.5em', ...style }}
-    >
-      <tbody>
-        <tr style={{ width: '100%' }}>
-          <td>{children}</td>
-        </tr>
-      </tbody>
-    </table>
-  )
+export const Container: React.FC<Readonly<ContainerProps>> = ({ children, style, ...props }) => (
+  <table
+    align="center"
+    width="100%"
+    {...props}
+    data-id="@jsx-email/container"
+    role="presentation"
+    cellSpacing="0"
+    cellPadding="0"
+    border={0}
+    style={{ maxWidth: '37.5em', ...style }}
+  >
+    <tbody>
+      <tr style={{ width: '100%' }}>
+        <td>{children}</td>
+      </tr>
+    </tbody>
+  </table>
 );
 
 Container.displayName = 'Container';
diff --git a/packages/font/src/font.tsx b/packages/font/src/font.tsx
index 5d4ac9e7..8ae7cd3f 100644
--- a/packages/font/src/font.tsx
+++ b/packages/font/src/font.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type React from 'react';
 
 type FallbackFont = 'Arial' | 'Helvetica' | 'Verdana' | 'Georgia' | 'Times New Roman';
 
@@ -46,8 +46,8 @@ export const Font: React.FC<Readonly<FontProps>> = ({
 
     * {
       font-family: '${fontFamily}', ${
-    Array.isArray(fallbackFontFamily) ? fallbackFontFamily.join(', ') : fallbackFontFamily
-  };
+        Array.isArray(fallbackFontFamily) ? fallbackFontFamily.join(', ') : fallbackFontFamily
+      };
     }
   `;
   return <style dangerouslySetInnerHTML={{ __html: style }} />;
diff --git a/packages/head/src/head.tsx b/packages/head/src/head.tsx
index fe66402a..d15f0e4f 100644
--- a/packages/head/src/head.tsx
+++ b/packages/head/src/head.tsx
@@ -1,17 +1,14 @@
-import * as React from 'react';
+import type React from 'react';
 
-type HeadElement = React.ElementRef<'head'>;
 type RootProps = React.ComponentPropsWithoutRef<'head'>;
 
 export interface HeadProps extends RootProps {}
 
-export const Head = React.forwardRef<HeadElement, Readonly<HeadProps>>(
-  ({ children, ...props }, forwardedRef) => (
-    <head {...props} ref={forwardedRef} data-id="@jsx-email/head">
-      <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
-      {children}
-    </head>
-  )
+export const Head = ({ children, ...props }: React.PropsWithChildren<Readonly<HeadProps>>) => (
+  <head {...props} data-id="@jsx-email/head">
+    <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
+    {children}
+  </head>
 );
 
 Head.displayName = 'Head';
diff --git a/packages/heading/src/heading.tsx b/packages/heading/src/heading.tsx
index 4bc59175..0b8d7cde 100644
--- a/packages/heading/src/heading.tsx
+++ b/packages/heading/src/heading.tsx
@@ -1,5 +1,5 @@
 import { Slot } from '@radix-ui/react-slot';
-import * as React from 'react';
+import type React from 'react';
 
 import { As, Margin, withMargin } from './utils';
 
@@ -8,17 +8,26 @@ interface HeadingOwnProps {}
 export type HeadingAs = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'>;
 export type HeadingProps = HeadingAs & HeadingOwnProps & Margin;
 
-export const Heading = React.forwardRef<HTMLHeadingElement, Readonly<HeadingProps>>(
-  ({ as: Tag = 'h1', children, style, m, mx, my, mt, mr, mb, ml, ...props }, forwardedRef) => (
-    <Slot
-      {...props}
-      ref={forwardedRef}
-      data-id="@jsx-email/heading"
-      style={{ ...withMargin({ m, mb, ml, mr, mt, mx, my }), ...style }}
-    >
-      <Tag>{children}</Tag>
-    </Slot>
-  )
+export const Heading = ({
+  as: Tag = 'h1',
+  children,
+  style,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  ...props
+}: React.PropsWithChildren<Readonly<HeadingProps>>) => (
+  <Slot
+    {...props}
+    data-id="@jsx-email/heading"
+    style={{ ...withMargin({ m, mb, ml, mr, mt, mx, my }), ...style }}
+  >
+    <Tag>{children}</Tag>
+  </Slot>
 );
 
 Heading.displayName = 'Heading';
diff --git a/packages/hr/src/hr.tsx b/packages/hr/src/hr.tsx
index 05e8dccb..3f72cd00 100644
--- a/packages/hr/src/hr.tsx
+++ b/packages/hr/src/hr.tsx
@@ -1,24 +1,20 @@
-import * as React from 'react';
+import type React from 'react';
 
-type HrElement = React.ElementRef<'hr'>;
 type RootProps = React.ComponentPropsWithoutRef<'hr'>;
 
 export interface HrProps extends RootProps {}
 
-export const Hr = React.forwardRef<HrElement, Readonly<HrProps>>(
-  ({ style, ...props }, forwardedRef) => (
-    <hr
-      {...props}
-      ref={forwardedRef}
-      data-id="@jsx-email/hr"
-      style={{
-        border: 'none',
-        borderTop: '1px solid #eaeaea',
-        width: '100%',
-        ...style
-      }}
-    />
-  )
+export const Hr: React.FC<Readonly<HrProps>> = ({ style, ...props }) => (
+  <hr
+    {...props}
+    data-id="@jsx-email/hr"
+    style={{
+      border: 'none',
+      borderTop: '1px solid #eaeaea',
+      width: '100%',
+      ...style
+    }}
+  />
 );
 
 Hr.displayName = 'Hr';
diff --git a/packages/html/src/html.tsx b/packages/html/src/html.tsx
index ce4c3e8f..330fde5b 100644
--- a/packages/html/src/html.tsx
+++ b/packages/html/src/html.tsx
@@ -1,16 +1,18 @@
-import * as React from 'react';
+import type React from 'react';
 
-type HtmlElement = React.ElementRef<'html'>;
 type RootProps = React.ComponentPropsWithoutRef<'html'>;
 
 export interface HtmlProps extends RootProps {}
 
-export const Html = React.forwardRef<HtmlElement, Readonly<HtmlProps>>(
-  ({ children, lang = 'en', dir = 'ltr', ...props }, forwardedRef) => (
-    <html {...props} data-id="@jsx-email/html" ref={forwardedRef} lang={lang} dir={dir}>
-      {children}
-    </html>
-  )
+export const Html = ({
+  children,
+  lang = 'en',
+  dir = 'ltr',
+  ...props
+}: React.PropsWithChildren<Readonly<HtmlProps>>) => (
+  <html {...props} data-id="@jsx-email/html" lang={lang} dir={dir}>
+    {children}
+  </html>
 );
 
 Html.displayName = 'Html';
diff --git a/packages/img/src/img.tsx b/packages/img/src/img.tsx
index 42a8a505..58482e46 100644
--- a/packages/img/src/img.tsx
+++ b/packages/img/src/img.tsx
@@ -1,29 +1,25 @@
-import * as React from 'react';
+import type React from 'react';
 
-type ImgElement = React.ElementRef<'img'>;
 type RootProps = React.ComponentPropsWithoutRef<'img'>;
 
 export interface ImgProps extends RootProps {}
 
-export const Img = React.forwardRef<ImgElement, Readonly<ImgProps>>(
-  ({ alt, src, width, height, style, ...props }, forwardedRef) => (
-    <img
-      {...props}
-      ref={forwardedRef}
-      data-id="@jsx-email/img"
-      alt={alt}
-      src={src}
-      width={width}
-      height={height}
-      style={{
-        border: 'none',
-        display: 'block',
-        outline: 'none',
-        textDecoration: 'none',
-        ...style
-      }}
-    />
-  )
+export const Img: React.FC<Readonly<ImgProps>> = ({ alt, src, width, height, style, ...props }) => (
+  <img
+    {...props}
+    data-id="@jsx-email/img"
+    alt={alt}
+    src={src}
+    width={width}
+    height={height}
+    style={{
+      border: 'none',
+      display: 'block',
+      outline: 'none',
+      textDecoration: 'none',
+      ...style
+    }}
+  />
 );
 
 Img.displayName = 'Img';
diff --git a/packages/link/src/link.tsx b/packages/link/src/link.tsx
index 787217e5..99f9cd00 100644
--- a/packages/link/src/link.tsx
+++ b/packages/link/src/link.tsx
@@ -1,24 +1,20 @@
-import * as React from 'react';
+import type React from 'react';
 
-type LinkElement = React.ElementRef<'a'>;
 type RootProps = React.ComponentPropsWithoutRef<'a'>;
 
 export interface LinkProps extends RootProps {}
 
-export const Link = React.forwardRef<LinkElement, Readonly<LinkProps>>(
-  ({ target = '_blank', style, ...props }, forwardedRef) => (
-    <a
-      {...props}
-      ref={forwardedRef}
-      data-id="@jsx-email/link"
-      target={target}
-      style={{
-        color: '#067df7',
-        textDecoration: 'none',
-        ...style
-      }}
-    />
-  )
+export const Link: React.FC<Readonly<LinkProps>> = ({ target = '_blank', style, ...props }) => (
+  <a
+    {...props}
+    data-id="@jsx-email/link"
+    target={target}
+    style={{
+      color: '#067df7',
+      textDecoration: 'none',
+      ...style
+    }}
+  />
 );
 
 Link.displayName = 'Link';
diff --git a/packages/markdown/src/markdown.tsx b/packages/markdown/src/markdown.tsx
index 56510850..5942a758 100644
--- a/packages/markdown/src/markdown.tsx
+++ b/packages/markdown/src/markdown.tsx
@@ -1,36 +1,34 @@
 import { StylesType, parseMarkdownToReactEmailJSX } from 'md-to-react-email';
-import * as React from 'react';
+import type React from 'react';
 
-type MarkdownElement = React.ElementRef<'div'>;
-
-export interface MarkdownProps {
+export interface MarkdownProps extends React.PropsWithChildren {
   children: string;
   markdownContainerStyles?: React.CSSProperties;
   markdownCustomStyles?: StylesType;
   showDataId?: boolean;
 }
 
-export const Markdown = React.forwardRef<MarkdownElement, MarkdownProps>(
-  (
-    { children, markdownContainerStyles, markdownCustomStyles, showDataId = false, ...props },
-    forwardedRef
-  ) => {
-    const parsedMarkdown = parseMarkdownToReactEmailJSX({
-      customStyles: markdownCustomStyles,
-      markdown: children,
-      withDataAttr: showDataId
-    });
+export const Markdown = ({
+  children,
+  markdownContainerStyles,
+  markdownCustomStyles,
+  showDataId = false,
+  ...props
+}: React.PropsWithChildren<MarkdownProps>) => {
+  const parsedMarkdown = parseMarkdownToReactEmailJSX({
+    customStyles: markdownCustomStyles,
+    markdown: children,
+    withDataAttr: showDataId
+  });
 
-    return (
-      <div
-        {...props}
-        ref={forwardedRef}
-        data-id="@jsx-email/markdown"
-        style={markdownContainerStyles}
-        dangerouslySetInnerHTML={{ __html: parsedMarkdown }}
-      />
-    );
-  }
-);
+  return (
+    <div
+      {...props}
+      data-id="@jsx-email/markdown"
+      style={markdownContainerStyles}
+      dangerouslySetInnerHTML={{ __html: parsedMarkdown }}
+    />
+  );
+};
 
 Markdown.displayName = 'Markdown';
diff --git a/packages/preview/src/preview.tsx b/packages/preview/src/preview.tsx
index 620e5d5b..e5c9c7d7 100644
--- a/packages/preview/src/preview.tsx
+++ b/packages/preview/src/preview.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react';
+import type React from 'react';
 
-type PreviewElement = React.ElementRef<'div'>;
 type RootProps = React.ComponentPropsWithoutRef<'div'>;
 
 export interface PreviewProps extends RootProps {
@@ -17,29 +16,29 @@ const renderWhiteSpace = (text: string) => {
   return <div>{whiteSpaceCodes.repeat(PREVIEW_MAX_LENGTH - text.length)}</div>;
 };
 
-export const Preview = React.forwardRef<PreviewElement, Readonly<PreviewProps>>(
-  ({ children = '', ...props }, forwardedRef) => {
-    let text = Array.isArray(children) ? children.join('') : children;
-    text = text.substr(0, PREVIEW_MAX_LENGTH);
-    return (
-      <div
-        ref={forwardedRef}
-        data-id="@jsx-email/preview"
-        style={{
-          display: 'none',
-          lineHeight: '1px',
-          maxHeight: 0,
-          maxWidth: 0,
-          opacity: 0,
-          overflow: 'hidden'
-        }}
-        {...props}
-      >
-        {text}
-        {renderWhiteSpace(text)}
-      </div>
-    );
-  }
-);
+export const Preview = ({
+  children = '',
+  ...props
+}: React.PropsWithChildren<Readonly<PreviewProps>>) => {
+  let text = Array.isArray(children) ? children.join('') : children;
+  text = text.substr(0, PREVIEW_MAX_LENGTH);
+  return (
+    <div
+      data-id="@jsx-email/preview"
+      style={{
+        display: 'none',
+        lineHeight: '1px',
+        maxHeight: 0,
+        maxWidth: 0,
+        opacity: 0,
+        overflow: 'hidden'
+      }}
+      {...props}
+    >
+      {text}
+      {renderWhiteSpace(text)}
+    </div>
+  );
+};
 
 Preview.displayName = 'Preview';
diff --git a/packages/render/src/utils/preview.tsx b/packages/render/src/utils/preview.tsx
index 730603ce..e8634f11 100644
--- a/packages/render/src/utils/preview.tsx
+++ b/packages/render/src/utils/preview.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type React from 'react';
 
 interface PreviewProps {}
 
diff --git a/packages/render/src/utils/template.tsx b/packages/render/src/utils/template.tsx
index c8a0d786..8a150fb6 100644
--- a/packages/render/src/utils/template.tsx
+++ b/packages/render/src/utils/template.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type React from 'react';
 
 interface TemplateProps {
   firstName: string;
diff --git a/packages/row/src/row.tsx b/packages/row/src/row.tsx
index 3e4c3a92..75f26a15 100644
--- a/packages/row/src/row.tsx
+++ b/packages/row/src/row.tsx
@@ -1,31 +1,25 @@
-import * as React from 'react';
+import type React from 'react';
 
-type RowElement = React.ElementRef<'table'>;
 type RootProps = React.ComponentPropsWithoutRef<'table'>;
 
-export interface RowProps extends RootProps {
-  children: React.ReactNode;
-}
+export interface RowProps extends RootProps {}
 
-export const Row = React.forwardRef<RowElement, Readonly<RowProps>>(
-  ({ children, style, ...props }, forwardedRef) => (
-    <table
-      align="center"
-      width="100%"
-      {...props}
-      ref={forwardedRef}
-      data-id="@jsx-email/row"
-      style={style}
-      role="presentation"
-      cellSpacing="0"
-      cellPadding="0"
-      border={0}
-    >
-      <tbody style={{ width: '100%' }}>
-        <tr style={{ width: '100%' }}>{children}</tr>
-      </tbody>
-    </table>
-  )
+export const Row = ({ children, style, ...props }: React.PropsWithChildren<Readonly<RowProps>>) => (
+  <table
+    align="center"
+    width="100%"
+    {...props}
+    data-id="@jsx-email/row"
+    style={style}
+    role="presentation"
+    cellSpacing="0"
+    cellPadding="0"
+    border={0}
+  >
+    <tbody style={{ width: '100%' }}>
+      <tr style={{ width: '100%' }}>{children}</tr>
+    </tbody>
+  </table>
 );
 
 Row.displayName = 'Row';
diff --git a/packages/section/src/section.tsx b/packages/section/src/section.tsx
index f8d233d1..d6ec96e4 100644
--- a/packages/section/src/section.tsx
+++ b/packages/section/src/section.tsx
@@ -1,31 +1,27 @@
-import * as React from 'react';
+import type React from 'react';
 
-type SectionElement = React.ElementRef<'table'>;
 type RootProps = React.ComponentPropsWithoutRef<'table'>;
 
 export interface SectionProps extends RootProps {}
 
-export const Section = React.forwardRef<SectionElement, Readonly<SectionProps>>(
-  ({ children, style, ...props }, forwardedRef) => (
-    <table
-      align="center"
-      width="100%"
-      {...props}
-      ref={forwardedRef}
-      data-id="@jsx-email/section"
-      style={style}
-      border={0}
-      cellPadding="0"
-      cellSpacing="0"
-      role="presentation"
-    >
-      <tbody>
-        <tr>
-          <td>{children}</td>
-        </tr>
-      </tbody>
-    </table>
-  )
+export const Section: React.FC<Readonly<SectionProps>> = ({ children, style, ...props }) => (
+  <table
+    align="center"
+    width="100%"
+    {...props}
+    data-id="@jsx-email/section"
+    style={style}
+    border={0}
+    cellPadding="0"
+    cellSpacing="0"
+    role="presentation"
+  >
+    <tbody>
+      <tr>
+        <td>{children}</td>
+      </tr>
+    </tbody>
+  </table>
 );
 
 Section.displayName = 'Section';
diff --git a/packages/text/src/text.tsx b/packages/text/src/text.tsx
index 3698a21e..592ea926 100644
--- a/packages/text/src/text.tsx
+++ b/packages/text/src/text.tsx
@@ -1,24 +1,20 @@
-import * as React from 'react';
+import type React from 'react';
 
-type TextElement = React.ElementRef<'p'>;
 type RootProps = React.ComponentPropsWithoutRef<'p'>;
 
 export interface TextProps extends RootProps {}
 
-export const Text = React.forwardRef<TextElement, Readonly<TextProps>>(
-  ({ style, ...props }, forwardedRef) => (
-    <p
-      {...props}
-      ref={forwardedRef}
-      data-id="@jsx-email/text"
-      style={{
-        fontSize: '14px',
-        lineHeight: '24px',
-        margin: '16px 0',
-        ...style
-      }}
-    />
-  )
+export const Text: React.FC<Readonly<TextProps>> = ({ style, ...props }) => (
+  <p
+    {...props}
+    data-id="@jsx-email/text"
+    style={{
+      fontSize: '14px',
+      lineHeight: '24px',
+      margin: '16px 0',
+      ...style
+    }}
+  />
 );
 
 Text.displayName = 'Text';