diff --git a/apps/v4/examples/base/calendar-hijri.tsx b/apps/v4/examples/base/calendar-hijri.tsx
index b53b926982..3a9c4bd139 100644
--- a/apps/v4/examples/base/calendar-hijri.tsx
+++ b/apps/v4/examples/base/calendar-hijri.tsx
@@ -9,22 +9,27 @@ import {
 } from "lucide-react"
 import { getDefaultClassNames, type DayButton } from "react-day-picker"
 import { DayPicker } from "react-day-picker/persian"
+import { Vazirmatn } from "next/font/google"
 
 import { cn } from "@/lib/utils"
 
+const vazirmatn = Vazirmatn({ subsets: ["arabic"] })
+
 export default function CalendarHijri() {
   const [date, setDate] = React.useState<Date | undefined>(
     new Date(2025, 5, 12)
   )
 
   return (
-    <Calendar
-      mode="single"
-      defaultMonth={date}
-      selected={date}
-      onSelect={setDate}
-      className="rounded-lg border"
-    />
+    <div className={vazirmatn.className}>
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        className="rounded-lg border"
+      />
+    </div>
   )
 }
 
diff --git a/apps/v4/examples/radix/calendar-hijri.tsx b/apps/v4/examples/radix/calendar-hijri.tsx
index 20104d50e3..7711e6ccd1 100644
--- a/apps/v4/examples/radix/calendar-hijri.tsx
+++ b/apps/v4/examples/radix/calendar-hijri.tsx
@@ -9,22 +9,27 @@ import {
 } from "lucide-react"
 import { getDefaultClassNames, type DayButton } from "react-day-picker"
 import { DayPicker } from "react-day-picker/persian"
+import { Vazirmatn } from "next/font/google"
 
 import { cn } from "@/lib/utils"
 
+const vazirmatn = Vazirmatn({ subsets: ["arabic"] })
+
 export default function CalendarHijri() {
   const [date, setDate] = React.useState<Date | undefined>(
     new Date(2025, 5, 12)
   )
 
   return (
-    <Calendar
-      mode="single"
-      defaultMonth={date}
-      selected={date}
-      onSelect={setDate}
-      className="rounded-lg border"
-    />
+    <div className={vazirmatn.className}>
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        className="rounded-lg border"
+      />
+    </div>
   )
 }
 
diff --git a/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
index 9d8a2cf5ea..88525864cd 100644
--- a/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
+++ b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
@@ -8,23 +8,28 @@ import {
 } from "lucide-react"
 import { getDefaultClassNames, type DayButton } from "react-day-picker"
 import { DayPicker } from "react-day-picker/persian"
+import { Vazirmatn } from "next/font/google"
 
 import { cn } from "@/lib/utils"
 import { Button, buttonVariants } from "@/registry/new-york-v4/ui/button"
 
+const vazirmatn = Vazirmatn({ subsets: ["arabic"] })
+
 export default function CalendarHijri() {
   const [date, setDate] = React.useState<Date | undefined>(
     new Date(2025, 5, 12)
   )
 
   return (
-    <Calendar
-      mode="single"
-      defaultMonth={date}
-      selected={date}
-      onSelect={setDate}
-      className="rounded-lg border shadow-sm"
-    />
+    <div className={vazirmatn.className}>
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        className="rounded-lg border shadow-sm"
+      />
+    </div>
   )
 }