+
+ 
+ 
+
## 🌟 100 contributors & 1000+ GitHub stars!
diff --git a/src/components/mdx/mdx-figure-lightbox.tsx b/src/components/mdx/mdx-figure-lightbox.tsx
new file mode 100644
index 00000000..582efc64
--- /dev/null
+++ b/src/components/mdx/mdx-figure-lightbox.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import {
+ Dialog,
+ DialogContent,
+ DialogTitle,
+} from "@/components/ui/dialog"
+
+export type MdxFigureLightboxProps = {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ src: string
+ alt: string
+ label: string
+}
+
+export function MdxFigureLightbox({
+ open,
+ onOpenChange,
+ src,
+ alt,
+ label,
+}: MdxFigureLightboxProps) {
+ return (
+
+ )
+}
diff --git a/src/components/mdx/mdx-figure.tsx b/src/components/mdx/mdx-figure.tsx
new file mode 100644
index 00000000..7549989a
--- /dev/null
+++ b/src/components/mdx/mdx-figure.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import dynamic from "next/dynamic"
+import Image from "next/image"
+import { cn } from "@/lib/utils"
+
+const MdxFigureLightbox = dynamic(
+ () =>
+ import("./mdx-figure-lightbox").then((mod) => ({
+ default: mod.MdxFigureLightbox,
+ })),
+ { ssr: false }
+)
+
+type MdxFigureProps = React.ImgHTMLAttributes