diff --git a/apps/docs/components/button.mdx b/apps/docs/components/button.mdx
index c32e9f577e..6ff7ebc45d 100644
--- a/apps/docs/components/button.mdx
+++ b/apps/docs/components/button.mdx
@@ -6,7 +6,8 @@ description: "A link that is styled to look like a button."
 icon: "b"
 ---
 
-import Support from '/snippets/support.mdx'
+import Support from "/snippets/support.mdx";
+import { ComponentPreview } from "/snippets/component-preview.mdx";
 
 <Info>
   Semantics: Quite often in the email world we talk about buttons, when actually
@@ -49,20 +50,45 @@ pnpm add @react-email/button -E
 
 Add the component to your email template. Include styles where needed.
 
-```jsx
+<ComponentPreview code='
+  import { Button } from "@react-email/components";
+
+  const Email = () => {
+    return (
+      <Button
+        href="https://example.com"
+        style={{ 
+          color: "#101010", 
+          backgroundColor: "#eee", 
+          borderRadius: 6, 
+          padding: "10px 20px" 
+        }}
+      >
+        Click me
+      </Button>
+    );
+  };
+'>
+```tsx
 import { Button } from "@react-email/components";
 
 const Email = () => {
   return (
     <Button
       href="https://example.com"
-      style={{ color: "#61dafb", padding: "10px 20px" }}
+      style={{ 
+        color: "#101010", 
+        backgroundColor: "#eee", 
+        borderRadius: 6, 
+        padding: "10px 20px" 
+      }}
     >
       Click me
     </Button>
   );
 };
 ```
+</ComponentPreview>
 
 ## Props
 
@@ -74,4 +100,4 @@ const Email = () => {
   Specify the target attribute for the button link
 </ResponseField>
 
-<Support/>
+<Support />
diff --git a/apps/docs/components/code-block.mdx b/apps/docs/components/code-block.mdx
index bd560f0da6..61c43987fd 100644
--- a/apps/docs/components/code-block.mdx
+++ b/apps/docs/components/code-block.mdx
@@ -6,6 +6,7 @@ icon: 'file-lines'
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -43,8 +44,31 @@ pnpm add @react-email/code-block -E
 
 Add the component into your email component as follows.
 
+<ComponentPreview code='
+import { CodeBlock, dracula } from "@react-email/components";
+
+const Email = () => {
+  const code = `export default async (req, res) => {
+  try {
+    const html = await renderAsync(
+      EmailTemplate({ firstName: "John" })
+    );
+    return NextResponse.json({ html });
+  } catch (error) {
+    return NextResponse.json({ error });
+  }
+}`;
+
+  return (<CodeBlock
+    code={code}
+    lineNumbers // add this so that there are line numbers beside each code line
+    theme={{ ...dracula, base: { ...dracula.base, margin: 0 } }}
+    language="javascript"
+  />);
+};
+'>
 ```jsx
