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/>