diff --git a/react-components.mdx b/react-components.mdx
index 7b1116361..e233c0d45 100644
--- a/react-components.mdx
+++ b/react-components.mdx
@@ -5,7 +5,7 @@ icon: "react"
 ---
 
 import { Counter } from "/snippets/counter.mdx";
-import { ColorGenerator } from "/snippets/color-generator.mdx";
+import { ColorGenerator } from "/snippets/color-generator.jsx";
 
 [React components](https://react.dev) are a powerful way to create interactive and reusable elements in your documentation.
 
diff --git a/reusable-snippets.mdx b/reusable-snippets.mdx
index 132b53524..1d2a766ea 100644
--- a/reusable-snippets.mdx
+++ b/reusable-snippets.mdx
@@ -4,6 +4,11 @@ description: 'Reusable, custom snippets to keep content in sync'
 icon: 'recycle'
 ---
 
+import MintlifyIframe from "/snippets/iframe.jsx";
+
+<MintlifyIframe iframeUrl="https://mintlify.com/docs/quickstartss" />
+
+
 One of the core principles of software development is DRY (Don't Repeat
 Yourself), which applies to documentation as
 well. If you find yourself repeating the same content in multiple places, you
diff --git a/snippets/iframe.jsx b/snippets/iframe.jsx
new file mode 100644
index 000000000..4cf52d3bb
--- /dev/null
+++ b/snippets/iframe.jsx
@@ -0,0 +1,9 @@
+const MintlifyIframe = ({ iframeUrl }) => {
+  return (
+    <div className="w-full h-48">
+      <iframe src={iframeUrl} className="w-full h-full rounded-lg" />
+    </div>
+  )
+}
+
+export default MintlifyIframe;
\ No newline at end of file