-import { CodeBlock, dracula } from '@react-email/code-block';
+import { CodeBlock, dracula } from "@react-email/components";
 
 const Email = () => {
   const code = `export default async (req, res) => {
@@ -66,6 +90,7 @@ const Email = () => {
   />);
 };
 ```
+</ComponentPreview>
 
 This should render a code-block with the desired theme.
 
diff --git a/apps/docs/components/code-inline.mdx b/apps/docs/components/code-inline.mdx
index cc06283ad4..dfbd878676 100644
--- a/apps/docs/components/code-inline.mdx
+++ b/apps/docs/components/code-inline.mdx
@@ -6,6 +6,7 @@ icon: 'code'
 ---
 
 import Support from '/snippets/support.mdx'
+import {ComponentPreview} from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -43,12 +44,38 @@ pnpm add @react-email/code-inline -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { CodeInline } from "@react-email/components";
+
+const Email = () => {
+  return <CodeInline 
+    style={{ 
+      color: "#eee", 
+      padding: "2px 4px",
+      borderRadius: 4,
+      background: "#202020" 
+    }}
+  >
+    @react-email/code-inline
+  </CodeInline>;
+}
+'>
 ```jsx
-import { CodeInline } from "@react-email/code-inline";
+import { CodeInline } from "@react-email/components";
 
 const Email = () => {
-    return <CodeInline>@react-email/code-inline</CodeInline>;
+  return <CodeInline 
+    style={{ 
+      color: "#eee", 
+      padding: "2px 4px",
+      borderRadius: 4,
+      background: "#202020" 
+    }}
+  >
+    @react-email/code-inline
+  </CodeInline>;
 }
 ```
+</ComponentPreview>
 
 <Support/>
diff --git a/apps/docs/components/column.mdx b/apps/docs/components/column.mdx
index 21c665082a..1c6e702a5f 100644
--- a/apps/docs/components/column.mdx
+++ b/apps/docs/components/column.mdx
@@ -7,6 +7,7 @@ icon: "columns-3"
 ---
 
 import Support from '/snippets/support.mdx'
+import {ComponentPreview} from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,18 +45,80 @@ pnpm add @react-email/column -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Column, Row } from "@react-email/components";
+
+const Email = () => {
+  return (
+    <Row>
+      <Column
+        style={{
+          backgroundColor: "#ff7b6b",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        A
+      </Column>
+      <Column
+        style={{
+          backgroundColor: "#78ff69",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        B
+      </Column>
+      <Column
+        style={{
+          backgroundColor: "#6482fa",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        C
+      </Column>
+    </Row>
+  );
+};
+'>
 ```jsx
 import { Column, Row } from "@react-email/components";
 
 const Email = () => {
   return (
     <Row>
-      <Column>A</Column>
-      <Column>B</Column>
-      <Column>C</Column>
+      <Column
+        style={{
+          backgroundColor: "#ff7b6b",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        A
+      </Column>
+      <Column
+        style={{
+          backgroundColor: "#78ff69",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        B
+      </Column>
+      <Column
+        style={{
+          backgroundColor: "#6482fa",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        C
+      </Column>
     </Row>
   );
 };
 ```
+</ComponentPreview>
 
 <Support />
diff --git a/apps/docs/components/heading.mdx b/apps/docs/components/heading.mdx
index 913360ce05..590e01e49a 100644
--- a/apps/docs/components/heading.mdx
+++ b/apps/docs/components/heading.mdx
@@ -7,6 +7,7 @@ icon: "h1"
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,13 +45,25 @@ pnpm add @react-email/heading -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Heading } from "@react-email/components";
+
+const Email = () => {
+  return <Heading as="h2" style={{ color: "rgb(129,215,247)" }}>
+    Lorem ipsum
+  </Heading>;
+};
+'>
 ```jsx
 import { Heading } from "@react-email/components";
 
 const Email = () => {
-  return <Heading as="h2">Lorem ipsum</Heading>;
+  return <Heading as="h2" style={{ color: "rgb(129,215,247)" }}>
+    Lorem ipsum
+  </Heading>;
 };
 ```
+</ComponentPreview>
 
 ## Props
 
diff --git a/apps/docs/components/hr.mdx b/apps/docs/components/hr.mdx
index e2f9ecd676..6021eb23ac 100644
--- a/apps/docs/components/hr.mdx
+++ b/apps/docs/components/hr.mdx
@@ -7,6 +7,7 @@ icon: "horizontal-rule"
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,12 +45,28 @@ pnpm add @react-email/hr -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Hr, Heading, Text, Section } from "@react-email/components";
+
+const Email = () => {
+  return <Section>
+    <Text style={{ color: "#eee", textAlign: "center" }}>Hello</Text>
+    <Hr />
+    <Text style={{ color: "#eee", textAlign: "center" }}>world</Text>
+  </Section>;
+};
+'>
 ```jsx
-import { Hr } from "@react-email/components";
+import { Hr, Heading, Text, Section } from "@react-email/components";
 
 const Email = () => {
-  return <Hr />;
+  return <Section>
+    <Text style={{ color: "#eee", textAlign: "center" }}>Hello</Text>
+    <Hr />
+    <Text style={{ color: "#eee", textAlign: "center" }}>world</Text>
+  </Section>;
 };
 ```
+</ComponentPreview>
 
 <Support/>
diff --git a/apps/docs/components/link.mdx b/apps/docs/components/link.mdx
index a7a59012b0..973f5cda8c 100644
--- a/apps/docs/components/link.mdx
+++ b/apps/docs/components/link.mdx
@@ -6,7 +6,8 @@ description: "A hyperlink to web pages, email addresses, or anything else a URL
 icon: "link"
 ---
 
-import Support from '/snippets/support.mdx'
+import Support from "/snippets/support.mdx";
+import { ComponentPreview } from "/snippets/component-preview.mdx";
 
 ## Install
 
@@ -44,6 +45,14 @@ pnpm add @react-email/link -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Link } from "@react-email/components";
+
+const Email = () => {
+return <Link href="https://example.com">Example</Link>;
+};
+'>
+
 ```jsx
 import { Link } from "@react-email/components";
 
@@ -52,6 +61,8 @@ const Email = () => {
 };
 ```
 
+</ComponentPreview>
+
 ## Props
 
 <ResponseField name="href" type="string" required>
@@ -62,4 +73,4 @@ const Email = () => {
   Specify the target attribute for the button link
 </ResponseField>
 
-<Support/>
+<Support />
diff --git a/apps/docs/components/markdown.mdx b/apps/docs/components/markdown.mdx
index 3c9730b0b8..dd500d65f3 100644
--- a/apps/docs/components/markdown.mdx
+++ b/apps/docs/components/markdown.mdx
@@ -7,6 +7,7 @@ icon: "file-code"
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,6 +45,35 @@ pnpm add @react-email/markdown -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Markdown, Html } from "@react-email/components";
+
+const Email = () => {
+  return (
+    <Html lang="en" dir="ltr">
+      <Markdown
+        markdownCustomStyles={{
+          h1: { color: "cyan" },
+          h2: { color: "blue" },
+          codeInline: { background: "grey" },
+        }}
+        markdownContainerStyles={{
+          padding: "12px",
+          border: "solid 1px #eee",
+        }}
+      >{`# Hello, World!`}</Markdown>
+
+      {/* OR */}
+
+      <Markdown markdownCustomStyles={{
+        h1: {
+          color: "#eee"
+        }
+      }} children={`# This is a ~~strikethrough~~`} />
+    </Html>
+  );
+};
+'>
 ```jsx
 import { Markdown, Html } from "@react-email/components";
 
@@ -52,23 +82,28 @@ const Email = () => {
     <Html lang="en" dir="ltr">
       <Markdown
         markdownCustomStyles={{
-          h1: { color: "red" },
+          h1: { color: "cyan" },
           h2: { color: "blue" },
           codeInline: { background: "grey" },
         }}
         markdownContainerStyles={{
           padding: "12px",
-          border: "solid 1px black",
+          border: "solid 1px #eee",
         }}
       >{`# Hello, World!`}</Markdown>
 
       {/* OR */}
 
-      <Markdown children={`# This is a ~~strikethrough~~`} />
+      <Markdown markdownCustomStyles={{
+        h1: {
+          color: "#eee"
+        }
+      }} children={`# This is a ~~strikethrough~~`} />
     </Html>
   );
 };
 ```
+</ComponentPreview>
 
 ## Props
 
diff --git a/apps/docs/components/row.mdx b/apps/docs/components/row.mdx
index 28743b34b7..d89eb818a6 100644
--- a/apps/docs/components/row.mdx
+++ b/apps/docs/components/row.mdx
@@ -6,7 +6,8 @@ description: "Display a row that separates content areas horizontally in your em
 icon: "table-rows"
 ---
 
-import Support from '/snippets/support.mdx'
+import Support from "/snippets/support.mdx";
+import { ComponentPreview } from "/snippets/component-preview.mdx";
 
 ## Install
 
@@ -44,24 +45,94 @@ pnpm add @react-email/row -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Row, Column, Section } from "@react-email/components";
+
+const Email = () => {
+return (
+<Section>
+<Row
+style={{
+          height: "33.333vh"
+        }} >
+<Column
+style={{
+            textAlign: "center",
+            backgroundColor: "#ff7b6b",
+          }} >
+A
+</Column>
+</Row>
+<Row
+style={{
+          height: "33.333vh"
+        }} >
+<Column
+style={{
+            textAlign: "center",
+            backgroundColor: "#78ff69",
+          }} >
+B
+</Column>
+</Row>
+<Row
+style={{
+          height: "33.333vh"
+        }} >
+<Column
+style={{
+            textAlign: "center",
+            backgroundColor: "#6482fa",
+          }} >
+C
+</Column>
+</Row>
+</Section>
+);
+};
+'>
+
 ```jsx
 import { Row, Column, Section } from "@react-email/components";
 
 const Email = () => {
   return (
     <Section>
-      <Row>
-        <Column>A</Column>
+      <Row style={{ height: "33.333vh" }}>
+        <Column
+          style={{
+            textAlign: "center",
+            backgroundColor: "#ff7b6b",
+          }}
+        >
+          A
+        </Column>
       </Row>
-      <Row>
-        <Column>B</Column>
+      <Row style={{ height: "33.333vh" }}>
+        <Column
+          style={{
+            textAlign: "center",
+            backgroundColor: "#78ff69",
+          }}
+        >
+          B
+        </Column>
       </Row>
-      <Row>
-        <Column>C</Column>
+      <Row style={{ height: "33.333vh" }}>
+        <Column
+          style={{
+            textAlign: "center",
+            backgroundColor: "#6482fa",
+          }}
+        >
+          C
+        </Column>
       </Row>
     </Section>
   );
 };
 ```
 
-<Support/>
+</ComponentPreview>
+
+<Support />
diff --git a/apps/docs/components/section.mdx b/apps/docs/components/section.mdx
index 3d1bf8caed..0541c3906f 100644
--- a/apps/docs/components/section.mdx
+++ b/apps/docs/components/section.mdx
@@ -7,6 +7,7 @@ icon: "rectangles-mixed"
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,29 +45,58 @@ pnpm add @react-email/section -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Section, Column, Row, Text } from "@react-email/components";
+
+const Email = () => {
+  return (
+    <>
+      {/* A simple `section` */}
+      <Section>
+        <Text style={{ color: "#eee" }}>Hello World</Text>
+      </Section>
+
+      {/* Formatted with `rows` and `columns` */}
+      <Section>
+        <Row>
+          <Column style={{ color: "#eee" }}>Column 1, Row 1</Column>
+          <Column style={{ color: "#eee" }}>Column 2, Row 1</Column>
+        </Row>
+        <Row>
+          <Column style={{ color: "#eee" }}>Column 1, Row 2</Column>
+          <Column style={{ color: "#eee" }}>Column 2, Row 2</Column>
+        </Row>
+      </Section>
+    </>
+  );
+};
+'>
 ```jsx
 import { Section, Column, Row, Text } from "@react-email/components";
 
 const Email = () => {
   return (
-    {/* A simple `section` */}
-    <Section>
-      <Text>Hello World</Text>
-    </Section>
-
-    {/* Formatted with `rows` and `columns` */}
-     <Section>
-      <Row>
-        <Column>Column 1, Row 1</Column>
-        <Column>Column 2, Row 1</Column>
-      </Row>
-      <Row>
-        <Column>Column 1, Row 2</Column>
-        <Column>Column 2, Row 2</Column>
-      </Row>
-    </Section>
+    <>
+      {/* A simple `section` */}
+      <Section>
+        <Text style={{ color: '#eee' }}>Hello World</Text>
+      </Section>
+
+      {/* Formatted with `rows` and `columns` */}
+      <Section>
+        <Row>
+          <Column style={{ color: '#eee' }}>Column 1, Row 1</Column>
+          <Column style={{ color: '#eee' }}>Column 2, Row 1</Column>
+        </Row>
+        <Row>
+          <Column style={{ color: '#eee' }}>Column 1, Row 2</Column>
+          <Column style={{ color: '#eee' }}>Column 2, Row 2</Column>
+        </Row>
+      </Section>
+    </>
   );
 };
 ```
+</ComponentPreview>
 
 <Support/>
diff --git a/apps/docs/components/text.mdx b/apps/docs/components/text.mdx
index 73793c6756..3982b8854e 100644
--- a/apps/docs/components/text.mdx
+++ b/apps/docs/components/text.mdx
@@ -7,6 +7,7 @@ icon: "text-size"
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,12 +45,20 @@ pnpm add @react-email/text -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Text } from "@react-email/components";
+
+const Email = () => {
+  return <Text style={{ color: "#eee" }}>Lorem ipsum</Text>;
+};
+'>
 ```jsx
 import { Text } from "@react-email/components";
 
 const Email = () => {
-  return <Text>Lorem ipsum</Text>;
+  return <Text style={{ color: "#eee" }}>Lorem ipsum</Text>;
 };
 ```
+</ComponentPreview>
 
 <Support/>
diff --git a/apps/docs/getting-started/migrating-to-react-email.mdx b/apps/docs/getting-started/migrating-to-react-email.mdx
index a3cc473931..0443abc565 100644
--- a/apps/docs/getting-started/migrating-to-react-email.mdx
+++ b/apps/docs/getting-started/migrating-to-react-email.mdx
@@ -6,7 +6,7 @@ description: 'Migrate from another email rendering framework to React Email'
 icon: 'paper-plane'
 ---
 
-import NextSteps from '../snippets/next-steps.mdx';
+import NextSteps from '/snippets/next-steps.mdx';
 
 ## From MJML
 
diff --git a/apps/docs/snippets/component-preview.mdx b/apps/docs/snippets/component-preview.mdx
new file mode 100644
index 0000000000..420cd7babc
--- /dev/null
+++ b/apps/docs/snippets/component-preview.mdx
@@ -0,0 +1,72 @@
+export const ComponentPreview = ({ children, code }) => {
+  const preElement = children.props.children;
+
+  return (
+
+    <div className="mt-5 mb-8 not-prose bg-[#0F1117] dark:bg-codeblock rounded-xl dark:ring-1 dark:ring-gray-800/50 relative">
+      <iframe
+        className="w-full h-fit bg-transparent rounded-t-xl"
+        srcDoc={`
+<html>
+<head>
+  <script type="importmap">
+    {
+      "imports": {
+        "react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
+        "react/jsx-runtime": "https://cdn.jsdelivr.net/npm/react@18.3.1/jsx-runtime/+esm",
+        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
+        "react-dom/server": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/server/+esm",
+        "@react-email/components": "https://cdn.jsdelivr.net/npm/@react-email/components@0.0.26-canary.4/+esm"
+      }
+    }
+  </script>
+  <script type="text/javascript" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script type="text/babel" data-type="module" data-presets="react">
+    import * as React from "react";
+    ${code}
+    import {render} from "@react-email/components";
+    render(<div style={{ display: 'flex', width: '100%', height: 'fit', minHeight: '100vh', alignItems: 'center', justifyContent: 'center' }}><Email /></div>)
+      .then(html => {
+        document.open("text/html");
+        document.write(html);
+        document.close();
+
+        const style = document.createElement('style');
+        style.type = "text/css";
+        style.appendChild(document.createTextNode("html, body { background: #0d0d0d; padding: 0; margin: 0 }"));
+        document.head.appendChild(style);
+      });
+
+  </script>
+  <style>
+    html, body {
+      background: #0d0d0d;
+      padding: 0;
+      margin: 0;
+    }
+  </style>
+</head>
+</html>
+       `}
+      >
+        Your browser seems to not support iframes.
+      </iframe>
+      <div className="border-t p-5 text-sm leading-6 relative" style={{ borderColor: 'rgb(var(--gray-800)/0.5)' }}>
+        <div className="z-10 group absolute right-5 top-5">
+          <button 
+            className="flex relative items-center justify-center" 
+            onClick={() => {
+              navigator.clipboard.writeText(code);
+            }}
+          >
+            <Icon color="#374151" icon="clone" iconType="solid" />
+            <div class="absolute top-11 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden group-hover:block text-white rounded-lg px-1.5 py-0.5 text-xs bg-primary-dark">
+              'Copy'
+            </div>
+          </button>
+        </div>
+        {preElement}
+      </div>
+    </div>
+  );
+};