chore(release): version packages (#9503)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/kind-candies-float.md

@@ -1,5 +0,0 @@
----
-"shadcn": patch
----
-
-Fix: skip all transforms for universal registry items

.github/changeset-version.js

@@ -1,12 +1,12 @@
 // ORIGINALLY FROM CLOUDFLARE WRANGLER:
 // https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js
 
-import { exec } from "child_process"
+import { execSync } from "child_process"
 
 // This script is used by the `release.yml` workflow to update the version of the packages being released.
-// The standard step is only to run `changeset version` but this does not update the package-lock.json file.
-// So we also run `npm install`, which does this update.
+// The standard step is only to run `changeset version` but this does not update the pnpm-lock.yaml file.
+// So we also run `pnpm install`, which does this update.
 // This is a workaround until this is handled automatically by `changeset version`.
 // See https://github.com/changesets/changesets/issues/421.
-exec("npx changeset version")
-exec("npm install")
+execSync("npx changeset version", { stdio: "inherit" })
+execSync("pnpm install --lockfile-only", { stdio: "inherit" })

apps/v4/app/(app)/(root)/components/button-group-demo.tsx

@@ -56,7 +56,7 @@ export function ButtonGroupDemo() {
               <MoreHorizontalIcon />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-48 [--radius:1rem]">
+          <DropdownMenuContent align="end" className="w-48">
             <DropdownMenuGroup>
               <DropdownMenuItem>
                 <MailCheckIcon />

apps/v4/app/(app)/(root)/components/field-hear.tsx

@@ -50,7 +50,7 @@ export function FieldHear() {
                   >
                     <Field
                       orientation="horizontal"
-                      className="gap-1.5 overflow-hidden !px-3 !py-1.5 transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:!px-2"
+                      className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
                     >
                       <Checkbox
                         value={option.value}

apps/v4/app/(app)/(root)/components/input-group-demo.tsx

@@ -66,11 +66,7 @@ export function InputGroupDemo() {
             <DropdownMenuTrigger asChild>
               <InputGroupButton variant="ghost">Auto</InputGroupButton>
             </DropdownMenuTrigger>
-            <DropdownMenuContent
-              side="top"
-              align="start"
-              className="[--radius:0.95rem]"
-            >
+            <DropdownMenuContent side="top" align="start">
               <DropdownMenuItem>Auto</DropdownMenuItem>
               <DropdownMenuItem>Agent</DropdownMenuItem>
               <DropdownMenuItem>Manual</DropdownMenuItem>

apps/v4/app/(app)/docs/[[...slug]]/page.tsx

@@ -95,12 +95,14 @@ export default async function Page(props: {
         <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
           <div className="flex flex-col gap-2">
             <div className="flex flex-col gap-2">
-              <div className="flex items-start justify-between">
-                <h1 className="scroll-m-24 text-4xl font-semibold tracking-tight sm:text-3xl">
+              <div className="flex items-center justify-between md:items-start">
+                <h1 className="scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl">
                   {doc.title}
                 </h1>
-                <div className="docs-nav bg-background/80 border-border/50 fixed inset-x-0 bottom-0 isolate z-50 flex items-center gap-2 border-t px-6 py-4 backdrop-blur-sm sm:static sm:z-0 sm:border-t-0 sm:bg-transparent sm:px-0 sm:py-1.5 sm:backdrop-blur-none">
-                  <DocsCopyPage page={raw} url={absoluteUrl(page.url)} />
+                <div className="docs-nav flex items-center gap-2">
+                  <div className="hidden sm:block">
+                    <DocsCopyPage page={raw} url={absoluteUrl(page.url)} />
+                  </div>
                   <div className="ml-auto flex gap-2">
                     {neighbours.previous && (
                       <Button
@@ -179,7 +181,7 @@ export default async function Page(props: {
           </div>
         </div>
       </div>
-      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 lg:flex">
+      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-(--sidebar-width) flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex">
         <div className="h-(--top-spacing) shrink-0"></div>
         {doc.toc?.length ? (
           <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">

apps/v4/app/(app)/docs/changelog/page.tsx

@@ -82,21 +82,25 @@ export default function ChangelogPage() {
                 <h2 className="font-heading mb-6 text-xl font-semibold tracking-tight">
                   More Updates
                 </h2>
-                <ul className="flex flex-col gap-4">
+                <div className="grid auto-rows-fr gap-3 sm:grid-cols-2">
                   {olderPages.map((page) => {
                     const data = page.data as ChangelogPageData
+                    const [date, ...titleParts] = data.title.split(" - ")
+                    const title = titleParts.join(" - ")
                     return (
-                      <li key={page.url} className="flex items-center gap-3">
-                        <Link
-                          href={page.url}
-                          className="font-medium hover:underline"
-                        >
-                          {data.title}
-                        </Link>
-                      </li>
+                      <Link
+                        key={page.url}
+                        href={page.url}
+                        className="bg-surface text-surface-foreground hover:bg-surface/80 flex w-full flex-col rounded-xl px-4 py-3 transition-colors"
+                      >
+                        <span className="text-muted-foreground text-xs">
+                          {date}
+                        </span>
+                        <span className="text-sm font-medium">{title}</span>
+                      </Link>
                     )
                   })}
-                </ul>
+                </div>
               </div>
             )}
           </div>

apps/v4/app/(app)/docs/layout.tsx

@@ -11,7 +11,11 @@ export default function DocsLayout({
     <div className="container-wrapper flex flex-1 flex-col px-2">
       <SidebarProvider
         className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]"
-        style={{ "--sidebar-width": "220px" } as React.CSSProperties}
+        style={
+          {
+            "--sidebar-width": "calc(var(--spacing) * 72)",
+          } as React.CSSProperties
+        }
       >
         <DocsSidebar tree={source.pageTree} />
         <div className="h-full w-full">{children}</div>

apps/v4/app/(app)/examples/layout.tsx

@@ -70,7 +70,7 @@ export default function ExamplesLayout({
       </PageNav>
       <div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
         <div className="theme-container container flex flex-1 scroll-mt-20 flex-col">
-          <div className="bg-background flex flex-col overflow-hidden rounded-lg border bg-clip-padding md:flex-1 xl:rounded-xl">
+          <div className="bg-background flex flex-col overflow-hidden rounded-lg border bg-clip-padding has-[[data-slot=rtl-components]]:overflow-visible has-[[data-slot=rtl-components]]:border-0 has-[[data-slot=rtl-components]]:bg-transparent md:flex-1 xl:rounded-xl">
             {children}
           </div>
         </div>

apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx

@@ -0,0 +1,170 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "@/examples/base/ui-rtl/field"
+import { Input } from "@/examples/base/ui-rtl/input"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui-rtl/radio-group"
+import { Switch } from "@/examples/base/ui-rtl/switch"
+import { IconMinus, IconPlus } from "@tabler/icons-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    computeEnvironment: "بيئة الحوسبة",
+    computeDescription: "اختر بيئة الحوسبة لمجموعتك.",
+    kubernetes: "كوبرنيتس",
+    kubernetesDescription:
+      "تشغيل أحمال عمل GPU على مجموعة مُهيأة بـ K8s. هذا هو الافتراضي.",
+    virtualMachine: "جهاز افتراضي",
+    vmDescription: "الوصول إلى مجموعة VM مُهيأة لتشغيل أحمال العمل. (قريبًا)",
+    numberOfGpus: "عدد وحدات GPU",
+    gpuDescription: "يمكنك إضافة المزيد لاحقًا.",
+    decrement: "إنقاص",
+    increment: "زيادة",
+    wallpaperTinting: "تلوين الخلفية",
+    wallpaperDescription: "السماح بتلوين الخلفية.",
+  },
+  he: {
+    dir: "rtl" as const,
+    computeEnvironment: "סביבת מחשוב",
+    computeDescription: "בחר את סביבת המחשוב לאשכול שלך.",
+    kubernetes: "קוברנטיס",
+    kubernetesDescription:
+      "הפעל עומסי עבודה של GPU באשכול מוגדר K8s. זו ברירת המחדל.",
+    virtualMachine: "מכונה וירטואלית",
+    vmDescription: "גש לאשכול VM מוגדר להפעלת עומסי עבודה. (בקרוב)",
+    numberOfGpus: "מספר GPUs",
+    gpuDescription: "תוכל להוסיף עוד מאוחר יותר.",
+    decrement: "הפחת",
+    increment: "הגדל",
+    wallpaperTinting: "צביעת טפט",
+    wallpaperDescription: "אפשר לטפט להיצבע.",
+  },
+}
+
+export function AppearanceSettings() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+  const [gpuCount, setGpuCount] = React.useState(8)
+
+  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
+    setGpuCount((prevCount) =>
+      Math.max(1, Math.min(99, prevCount + adjustment))
+    )
+  }, [])
+
+  const handleGpuInputChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value, 10)
+      if (!isNaN(value) && value >= 1 && value <= 99) {
+        setGpuCount(value)
+      }
+    },
+    []
+  )
+
+  return (
+    <div dir={t.dir}>
+      <FieldSet>
+        <FieldGroup>
+          <FieldSet>
+            <FieldLegend>{t.computeEnvironment}</FieldLegend>
+            <FieldDescription>{t.computeDescription}</FieldDescription>
+            <RadioGroup defaultValue="kubernetes">
+              <FieldLabel htmlFor="rtl-kubernetes">
+                <Field orientation="horizontal">
+                  <FieldContent>
+                    <FieldTitle>{t.kubernetes}</FieldTitle>
+                    <FieldDescription>
+                      {t.kubernetesDescription}
+                    </FieldDescription>
+                  </FieldContent>
+                  <RadioGroupItem
+                    value="kubernetes"
+                    id="rtl-kubernetes"
+                    aria-label={t.kubernetes}
+                  />
+                </Field>
+              </FieldLabel>
+              <FieldLabel htmlFor="rtl-vm">
+                <Field orientation="horizontal">
+                  <FieldContent>
+                    <FieldTitle>{t.virtualMachine}</FieldTitle>
+                    <FieldDescription>{t.vmDescription}</FieldDescription>
+                  </FieldContent>
+                  <RadioGroupItem
+                    value="vm"
+                    id="rtl-vm"
+                    aria-label={t.virtualMachine}
+                  />
+                </Field>
+              </FieldLabel>
+            </RadioGroup>
+          </FieldSet>
+          <FieldSeparator />
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel htmlFor="rtl-gpu-count">{t.numberOfGpus}</FieldLabel>
+              <FieldDescription>{t.gpuDescription}</FieldDescription>
+            </FieldContent>
+            <ButtonGroup>
+              <Input
+                id="rtl-gpu-count"
+                value={gpuCount}
+                onChange={handleGpuInputChange}
+                size={3}
+                className="h-7 !w-14 font-mono"
+                maxLength={3}
+              />
+              <Button
+                variant="outline"
+                size="icon-sm"
+                type="button"
+                aria-label={t.decrement}
+                onClick={() => handleGpuAdjustment(-1)}
+                disabled={gpuCount <= 1}
+              >
+                <IconMinus />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon-sm"
+                type="button"
+                aria-label={t.increment}
+                onClick={() => handleGpuAdjustment(1)}
+                disabled={gpuCount >= 99}
+              >
+                <IconPlus />
+              </Button>
+            </ButtonGroup>
+          </Field>
+          <FieldSeparator />
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel htmlFor="rtl-tinting">
+                {t.wallpaperTinting}
+              </FieldLabel>
+              <FieldDescription>{t.wallpaperDescription}</FieldDescription>
+            </FieldContent>
+            <Switch id="rtl-tinting" defaultChecked />
+          </Field>
+        </FieldGroup>
+      </FieldSet>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/button-group-demo.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui-rtl/dropdown-menu"
+import {
+  ArchiveIcon,
+  ArrowLeftIcon,
+  CalendarPlusIcon,
+  ClockIcon,
+  ListFilterIcon,
+  MailCheckIcon,
+  MoreHorizontalIcon,
+  TagIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    goBack: "رجوع",
+    archive: "أرشفة",
+    report: "إبلاغ",
+    snooze: "تأجيل",
+    moreOptions: "خيارات أخرى",
+    markAsRead: "تحديد كمقروء",
+    addToCalendar: "إضافة إلى التقويم",
+    addToList: "إضافة إلى القائمة",
+    labelAs: "تصنيف كـ...",
+    personal: "شخصي",
+    work: "عمل",
+    other: "أخرى",
+    trash: "حذف",
+  },
+  he: {
+    dir: "rtl" as const,
+    goBack: "חזור",
+    archive: "ארכיון",
+    report: "דווח",
+    snooze: "נודניק",
+    moreOptions: "אפשרויות נוספות",
+    markAsRead: "סמן כנקרא",
+    addToCalendar: "הוסף ליומן",
+    addToList: "הוסף לרשימה",
+    labelAs: "תייג כ...",
+    personal: "אישי",
+    work: "עבודה",
+    other: "אחר",
+    trash: "מחק",
+  },
+}
+
+export function ButtonGroupDemo() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+  const [label, setLabel] = React.useState("personal")
+
+  return (
+    <div dir={t.dir}>
+      <ButtonGroup>
+        <ButtonGroup className="hidden sm:flex">
+          <Button variant="outline" size="icon-sm" aria-label={t.goBack}>
+            <ArrowLeftIcon className="rtl:rotate-180" />
+          </Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="outline" size="sm">
+            {t.archive}
+          </Button>
+          <Button variant="outline" size="sm">
+            {t.report}
+          </Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="outline" size="sm">
+            {t.snooze}
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size="icon-sm"
+                  aria-label={t.moreOptions}
+                />
+              }
+            >
+              <MoreHorizontalIcon />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="start"
+              dir={t.dir}
+              data-lang={lang}
+              className="w-44"
+            >
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <MailCheckIcon />
+                  {t.markAsRead}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArchiveIcon />
+                  {t.archive}
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <ClockIcon />
+                  {t.snooze}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CalendarPlusIcon />
+                  {t.addToCalendar}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ListFilterIcon />
+                  {t.addToList}
+                </DropdownMenuItem>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <TagIcon />
+                    {t.labelAs}
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent
+                      side="left"
+                      dir={t.dir}
+                      data-lang={lang}
+                    >
+                      <DropdownMenuRadioGroup
+                        value={label}
+                        onValueChange={setLabel}
+                      >
+                        <DropdownMenuRadioItem value="personal">
+                          {t.personal}
+                        </DropdownMenuRadioItem>
+                        <DropdownMenuRadioItem value="work">
+                          {t.work}
+                        </DropdownMenuRadioItem>
+                        <DropdownMenuRadioItem value="other">
+                          {t.other}
+                        </DropdownMenuRadioItem>
+                      </DropdownMenuRadioGroup>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem variant="destructive">
+                  <Trash2Icon />
+                  {t.trash}
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </ButtonGroup>
+      </ButtonGroup>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/button-group-input-group.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/examples/base/ui-rtl/input-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui-rtl/tooltip"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    add: "إضافة",
+    voicePlaceholder: "سجل وأرسل صوتًا...",
+    messagePlaceholder: "أرسل رسالة...",
+    voiceMode: "الوضع الصوتي",
+  },
+  he: {
+    dir: "rtl" as const,
+    add: "הוסף",
+    voicePlaceholder: "הקלט ושלח אודיו...",
+    messagePlaceholder: "שלח הודעה...",
+    voiceMode: "מצב קולי",
+  },
+}
+
+export function ButtonGroupInputGroup() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
+
+  return (
+    <ButtonGroup dir={t.dir}>
+      <ButtonGroup>
+        <Button variant="outline" size="icon" aria-label={t.add}>
+          <PlusIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup className="flex-1">
+        <InputGroup>
+          <InputGroupInput
+            placeholder={
+              voiceEnabled ? t.voicePlaceholder : t.messagePlaceholder
+            }
+            disabled={voiceEnabled}
+          />
+          <InputGroupAddon align="inline-end">
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <InputGroupButton
+                    onClick={() => setVoiceEnabled(!voiceEnabled)}
+                    data-active={voiceEnabled}
+                    className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
+                    aria-pressed={voiceEnabled}
+                    size="icon-xs"
+                    aria-label={t.voiceMode}
+                  />
+                }
+              >
+                <AudioLinesIcon />
+              </TooltipTrigger>
+              <TooltipContent>{t.voiceMode}</TooltipContent>
+            </Tooltip>
+          </InputGroupAddon>
+        </InputGroup>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/button-group-nested.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    locale: "ar-SA",
+    previous: "السابق",
+    next: "التالي",
+  },
+  he: {
+    dir: "rtl" as const,
+    locale: "he-IL",
+    previous: "הקודם",
+    next: "הבא",
+  },
+}
+
+function formatNumber(value: number, locale: string) {
+  return new Intl.NumberFormat(locale).format(value)
+}
+
+export function ButtonGroupNested() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  return (
+    <ButtonGroup dir={t.dir}>
+      <ButtonGroup>
+        <Button variant="outline" size="sm">
+          {formatNumber(1, t.locale)}
+        </Button>
+        <Button variant="outline" size="sm">
+          {formatNumber(2, t.locale)}
+        </Button>
+        <Button variant="outline" size="sm">
+          {formatNumber(3, t.locale)}
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="icon-sm" aria-label={t.previous}>
+          <ArrowLeftIcon className="rtl:rotate-180" />
+        </Button>
+        <Button variant="outline" size="icon-sm" aria-label={t.next}>
+          <ArrowRightIcon className="rtl:rotate-180" />
+        </Button>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/button-group-popover.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/examples/base/ui-rtl/popover"
+import { Separator } from "@/examples/base/ui-rtl/separator"
+import { Textarea } from "@/examples/base/ui-rtl/textarea"
+import { BotIcon, ChevronDownIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    copilot: "المساعد",
+    openPopover: "فتح القائمة",
+    agentTasks: "مهام الوكيل",
+    placeholder: "صف مهمتك بلغة طبيعية.",
+    startTask: "ابدأ مهمة جديدة مع المساعد",
+    description:
+      "صف مهمتك بلغة طبيعية. سيعمل المساعد في الخلفية ويفتح طلب سحب لمراجعتك.",
+  },
+  he: {
+    dir: "rtl" as const,
+    copilot: "עוזר",
+    openPopover: "פתח תפריט",
+    agentTasks: "משימות סוכן",
+    placeholder: "תאר את המשימה שלך בשפה טבעית.",
+    startTask: "התחל משימה חדשה עם העוזר",
+    description:
+      "תאר את המשימה שלך בשפה טבעית. העוזר יעבוד ברקע ויפתח בקשת משיכה לבדיקתך.",
+  },
+}
+
+export function ButtonGroupPopover() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  return (
+    <ButtonGroup dir={t.dir}>
+      <Button variant="outline" size="sm">
+        <BotIcon /> {t.copilot}
+      </Button>
+      <Popover>
+        <PopoverTrigger
+          render={
+            <Button
+              variant="outline"
+              size="icon-sm"
+              aria-label={t.openPopover}
+            />
+          }
+        >
+          <ChevronDownIcon />
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          dir={t.dir}
+          data-lang={lang}
+          className="p-0"
+        >
+          <div className="px-4 py-3">
+            <div className="text-sm font-medium">{t.agentTasks}</div>
+          </div>
+          <Separator />
+          <div className="p-4 text-sm *:[p:not(:last-child)]:mb-2">
+            <Textarea
+              placeholder={t.placeholder}
+              className="mb-4 resize-none"
+            />
+            <p className="font-medium">{t.startTask}</p>
+            <p className="text-muted-foreground">{t.description}</p>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </ButtonGroup>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/empty-avatar-group.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/examples/base/ui-rtl/avatar"
+import { Button } from "@/examples/base/ui-rtl/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/base/ui-rtl/empty"
+import { PlusIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    title: "لا يوجد أعضاء في الفريق",
+    description: "قم بدعوة فريقك للتعاون في هذا المشروع.",
+    invite: "دعوة أعضاء",
+  },
+  he: {
+    dir: "rtl" as const,
+    title: "אין חברי צוות",
+    description: "הזמן את הצוות שלך לשתף פעולה בפרויקט זה.",
+    invite: "הזמן חברים",
+  },
+}
+
+export function EmptyAvatarGroup() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  return (
+    <Empty className="flex-none border py-10" dir={t.dir}>
+      <EmptyHeader>
+        <EmptyMedia>
+          <AvatarGroup className="grayscale">
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage
+                src="https://github.com/maxleiter.png"
+                alt="@maxleiter"
+              />
+              <AvatarFallback>LR</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage
+                src="https://github.com/evilrabbit.png"
+                alt="@evilrabbit"
+              />
+              <AvatarFallback>ER</AvatarFallback>
+            </Avatar>
+          </AvatarGroup>
+        </EmptyMedia>
+        <EmptyTitle>{t.title}</EmptyTitle>
+        <EmptyDescription>{t.description}</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button size="sm">
+          <PlusIcon />
+          {t.invite}
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/field-checkbox.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
+import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    terms: "أوافق على الشروط والأحكام",
+  },
+  he: {
+    dir: "rtl" as const,
+    terms: "אני מסכים לתנאים וההגבלות",
+  },
+}
+
+export function FieldCheckbox() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const { dir, terms } = translations[lang]
+
+  return (
+    <div dir={dir}>
+      <FieldLabel htmlFor="checkbox-demo-rtl">
+        <Field orientation="horizontal">
+          <Checkbox id="checkbox-demo-rtl" defaultChecked />
+          <FieldLabel htmlFor="checkbox-demo-rtl" className="line-clamp-1">
+            {terms}
+          </FieldLabel>
+        </Field>
+      </FieldLabel>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/field-demo.tsx

@@ -0,0 +1,217 @@
+"use client"
+
+import { Button } from "@/examples/base/ui-rtl/button"
+import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+} from "@/examples/base/ui-rtl/field"
+import { Input } from "@/examples/base/ui-rtl/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui-rtl/select"
+import { Textarea } from "@/examples/base/ui-rtl/textarea"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    locale: "ar-SA",
+    paymentMethod: "طريقة الدفع",
+    secureEncrypted: "جميع المعاملات آمنة ومشفرة",
+    nameOnCard: "الاسم على البطاقة",
+    namePlaceholder: "أحمد محمد",
+    cardNumber: "رقم البطاقة",
+    cardDescription: "أدخل رقمك المكون من 16 رقمًا.",
+    cvv: "رمز الأمان",
+    month: "الشهر",
+    year: "السنة",
+    billingAddress: "عنوان الفواتير",
+    billingDescription: "عنوان الفواتير المرتبط بطريقة الدفع الخاصة بك",
+    sameAsShipping: "نفس عنوان الشحن",
+    comments: "تعليقات",
+    commentsPlaceholder: "أضف أي تعليقات إضافية",
+    submit: "إرسال",
+    cancel: "إلغاء",
+  },
+  he: {
+    dir: "rtl" as const,
+    locale: "he-IL",
+    paymentMethod: "אמצעי תשלום",
+    secureEncrypted: "כל העסקאות מאובטחות ומוצפנות",
+    nameOnCard: "שם על הכרטיס",
+    namePlaceholder: "ישראל ישראלי",
+    cardNumber: "מספר כרטיס",
+    cardDescription: "הזן את המספר בן 16 הספרות שלך.",
+    cvv: "קוד אבטחה",
+    month: "חודש",
+    year: "שנה",
+    billingAddress: "כתובת לחיוב",
+    billingDescription: "כתובת החיוב המשויכת לאמצעי התשלום שלך",
+    sameAsShipping: "זהה לכתובת המשלוח",
+    comments: "הערות",
+    commentsPlaceholder: "הוסף הערות נוספות",
+    submit: "שלח",
+    cancel: "ביטול",
+  },
+}
+
+function formatCardNumber(locale: string) {
+  const formatter = new Intl.NumberFormat(locale, { useGrouping: false })
+  return `${formatter.format(1234)} ${formatter.format(5678)} ${formatter.format(9012)} ${formatter.format(3456)}`
+}
+
+function formatCvv(locale: string) {
+  return new Intl.NumberFormat(locale, { useGrouping: false }).format(123)
+}
+
+function getMonths(locale: string) {
+  const formatter = new Intl.NumberFormat(locale, {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  })
+  return Array.from({ length: 12 }, (_, i) => {
+    const value = String(i + 1).padStart(2, "0")
+    return { label: formatter.format(i + 1), value }
+  })
+}
+
+function getYears(locale: string) {
+  const formatter = new Intl.NumberFormat(locale, { useGrouping: false })
+  return Array.from({ length: 6 }, (_, i) => {
+    const year = 2024 + i
+    return { label: formatter.format(year), value: String(year) }
+  })
+}
+
+export function FieldDemo() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+  const months = getMonths(t.locale)
+  const years = getYears(t.locale)
+  const cardPlaceholder = formatCardNumber(t.locale)
+  const cvvPlaceholder = formatCvv(t.locale)
+
+  return (
+    <div dir={t.dir} className="w-full max-w-md rounded-lg border p-6">
+      <form>
+        <FieldGroup>
+          <FieldSet>
+            <FieldLegend>{t.paymentMethod}</FieldLegend>
+            <FieldDescription>{t.secureEncrypted}</FieldDescription>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="rtl-card-name">{t.nameOnCard}</FieldLabel>
+                <Input
+                  id="rtl-card-name"
+                  placeholder={t.namePlaceholder}
+                  required
+                />
+              </Field>
+              <div className="grid grid-cols-3 gap-4">
+                <Field className="col-span-2">
+                  <FieldLabel htmlFor="rtl-card-number">
+                    {t.cardNumber}
+                  </FieldLabel>
+                  <Input
+                    id="rtl-card-number"
+                    placeholder={cardPlaceholder}
+                    required
+                  />
+                  <FieldDescription>{t.cardDescription}</FieldDescription>
+                </Field>
+                <Field className="col-span-1">
+                  <FieldLabel htmlFor="rtl-cvv">{t.cvv}</FieldLabel>
+                  <Input id="rtl-cvv" placeholder={cvvPlaceholder} required />
+                </Field>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Field>
+                  <FieldLabel htmlFor="rtl-exp-month">{t.month}</FieldLabel>
+                  <Select defaultValue="" items={months}>
+                    <SelectTrigger id="rtl-exp-month">
+                      <SelectValue placeholder="MM" />
+                    </SelectTrigger>
+                    <SelectContent data-lang={lang} dir={t.dir}>
+                      <SelectGroup>
+                        {months.map((item) => (
+                          <SelectItem key={item.value} value={item.value}>
+                            {item.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="rtl-exp-year">{t.year}</FieldLabel>
+                  <Select defaultValue="" items={years}>
+                    <SelectTrigger id="rtl-exp-year">
+                      <SelectValue placeholder="YYYY" />
+                    </SelectTrigger>
+                    <SelectContent data-lang={lang} dir={t.dir}>
+                      <SelectGroup>
+                        {years.map((item) => (
+                          <SelectItem key={item.value} value={item.value}>
+                            {item.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </div>
+            </FieldGroup>
+          </FieldSet>
+          <FieldSeparator />
+          <FieldSet>
+            <FieldLegend>{t.billingAddress}</FieldLegend>
+            <FieldDescription>{t.billingDescription}</FieldDescription>
+            <FieldGroup>
+              <Field orientation="horizontal">
+                <Checkbox id="rtl-same-as-shipping" defaultChecked />
+                <FieldLabel
+                  htmlFor="rtl-same-as-shipping"
+                  className="font-normal"
+                >
+                  {t.sameAsShipping}
+                </FieldLabel>
+              </Field>
+            </FieldGroup>
+          </FieldSet>
+          <FieldSeparator />
+          <FieldSet>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="rtl-comments">{t.comments}</FieldLabel>
+                <Textarea
+                  id="rtl-comments"
+                  placeholder={t.commentsPlaceholder}
+                  className="resize-none"
+                />
+              </Field>
+            </FieldGroup>
+          </FieldSet>
+          <Field orientation="horizontal">
+            <Button type="submit">{t.submit}</Button>
+            <Button variant="outline" type="button">
+              {t.cancel}
+            </Button>
+          </Field>
+        </FieldGroup>
+      </form>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/field-hear.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { Card, CardContent } from "@/examples/base/ui-rtl/card"
+import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  FieldTitle,
+} from "@/examples/base/ui-rtl/field"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    legend: "كيف سمعت عنا؟",
+    description: "اختر الخيار الذي يصف أفضل طريقة سمعت عنا من خلالها.",
+    socialMedia: "التواصل الاجتماعي",
+    searchEngine: "البحث",
+    referral: "إحالة",
+    other: "أخرى",
+  },
+  he: {
+    dir: "rtl" as const,
+    legend: "איך שמעת עלינו?",
+    description: "בחר את האפשרות שמתארת בצורה הטובה ביותר כיצד שמעת עלינו.",
+    socialMedia: "חברתיות",
+    searchEngine: "חיפוש",
+    referral: "הפניה",
+    other: "אחר",
+  },
+}
+
+export function FieldHear() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  const options = [
+    { label: t.socialMedia, value: "social-media" },
+    { label: t.searchEngine, value: "search-engine" },
+    { label: t.referral, value: "referral" },
+    { label: t.other, value: "other" },
+  ]
+
+  return (
+    <div dir={t.dir}>
+      <Card className="border-0 py-4 shadow-none">
+        <CardContent className="px-4">
+          <form>
+            <FieldGroup>
+              <FieldSet className="gap-4">
+                <FieldLegend>{t.legend}</FieldLegend>
+                <FieldDescription className="line-clamp-1">
+                  {t.description}
+                </FieldDescription>
+                <FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
+                  {options.map((option) => (
+                    <FieldLabel
+                      htmlFor={`rtl-${option.value}`}
+                      key={option.value}
+                      className="!w-fit"
+                    >
+                      <Field
+                        orientation="horizontal"
+                        className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
+                      >
+                        <Checkbox
+                          value={option.value}
+                          id={`rtl-${option.value}`}
+                          defaultChecked={option.value === "social-media"}
+                          className="-ms-6 translate-x-1 rounded-full transition-all duration-100 ease-linear data-checked:ms-0 data-checked:translate-x-0"
+                        />
+                        <FieldTitle>{option.label}</FieldTitle>
+                      </Field>
+                    </FieldLabel>
+                  ))}
+                </FieldGroup>
+              </FieldSet>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/field-slider.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Field,
+  FieldDescription,
+  FieldTitle,
+} from "@/examples/base/ui-rtl/field"
+import { Slider } from "@/examples/base/ui-rtl/slider"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    locale: "ar-SA",
+    title: "نطاق السعر",
+    description: "حدد نطاق ميزانيتك",
+    ariaLabel: "نطاق السعر",
+    currency: "﷼",
+  },
+  he: {
+    dir: "rtl" as const,
+    locale: "he-IL",
+    title: "טווח מחירים",
+    description: "הגדר את טווח התקציב שלך",
+    ariaLabel: "טווח מחירים",
+    currency: "₪",
+  },
+}
+
+function formatNumber(value: number, locale: string) {
+  return new Intl.NumberFormat(locale).format(value)
+}
+
+export function FieldSlider() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+  const [value, setValue] = useState([200, 800])
+
+  return (
+    <Field dir={t.dir}>
+      <FieldTitle>{t.title}</FieldTitle>
+      <FieldDescription>
+        {t.description} ({t.currency}
+        <span className="font-medium tabular-nums">
+          {formatNumber(value[0], t.locale)}
+        </span>{" "}
+        -{" "}
+        <span className="font-medium tabular-nums">
+          {formatNumber(value[1], t.locale)}
+        </span>
+        ).
+      </FieldDescription>
+      <Slider
+        value={value}
+        onValueChange={(value) => setValue(value as [number, number])}
+        max={1000}
+        min={0}
+        step={10}
+        className="mt-2 w-full"
+        aria-label={t.ariaLabel}
+      />
+    </Field>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/index.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { DirectionProvider } from "@/examples/base/ui-rtl/direction"
+import { FieldSeparator } from "@/examples/base/ui-rtl/field"
+
+import {
+  LanguageProvider,
+  LanguageSelector,
+  useLanguageContext,
+} from "@/components/language-selector"
+
+import { AppearanceSettings } from "./appearance-settings"
+import { ButtonGroupDemo } from "./button-group-demo"
+import { ButtonGroupInputGroup } from "./button-group-input-group"
+import { ButtonGroupNested } from "./button-group-nested"
+import { ButtonGroupPopover } from "./button-group-popover"
+import { EmptyAvatarGroup } from "./empty-avatar-group"
+import { FieldCheckbox } from "./field-checkbox"
+import { FieldDemo } from "./field-demo"
+import { FieldHear } from "./field-hear"
+import { FieldSlider } from "./field-slider"
+import { InputGroupButtonExample } from "./input-group-button"
+import { InputGroupDemo } from "./input-group-demo"
+import { ItemDemo } from "./item-demo"
+import { NotionPromptForm } from "./notion-prompt-form"
+import { SpinnerBadge } from "./spinner-badge"
+import { SpinnerEmpty } from "./spinner-empty"
+
+function RtlComponentsContent() {
+  const context = useLanguageContext()
+
+  if (!context) {
+    return null
+  }
+
+  const { language } = context
+
+  return (
+    <div
+      className="relative grid gap-8 p-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8"
+      dir="rtl"
+      data-lang={language}
+      data-slot="rtl-components"
+    >
+      <LanguageSelector
+        value={language}
+        onValueChange={context.setLanguage}
+        className="absolute -top-12 right-52 hidden h-8! data-[size=sm]:rounded-lg lg:flex"
+        languages={["ar", "he"]}
+      />
+      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
+        <FieldDemo />
+      </div>
+      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
+        <EmptyAvatarGroup />
+        <SpinnerBadge />
+        <ButtonGroupInputGroup />
+        <FieldSlider />
+        <InputGroupDemo />
+      </div>
+      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
+        <InputGroupButtonExample />
+        <ItemDemo />
+        <FieldSeparator className="my-4">
+          {language === "he" ? "הגדרות מראה" : "إعدادات المظهر"}
+        </FieldSeparator>
+        <AppearanceSettings />
+      </div>
+      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
+        <NotionPromptForm />
+        <ButtonGroupDemo />
+        <FieldCheckbox />
+        <div className="flex justify-between gap-4">
+          <ButtonGroupNested />
+          <ButtonGroupPopover />
+        </div>
+        <FieldHear />
+        <SpinnerEmpty />
+      </div>
+    </div>
+  )
+}
+
+export function RtlComponents() {
+  return (
+    <LanguageProvider defaultLanguage="ar">
+      <DirectionProvider direction="rtl">
+        <RtlComponentsContent />
+      </DirectionProvider>
+    </LanguageProvider>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/examples/base/ui-rtl/input-group"
+import { Label } from "@/examples/base/ui-rtl/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/examples/base/ui-rtl/popover"
+import { IconInfoCircle, IconStar } from "@tabler/icons-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    inputLabel: "السعر",
+    info: "معلومات",
+    priceInfo: "أدخل السعر بالريال السعودي.",
+    priceDescription: "سيتم تحويل السعر تلقائياً.",
+    favorite: "مفضل",
+    currency: "ر.س",
+  },
+  he: {
+    dir: "rtl" as const,
+    inputLabel: "מחיר",
+    info: "מידע",
+    priceInfo: "הזן את המחיר בשקלים.",
+    priceDescription: "המחיר יומר אוטומטית.",
+    favorite: "מועדף",
+    currency: "₪",
+  },
+}
+
+export function InputGroupButtonExample() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+  const [isFavorite, setIsFavorite] = React.useState(false)
+
+  return (
+    <div dir={t.dir} className="grid w-full max-w-sm gap-6">
+      <Label htmlFor="input-secure-rtl" className="sr-only">
+        {t.inputLabel}
+      </Label>
+      <InputGroup className="[--radius:9999px]">
+        <InputGroupInput id="input-secure-rtl" className="!pr-0.5" />
+        <InputGroupAddon>
+          <Popover>
+            <PopoverTrigger
+              render={
+                <InputGroupButton
+                  variant="secondary"
+                  size="icon-xs"
+                  aria-label={t.info}
+                />
+              }
+            >
+              <IconInfoCircle />
+            </PopoverTrigger>
+            <PopoverContent
+              align="end"
+              alignOffset={10}
+              className="flex flex-col gap-1 rounded-xl text-sm"
+              data-lang={lang}
+              dir={t.dir}
+            >
+              <p className="font-medium">{t.priceInfo}</p>
+              <p>{t.priceDescription}</p>
+            </PopoverContent>
+          </Popover>
+        </InputGroupAddon>
+        <InputGroupAddon className="text-muted-foreground">
+          {t.currency}
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            onClick={() => setIsFavorite(!isFavorite)}
+            size="icon-xs"
+            aria-label={t.favorite}
+          >
+            <IconStar
+              data-favorite={isFavorite}
+              className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
+            />
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui-rtl/dropdown-menu"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/base/ui-rtl/input-group"
+import { Separator } from "@/examples/base/ui-rtl/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui-rtl/tooltip"
+import {
+  IconCheck,
+  IconChevronDown,
+  IconInfoCircle,
+  IconPlus,
+} from "@tabler/icons-react"
+import { ArrowUpIcon, Search } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    search: "بحث...",
+    results: "12 نتيجة",
+    example: "example.com",
+    tooltipContent: "هذا محتوى في تلميح.",
+    askSearchChat: "اسأل، ابحث أو تحدث...",
+    add: "إضافة",
+    auto: "تلقائي",
+    agent: "وكيل",
+    manual: "يدوي",
+    used: "52% مستخدم",
+    send: "إرسال",
+  },
+  he: {
+    dir: "rtl" as const,
+    search: "חיפוש...",
+    results: "12 תוצאות",
+    example: "example.com",
+    tooltipContent: "זה תוכן בטולטיפ.",
+    askSearchChat: "שאל, חפש או שוחח...",
+    add: "הוסף",
+    auto: "אוטומטי",
+    agent: "סוכן",
+    manual: "ידני",
+    used: "52% בשימוש",
+    send: "שלח",
+  },
+}
+
+export function InputGroupDemo() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  return (
+    <div dir={t.dir} className="grid w-full max-w-sm gap-6">
+      <InputGroup>
+        <InputGroupInput placeholder={t.search} />
+        <InputGroupAddon>
+          <Search />
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">{t.results}</InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder={t.example} />
+        <InputGroupAddon align="inline-end">
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <InputGroupButton
+                  className="rounded-full"
+                  size="icon-xs"
+                  aria-label={t.add}
+                />
+              }
+            >
+              <IconInfoCircle />
+            </TooltipTrigger>
+            <TooltipContent>{t.tooltipContent}</TooltipContent>
+          </Tooltip>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupTextarea placeholder={t.askSearchChat} />
+        <InputGroupAddon align="block-end">
+          <InputGroupButton
+            variant="outline"
+            className="rounded-full"
+            size="icon-xs"
+            aria-label={t.add}
+          >
+            <IconPlus />
+          </InputGroupButton>
+          <DropdownMenu>
+            <DropdownMenuTrigger render={<InputGroupButton variant="ghost" />}>
+              <IconChevronDown />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="top" align="start">
+              <DropdownMenuItem>{t.auto}</DropdownMenuItem>
+              <DropdownMenuItem>{t.agent}</DropdownMenuItem>
+              <DropdownMenuItem>{t.manual}</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <InputGroupText className="ms-auto">{t.used}</InputGroupText>
+          <Separator orientation="vertical" className="!h-4" />
+          <InputGroupButton
+            variant="default"
+            className="rounded-full"
+            size="icon-xs"
+          >
+            <ArrowUpIcon />
+            <span className="sr-only">{t.send}</span>
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder="shadcn" />
+        <InputGroupAddon align="inline-end">
+          <div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
+            <IconCheck className="size-3 text-white" />
+          </div>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/item-demo.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { Button } from "@/examples/base/ui-rtl/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui-rtl/item"
+import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    twoFactor: "المصادقة الثنائية",
+    twoFactorDescription: "التحقق عبر البريد الإلكتروني أو رقم الهاتف.",
+    enable: "تفعيل",
+    verified: "تم التحقق من ملفك الشخصي.",
+  },
+  he: {
+    dir: "rtl" as const,
+    twoFactor: "אימות דו-שלבי",
+    twoFactorDescription: "אמת באמצעות אימייל או מספר טלפון.",
+    enable: "הפעל",
+    verified: "הפרופיל שלך אומת.",
+  },
+}
+
+export function ItemDemo() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  return (
+    <div dir={t.dir} className="flex w-full max-w-md flex-col gap-6">
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>{t.twoFactor}</ItemTitle>
+          <ItemDescription className="text-pretty xl:hidden 2xl:block">
+            {t.twoFactorDescription}
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">{t.enable}</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia>
+          <BadgeCheckIcon className="size-5" />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>{t.verified}</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <ChevronRightIcon className="size-4 rtl:rotate-180" />
+        </ItemActions>
+      </Item>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx

@@ -0,0 +1,516 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/examples/base/ui-rtl/avatar"
+import { Badge } from "@/examples/base/ui-rtl/badge"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/examples/base/ui-rtl/command"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui-rtl/dropdown-menu"
+import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/examples/base/ui-rtl/input-group"
+import { Popover, PopoverContent } from "@/examples/base/ui-rtl/popover"
+import { Switch } from "@/examples/base/ui-rtl/switch"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui-rtl/tooltip"
+import {
+  IconApps,
+  IconArrowUp,
+  IconAt,
+  IconBook,
+  IconCircleDashedPlus,
+  IconPaperclip,
+  IconPlus,
+  IconWorld,
+  IconX,
+} from "@tabler/icons-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    prompt: "الأمر",
+    placeholder: "اسأل، ابحث، أو أنشئ أي شيء...",
+    addContext: "أضف سياق",
+    mentionTooltip: "اذكر شخصًا أو صفحة أو تاريخًا",
+    searchPages: "البحث في الصفحات...",
+    noPagesFound: "لم يتم العثور على صفحات",
+    pages: "الصفحات",
+    users: "المستخدمون",
+    attachFile: "إرفاق ملف",
+    selectModel: "اختر نموذج الذكاء الاصطناعي",
+    selectAgentMode: "اختر وضع الوكيل",
+    webSearch: "البحث على الويب",
+    appsIntegrations: "التطبيقات والتكاملات",
+    allSourcesAccess: "جميع المصادر التي يمكنني الوصول إليها",
+    findKnowledge: "ابحث أو استخدم المعرفة في...",
+    noKnowledgeFound: "لم يتم العثور على معرفة",
+    helpCenter: "مركز المساعدة",
+    connectApps: "ربط التطبيقات",
+    searchSourcesNote: "سنبحث فقط في المصادر المحددة هنا.",
+    send: "إرسال",
+    allSources: "جميع المصادر",
+    auto: "تلقائي",
+    agentMode: "وضع الوكيل",
+    planMode: "وضع التخطيط",
+    beta: "تجريبي",
+    workspace: "مساحة العمل",
+    meetingNotes: "ملاحظات الاجتماع",
+    projectDashboard: "لوحة المشروع",
+    ideasBrainstorming: "أفكار وعصف ذهني",
+    calendarEvents: "التقويم والأحداث",
+    documentation: "التوثيق",
+    goalsObjectives: "الأهداف والغايات",
+    budgetPlanning: "تخطيط الميزانية",
+    teamDirectory: "دليل الفريق",
+    technicalSpecs: "المواصفات التقنية",
+    analyticsReport: "تقرير التحليلات",
+  },
+  he: {
+    dir: "rtl" as const,
+    prompt: "פקודה",
+    placeholder: "שאל, חפש, או צור משהו...",
+    addContext: "הוסף הקשר",
+    mentionTooltip: "הזכר אדם, עמוד או תאריך",
+    searchPages: "חפש עמודים...",
+    noPagesFound: "לא נמצאו עמודים",
+    pages: "עמודים",
+    users: "משתמשים",
+    attachFile: "צרף קובץ",
+    selectModel: "בחר מודל AI",
+    selectAgentMode: "בחר מצב סוכן",
+    webSearch: "חיפוש באינטרנט",
+    appsIntegrations: "אפליקציות ואינטגרציות",
+    allSourcesAccess: "כל המקורות שיש לי גישה אליהם",
+    findKnowledge: "מצא או השתמש בידע ב...",
+    noKnowledgeFound: "לא נמצא ידע",
+    helpCenter: "מרכז עזרה",
+    connectApps: "חבר אפליקציות",
+    searchSourcesNote: "נחפש רק במקורות שנבחרו כאן.",
+    send: "שלח",
+    allSources: "כל המקורות",
+    auto: "אוטומטי",
+    agentMode: "מצב סוכן",
+    planMode: "מצב תכנון",
+    beta: "בטא",
+    workspace: "סביבת עבודה",
+    meetingNotes: "הערות פגישה",
+    projectDashboard: "לוח מחוונים לפרויקט",
+    ideasBrainstorming: "רעיונות וסיעור מוחות",
+    calendarEvents: "יומן ואירועים",
+    documentation: "תיעוד",
+    goalsObjectives: "מטרות ויעדים",
+    budgetPlanning: "תכנון תקציב",
+    teamDirectory: "ספריית צוות",
+    technicalSpecs: "מפרט טכני",
+    analyticsReport: "דוח אנליטיקה",
+  },
+}
+
+function MentionableIcon({
+  item,
+}: {
+  item: { type: string; title: string; image: string }
+}) {
+  return item.type === "page" ? (
+    <span className="flex size-4 items-center justify-center">
+      {item.image}
+    </span>
+  ) : (
+    <Avatar className="size-4">
+      <AvatarImage src={item.image} />
+      <AvatarFallback>{item.title[0]}</AvatarFallback>
+    </Avatar>
+  )
+}
+
+export function NotionPromptForm() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  const SAMPLE_DATA = useMemo(
+    () => ({
+      mentionable: [
+        { type: "page", title: t.meetingNotes, image: "📝" },
+        { type: "page", title: t.projectDashboard, image: "📊" },
+        { type: "page", title: t.ideasBrainstorming, image: "💡" },
+        { type: "page", title: t.calendarEvents, image: "📅" },
+        { type: "page", title: t.documentation, image: "📚" },
+        { type: "page", title: t.goalsObjectives, image: "🎯" },
+        { type: "page", title: t.budgetPlanning, image: "💰" },
+        { type: "page", title: t.teamDirectory, image: "👥" },
+        { type: "page", title: t.technicalSpecs, image: "🔧" },
+        { type: "page", title: t.analyticsReport, image: "📈" },
+        {
+          type: "user",
+          title: "shadcn",
+          image: "https://github.com/shadcn.png",
+          workspace: t.workspace,
+        },
+        {
+          type: "user",
+          title: "maxleiter",
+          image: "https://github.com/maxleiter.png",
+          workspace: t.workspace,
+        },
+        {
+          type: "user",
+          title: "evilrabbit",
+          image: "https://github.com/evilrabbit.png",
+          workspace: t.workspace,
+        },
+      ],
+      models: [
+        { name: t.auto },
+        { name: t.agentMode, badge: t.beta },
+        { name: t.planMode },
+      ],
+    }),
+    [t]
+  )
+
+  const [mentions, setMentions] = useState<string[]>([])
+  const [mentionPopoverOpen, setMentionPopoverOpen] = useState(false)
+  const [modelPopoverOpen, setModelPopoverOpen] = useState(false)
+  const [selectedModel, setSelectedModel] = useState<
+    (typeof SAMPLE_DATA.models)[0]
+  >(SAMPLE_DATA.models[0])
+  const [scopeMenuOpen, setScopeMenuOpen] = useState(false)
+
+  const grouped = useMemo(() => {
+    return SAMPLE_DATA.mentionable.reduce(
+      (acc, item) => {
+        const isAvailable = !mentions.includes(item.title)
+
+        if (isAvailable) {
+          if (!acc[item.type]) {
+            acc[item.type] = []
+          }
+          acc[item.type].push(item)
+        }
+        return acc
+      },
+      {} as Record<string, typeof SAMPLE_DATA.mentionable>
+    )
+  }, [mentions, SAMPLE_DATA])
+
+  const hasMentions = mentions.length > 0
+
+  return (
+    <div dir={t.dir}>
+      <form>
+        <Field>
+          <FieldLabel htmlFor="rtl-notion-prompt" className="sr-only">
+            {t.prompt}
+          </FieldLabel>
+          <InputGroup>
+            <InputGroupTextarea
+              id="rtl-notion-prompt"
+              placeholder={t.placeholder}
+            />
+            <InputGroupAddon align="block-start">
+              <Popover
+                open={mentionPopoverOpen}
+                onOpenChange={setMentionPopoverOpen}
+              >
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <InputGroupButton
+                        variant="outline"
+                        size={!hasMentions ? "sm" : "icon-sm"}
+                        className="rounded-full transition-transform"
+                      />
+                    }
+                    onFocusCapture={(e) => e.stopPropagation()}
+                  >
+                    <IconAt /> {!hasMentions && t.addContext}
+                  </TooltipTrigger>
+                  <TooltipContent>{t.mentionTooltip}</TooltipContent>
+                </Tooltip>
+                <PopoverContent className="p-0" align="start" dir={t.dir}>
+                  <Command>
+                    <CommandInput placeholder={t.searchPages} />
+                    <CommandList>
+                      <CommandEmpty>{t.noPagesFound}</CommandEmpty>
+                      {Object.entries(grouped).map(([type, items]) => (
+                        <CommandGroup
+                          key={type}
+                          heading={type === "page" ? t.pages : t.users}
+                        >
+                          {items.map((item) => (
+                            <CommandItem
+                              key={item.title}
+                              value={item.title}
+                              onSelect={(currentValue) => {
+                                setMentions((prev) => [...prev, currentValue])
+                                setMentionPopoverOpen(false)
+                              }}
+                            >
+                              <MentionableIcon item={item} />
+                              {item.title}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      ))}
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
+                {mentions.map((mention) => {
+                  const item = SAMPLE_DATA.mentionable.find(
+                    (item) => item.title === mention
+                  )
+
+                  if (!item) {
+                    return null
+                  }
+
+                  return (
+                    <InputGroupButton
+                      key={mention}
+                      size="sm"
+                      variant="secondary"
+                      className="rounded-full !pr-2"
+                      onClick={() => {
+                        setMentions((prev) => prev.filter((m) => m !== mention))
+                      }}
+                    >
+                      <MentionableIcon item={item} />
+                      {item.title}
+                      <IconX />
+                    </InputGroupButton>
+                  )
+                })}
+              </div>
+            </InputGroupAddon>
+            <InputGroupAddon align="block-end" className="gap-1">
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <InputGroupButton
+                      size="icon-sm"
+                      className="rounded-full"
+                      aria-label={t.attachFile}
+                    />
+                  }
+                >
+                  <IconPaperclip />
+                </TooltipTrigger>
+                <TooltipContent>{t.attachFile}</TooltipContent>
+              </Tooltip>
+              <DropdownMenu
+                open={modelPopoverOpen}
+                onOpenChange={setModelPopoverOpen}
+              >
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <InputGroupButton size="sm" className="rounded-full" />
+                    }
+                  >
+                    {selectedModel.name}
+                  </TooltipTrigger>
+                  <TooltipContent>{t.selectModel}</TooltipContent>
+                </Tooltip>
+                <DropdownMenuContent
+                  side="top"
+                  align="start"
+                  className="w-48"
+                  dir={t.dir}
+                >
+                  <DropdownMenuGroup className="w-48">
+                    <DropdownMenuLabel className="text-muted-foreground text-xs">
+                      {t.selectAgentMode}
+                    </DropdownMenuLabel>
+                    {SAMPLE_DATA.models.map((model) => (
+                      <DropdownMenuCheckboxItem
+                        key={model.name}
+                        checked={model.name === selectedModel.name}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            setSelectedModel(model)
+                          }
+                        }}
+                        className="pr-2 *:[span:first-child]:right-auto *:[span:first-child]:left-2"
+                      >
+                        {model.name}
+                        {model.badge && (
+                          <Badge
+                            variant="secondary"
+                            className="h-5 rounded-sm bg-blue-100 px-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-100"
+                          >
+                            {model.badge}
+                          </Badge>
+                        )}
+                      </DropdownMenuCheckboxItem>
+                    ))}
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <DropdownMenu
+                open={scopeMenuOpen}
+                onOpenChange={setScopeMenuOpen}
+              >
+                <DropdownMenuTrigger
+                  render={
+                    <InputGroupButton size="sm" className="rounded-full" />
+                  }
+                >
+                  <IconWorld /> {t.allSources}
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  side="top"
+                  align="end"
+                  className="w-72"
+                  dir={t.dir}
+                >
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem
+                      render={
+                        <label htmlFor="rtl-web-search">
+                          <IconWorld /> {t.webSearch}{" "}
+                          <Switch
+                            id="rtl-web-search"
+                            className="ms-auto"
+                            defaultChecked
+                            size="sm"
+                          />
+                        </label>
+                      }
+                      onSelect={(e) => e.preventDefault()}
+                    ></DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem
+                      render={
+                        <label htmlFor="rtl-apps">
+                          <IconApps /> {t.appsIntegrations}
+                          <Switch
+                            id="rtl-apps"
+                            className="ms-auto"
+                            defaultChecked
+                            size="sm"
+                          />
+                        </label>
+                      }
+                      onSelect={(e) => e.preventDefault()}
+                    ></DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <IconCircleDashedPlus /> {t.allSourcesAccess}
+                    </DropdownMenuItem>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>
+                        <Avatar className="size-4">
+                          <AvatarImage src="https://github.com/shadcn.png" />
+                          <AvatarFallback>CN</AvatarFallback>
+                        </Avatar>
+                        shadcn
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent
+                        className="w-72 rounded-lg p-0"
+                        dir={t.dir}
+                        side="left"
+                      >
+                        <Command>
+                          <CommandInput
+                            placeholder={t.findKnowledge}
+                            autoFocus
+                          />
+                          <CommandList>
+                            <CommandEmpty>{t.noKnowledgeFound}</CommandEmpty>
+                            <CommandGroup>
+                              {SAMPLE_DATA.mentionable
+                                .filter((item) => item.type === "user")
+                                .map((user) => (
+                                  <CommandItem
+                                    key={user.title}
+                                    value={user.title}
+                                    onSelect={() => {
+                                      console.log("Selected user:", user.title)
+                                    }}
+                                  >
+                                    <Avatar className="size-4">
+                                      <AvatarImage src={user.image} />
+                                      <AvatarFallback>
+                                        {user.title[0]}
+                                      </AvatarFallback>
+                                    </Avatar>
+                                    {user.title}{" "}
+                                    <span className="text-muted-foreground">
+                                      -{" "}
+                                      {
+                                        (user as { workspace?: string })
+                                          .workspace
+                                      }
+                                    </span>
+                                  </CommandItem>
+                                ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                    <DropdownMenuItem>
+                      <IconBook /> {t.helpCenter}
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <IconPlus /> {t.connectApps}
+                    </DropdownMenuItem>
+                    <DropdownMenuLabel className="text-muted-foreground text-xs">
+                      {t.searchSourcesNote}
+                    </DropdownMenuLabel>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <InputGroupButton
+                aria-label={t.send}
+                className="ms-auto rounded-full"
+                variant="default"
+                size="icon-sm"
+              >
+                <IconArrowUp />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </Field>
+      </form>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/spinner-badge.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Badge } from "@/examples/base/ui-rtl/badge"
+import { Spinner } from "@/examples/base/ui-rtl/spinner"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    syncing: "جارٍ المزامنة",
+    updating: "جارٍ التحديث",
+    loading: "جارٍ التحميل",
+  },
+  he: {
+    dir: "rtl" as const,
+    syncing: "מסנכרן",
+    updating: "מעדכן",
+    loading: "טוען",
+  },
+}
+
+export function SpinnerBadge() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  return (
+    <div dir={t.dir} className="flex items-center gap-2">
+      <Badge>
+        <Spinner />
+        {t.syncing}
+      </Badge>
+      <Badge variant="secondary">
+        <Spinner />
+        {t.updating}
+      </Badge>
+      <Badge variant="outline">
+        <Spinner />
+        {t.loading}
+      </Badge>
+    </div>
+  )
+}

apps/v4/app/(app)/examples/rtl/components/spinner-empty.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { Button } from "@/examples/base/ui-rtl/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/base/ui-rtl/empty"
+import { Spinner } from "@/examples/base/ui-rtl/spinner"
+
+import { useLanguageContext } from "@/components/language-selector"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    title: "جارٍ معالجة طلبك",
+    description: "يرجى الانتظار بينما نعالج طلبك. لا تقم بتحديث الصفحة.",
+    cancel: "إلغاء",
+  },
+  he: {
+    dir: "rtl" as const,
+    title: "מעבד את הבקשה שלך",
+    description: "אנא המתן בזמן שאנו מעבדים את בקשתך. אל תרענן את הדף.",
+    cancel: "ביטול",
+  },
+}
+
+export function SpinnerEmpty() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  return (
+    <Empty className="w-full border md:p-6" dir={t.dir}>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Spinner />
+        </EmptyMedia>
+        <EmptyTitle>{t.title}</EmptyTitle>
+        <EmptyDescription>{t.description}</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="outline" size="sm">
+          {t.cancel}
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}

apps/v4/app/(app)/examples/rtl/page.tsx

@@ -0,0 +1,14 @@
+import { type Metadata } from "next"
+
+import { RtlComponents } from "./components"
+
+export const metadata: Metadata = {
+  title: "RTL",
+  description: "RTL example page with right-to-left language support.",
+}
+
+export function RtlPage() {
+  return <RtlComponents />
+}
+
+export default RtlPage

apps/v4/app/(create)/components/customizer.tsx

@@ -11,7 +11,6 @@ import { Separator } from "@/registry/new-york-v4/ui/separator"
 import { MenuAccentPicker } from "@/app/(create)/components/accent-picker"
 import { BaseColorPicker } from "@/app/(create)/components/base-color-picker"
 import { BasePicker } from "@/app/(create)/components/base-picker"
-import { DirectionPicker } from "@/app/(create)/components/direction-picker"
 import { FontPicker } from "@/app/(create)/components/font-picker"
 import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
 import { MenuColorPicker } from "@/app/(create)/components/menu-picker"
@@ -39,7 +38,7 @@ export function Customizer() {
       className="no-scrollbar -mx-2.5 flex flex-col overflow-y-auto p-1 md:mx-0 md:h-[calc(100svh-var(--header-height)-2rem)] md:w-48 md:gap-0 md:py-0"
       ref={anchorRef}
     >
-      <div className="--md:flex hidden items-center gap-2 px-[calc(--spacing(2.5))] pb-1 md:flex-col md:items-start">
+      <div className="hidden items-center gap-2 px-[calc(--spacing(2.5))] pb-1 md:flex md:flex-col md:items-start">
         <HugeiconsIcon
           icon={Settings05Icon}
           className="size-4"
@@ -76,7 +75,6 @@ export function Customizer() {
           <IconLibraryPicker isMobile={isMobile} anchorRef={anchorRef} />
           <FontPicker fonts={FONTS} isMobile={isMobile} anchorRef={anchorRef} />
           <RadiusPicker isMobile={isMobile} anchorRef={anchorRef} />
-          <DirectionPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
           <div className="mt-auto hidden w-full flex-col items-center gap-0 md:flex">

apps/v4/app/(create)/components/design-system-provider.tsx

@@ -17,7 +17,7 @@ export function DesignSystemProvider({
   children: React.ReactNode
 }) {
   const [
-    { style, theme, font, baseColor, direction, menuAccent, menuColor, radius },
+    { style, theme, font, baseColor, menuAccent, menuColor, radius },
     setSearchParams,
   ] = useDesignSystemSearchParams({
     shallow: true, // No need to go through the server…
@@ -166,13 +166,6 @@ export function DesignSystemProvider({
     }
   }, [menuColor])
 
-  // Set dir attribute on html element when direction changes.
-  React.useLayoutEffect(() => {
-    if (direction) {
-      document.documentElement.dir = direction
-    }
-  }, [direction])
-
   if (!isReady) {
     return null
   }

apps/v4/app/(create)/components/direction-picker.tsx

@@ -1,122 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { type DirectionValue } from "@/registry/config"
-import { LockButton } from "@/app/(create)/components/lock-button"
-import {
-  Picker,
-  PickerContent,
-  PickerGroup,
-  PickerRadioGroup,
-  PickerRadioItem,
-  PickerTrigger,
-} from "@/app/(create)/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-
-const DIRECTION_OPTIONS = [
-  {
-    value: "ltr" as const,
-    label: "LTR",
-    description: "Left-to-Right",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="128"
-        height="128"
-        viewBox="0 0 24 24"
-        fill="none"
-        role="img"
-        stroke="currentColor"
-        className="text-foreground"
-      >
-        <path
-          d="M3 12h18M15 6l6 6-6 6"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    ),
-  },
-  {
-    value: "rtl" as const,
-    label: "RTL",
-    description: "Right-to-Left",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="128"
-        height="128"
-        viewBox="0 0 24 24"
-        fill="none"
-        role="img"
-        stroke="currentColor"
-        className="text-foreground"
-      >
-        <path
-          d="M21 12H3M9 18l-6-6 6-6"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    ),
-  },
-] as const
-
-export function DirectionPicker({
-  isMobile,
-  anchorRef,
-}: {
-  isMobile: boolean
-  anchorRef: React.RefObject<HTMLDivElement | null>
-}) {
-  const [params, setParams] = useDesignSystemSearchParams()
-  const currentDirection = DIRECTION_OPTIONS.find(
-    (direction) => direction.value === params.direction
-  )
-
-  return (
-    <div className="group/picker relative">
-      <Picker>
-        <PickerTrigger>
-          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Direction</div>
-            <div className="text-foreground text-sm font-medium">
-              {currentDirection?.label}
-            </div>
-          </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
-            {currentDirection?.icon}
-          </div>
-        </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
-        >
-          <PickerRadioGroup
-            value={currentDirection?.value}
-            onValueChange={(value) => {
-              setParams({ direction: value as DirectionValue })
-            }}
-          >
-            <PickerGroup>
-              {DIRECTION_OPTIONS.map((direction) => (
-                <PickerRadioItem key={direction.value} value={direction.value}>
-                  {direction.icon}
-                  {direction.label}
-                </PickerRadioItem>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="direction"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
-      />
-    </div>
-  )
-}

apps/v4/app/(create)/components/font-picker.tsx

@@ -59,7 +59,7 @@ export function FontPicker({
           anchor={isMobile ? anchorRef : undefined}
           side={isMobile ? "top" : "right"}
           align={isMobile ? "center" : "start"}
-          className="max-h-80 md:w-72"
+          className="max-h-96 md:w-72"
         >
           <PickerRadioGroup
             value={currentFont?.value}

apps/v4/app/(create)/components/theme-picker.tsx

@@ -76,7 +76,7 @@ export function ThemePicker({
           anchor={isMobile ? anchorRef : undefined}
           side={isMobile ? "top" : "right"}
           align={isMobile ? "center" : "start"}
-          className="max-h-96"
+          className="max-h-[23rem]"
         >
           <PickerRadioGroup
             value={currentTheme?.name}

apps/v4/app/(create)/components/toolbar-controls.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import Link from "next/link"
 import {
   ComputerTerminal01Icon,
   Copy01Icon,
@@ -23,6 +24,8 @@ import {
 } from "@/registry/new-york-v4/ui/dialog"
 import {
   Field,
+  FieldContent,
+  FieldDescription,
   FieldGroup,
   FieldLabel,
   FieldTitle,
@@ -31,6 +34,7 @@ import {
   RadioGroup,
   RadioGroupItem,
 } from "@/registry/new-york-v4/ui/radio-group"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
 import {
   Tabs,
   TabsContent,
@@ -71,14 +75,15 @@ export function ToolbarControls() {
   const packageManager = config.packageManager || "pnpm"
 
   const commands = React.useMemo(() => {
-    const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"
-    const url = `${origin}/init?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&template=${params.template}`
+    const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:4000"
+    const url = `${origin}/init?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&template=${params.template}&rtl=${params.rtl}`
     const templateFlag = params.template ? ` --template ${params.template}` : ""
+    const rtlFlag = params.rtl ? " --rtl" : ""
     return {
-      pnpm: `pnpm dlx shadcn@latest create --preset "${url}"${templateFlag}`,
-      npm: `npx shadcn@latest create --preset "${url}"${templateFlag}`,
-      yarn: `yarn dlx shadcn@latest create --preset "${url}"${templateFlag}`,
-      bun: `bunx --bun shadcn@latest create --preset "${url}"${templateFlag}`,
+      pnpm: `pnpm dlx shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
+      npm: `npx shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
+      yarn: `yarn dlx shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
+      bun: `bunx --bun shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
     }
   }, [
     params.base,
@@ -91,6 +96,7 @@ export function ToolbarControls() {
     params.menuColor,
     params.radius,
     params.template,
+    params.rtl,
   ])
 
   const command = commands[packageManager]
@@ -164,7 +170,7 @@ export function ToolbarControls() {
             {selectedTemplate?.title} + shadcn/ui project.
           </DialogDescription>
         </DialogHeader>
-        <FieldGroup>
+        <FieldGroup className="gap-3">
           <Field>
             <FieldLabel htmlFor="template" className="sr-only">
               Template
@@ -183,7 +189,7 @@ export function ToolbarControls() {
                 <FieldLabel
                   key={template.value}
                   htmlFor={template.value}
-                  className="rounded-lg!"
+                  className="has-data-[state=checked]:border-primary/10 rounded-lg!"
                 >
                   <Field className="flex min-w-0 flex-col items-center justify-center gap-2 p-3! text-center *:w-auto!">
                     <RadioGroupItem
@@ -205,59 +211,81 @@ export function ToolbarControls() {
               ))}
             </RadioGroup>
           </Field>
-        </FieldGroup>
-        <Tabs
-          value={packageManager}
-          onValueChange={(value) => {
-            setConfig({
-              ...config,
-              packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
-            })
-          }}
-          className="bg-surface min-w-0 gap-0 overflow-hidden rounded-lg border"
-        >
-          <div className="flex items-center gap-2 p-2">
-            <TabsList className="*:data-[slot=tabs-trigger]:data-[state=active]:border-input h-auto rounded-none bg-transparent p-0 font-mono *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none!">
-              <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-              <TabsTrigger value="npm">npm</TabsTrigger>
-              <TabsTrigger value="yarn">yarn</TabsTrigger>
-              <TabsTrigger value="bun">bun</TabsTrigger>
-            </TabsList>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size="icon-sm"
-                  variant="ghost"
-                  className="ml-auto size-7 rounded-lg"
-                  onClick={handleCopyFromTabs}
-                >
-                  {hasCopied ? (
-                    <HugeiconsIcon icon={Tick02Icon} className="size-4" />
-                  ) : (
-                    <HugeiconsIcon icon={Copy01Icon} className="size-4" />
-                  )}
-                  <span className="sr-only">Copy command</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {hasCopied ? "Copied!" : "Copy command"}
-              </TooltipContent>
-            </Tooltip>
-          </div>
-          {Object.entries(commands).map(([key, cmd]) => {
-            return (
-              <TabsContent key={key} value={key}>
-                <div className="bg-surface border-border/50 text-surface-foreground relative overflow-hidden border-t px-3 py-3">
-                  <div className="no-scrollbar overflow-x-auto">
-                    <code className="font-mono text-sm whitespace-nowrap">
-                      {cmd}
-                    </code>
+          <FieldLabel className="has-data-[state=checked]:border-primary/10 rounded-lg!">
+            <Field orientation="horizontal">
+              <FieldContent className="gap-1">
+                <FieldTitle>Enable RTL</FieldTitle>
+                <FieldDescription>
+                  <a
+                    href={`/docs/rtl/${params.template}`}
+                    className="text-foreground underline"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    View the RTL setup guide for {selectedTemplate?.title}.
+                  </a>
+                </FieldDescription>
+              </FieldContent>
+              <Switch
+                checked={params.rtl}
+                onCheckedChange={(rtl) => setParams({ rtl })}
+                className="shadow-none"
+              />
+            </Field>
+          </FieldLabel>
+          <Tabs
+            value={packageManager}
+            onValueChange={(value) => {
+              setConfig({
+                ...config,
+                packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
+              })
+            }}
+            className="bg-surface min-w-0 gap-0 overflow-hidden rounded-lg border"
+          >
+            <div className="flex items-center gap-2 p-2">
+              <TabsList className="*:data-[slot=tabs-trigger]:data-[state=active]:border-input h-auto rounded-none bg-transparent p-0 font-mono group-data-[orientation=horizontal]/tabs:h-8 *:data-[slot=tabs-trigger]:h-7 *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none!">
+                <TabsTrigger value="pnpm">pnpm</TabsTrigger>
+                <TabsTrigger value="npm">npm</TabsTrigger>
+                <TabsTrigger value="yarn">yarn</TabsTrigger>
+                <TabsTrigger value="bun">bun</TabsTrigger>
+              </TabsList>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    className="ml-auto size-7 rounded-lg"
+                    onClick={handleCopyFromTabs}
+                  >
+                    {hasCopied ? (
+                      <HugeiconsIcon icon={Tick02Icon} className="size-4" />
+                    ) : (
+                      <HugeiconsIcon icon={Copy01Icon} className="size-4" />
+                    )}
+                    <span className="sr-only">Copy command</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {hasCopied ? "Copied!" : "Copy command"}
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            {Object.entries(commands).map(([key, cmd]) => {
+              return (
+                <TabsContent key={key} value={key}>
+                  <div className="bg-surface border-border/50 text-surface-foreground relative overflow-hidden border-t px-3 py-3">
+                    <div className="no-scrollbar overflow-x-auto">
+                      <code className="font-mono text-sm whitespace-nowrap">
+                        {cmd}
+                      </code>
+                    </div>
                   </div>
-                </div>
-              </TabsContent>
-            )
-          })}
-        </Tabs>
+                </TabsContent>
+              )
+            })}
+          </Tabs>
+        </FieldGroup>
         <DialogFooter className="bg-muted/50 -mx-6 mt-2 -mb-6 flex flex-col gap-2 border-t p-6 sm:flex-col">
           <Button
             size="sm"

apps/v4/app/(create)/hooks/use-locks.tsx

@@ -11,7 +11,6 @@ export type LockableParam =
   | "menuAccent"
   | "menuColor"
   | "radius"
-  | "direction"
 
 type LocksContextValue = {
   locks: Set<LockableParam>

apps/v4/app/(create)/init/route.ts

@@ -19,6 +19,7 @@ export async function GET(request: NextRequest) {
       menuColor: searchParams.get("menuColor"),
       radius: searchParams.get("radius"),
       template: searchParams.get("template"),
+      rtl: searchParams.get("rtl") === "true",
     })
 
     if (!result.success) {

apps/v4/app/(create)/lib/fonts.ts

@@ -38,15 +38,15 @@ const jetbrainsMono = JetBrains_Mono({
   variable: "--font-jetbrains-mono",
 })
 
-// const geistSans = Geist({
-//   subsets: ["latin"],
-//   variable: "--font-geist-sans",
-// })
+const geistSans = Geist({
+  subsets: ["latin"],
+  variable: "--font-geist-sans",
+})
 
-// const geistMono = Geist_Mono({
-//   subsets: ["latin"],
-//   variable: "--font-geist-mono",
-// })
+const geistMono = Geist_Mono({
+  subsets: ["latin"],
+  variable: "--font-geist-mono",
+})
 
 const roboto = Roboto({
   subsets: ["latin"],
@@ -74,12 +74,12 @@ const outfit = Outfit({
 })
 
 export const FONTS = [
-  // {
-  //   name: "Geist Sans",
-  //   value: "geist",
-  //   font: geistSans,
-  //   type: "sans",
-  // },
+  {
+    name: "Geist",
+    value: "geist",
+    font: geistSans,
+    type: "sans",
+  },
   {
     name: "Inter",
     value: "inter",
@@ -134,18 +134,18 @@ export const FONTS = [
     font: outfit,
     type: "sans",
   },
+  {
+    name: "Geist Mono",
+    value: "geist-mono",
+    font: geistMono,
+    type: "mono",
+  },
   {
     name: "JetBrains Mono",
     value: "jetbrains-mono",
     font: jetbrainsMono,
     type: "mono",
   },
-  // {
-  //   name: "Geist Mono",
-  //   value: "geist-mono",
-  //   font: geistMono,
-  //   type: "mono",
-  // },
 ] as const
 
 export type Font = (typeof FONTS)[number]

apps/v4/app/(create)/lib/search-params.ts

@@ -14,7 +14,6 @@ import {
   BASE_COLORS,
   BASES,
   DEFAULT_CONFIG,
-  DIRECTIONS,
   iconLibraries,
   MENU_ACCENTS,
   MENU_COLORS,
@@ -23,7 +22,6 @@ import {
   THEMES,
   type BaseColorName,
   type BaseName,
-  type DirectionValue,
   type FontValue,
   type IconLibraryName,
   type MenuAccentValue,
@@ -54,9 +52,6 @@ const designSystemSearchParams = {
   baseColor: parseAsStringLiteral<BaseColorName>(
     BASE_COLORS.map((b) => b.name)
   ).withDefault(DEFAULT_CONFIG.baseColor),
-  direction: parseAsStringLiteral<DirectionValue>(
-    DIRECTIONS.map((d) => d.value)
-  ).withDefault(DEFAULT_CONFIG.direction),
   menuAccent: parseAsStringLiteral<MenuAccentValue>(
     MENU_ACCENTS.map((a) => a.value)
   ).withDefault(DEFAULT_CONFIG.menuAccent),
@@ -71,6 +66,7 @@ const designSystemSearchParams = {
     "start",
     "vite",
   ] as const).withDefault("next"),
+  rtl: parseAsBoolean.withDefault(false),
   size: parseAsInteger.withDefault(100),
   custom: parseAsBoolean.withDefault(false),
 }

apps/v4/components/announcement.tsx

@@ -20,10 +20,9 @@ function BaseUILogo() {
 
 export function Announcement() {
   return (
-    <Badge asChild variant="secondary" className="bg-transparent">
-      <Link href="/docs/changelog">
-        <BaseUILogo />
-        Base UI Documentation <ArrowRightIcon />
+    <Badge asChild variant="secondary" className="bg-muted">
+      <Link href="/docs/changelog/2026-01-rtl">
+        RTL Support <ArrowRightIcon />
       </Link>
     </Badge>
   )

apps/v4/components/callout.tsx

@@ -20,7 +20,7 @@ export function Callout({
     <Alert
       data-variant={variant}
       className={cn(
-        "bg-background text-foreground mt-6 w-auto border md:-mx-1",
+        "bg-surface text-surface-foreground border-surface mt-6 w-auto rounded-lg md:-mx-1 **:[code]:border",
         className
       )}
       {...props}

apps/v4/components/code-block-command.tsx

@@ -88,7 +88,7 @@ export function CodeBlockCommand({
                 <TabsTrigger
                   key={key}
                   value={key}
-                  className="data-[state=active]:bg-accent data-[state=active]:border-input h-7 border border-transparent pt-0.5 data-[state=active]:shadow-none"
+                  className="data-[state=active]:bg-background! data-[state=active]:border-input h-7 border border-transparent pt-0.5 shadow-none!"
                 >
                   {key}
                 </TabsTrigger>

apps/v4/components/command-menu.tsx

@@ -2,11 +2,11 @@
 
 import * as React from "react"
 import { usePathname, useRouter } from "next/navigation"
-import { type DialogProps } from "@radix-ui/react-dialog"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { type DialogProps } from "@radix-ui/react-dialog"
 import { IconArrowRight } from "@tabler/icons-react"
 import { useDocsSearch } from "fumadocs-core/search/client"
-import { CornerDownLeftIcon, SquareDashedIcon, XIcon } from "lucide-react"
+import { CornerDownLeftIcon, SquareDashedIcon } from "lucide-react"
 
 import { type Color, type ColorPalette } from "@/lib/colors"
 import { trackEvent } from "@/lib/events"
@@ -35,7 +35,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/registry/new-york-v4/ui/dialog"
-import { Kbd } from "@/registry/new-york-v4/ui/kbd"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
 import { Spinner } from "@/registry/new-york-v4/ui/spinner"
 
@@ -56,6 +55,7 @@ export function CommandMenu({
   const [config] = useConfig()
   const currentBase = getCurrentBase(pathname)
   const [open, setOpen] = React.useState(false)
+  const [renderDelayedGroups, setRenderDelayedGroups] = React.useState(false)
   const [selectedType, setSelectedType] = React.useState<
     "color" | "page" | "component" | "block" | null
   >(null)
@@ -95,14 +95,30 @@ export function CommandMenu({
 
       // Set new timeout to debounce both search and tracking.
       searchTimeoutRef.current = setTimeout(() => {
-        setSearch(value)
-        trackSearchQuery(value)
+        React.startTransition(() => {
+          setSearch(value)
+          trackSearchQuery(value)
+        })
       }, 500)
     },
     [setSearch, trackSearchQuery]
   )
 
   // Cleanup timeout on unmount.
+  React.useEffect(() => {
+    if (open) {
+      const frame = requestAnimationFrame(() => {
+        setRenderDelayedGroups(true)
+      })
+
+      return () => {
+        cancelAnimationFrame(frame)
+      }
+    }
+
+    setRenderDelayedGroups(false)
+  }, [open])
+
   React.useEffect(() => {
     return () => {
       if (searchTimeoutRef.current) {
@@ -111,6 +127,17 @@ export function CommandMenu({
     }
   }, [])
 
+  const commandFilter = React.useCallback(
+    (value: string, searchValue: string, keywords?: string[]) => {
+      const extendValue = value + " " + (keywords?.join(" ") || "")
+      if (extendValue.toLowerCase().includes(searchValue.toLowerCase())) {
+        return 1
+      }
+      return 0
+    },
+    []
+  )
+
   const handlePageHighlight = React.useCallback(
     (isComponent: boolean, item: { url: string; name?: React.ReactNode }) => {
       if (isComponent) {
@@ -151,6 +178,168 @@ export function CommandMenu({
     [setOpen]
   )
 
+  const navItemsSection = React.useMemo(() => {
+    if (!navItems || navItems.length === 0) {
+      return null
+    }
+
+    return (
+      <CommandGroup
+        heading="Pages"
+        className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
+      >
+        {navItems.map((item) => (
+          <CommandMenuItem
+            key={item.href}
+            value={`Navigation ${item.label}`}
+            keywords={["nav", "navigation", item.label.toLowerCase()]}
+            onHighlight={() => {
+              setSelectedType("page")
+              setCopyPayload("")
+            }}
+            onSelect={() => {
+              runCommand(() => router.push(item.href))
+            }}
+          >
+            <IconArrowRight />
+            {item.label}
+          </CommandMenuItem>
+        ))}
+      </CommandGroup>
+    )
+  }, [navItems, runCommand, router])
+
+  const pageGroupsSection = React.useMemo(() => {
+    return tree.children.map((group) => {
+      if (group.type !== "folder") {
+        return null
+      }
+
+      const pages = getPagesFromFolder(group, currentBase).filter((item) => {
+        if (!showMcpDocs && item.url.includes("/mcp")) {
+          return false
+        }
+
+        return true
+      })
+
+      if (pages.length === 0) {
+        return null
+      }
+
+      return (
+        <CommandGroup
+          key={group.$id}
+          heading={group.name}
+          className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
+        >
+          {pages.map((item) => {
+            const isComponent = item.url.includes("/components/")
+
+            return (
+              <CommandMenuItem
+                key={item.url}
+                value={
+                  item.name?.toString() ? `${group.name} ${item.name}` : ""
+                }
+                keywords={isComponent ? ["component"] : undefined}
+                onHighlight={() => handlePageHighlight(isComponent, item)}
+                onSelect={() => {
+                  runCommand(() => router.push(item.url))
+                }}
+              >
+                {isComponent ? (
+                  <div className="border-muted-foreground aspect-square size-4 rounded-full border border-dashed" />
+                ) : (
+                  <IconArrowRight />
+                )}
+                {item.name}
+              </CommandMenuItem>
+            )
+          })}
+        </CommandGroup>
+      )
+    })
+  }, [tree.children, currentBase, handlePageHighlight, runCommand, router])
+
+  const colorGroupsSection = React.useMemo(() => {
+    return colors.map((colorPalette) => (
+      <CommandGroup
+        key={colorPalette.name}
+        heading={
+          colorPalette.name.charAt(0).toUpperCase() + colorPalette.name.slice(1)
+        }
+        className="!p-0 [&_[cmdk-group-heading]]:!p-3"
+      >
+        {colorPalette.colors.map((color) => (
+          <CommandMenuItem
+            key={color.hex}
+            value={color.className}
+            keywords={["color", color.name, color.className]}
+            onHighlight={() => handleColorHighlight(color)}
+            onSelect={() => {
+              runCommand(() =>
+                copyToClipboardWithMeta(color.oklch, {
+                  name: "copy_color",
+                  properties: { color: color.oklch },
+                })
+              )
+            }}
+          >
+            <div
+              className="border-ghost aspect-square size-4 rounded-sm bg-(--color) after:rounded-sm"
+              style={{ "--color": color.oklch } as React.CSSProperties}
+            />
+            {color.className}
+            <span className="text-muted-foreground ml-auto font-mono text-xs font-normal tabular-nums">
+              {color.oklch}
+            </span>
+          </CommandMenuItem>
+        ))}
+      </CommandGroup>
+    ))
+  }, [colors, handleColorHighlight, runCommand])
+
+  const blocksSection = React.useMemo(() => {
+    if (!blocks || blocks.length === 0) {
+      return null
+    }
+
+    return (
+      <CommandGroup
+        heading="Blocks"
+        className="!p-0 [&_[cmdk-group-heading]]:!p-3"
+      >
+        {blocks.map((block) => (
+          <CommandMenuItem
+            key={block.name}
+            value={block.name}
+            onHighlight={() => {
+              handleBlockHighlight(block)
+            }}
+            keywords={[
+              "block",
+              block.name,
+              block.description,
+              ...block.categories,
+            ]}
+            onSelect={() => {
+              runCommand(() =>
+                router.push(`/blocks/${block.categories[0]}#${block.name}`)
+              )
+            }}
+          >
+            <SquareDashedIcon />
+            {block.description}
+            <span className="text-muted-foreground ml-auto font-mono text-xs font-normal tabular-nums">
+              {block.name}
+            </span>
+          </CommandMenuItem>
+        ))}
+      </CommandGroup>
+    )
+  }, [blocks, handleBlockHighlight, runCommand, router])
+
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
@@ -203,16 +392,13 @@ export function CommandMenu({
         <Button
           variant="outline"
           className={cn(
-            "text-foreground dark:bg-card hover:bg-muted/50 relative h-8 w-full justify-start pl-3 font-normal shadow-none sm:pr-12 md:w-48 lg:w-56 xl:w-64"
+            "text-foreground dark:bg-card hover:bg-muted/50 relative h-8 w-full justify-start rounded-lg pl-3 font-normal shadow-none sm:pr-12 md:w-48 lg:w-56 xl:w-64"
           )}
           onClick={() => setOpen(true)}
           {...props}
         >
           <span className="hidden lg:inline-flex">Search documentation...</span>
           <span className="inline-flex lg:hidden">Search...</span>
-          <div className="absolute top-1.5 right-1.5 hidden gap-1 group-has-[[data-slot=designer]]/body:hidden sm:flex">
-            <Kbd>⌘K</Kbd>
-          </div>
         </Button>
       </DialogTrigger>
       <DialogContent className="rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800">
@@ -222,17 +408,13 @@ export function CommandMenu({
         </DialogHeader>
         <Command
           className="**:data-[slot=command-input-wrapper]:bg-input/50 **:data-[slot=command-input-wrapper]:border-input rounded-none bg-transparent **:data-[slot=command-input]:!h-9 **:data-[slot=command-input]:py-0 **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:!h-9 **:data-[slot=command-input-wrapper]:rounded-md **:data-[slot=command-input-wrapper]:border"
-          filter={(value, search, keywords) => {
-            handleSearchChange(search)
-            const extendValue = value + " " + (keywords?.join(" ") || "")
-            if (extendValue.toLowerCase().includes(search.toLowerCase())) {
-              return 1
-            }
-            return 0
-          }}
+          filter={commandFilter}
         >
           <div className="relative">
-            <CommandInput placeholder="Search documentation..." />
+            <CommandInput
+              placeholder="Search documentation..."
+              onValueChange={handleSearchChange}
+            />
             {query.isLoading && (
               <div className="pointer-events-none absolute top-1/2 right-3 z-10 flex -translate-y-1/2 items-center justify-center">
                 <Spinner className="text-muted-foreground size-4" />
@@ -243,148 +425,19 @@ export function CommandMenu({
             <CommandEmpty className="text-muted-foreground py-12 text-center text-sm">
               {query.isLoading ? "Searching..." : "No results found."}
             </CommandEmpty>
-            {navItems && navItems.length > 0 && (
-              <CommandGroup
-                heading="Pages"
-                className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
-              >
-                {navItems.map((item) => (
-                  <CommandMenuItem
-                    key={item.href}
-                    value={`Navigation ${item.label}`}
-                    keywords={["nav", "navigation", item.label.toLowerCase()]}
-                    onHighlight={() => {
-                      setSelectedType("page")
-                      setCopyPayload("")
-                    }}
-                    onSelect={() => {
-                      runCommand(() => router.push(item.href))
-                    }}
-                  >
-                    <IconArrowRight />
-                    {item.label}
-                  </CommandMenuItem>
-                ))}
-              </CommandGroup>
-            )}
-            {tree.children.map((group) => (
-              <CommandGroup
-                key={group.$id}
-                heading={group.name}
-                className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
-              >
-                {group.type === "folder" &&
-                  getPagesFromFolder(group, currentBase).map((item) => {
-                    const isComponent = item.url.includes("/components/")
-
-                    if (!showMcpDocs && item.url.includes("/mcp")) {
-                      return null
-                    }
-
-                    return (
-                      <CommandMenuItem
-                        key={item.url}
-                        value={
-                          item.name?.toString()
-                            ? `${group.name} ${item.name}`
-                            : ""
-                        }
-                        keywords={isComponent ? ["component"] : undefined}
-                        onHighlight={() =>
-                          handlePageHighlight(isComponent, item)
-                        }
-                        onSelect={() => {
-                          runCommand(() => router.push(item.url))
-                        }}
-                      >
-                        {isComponent ? (
-                          <div className="border-muted-foreground aspect-square size-4 rounded-full border border-dashed" />
-                        ) : (
-                          <IconArrowRight />
-                        )}
-                        {item.name}
-                      </CommandMenuItem>
-                    )
-                  })}
-              </CommandGroup>
-            ))}
-            {colors.map((colorPalette) => (
-              <CommandGroup
-                key={colorPalette.name}
-                heading={
-                  colorPalette.name.charAt(0).toUpperCase() +
-                  colorPalette.name.slice(1)
-                }
-                className="!p-0 [&_[cmdk-group-heading]]:!p-3"
-              >
-                {colorPalette.colors.map((color) => (
-                  <CommandMenuItem
-                    key={color.hex}
-                    value={color.className}
-                    keywords={["color", color.name, color.className]}
-                    onHighlight={() => handleColorHighlight(color)}
-                    onSelect={() => {
-                      runCommand(() =>
-                        copyToClipboardWithMeta(color.oklch, {
-                          name: "copy_color",
-                          properties: { color: color.oklch },
-                        })
-                      )
-                    }}
-                  >
-                    <div
-                      className="border-ghost aspect-square size-4 rounded-sm bg-(--color) after:rounded-sm"
-                      style={{ "--color": color.oklch } as React.CSSProperties}
-                    />
-                    {color.className}
-                    <span className="text-muted-foreground ml-auto font-mono text-xs font-normal tabular-nums">
-                      {color.oklch}
-                    </span>
-                  </CommandMenuItem>
-                ))}
-              </CommandGroup>
-            ))}
-            {blocks?.length ? (
-              <CommandGroup
-                heading="Blocks"
-                className="!p-0 [&_[cmdk-group-heading]]:!p-3"
-              >
-                {blocks.map((block) => (
-                  <CommandMenuItem
-                    key={block.name}
-                    value={block.name}
-                    onHighlight={() => {
-                      handleBlockHighlight(block)
-                    }}
-                    keywords={[
-                      "block",
-                      block.name,
-                      block.description,
-                      ...block.categories,
-                    ]}
-                    onSelect={() => {
-                      runCommand(() =>
-                        router.push(
-                          `/blocks/${block.categories[0]}#${block.name}`
-                        )
-                      )
-                    }}
-                  >
-                    <SquareDashedIcon />
-                    {block.description}
-                    <span className="text-muted-foreground ml-auto font-mono text-xs font-normal tabular-nums">
-                      {block.name}
-                    </span>
-                  </CommandMenuItem>
-                ))}
-              </CommandGroup>
+            {navItemsSection}
+            {renderDelayedGroups ? (
+              <>
+                {pageGroupsSection}
+                {colorGroupsSection}
+                {blocksSection}
+                <SearchResults
+                  setOpen={setOpen}
+                  query={query}
+                  search={search}
+                />
+              </>
             ) : null}
-            <SearchResults
-              open={open}
-              setOpen={setOpen}
-              query={query}
-              search={search}
-            />
           </CommandList>
         </Command>
         <div className="text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800">
@@ -470,23 +523,24 @@ function SearchResults({
   query,
   search,
 }: {
-  open: boolean
   setOpen: (open: boolean) => void
   query: Query
   search: string
 }) {
   const router = useRouter()
 
-  const uniqueResults =
-    query.data && Array.isArray(query.data)
-      ? query.data.filter(
-          (item, index, self) =>
-            !(
-              item.type === "text" &&
-              item.content.trim().split(/\s+/).length <= 1
-            ) && index === self.findIndex((t) => t.content === item.content)
-        )
-      : []
+  const uniqueResults = React.useMemo(() => {
+    if (!query.data || !Array.isArray(query.data)) {
+      return []
+    }
+
+    return query.data.filter(
+      (item, index, self) =>
+        !(
+          item.type === "text" && item.content.trim().split(/\s+/).length <= 1
+        ) && index === self.findIndex((t) => t.content === item.content)
+    )
+  }, [query.data])
 
   if (!search.trim()) {
     return null
@@ -535,11 +589,11 @@ function DialogContent({
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
+      {/* <DialogOverlay /> */}
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "bg-background fixed top-1/3 left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className
         )}
         {...props}

apps/v4/components/component-preview-tabs.tsx

@@ -1,6 +1,13 @@
 "use client"
 
 import * as React from "react"
+import Link from "next/link"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/examples/base/ui/popover"
+import { IconAlertCircle } from "@tabler/icons-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -13,6 +20,7 @@ import {
 import { DirectionProvider as BaseDirectionProvider } from "@/registry/bases/base/ui/direction"
 import { DirectionProvider as RadixDirectionProvider } from "@/registry/bases/radix/ui/direction"
 import { Button } from "@/registry/new-york-v4/ui/button"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
 
 export function ComponentPreviewTabs({
   className,
@@ -44,14 +52,50 @@ export function ComponentPreviewTabs({
     <div
       data-slot="component-preview"
       className={cn(
-        "group relative mt-4 mb-12 flex flex-col gap-2 overflow-hidden rounded-xl border",
+        "group relative mt-4 mb-12 flex flex-col overflow-hidden rounded-xl border",
         className
       )}
       {...props}
     >
       {direction === "rtl" ? (
         <LanguageProvider defaultLanguage="ar">
-          <RtlLanguageSelector />
+          <div className="flex h-16 items-center border-b px-4">
+            <RtlLanguageSelector />
+            <Popover>
+              <PopoverTrigger
+                render={
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    className="ml-auto size-7"
+                  >
+                    <IconAlertCircle />
+                    <span className="sr-only">Toggle</span>
+                  </Button>
+                }
+              ></PopoverTrigger>
+              <PopoverContent
+                side="bottom"
+                align="end"
+                className="w-56 text-xs"
+              >
+                <div>
+                  I used AI to translate the text for demonstration purposes.
+                  It&apos;s not perfect and may contain errors.
+                </div>
+                <Separator className="-mx-2.5 w-auto!" />
+                <div data-lang="ar">
+                  لقد استخدمت الذكاء الاصطناعي لترجمة النص للأغراض التجريبية
+                  فقط. قد لا تكون الترجمة دقيقة وقد تحتوي على أخطاء.
+                </div>
+                <Separator className="-mx-2.5 w-auto!" />
+                <div data-lang="he">
+                  השתמשתי בבינה מלאכותית כדי לתרגם את הטקסט למטרות הדגמה. זה לא
+                  מושלם ויכול להכיל שגיאות.
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
           <PreviewWrapper
             align={align}
             chromeLessOnMobile={chromeLessOnMobile}
@@ -78,10 +122,29 @@ export function ComponentPreviewTabs({
         <div
           data-slot="code"
           data-mobile-code-visible={isMobileCodeVisible}
-          className="relative overflow-hidden [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
+          className="relative overflow-hidden **:data-[slot=copy-button]:right-4 **:data-[slot=copy-button]:hidden data-[mobile-code-visible=true]:**:data-[slot=copy-button]:flex [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
         >
           {isMobileCodeVisible ? (
-            source
+            <>
+              {direction === "rtl" && (
+                <div className="bg-code text-muted-foreground no-scrollbar relative z-10 overflow-x-auto border-t p-6 font-mono text-sm">
+                  <pre>{`// You will notice this example uses dir and data-lang attributes.
+// This is because this site is not RTL by default.
+// In your application, you won't need these.`}</pre>
+                  <span>
+                    {"// See the "}
+                    <Link
+                      href="/docs/rtl"
+                      className="underline underline-offset-4"
+                    >
+                      RTL guide
+                    </Link>
+                    {" for more information."}
+                  </span>
+                </div>
+              )}
+              {source}
+            </>
           ) : (
             <div className="relative">
               {sourcePreview}
@@ -97,7 +160,7 @@ export function ComponentPreviewTabs({
                   type="button"
                   size="sm"
                   variant="outline"
-                  className="bg-background text-foreground dark:bg-background dark:text-foreground hover:bg-muted dark:hover:bg-muted relative z-10"
+                  className="bg-background text-foreground dark:bg-background dark:text-foreground hover:bg-muted dark:hover:bg-muted relative z-10 rounded-lg shadow-none"
                   onClick={() => {
                     setIsMobileCodeVisible(true)
                   }}
@@ -128,10 +191,8 @@ const directionTranslations: Translations<Record<string, never>> = {
   },
 }
 
-function RtlLanguageSelector() {
+function RtlLanguageSelector({ className }: { className?: string }) {
   const context = useLanguageContext()
-  // This component is always rendered inside LanguageProvider when direction === "rtl".
-  // so context should always be available.
   if (!context) {
     return null
   }
@@ -139,6 +200,7 @@ function RtlLanguageSelector() {
     <LanguageSelector
       value={context.language}
       onValueChange={context.setLanguage}
+      className={className}
     />
   )
 }
@@ -162,7 +224,11 @@ function PreviewWrapper({
   const dir = explicitDir ?? translation.dir
 
   return (
-    <div data-slot="preview" dir={dir}>
+    <div
+      data-slot="preview"
+      dir={dir}
+      data-lang={dir === "rtl" ? translation.language : undefined}
+    >
       <div
         data-align={align}
         data-chromeless={chromeLessOnMobile}

apps/v4/components/component-preview.tsx

@@ -29,16 +29,9 @@ export function ComponentPreview({
   direction?: "ltr" | "rtl"
   caption?: string
 }) {
-  const translationDisclaimer =
-    direction === "rtl"
-      ? "Automatic translation may contain errors."
-      : undefined
-  const finalCaption =
-    [caption, translationDisclaimer].filter(Boolean).join(" ") || undefined
-
   if (type === "block") {
     const content = (
-      <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-xl border md:-mx-1">
+      <div className="relative mt-6 aspect-[4/2.5] w-full overflow-hidden rounded-xl border md:-mx-1">
         <Image
           src={`/r/styles/new-york-v4/${name}-light.png`}
           alt={name}
@@ -59,12 +52,12 @@ export function ComponentPreview({
       </div>
     )
 
-    if (finalCaption) {
+    if (caption) {
       return (
         <figure className="flex flex-col gap-4">
           {content}
           <figcaption className="text-muted-foreground text-center text-sm">
-            {finalCaption}
+            {caption}
           </figcaption>
         </figure>
       )
@@ -93,7 +86,7 @@ export function ComponentPreview({
       previewClassName={previewClassName}
       align={align}
       hideCode={hideCode}
-      component={<DynamicComponent name={name} styleName={styleName} />}
+      component={React.createElement(Component)}
       source={
         <ComponentSource
           name={name}
@@ -116,7 +109,7 @@ export function ComponentPreview({
     />
   )
 
-  if (finalCaption) {
+  if (caption) {
     return (
       <figure
         data-hide-code={hideCode}
@@ -124,7 +117,7 @@ export function ComponentPreview({
       >
         {content}
         <figcaption className="text-muted-foreground -mt-8 text-center text-sm data-[hide-code=true]:mt-0">
-          {finalCaption}
+          {caption}
         </figcaption>
       </figure>
     )
@@ -132,22 +125,3 @@ export function ComponentPreview({
 
   return content
 }
-
-function DynamicComponent({
-  name,
-  styleName,
-}: {
-  name: string
-  styleName: string
-}) {
-  const Component = React.useMemo(
-    () => getRegistryComponent(name, styleName),
-    [name, styleName]
-  )
-
-  if (!Component) {
-    return null
-  }
-
-  return React.createElement(Component)
-}

apps/v4/components/components-list.tsx

@@ -13,7 +13,7 @@ export function ComponentsList({
   const list = getPagesFromFolder(componentsFolder, currentBase)
 
   return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 md:gap-x-8 lg:gap-x-16 lg:gap-y-6 xl:gap-x-20">
+    <div className="grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-x-8 lg:gap-x-16 lg:gap-y-6 xl:gap-x-20">
       {list.map((component) => (
         <Link
           key={component.$id}

apps/v4/components/docs-sidebar.tsx

@@ -53,8 +53,8 @@ const TOP_LEVEL_SECTIONS = [
     href: "/docs/changelog",
   },
 ]
-const EXCLUDED_SECTIONS = ["installation", "dark-mode", "changelog"]
-const EXCLUDED_PAGES = ["/docs", "/docs/changelog"]
+const EXCLUDED_SECTIONS = ["installation", "dark-mode", "changelog", "rtl"]
+const EXCLUDED_PAGES = ["/docs", "/docs/changelog", "/docs/rtl"]
 
 export function DocsSidebar({
   tree,
@@ -65,13 +65,15 @@ export function DocsSidebar({
 
   return (
     <Sidebar
-      className="sticky top-[calc(var(--header-height)+1px)] z-30 hidden h-[calc(100svh-6rem)] overscroll-none bg-transparent lg:flex"
+      className="sticky top-[calc(var(--header-height)+0.6rem)] z-30 hidden h-[calc(100svh-10rem)] overscroll-none bg-transparent [--sidebar-menu-width:--spacing(56)] lg:flex"
       collapsible="none"
       {...props}
     >
-      <SidebarContent className="no-scrollbar overflow-x-hidden px-2">
-        <div className="from-background via-background/80 to-background/50 sticky -top-1 z-10 h-8 shrink-0 bg-gradient-to-b blur-xs" />
-        <SidebarGroup>
+      <div className="h-9" />
+      <div className="from-background via-background/80 to-background/50 absolute top-8 z-10 h-8 w-(--sidebar-menu-width) shrink-0 bg-gradient-to-b blur-xs" />
+      <div className="via-border absolute top-12 right-2 bottom-0 hidden h-full w-px bg-gradient-to-b from-transparent to-transparent lg:flex" />
+      <SidebarContent className="no-scrollbar mx-auto w-(--sidebar-menu-width) overflow-x-hidden px-2">
+        <SidebarGroup className="pt-6">
           <SidebarGroupLabel className="text-muted-foreground font-medium">
             Sections
           </SidebarGroupLabel>
@@ -93,7 +95,7 @@ export function DocsSidebar({
                       className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
                     >
                       <Link href={href}>
-                        <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
+                        <span className="absolute inset-0 flex w-(--sidebar-menu-width) bg-transparent" />
                         {name}
                         {PAGES_NEW.includes(href) && (
                           <span
@@ -139,7 +141,7 @@ export function DocsSidebar({
                             className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
                           >
                             <Link href={page.url}>
-                              <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
+                              <span className="absolute inset-0 flex w-(--sidebar-menu-width) bg-transparent" />
                               {page.name}
                               {PAGES_NEW.includes(page.url) && (
                                 <span

apps/v4/components/docs-toc.tsx

@@ -114,7 +114,7 @@ export function DocsTableOfContents({
         <a
           key={item.url}
           href={item.url}
-          className="text-muted-foreground hover:text-foreground data-[active=true]:text-foreground text-[0.8rem] no-underline transition-colors data-[depth=3]:pl-4 data-[depth=4]:pl-6"
+          className="text-muted-foreground hover:text-foreground data-[active=true]:text-foreground text-[0.8rem] no-underline transition-colors data-[active=true]:font-medium data-[depth=3]:pl-4 data-[depth=4]:pl-6"
           data-active={item.url === `#${activeHeading}`}
           data-depth={item.depth}
         >

apps/v4/components/examples-nav.tsx

@@ -31,6 +31,12 @@ const examples = [
     code: "https://github.com/shadcn/ui/tree/main/apps/v4/app/(app)/examples/authentication",
     hidden: false,
   },
+  {
+    name: "RTL",
+    href: "/examples/rtl",
+    code: "https://github.com/shadcn/ui/tree/main/apps/v4/app/(app)/examples/rtl",
+    hidden: false,
+  },
 ]
 
 export function ExamplesNav({
@@ -76,10 +82,13 @@ function ExampleLink({
     <Link
       href={example.href}
       key={example.href}
-      className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 items-center justify-center px-4 text-center text-base font-medium transition-colors"
+      className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 items-center justify-center gap-2 px-4 text-center text-base font-medium transition-colors"
       data-active={isActive}
     >
       {example.name}
+      {example.name === "RTL" && (
+        <span className="flex size-2 rounded-full bg-blue-500" title="New" />
+      )}
     </Link>
   )
 }

apps/v4/components/language-selector.tsx

@@ -22,6 +22,7 @@ export type Translations<
   Language,
   {
     dir: Direction
+    locale?: string
     values: T
   }
 >
@@ -73,8 +74,8 @@ export function useTranslation<T extends Record<string, string>>(
   const language = context?.language ?? localLanguage
   const setLanguage = context?.setLanguage ?? setLocalLanguage
 
-  const { dir, values: t } = translations[language]
-  return { language, setLanguage, dir, t }
+  const { dir, locale, values: t } = translations[language]
+  return { language, setLanguage, dir, locale, t }
 }
 
 export interface LanguageSelectorProps {
@@ -86,8 +87,10 @@ export function LanguageSelector({
   value,
   onValueChange,
   className,
+  languages = ["en", "ar", "he"],
 }: LanguageSelectorProps & {
   className?: string
+  languages?: Language[]
 }) {
   return (
     <Select
@@ -97,8 +100,9 @@ export function LanguageSelector({
     >
       <SelectTrigger
         size="sm"
-        className={cn("absolute top-4 right-4 z-50 w-36", className)}
+        className={cn("w-36", className)}
         dir="ltr"
+        data-name="language-selector"
       >
         <SelectValue />
       </SelectTrigger>
@@ -107,11 +111,13 @@ export function LanguageSelector({
         className="data-closed:animate-none data-open:animate-none"
       >
         <SelectGroup>
-          {languageOptions.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
+          {languageOptions
+            .filter((option) => languages.includes(option.value as Language))
+            .map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
         </SelectGroup>
       </SelectContent>
     </Select>

apps/v4/components/mobile-nav.tsx

@@ -98,7 +98,7 @@ export function MobileNav({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="bg-background/90 no-scrollbar h-(--radix-popper-available-height) w-(--radix-popper-available-width) overflow-y-auto rounded-none border-none p-0 shadow-none backdrop-blur duration-100"
+        className="bg-background/90 no-scrollbar h-(--radix-popper-available-height) w-(--radix-popper-available-width) overflow-y-auto rounded-none border-none p-0 shadow-none backdrop-blur duration-100 data-open:animate-none!"
         align="start"
         side="bottom"
         alignOffset={-16}
@@ -132,6 +132,12 @@ export function MobileNav({
                 return (
                   <MobileLink key={name} href={href} onOpenChange={setOpen}>
                     {name}
+                    {PAGES_NEW.includes(href) && (
+                      <span
+                        className="flex size-2 rounded-full bg-blue-500"
+                        title="New"
+                      />
+                    )}
                   </MobileLink>
                 )
               })}
@@ -196,7 +202,7 @@ function MobileLink({
         router.push(href.toString())
         onOpenChange?.(false)
       }}
-      className={cn("text-2xl font-medium", className)}
+      className={cn("flex items-center gap-2 text-2xl font-medium", className)}
       {...props}
     >
       {children}

apps/v4/components/page-header.tsx

@@ -8,7 +8,7 @@ function PageHeader({
   return (
     <section className={cn("border-grid", className)} {...props}>
       <div className="container-wrapper">
-        <div className="container flex flex-col items-center gap-2 py-8 text-center md:py-16 lg:py-20 xl:gap-4">
+        <div className="container flex flex-col items-center gap-2 px-6 py-8 text-center md:py-16 lg:py-20 xl:gap-4">
           {children}
         </div>
       </div>
@@ -23,7 +23,7 @@ function PageHeaderHeading({
   return (
     <h1
       className={cn(
-        "text-primary leading-tighter max-w-2xl text-4xl font-semibold tracking-tight text-balance lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter",
+        "text-primary leading-tighter max-w-3xl text-3xl font-semibold tracking-tight text-balance lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter",
         className
       )}
       {...props}
@@ -38,7 +38,7 @@ function PageHeaderDescription({
   return (
     <p
       className={cn(
-        "text-foreground max-w-3xl text-base text-balance sm:text-lg",
+        "text-foreground max-w-4xl text-base text-balance sm:text-lg",
         className
       )}
       {...props}

apps/v4/components/theme-selector.tsx

@@ -1,16 +1,19 @@
 "use client"
 
+import { Label } from "@/examples/base/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
 import { THEMES } from "@/lib/themes"
 import { cn } from "@/lib/utils"
 import { useThemeConfig } from "@/components/active-theme"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
 
 import { CopyCodeButton } from "./theme-customizer"
 
@@ -19,33 +22,44 @@ export function ThemeSelector({ className }: React.ComponentProps<"div">) {
 
   const value = activeTheme === "default" ? "neutral" : activeTheme
 
+  const items = THEMES.map((theme) => ({
+    label: theme.label,
+    value: theme.name,
+  }))
+
   return (
     <div className={cn("flex items-center gap-2", className)}>
       <Label htmlFor="theme-selector" className="sr-only">
         Theme
       </Label>
-      <Select value={value} onValueChange={setActiveTheme}>
-        <SelectTrigger
-          id="theme-selector"
-          size="sm"
-          className="bg-secondary text-secondary-foreground border-secondary justify-start shadow-none *:data-[slot=select-value]:w-12"
-        >
-          <span className="font-medium">Theme:</span>
+      <Select
+        items={items}
+        value={value}
+        onValueChange={(value) => value && setActiveTheme(value)}
+      >
+        <SelectTrigger id="theme-selector" className="w-36">
           <SelectValue placeholder="Select a theme" />
         </SelectTrigger>
-        <SelectContent align="end">
-          {THEMES.map((theme) => (
-            <SelectItem
-              key={theme.name}
-              value={theme.name}
-              className="data-[state=checked]:opacity-50"
-            >
-              {theme.label}
-            </SelectItem>
-          ))}
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Theme</SelectLabel>
+            {items.map((item) => (
+              <SelectItem
+                key={item.value}
+                value={item.value}
+                className="data-[state=checked]:opacity-50"
+              >
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
         </SelectContent>
       </Select>
-      <CopyCodeButton variant="secondary" size="icon-sm" />
+      <CopyCodeButton
+        variant="secondary"
+        size="icon-sm"
+        className="rounded-lg border bg-transparent"
+      />
     </div>
   )
 }

apps/v4/content/docs/(root)/cli.mdx

@@ -223,3 +223,69 @@ To customize the output directory, use the `--output` option.
 ```bash
 npx shadcn@latest build --output ./public/registry
 ```
+
+---
+
+## migrate
+
+Use the `migrate` command to run migrations on your project.
+
+```bash
+npx shadcn@latest migrate [migration]
+```
+
+**Available Migrations**
+
+| Migration | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `icons`   | Migrate your UI components to a different icon library. |
+| `radix`   | Migrate to radix-ui.                                    |
+| `rtl`     | Migrate your components to support RTL (right-to-left). |
+
+**Options**
+
+```bash
+Usage: shadcn migrate [options] [migration] [path]
+
+run a migration.
+
+Arguments:
+  migration        the migration to run.
+  path             optional path or glob pattern to migrate.
+
+Options:
+  -c, --cwd <cwd>  the working directory. defaults to the current directory.
+  -l, --list       list all migrations. (default: false)
+  -y, --yes        skip confirmation prompt. (default: false)
+  -h, --help       display help for command
+```
+
+---
+
+### migrate rtl
+
+The `rtl` migration transforms your components to support RTL (right-to-left) languages.
+
+```bash
+npx shadcn@latest migrate rtl
+```
+
+This will:
+
+1. Update `components.json` to set `rtl: true`
+2. Transform physical CSS properties to logical equivalents (e.g., `ml-4` → `ms-4`, `text-left` → `text-start`)
+3. Add `rtl:` variants where needed (e.g., `space-x-4` → `space-x-4 rtl:space-x-reverse`)
+
+**Migrate specific files**
+
+You can migrate specific files or use glob patterns:
+
+```bash
+# Migrate a specific file
+npx shadcn@latest migrate rtl src/components/ui/button.tsx
+
+# Migrate files matching a glob pattern
+npx shadcn@latest migrate rtl "src/components/ui/**"
+```
+
+If no path is provided, the migration will transform all files in your `ui` directory (from `components.json`).

apps/v4/content/docs/(root)/figma.mdx

@@ -10,7 +10,8 @@ description: Every component recreated in Figma. With customizable props, typogr
 
 ## Free
 
-- [Obra shadcn/ui](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) by [Obra Studio](https://obra.studio/) - Carefully crafted kit designed in the philosophy of shadcn, tracks v4, MIT licensed
+- [Obra shadcn/ui](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) by [Obra Studio](https://obra.studio/) - Carefully crafted shadcn/ui kit, MIT licensed, maintained by team of designers, with free design to code plugin
+- [shadcn/ui components](https://www.figma.com/community/file/1342715840824755935) by [Sitsiilia Bergmann](https://x.com/sitsiilia) - A well-structured component library aligned with the shadcn component system, regularly maintained.
 - [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
 
 ## Paid

apps/v4/content/docs/(root)/rtl.mdx

@@ -1,94 +0,0 @@
----
-title: "RTL"
-description: "RTL documentation"
----
-
-## Overview
-
-RTL is a feature that allows you to display content from right to left.
-
-## Sidebar
-
-If you have an existing `sidebar.tsx` component and want to make it RTL compatible, you'll need to make the following changes:
-
-### 1. Update the side prop type and default
-
-```tsx
-function Sidebar({
-  side = "inline-start", // [!code highlight]
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  side?: "left" | "right" | "inline-start" | "inline-end" // [!code highlight]
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
-}) {
-```
-
-### 2. Update the mobile Sheet side prop
-
-The Sheet component only accepts physical `left` or `right` values, so map the logical values:
-
-```tsx
-<SheetContent
-  side={side === "inline-start" || side === "left" ? "left" : "right"}
-  // ...
->
-```
-
-### 3. Normalize the data-side attribute
-
-The `data-side` attribute is used by CSS selectors, so normalize it to physical values:
-
-```tsx
-<div
-  data-side={side === "inline-start" || side === "left" ? "left" : "right"}
-  // ...
->
-```
-
-### 4. Update the sidebar container positioning
-
-Change the conditional logic to include `inline-start` and use logical positioning classes:
-
-```tsx
-className={cn(
-  "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) md:flex",
-  side === "left" || side === "inline-start"
-    ? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]"
-    : "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]",
-  // ...
-)}
-```
-
-### 5. Update SidebarRail classes
-
-Replace physical positioning classes with logical equivalents:
-
-| Before                            | After                             |
-| --------------------------------- | --------------------------------- |
-| `group-data-[side=left]:-right-4` | `group-data-[side=left]:-end-4`   |
-| `group-data-[side=right]:left-0`  | `group-data-[side=right]:start-0` |
-| `after:left-1/2`                  | `after:start-1/2`                 |
-| `after:left-full`                 | `after:start-full`                |
-| `-right-2`                        | `-end-2`                          |
-| `-left-2`                         | `-start-2`                        |
-
-### Usage
-
-After these changes, you can use the sidebar with logical side values:
-
-```tsx
-// LTR: sidebar on the left, RTL: sidebar on the right
-<Sidebar side="inline-start" />
-
-// LTR: sidebar on the right, RTL: sidebar on the left
-<Sidebar side="inline-end" />
-
-// Physical values still work for explicit positioning
-<Sidebar side="left" />
-<Sidebar side="right" />
-```

apps/v4/content/docs/changelog/2026-01-rtl.mdx

@@ -0,0 +1,82 @@
+---
+title: January 2026 - RTL Support
+description: The shadcn CLI now supports RTL (right-to-left) layouts by automatically converting physical CSS classes to logical equivalents.
+date: 2026-01-28
+---
+
+shadcn/ui now has first-class support for right-to-left (RTL) layouts. Your components automatically adapt for languages like Arabic, Hebrew, and Persian.
+
+**This works with the [shadcn/ui components](/docs/components) as well as any component distributed on the shadcn registry.**
+
+<ComponentPreview
+  styleName="base-nova"
+  name="alert-rtl"
+  direction="rtl"
+  previewClassName="h-auto sm:h-72 p-6"
+/>
+
+### Our approach to RTL
+
+Traditionally, component libraries that support RTL ship with logical classes baked in. This means everyone has to work with classes like `ms-4` and `start-2`, even if they're only building for LTR layouts.
+
+We took a different approach. The shadcn CLI transforms classes at install time, so you only see logical classes when you actually need them. If you're not building for RTL, you work with familiar classes like `ml-4` and `left-2`. When you enable RTL, the CLI handles the conversion for you.
+
+**You don't have to learn RTL until you need it.**
+
+### How it works
+
+When you add components with `rtl: true` set in your `components.json`, the CLI automatically converts physical CSS classes like `ml-4` and `text-left` to their logical equivalents like `ms-4` and `text-start`.
+
+- Physical positioning classes like `left-*` and `right-*` become `start-*` and `end-*`.
+- Margin and padding classes like `ml-*` and `pr-*` become `ms-*` and `pe-*`.
+- Text alignment classes like `text-left` become `text-start`.
+- Directional props are updated to use logical values.
+- Supported icons are automatically flipped using `rtl:rotate-180`.
+- Animations like `slide-in-from-left` become `slide-in-from-start`.
+
+### RTL examples for every component
+
+We've added RTL examples for every component. You'll find live previews and code on each [component page](/docs/components).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="card-rtl"
+  direction="rtl"
+  previewClassName="h-auto"
+/>
+
+### CLI updates
+
+**New projects**: Use the `--rtl` flag with `init` or `create` to enable RTL from the start.
+
+```bash
+npx shadcn@latest init --rtl
+```
+
+```bash
+npx shadcn@latest create --rtl
+```
+
+**Existing projects**: Migrate your components with the `migrate rtl` command.
+
+```bash
+npx shadcn@latest migrate rtl
+```
+
+This transforms all components in your `ui` directory to use logical classes. You can also pass a specific path or glob pattern.
+
+## Try it out
+
+Click the link below to open a Next.js project with RTL support in v0.
+
+[![Open in v0](https://v0.app/chat-static/button.svg)](https://v0.app/chat/api/open?url=https://github.com/shadcn-ui/next-template-rtl)
+
+### Links
+
+- [RTL Documentation](/docs/rtl)
+- [Font Recommendations](/docs/rtl#font-recommendations)
+- [Animations](/docs/rtl#animations)
+- [Migrating Existing Components](/docs/rtl#migrating-existing-components)
+- [Next.js Setup](/docs/rtl/next)
+- [Vite Setup](/docs/rtl/vite)
+- [TanStack Start Setup](/docs/rtl/start)

apps/v4/content/docs/components/base/accordion.mdx

@@ -144,8 +144,8 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 <ComponentPreview
   styleName="base-nova"
   name="accordion-rtl"
+  align="start"
   direction="rtl"
-  previewClassName="h-96"
 />
 
 ## API Reference

apps/v4/content/docs/components/base/calendar.mdx

@@ -237,274 +237,12 @@ Use `showWeekNumber` to show week numbers.
   previewClassName="h-96"
 />
 
-## Upgrade Guide
-
-### Tailwind v4
-
-If you're already using Tailwind v4, you can upgrade to the latest version of the `Calendar` component by running the following command:
-
-```bash
-npx shadcn@latest add calendar
-```
-
-When you're prompted to overwrite the existing `Calendar` component, select `Yes`. **If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
-
-This will update the `Calendar` component and `react-day-picker` to the latest version.
-
-Next, follow the [React DayPicker](https://daypicker.dev/upgrading) upgrade guide to upgrade your existing components to the latest version.
-
-#### Installing Blocks
-
-After upgrading the `Calendar` component, you can install the new blocks by running the `shadcn@latest add` command.
-
-```bash
-npx shadcn@latest add calendar-02
-```
-
-This will install the latest version of the calendar blocks.
-
-### Tailwind v3
-
-If you're using Tailwind v3, you can upgrade to the latest version of the `Calendar` by copying the following code to your `calendar.tsx` file.
-
-<CodeCollapsibleWrapper>
-
-```tsx showLineNumbers title="components/ui/calendar.tsx"
-"use client"
-
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}) {
-  const defaultClassNames = getDefaultClassNames()
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
-        ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-[--cell-size] select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "bg-accent rounded-l-md",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-[--cell-size] items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }
-```
-
-</CodeCollapsibleWrapper>
-
-**If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
-
-Then follow the [React DayPicker](https://daypicker.dev/upgrading) upgrade guide to upgrade your dependencies and existing components to the latest version.
-
-#### Installing Blocks
-
-After upgrading the `Calendar` component, you can install the new blocks by running the `shadcn@latest add` command.
-
-```bash
-npx shadcn@latest add calendar-02
-```
-
-This will install the latest version of the calendar blocks.
-
 ## RTL
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
+See also the [Hijri Guide](#persian--hijri--jalali-calendar) for enabling the Persian / Hijri / Jalali calendar.
+
 <ComponentPreview
   styleName="base-nova"
   name="calendar-rtl"
@@ -512,6 +250,161 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   previewClassName="h-96"
 />
 
+When using RTL, import the locale from `react-day-picker/locale` and pass both the `locale` and `dir` props to the Calendar component:
+
+```tsx showLineNumbers
+import { arSA } from "react-day-picker/locale"
+
+;<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+  locale={arSA}
+  dir="rtl"
+/>
+```
+
 ## API Reference
 
-See the [React DayPicker](https://react-day-picker.js.org) documentation for more information on the `Calendar` component API.
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information on the `Calendar` component.
+
+## Changelog
+
+### RTL Support
+
+If you're upgrading from a previous version of the `Calendar` component, you'll need to apply the following updates to add locale support:
+
+<Steps>
+
+<Step>Import the `Locale` type.</Step>
+
+Add `Locale` to your imports from `react-day-picker`:
+
+```diff
+  import {
+    DayPicker,
+    getDefaultClassNames,
+    type DayButton,
++   type Locale,
+  } from "react-day-picker"
+```
+
+<Step>Add `locale` prop to the Calendar component.</Step>
+
+Add the `locale` prop to the component's props:
+
+```diff
+  function Calendar({
+    className,
+    classNames,
+    showOutsideDays = true,
+    captionLayout = "label",
+    buttonVariant = "ghost",
++   locale,
+    formatters,
+    components,
+    ...props
+  }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  }) {
+```
+
+<Step>Pass `locale` to DayPicker.</Step>
+
+Pass the `locale` prop to the `DayPicker` component:
+
+```diff
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(...)}
+      captionLayout={captionLayout}
++     locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+-         date.toLocaleString("default", { month: "short" }),
++         date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+```
+
+<Step>Update CalendarDayButton to accept locale.</Step>
+
+Update the `CalendarDayButton` component signature and pass `locale`:
+
+```diff
+  function CalendarDayButton({
+    className,
+    day,
+    modifiers,
++   locale,
+    ...props
+- }: React.ComponentProps<typeof DayButton>) {
++ }: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+```
+
+<Step>Update date formatting in CalendarDayButton.</Step>
+
+Use `locale?.code` in the date formatting:
+
+```diff
+    <Button
+      variant="ghost"
+      size="icon"
+-     data-day={day.date.toLocaleDateString()}
++     data-day={day.date.toLocaleDateString(locale?.code)}
+      ...
+    />
+```
+
+<Step>Pass locale to DayButton component.</Step>
+
+Update the `DayButton` component usage to pass the `locale` prop:
+
+```diff
+      components={{
+        ...
+-       DayButton: CalendarDayButton,
++       DayButton: ({ ...props }) => (
++         <CalendarDayButton locale={locale} {...props} />
++       ),
+        ...
+      }}
+```
+
+<Step>Update RTL-aware CSS classes.</Step>
+
+Replace directional classes with logical properties for better RTL support:
+
+```diff
+  // In the day classNames:
+- [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)
++ [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)
+- [&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)
++ [&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)
+- [&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)
++ [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)
+
+  // In range_start classNames:
+- rounded-l-(--cell-radius) ... after:right-0
++ rounded-s-(--cell-radius) ... after:end-0
+
+  // In range_end classNames:
+- rounded-r-(--cell-radius) ... after:left-0
++ rounded-e-(--cell-radius) ... after:start-0
+
+  // In CalendarDayButton className:
+- data-[range-end=true]:rounded-r-(--cell-radius)
++ data-[range-end=true]:rounded-e-(--cell-radius)
+- data-[range-start=true]:rounded-l-(--cell-radius)
++ data-[range-start=true]:rounded-s-(--cell-radius)
+```
+
+</Steps>
+
+After applying these changes, you can use the `locale` prop to provide locale-specific formatting:
+
+```tsx
+import { enUS } from "react-day-picker/locale"
+
+;<Calendar mode="single" selected={date} onSelect={setDate} locale={enUS} />
+```

apps/v4/content/docs/components/base/carousel.mdx

@@ -296,6 +296,27 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   previewClassName="h-80 sm:h-[32rem]"
 />
 
+When localizing the carousel for RTL languages, you need to set the `direction` option in the `opts` prop to match the text direction. This ensures the carousel scrolls in the correct direction.
+
+```tsx showLineNumbers {2-5}
+<Carousel
+  dir={dir}
+  opts={{
+    direction: dir,
+  }}
+>
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious className="rtl:rotate-180" />
+  <CarouselNext className="rtl:rotate-180" />
+</Carousel>
+```
+
+The `direction` option accepts `"ltr"` or `"rtl"` and should match the `dir` prop value. You may also want to rotate the navigation buttons using the `rtl:rotate-180` class to ensure they point in the correct direction.
+
 ## API Reference
 
 See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on props and plugins.

apps/v4/content/docs/components/base/chart.mdx

@@ -580,3 +580,14 @@ This prop adds keyboard access and screen reader support to your charts.
 ```tsx title="components/example-chart.tsx"
 <LineChart accessibilityLayer />
 ```
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="chart-rtl"
+  direction="rtl"
+  previewClassName="h-92"
+/>

apps/v4/content/docs/components/base/collapsible.mdx

@@ -126,6 +126,7 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   styleName="base-nova"
   name="collapsible-rtl"
   direction="rtl"
+  align="start"
 />
 
 ## API Reference

apps/v4/content/docs/components/base/combobox.mdx

@@ -260,7 +260,12 @@ You can add an addon to the combobox by using the `InputGroupAddon` component in
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
-<ComponentPreview styleName="base-nova" name="combobox-rtl" direction="rtl" />
+<ComponentPreview
+  styleName="base-nova"
+  name="combobox-rtl"
+  direction="rtl"
+  align="start"
+/>
 
 ## API Reference
 

apps/v4/content/docs/components/base/context-menu.mdx

@@ -145,6 +145,20 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   direction="rtl"
 />
 
+Use `side="inline-end"` to place the menu on the logical right side of the trigger.
+
+```tsx showLineNumbers
+<ContextMenu>
+  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
+  <ContextMenuContent side="inline-end">
+    <ContextMenuItem>Profile</ContextMenuItem>
+    <ContextMenuItem>Billing</ContextMenuItem>
+    <ContextMenuItem>Team</ContextMenuItem>
+    <ContextMenuItem>Subscription</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
+
 ## API Reference
 
 See the [Base UI](https://base-ui.com/react/components/context-menu#api-reference) documentation for more information.

apps/v4/content/docs/components/base/data-table.mdx

@@ -11,7 +11,8 @@ links:
   styleName="radix-nova"
   name="data-table-demo"
   align="start"
-  previewClassName="items-start h-[28rem] px-4 md:px-8"
+  previewClassName="items-start h-auto px-4 md:px-8"
+  hideCode
 />
 
 ## Introduction
@@ -883,3 +884,15 @@ A component to toggle column visibility.
 ```tsx
 <DataTableViewOptions table={table} />
 ```
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="data-table-rtl"
+  direction="rtl"
+  previewClassName="items-start h-auto px-4 md:px-8"
+  hideCode
+/>

apps/v4/content/docs/components/base/direction.mdx

@@ -0,0 +1,93 @@
+---
+title: Direction
+description: A provider component that sets the text direction for your application.
+base: base
+component: true
+links:
+  doc: https://base-ui.com/react/utils/direction-provider
+  api: https://base-ui.com/react/utils/direction-provider#api-reference
+---
+
+The `DirectionProvider` component is used to set the text direction (`ltr` or `rtl`) for your application. This is essential for supporting right-to-left languages like Arabic, Hebrew, and Persian.
+
+Here's a preview of the component in RTL mode. Use the language selector to switch the language. To see more examples, look for the RTL section on components pages.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="card-rtl"
+  direction="rtl"
+  previewClassName="h-auto"
+  hideCode
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">Command</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add direction
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps className="mb-0 pt-2">
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @base-ui/react
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource
+  name="direction"
+  title="components/ui/direction.tsx"
+  styleName="base-nova"
+/>
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { DirectionProvider } from "@/components/ui/direction"
+```
+
+```tsx showLineNumbers
+<html dir="rtl">
+  <body>
+    <DirectionProvider direction="rtl">
+      {/* Your app content */}
+    </DirectionProvider>
+  </body>
+</html>
+```
+
+## useDirection
+
+The `useDirection` hook is used to get the current direction of the application.
+
+```tsx showLineNumbers
+import { useDirection } from "@/components/ui/direction"
+
+function MyComponent() {
+  const direction = useDirection()
+  return <div>Current direction: {direction}</div>
+}
+```

apps/v4/content/docs/components/base/dropdown-menu.mdx

@@ -5,8 +5,8 @@ featured: true
 base: base
 component: true
 links:
-  doc: https://base-ui.com/react/components/dropdown-menu
-  api: https://base-ui.com/react/components/dropdown-menu#api-reference
+  doc: https://base-ui.com/react/components/menu
+  api: https://base-ui.com/react/components/menu#api-reference
 ---
 
 <ComponentPreview
@@ -172,4 +172,4 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 
 ## API Reference
 
-See the [Base UI documentation](https://base-ui.com/react/components/dropdown-menu) for the full API reference.
+See the [Base UI documentation](https://base-ui.com/react/components/menu) for the full API reference.

apps/v4/content/docs/components/base/field.mdx

@@ -170,7 +170,7 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   styleName="base-nova"
   name="field-rtl"
   direction="rtl"
-  previewClassName="h-[800px] p-6 md:h-[850px]"
+  previewClassName="h-auto p-6"
 />
 
 ## Responsive Layout

apps/v4/content/docs/components/base/label.mdx

@@ -10,12 +10,6 @@ links:
 
 <ComponentPreview styleName="base-nova" name="label-demo" />
 
-## RTL
-
-To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
-
-<ComponentPreview styleName="base-nova" name="label-rtl" direction="rtl" />
-
 <Callout>
   For form fields, use the [Field](/docs/components/base/field) component which
   includes built-in label, description, and error handling.
@@ -91,6 +85,12 @@ includes built-in `FieldLabel`, `FieldDescription`, and `FieldError` components.
   previewClassName="h-[44rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="label-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Label](https://base-ui.com/react/components/label#api-reference) documentation for more information.

apps/v4/content/docs/components/base/meta.json

@@ -22,6 +22,7 @@
     "data-table",
     "date-picker",
     "dialog",
+    "direction",
     "drawer",
     "dropdown-menu",
     "empty",

apps/v4/content/docs/components/base/navigation-menu.mdx

@@ -45,6 +45,7 @@ npm install @base-ui/react
 <ComponentSource
   name="navigation-menu"
   title="components/ui/navigation-menu.tsx"
+  styleName="base-nova"
 />
 
 <Step>Update the import paths to match your project setup.</Step>

apps/v4/content/docs/components/base/pagination.mdx

@@ -133,3 +133,63 @@ const PaginationLink = ({...props }: ) => (
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
 <ComponentPreview styleName="base-nova" name="pagination-rtl" direction="rtl" />
+
+## Changelog
+
+### RTL Support
+
+If you're upgrading from a previous version of the `Pagination` component, you'll need to apply the following updates to add the `text` prop:
+
+<Steps>
+
+<Step>Update `PaginationPrevious`.</Step>
+
+```diff
+  function PaginationPrevious({
+    className,
++   text = "Previous",
+    ...props
+- }: React.ComponentProps<typeof PaginationLink>) {
++ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+    return (
+      <PaginationLink
+        aria-label="Go to previous page"
+        size="default"
+        className={cn("cn-pagination-previous", className)}
+        {...props}
+      >
+        <ChevronLeftIcon />
+        <span className="cn-pagination-previous-text hidden sm:block">
+-         Previous
++         {text}
+        </span>
+      </PaginationLink>
+    )
+  }
+```
+
+<Step>Update `PaginationNext`.</Step>
+
+```diff
+  function PaginationNext({
+    className,
++   text = "Next",
+    ...props
+- }: React.ComponentProps<typeof PaginationLink>) {
++ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+    return (
+      <PaginationLink
+        aria-label="Go to next page"
+        size="default"
+        className={cn("cn-pagination-next", className)}
+        {...props}
+      >
+-       <span className="cn-pagination-next-text hidden sm:block">Next</span>
++       <span className="cn-pagination-next-text hidden sm:block">{text}</span>
+        <ChevronRightIcon />
+      </PaginationLink>
+    )
+  }
+```
+
+</Steps>

apps/v4/content/docs/components/base/scroll-area.mdx

@@ -76,8 +76,6 @@ Use `ScrollBar` with `orientation="horizontal"` for horizontal scrolling.
 
 <ComponentPreview styleName="base-nova" name="scroll-area-horizontal-demo" />
 
-## API Reference
-
 ## RTL
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
@@ -86,6 +84,7 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   styleName="base-nova"
   name="scroll-area-rtl"
   direction="rtl"
+  previewClassName="h-auto"
 />
 
 ## API Reference

apps/v4/content/docs/components/base/sheet.mdx

@@ -93,6 +93,12 @@ Use `showCloseButton={false}` on `SheetContent` to hide the close button.
 
 <ComponentPreview styleName="base-nova" name="sheet-no-close-button" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="sheet-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Dialog](https://base-ui.com/react/components/dialog#api-reference) documentation.

apps/v4/content/docs/components/base/table.mdx

@@ -109,4 +109,9 @@ You can also see an example of a data table in the [Tasks](/examples/tasks) demo
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
-<ComponentPreview styleName="base-nova" name="table-rtl" direction="rtl" />
+<ComponentPreview
+  styleName="base-nova"
+  name="table-rtl"
+  direction="rtl"
+  previewClassName="h-auto"
+/>

apps/v4/content/docs/components/base/tabs.mdx

@@ -99,12 +99,7 @@ Use `orientation="vertical"` for vertical tabs.
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
-<ComponentPreview
-  styleName="base-nova"
-  name="tabs-rtl"
-  direction="rtl"
-  previewClassName="w-[400px]"
-/>
+<ComponentPreview styleName="base-nova" name="tabs-rtl" direction="rtl" />
 
 ## API Reference
 

apps/v4/content/docs/components/base/typography.mdx

@@ -65,3 +65,14 @@ We do not ship any typography styles by default. This page is an example of how
 ## Muted
 
 <ComponentPreview styleName="base-nova" name="typography-muted" />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="typography-rtl"
+  direction="rtl"
+  className="[&_.preview]:!h-auto"
+/>

apps/v4/content/docs/components/radix/accordion.mdx

@@ -144,8 +144,8 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 <ComponentPreview
   styleName="radix-nova"
   name="accordion-rtl"
+  align="start"
   direction="rtl"
-  previewClassName="h-96"
 />
 
 ## API Reference

apps/v4/content/docs/components/radix/calendar.mdx

@@ -237,274 +237,12 @@ Use `showWeekNumber` to show week numbers.
   previewClassName="h-96"
 />
 
-## Upgrade Guide
-
-### Tailwind v4
-
-If you're already using Tailwind v4, you can upgrade to the latest version of the `Calendar` component by running the following command:
-
-```bash
-npx shadcn@latest add calendar
-```
-
-When you're prompted to overwrite the existing `Calendar` component, select `Yes`. **If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
-
-This will update the `Calendar` component and `react-day-picker` to the latest version.
-
-Next, follow the [React DayPicker](https://daypicker.dev/upgrading) upgrade guide to upgrade your existing components to the latest version.
-
-#### Installing Blocks
-
-After upgrading the `Calendar` component, you can install the new blocks by running the `shadcn@latest add` command.
-
-```bash
-npx shadcn@latest add calendar-02
-```
-
-This will install the latest version of the calendar blocks.
-
-### Tailwind v3
-
-If you're using Tailwind v3, you can upgrade to the latest version of the `Calendar` by copying the following code to your `calendar.tsx` file.
-
-<CodeCollapsibleWrapper>
-
-```tsx showLineNumbers title="components/ui/calendar.tsx"
-"use client"
-
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}) {
-  const defaultClassNames = getDefaultClassNames()
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
-        ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-[--cell-size] select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "bg-accent rounded-l-md",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-[--cell-size] items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }
-```
-
-</CodeCollapsibleWrapper>
-
-**If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
-
-Then follow the [React DayPicker](https://daypicker.dev/upgrading) upgrade guide to upgrade your dependencies and existing components to the latest version.
-
-#### Installing Blocks
-
-After upgrading the `Calendar` component, you can install the new blocks by running the `shadcn@latest add` command.
-
-```bash
-npx shadcn@latest add calendar-02
-```
-
-This will install the latest version of the calendar blocks.
-
 ## RTL
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
+See also the [Hijri Guide](#persian--hijri--jalali-calendar) for enabling the Persian / Hijri / Jalali calendar.
+
 <ComponentPreview
   styleName="radix-nova"
   name="calendar-rtl"
@@ -512,6 +250,161 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   previewClassName="h-96"
 />
 
+When using RTL, import the locale from `react-day-picker/locale` and pass both the `locale` and `dir` props to the Calendar component:
+
+```tsx showLineNumbers
+import { arSA } from "react-day-picker/locale"
+
+;<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+  locale={arSA}
+  dir="rtl"
+/>
+```
+
 ## API Reference
 
-See the [React DayPicker](https://react-day-picker.js.org) documentation for more information on the `Calendar` component API.
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information on the `Calendar` component.
+
+## Changelog
+
+### RTL Support
+
+If you're upgrading from a previous version of the `Calendar` component, you'll need to apply the following updates to add locale support:
+
+<Steps>
+
+<Step>Import the `Locale` type.</Step>
+
+Add `Locale` to your imports from `react-day-picker`:
+
+```diff
+  import {
+    DayPicker,
+    getDefaultClassNames,
+    type DayButton,
++   type Locale,
+  } from "react-day-picker"
+```
+
+<Step>Add `locale` prop to the Calendar component.</Step>
+
+Add the `locale` prop to the component's props:
+
+```diff
+  function Calendar({
+    className,
+    classNames,
+    showOutsideDays = true,
+    captionLayout = "label",
+    buttonVariant = "ghost",
++   locale,
+    formatters,
+    components,
+    ...props
+  }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  }) {
+```
+
+<Step>Pass `locale` to DayPicker.</Step>
+
+Pass the `locale` prop to the `DayPicker` component:
+
+```diff
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(...)}
+      captionLayout={captionLayout}
++     locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+-         date.toLocaleString("default", { month: "short" }),
++         date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+```
+
+<Step>Update CalendarDayButton to accept locale.</Step>
+
+Update the `CalendarDayButton` component signature and pass `locale`:
+
+```diff
+  function CalendarDayButton({
+    className,
+    day,
+    modifiers,
++   locale,
+    ...props
+- }: React.ComponentProps<typeof DayButton>) {
++ }: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+```
+
+<Step>Update date formatting in CalendarDayButton.</Step>
+
+Use `locale?.code` in the date formatting:
+
+```diff
+    <Button
+      variant="ghost"
+      size="icon"
+-     data-day={day.date.toLocaleDateString()}
++     data-day={day.date.toLocaleDateString(locale?.code)}
+      ...
+    />
+```
+
+<Step>Pass locale to DayButton component.</Step>
+
+Update the `DayButton` component usage to pass the `locale` prop:
+
+```diff
+      components={{
+        ...
+-       DayButton: CalendarDayButton,
++       DayButton: ({ ...props }) => (
++         <CalendarDayButton locale={locale} {...props} />
++       ),
+        ...
+      }}
+```
+
+<Step>Update RTL-aware CSS classes.</Step>
+
+Replace directional classes with logical properties for better RTL support:
+
+```diff
+  // In the day classNames:
+- [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)
++ [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)
+- [&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)
++ [&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)
+- [&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)
++ [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)
+
+  // In range_start classNames:
+- rounded-l-(--cell-radius) ... after:right-0
++ rounded-s-(--cell-radius) ... after:end-0
+
+  // In range_end classNames:
+- rounded-r-(--cell-radius) ... after:left-0
++ rounded-e-(--cell-radius) ... after:start-0
+
+  // In CalendarDayButton className:
+- data-[range-end=true]:rounded-r-(--cell-radius)
++ data-[range-end=true]:rounded-e-(--cell-radius)
+- data-[range-start=true]:rounded-l-(--cell-radius)
++ data-[range-start=true]:rounded-s-(--cell-radius)
+```
+
+</Steps>
+
+After applying these changes, you can use the `locale` prop to provide locale-specific formatting:
+
+```tsx
+import { enUS } from "react-day-picker/locale"
+
+;<Calendar mode="single" selected={date} onSelect={setDate} locale={enUS} />
+```

apps/v4/content/docs/components/radix/carousel.mdx

@@ -296,6 +296,27 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   previewClassName="h-80 sm:h-[32rem]"
 />
 
+When localizing the carousel for RTL languages, you need to set the `direction` option in the `opts` prop to match the text direction. This ensures the carousel scrolls in the correct direction.
+
+```tsx showLineNumbers {2-5}
+<Carousel
+  dir={dir}
+  opts={{
+    direction: dir,
+  }}
+>
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious className="rtl:rotate-180" />
+  <CarouselNext className="rtl:rotate-180" />
+</Carousel>
+```
+
+The `direction` option accepts `"ltr"` or `"rtl"` and should match the `dir` prop value. You may also want to rotate the navigation buttons using the `rtl:rotate-180` class to ensure they point in the correct direction.
+
 ## API Reference
 
 See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on props and plugins.

apps/v4/content/docs/components/radix/chart.mdx

@@ -580,3 +580,14 @@ This prop adds keyboard access and screen reader support to your charts.
 ```tsx title="components/example-chart.tsx"
 <LineChart accessibilityLayer />
 ```
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="chart-rtl"
+  direction="rtl"
+  previewClassName="h-92"
+/>

apps/v4/content/docs/components/radix/collapsible.mdx

@@ -130,6 +130,7 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   styleName="radix-nova"
   name="collapsible-rtl"
   direction="rtl"
+  align="start"
 />
 
 ## API Reference

apps/v4/content/docs/components/radix/combobox.mdx

@@ -260,7 +260,12 @@ You can add an addon to the combobox by using the `InputGroupAddon` component in
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
-<ComponentPreview styleName="radix-nova" name="combobox-rtl" direction="rtl" />
+<ComponentPreview
+  styleName="radix-nova"
+  name="combobox-rtl"
+  direction="rtl"
+  align="start"
+/>
 
 ## API Reference
 

apps/v4/content/docs/components/radix/context-menu.mdx

@@ -129,12 +129,6 @@ Use `variant="destructive"` to style the menu item as destructive.
 
 <ComponentPreview styleName="radix-nova" name="context-menu-destructive" />
 
-### Sides
-
-Control submenu placement with side and align props.
-
-<ComponentPreview styleName="radix-nova" name="context-menu-sides" />
-
 ## RTL
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).

apps/v4/content/docs/components/radix/data-table.mdx

@@ -11,7 +11,8 @@ links:
   styleName="radix-nova"
   name="data-table-demo"
   align="start"
-  previewClassName="items-start h-[28rem] px-4 md:px-8"
+  previewClassName="items-start h-auto px-4 md:px-8"
+  hideCode
 />
 
 ## Introduction
@@ -883,3 +884,15 @@ A component to toggle column visibility.
 ```tsx
 <DataTableViewOptions table={table} />
 ```
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="data-table-rtl"
+  direction="rtl"
+  previewClassName="items-start h-auto px-4 md:px-8"
+  hideCode
+/>

apps/v4/content/docs/components/radix/direction.mdx

@@ -0,0 +1,93 @@
+---
+title: Direction
+description: A provider component that sets the text direction for your application.
+base: radix
+component: true
+links:
+  doc: https://www.radix-ui.com/primitives/docs/utilities/direction-provider
+  api: https://www.radix-ui.com/primitives/docs/utilities/direction-provider#api-reference
+---
+
+The `DirectionProvider` component is used to set the text direction (`ltr` or `rtl`) for your application. This is essential for supporting right-to-left languages like Arabic, Hebrew, and Persian.
+
+Here's a preview of the component in RTL mode. Use the language selector to switch the language. To see more examples, look for the RTL section on components pages.
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="card-rtl"
+  direction="rtl"
+  previewClassName="h-auto"
+  hideCode
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">Command</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add direction
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps className="mb-0 pt-2">
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install radix-ui
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource
+  name="direction"
+  title="components/ui/direction.tsx"
+  styleName="radix-nova"
+/>
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { DirectionProvider } from "@/components/ui/direction"
+```
+
+```tsx showLineNumbers
+<html dir="rtl">
+  <body>
+    <DirectionProvider direction="rtl">
+      {/* Your app content */}
+    </DirectionProvider>
+  </body>
+</html>
+```
+
+## useDirection
+
+The `useDirection` hook is used to get the current direction of the application.
+
+```tsx showLineNumbers
+import { useDirection } from "@/components/ui/direction"
+
+function MyComponent() {
+  const direction = useDirection()
+  return <div>Current direction: {direction}</div>
+}
+```

apps/v4/content/docs/components/radix/field.mdx

@@ -170,7 +170,7 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   styleName="radix-nova"
   name="field-rtl"
   direction="rtl"
-  previewClassName="h-[800px] p-6 md:h-[850px]"
+  previewClassName="h-auto p-6"
 />
 
 ## Responsive Layout

apps/v4/content/docs/components/radix/label.mdx

@@ -10,12 +10,6 @@ links:
 
 <ComponentPreview styleName="radix-nova" name="label-demo" />
 
-## RTL
-
-To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
-
-<ComponentPreview styleName="radix-nova" name="label-rtl" direction="rtl" />
-
 <Callout>
   For form fields, use the [Field](/docs/components/radix/field) component which
   includes built-in label, description, and error handling.
@@ -91,6 +85,12 @@ includes built-in `FieldLabel`, `FieldDescription`, and `FieldError` components.
   previewClassName="h-[44rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="label-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Radix UI Label](https://www.radix-ui.com/docs/primitives/components/label#api-reference) documentation for more information.

apps/v4/content/docs/components/radix/meta.json

@@ -22,6 +22,7 @@
     "data-table",
     "date-picker",
     "dialog",
+    "direction",
     "drawer",
     "dropdown-menu",
     "empty",

apps/v4/content/docs/components/radix/navigation-menu.mdx

@@ -12,6 +12,7 @@ links:
   styleName="radix-nova"
   name="navigation-menu-demo"
   previewClassName="h-96"
+  className="overflow-visible"
 />
 
 ## Installation
@@ -114,6 +115,7 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   name="navigation-menu-rtl"
   direction="rtl"
   previewClassName="h-96"
+  className="overflow-visible"
 />
 
 ## API Reference

apps/v4/content/docs/components/radix/pagination.mdx

@@ -137,3 +137,63 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   name="pagination-rtl"
   direction="rtl"
 />
+
+## Changelog
+
+### RTL Support
+
+If you're upgrading from a previous version of the `Pagination` component, you'll need to apply the following updates to add the `text` prop:
+
+<Steps>
+
+<Step>Update `PaginationPrevious`.</Step>
+
+```diff
+  function PaginationPrevious({
+    className,
++   text = "Previous",
+    ...props
+- }: React.ComponentProps<typeof PaginationLink>) {
++ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+    return (
+      <PaginationLink
+        aria-label="Go to previous page"
+        size="default"
+        className={cn("cn-pagination-previous", className)}
+        {...props}
+      >
+        <ChevronLeftIcon />
+        <span className="cn-pagination-previous-text hidden sm:block">
+-         Previous
++         {text}
+        </span>
+      </PaginationLink>
+    )
+  }
+```
+
+<Step>Update `PaginationNext`.</Step>
+
+```diff
+  function PaginationNext({
+    className,
++   text = "Next",
+    ...props
+- }: React.ComponentProps<typeof PaginationLink>) {
++ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+    return (
+      <PaginationLink
+        aria-label="Go to next page"
+        size="default"
+        className={cn("cn-pagination-next", className)}
+        {...props}
+      >
+-       <span className="cn-pagination-next-text hidden sm:block">Next</span>
++       <span className="cn-pagination-next-text hidden sm:block">{text}</span>
+        <ChevronRightIcon />
+      </PaginationLink>
+    )
+  }
+```
+
+</Steps>

apps/v4/content/docs/components/radix/scroll-area.mdx

@@ -84,6 +84,7 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   styleName="radix-nova"
   name="scroll-area-rtl"
   direction="rtl"
+  previewClassName="h-auto"
 />
 
 ## API Reference

apps/v4/content/docs/components/radix/sheet.mdx

@@ -93,6 +93,12 @@ Use `showCloseButton={false}` on `SheetContent` to hide the close button.
 
 <ComponentPreview styleName="radix-nova" name="sheet-no-close-button" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="sheet-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Radix UI Dialog](https://www.radix-ui.com/docs/primitives/components/dialog#api-reference) documentation.

apps/v4/content/docs/components/radix/table.mdx

@@ -109,4 +109,9 @@ You can also see an example of a data table in the [Tasks](/examples/tasks) demo
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
-<ComponentPreview styleName="radix-nova" name="table-rtl" direction="rtl" />
+<ComponentPreview
+  styleName="radix-nova"
+  name="table-rtl"
+  direction="rtl"
+  previewClassName="h-auto"
+/>

apps/v4/content/docs/components/radix/tabs.mdx

@@ -99,12 +99,7 @@ Use `orientation="vertical"` for vertical tabs.
 
 To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
-<ComponentPreview
-  styleName="radix-nova"
-  name="tabs-rtl"
-  direction="rtl"
-  previewClassName="w-[400px]"
-/>
+<ComponentPreview styleName="radix-nova" name="tabs-rtl" direction="rtl" />
 
 ## API Reference
 

apps/v4/content/docs/components/radix/typography.mdx

@@ -65,3 +65,14 @@ We do not ship any typography styles by default. This page is an example of how
 ## Muted
 
 <ComponentPreview styleName="radix-nova" name="typography-muted" />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="typography-rtl"
+  direction="rtl"
+  className="[&_.preview]:!h-auto"
+/>

apps/v4/content/docs/installation/next.mdx

@@ -11,7 +11,7 @@ description: Install and configure shadcn/ui for Next.js.
 
 <Steps>
 
-### Create project
+### Create Project
 
 Run the `init` command to create a new Next.js project or to setup an existing one:
 

apps/v4/content/docs/meta.json

@@ -7,6 +7,7 @@
     "forms",
     "installation",
     "dark-mode",
+    "rtl",
     "registry"
   ]
 }

apps/v4/content/docs/rtl/index.mdx

@@ -0,0 +1,163 @@
+---
+title: "RTL"
+description: "Right-to-left support for shadcn/ui components."
+---
+
+shadcn/ui components have first-class support for right-to-left (RTL) layouts. Text alignment, positioning, and directional styles automatically adapt for languages like Arabic, Hebrew, and Persian.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="card-rtl"
+  direction="rtl"
+  previewClassName="h-auto"
+  hideCode
+  caption="A card component in RTL mode."
+  className="mb-8"
+/>
+
+When you install components, the CLI automatically transforms physical positioning classes to logical equivalents, so your components work seamlessly in both LTR and RTL contexts.
+
+## Get Started
+
+Select your framework to get started with RTL support.
+
+<div className="mt-6 grid gap-4 sm:grid-cols-2 sm:gap-6">
+  <LinkedCard href="/docs/rtl/next">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Next.js</title>
+      <path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
+    </svg>
+    <p className="mt-2 font-medium">Next.js</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/rtl/vite">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Vite</title>
+      <path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z" />
+    </svg>
+    <p className="mt-2 font-medium">Vite</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/rtl/start">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
+    </svg>
+    <p className="mt-2 font-medium">TanStack Start</p>
+  </LinkedCard>
+</div>
+
+## How it works
+
+When you add components with `rtl: true` set in your `components.json`, the shadcn CLI automatically transforms classes and props to be RTL compatible:
+
+- Physical positioning classes like `left-*` and `right-*` are converted to logical equivalents like `start-*` and `end-*`.
+- Directional props are updated to use logical values.
+- Text alignment and spacing classes are adjusted accordingly.
+- Supported icons are automatically flipped using `rtl:rotate-180`.
+
+## Try it out
+
+Click the link below to open a Next.js project with RTL support in v0.
+
+[![Open in v0](https://v0.app/chat-static/button.svg)](https://v0.app/chat/api/open?url=https://github.com/shadcn-ui/next-template-rtl)
+
+## Supported Styles
+
+Automatic RTL transformation via the CLI is only available for projects created using `shadcn create` with the new styles (`base-nova`, `radix-nova`, etc.).
+
+For other styles, see the [Migration Guide](#migrating-existing-components).
+
+## Font Recommendations
+
+For the best RTL experience, we recommend using fonts that have proper support for your target language. [Noto](https://fonts.google.com/noto) is a great font family for this and it pairs well with Inter and Geist.
+
+See your framework's RTL guide under [Get Started](#get-started) for details on installing and configuring RTL fonts.
+
+## Animations
+
+The CLI also handles animation classes, automatically transforming physical directional animations to their logical equivalents. For example, `slide-in-from-right` becomes `slide-in-from-end`.
+
+This ensures animations like dropdowns, popovers, and tooltips animate in the correct direction based on the document's text direction.
+
+**A note on tw-animate-css:**
+
+There is a [known issue](https://github.com/Wombosvideo/tw-animate-css/issues/67) with the `tw-animate-css` library where the logical slide utilities are not working as expected. For now, make sure you pass in the `dir` prop to portal elements.
+
+```tsx showLineNumbers /dir="rtl"/
+<Popover>
+  <PopoverTrigger>Open</PopoverTrigger>
+  <PopoverContent dir="rtl">
+    <div>Content</div>
+  </PopoverContent>
+</Popover>
+```
+
+```tsx showLineNumbers /dir="rtl"/
+<Tooltip>
+  <TooltipTrigger>Open</TooltipTrigger>
+  <TooltipContent dir="rtl">
+    <div>Content</div>
+  </TooltipContent>
+</Tooltip>
+```
+
+## Migrating existing components
+
+If you have existing components installed before enabling RTL, you can migrate them using the CLI as follows:
+
+<Steps>
+
+<Step>Run the migrate command</Step>
+
+```bash
+npx shadcn@latest migrate rtl [path]
+```
+
+`[path]` accepts a path or glob pattern to migrate. If you don't provide a path, it will migrate all the files in the `ui` directory.
+
+### Manual Migration (Optional)
+
+The following components are not automatically migrated by the CLI. Follow the RTL support section for each component to manually migrate them.
+
+- [Calendar](/docs/components/radix/calendar#rtl-support)
+- [Pagination](/docs/components/radix/pagination#rtl-support)
+- [Sidebar](/docs/components/radix/sidebar#rtl-support)
+
+### Migrate Icons
+
+Some icons like `ArrowRightIcon` or `ChevronLeftIcon` might need the `rtl:rotate-180` class to be flipped correctly. Add the `rtl:rotate-180` class to the icon component to flip it correctly.
+
+```tsx showLineNumbers /rtl:rotate-180/
+<ArrowRightIcon className="rtl:rotate-180" />
+```
+
+### Add direction component
+
+Add the direction component to your project.
+
+```bash
+npx shadcn@latest add direction
+```
+
+### Add DirectionProvider
+
+Follow your framework's documentation for details on how to add the `DirectionProvider` component to your project.
+
+See the [Get Started](#get-started) section for details on how to add the `DirectionProvider` component to your project.
+
+</Steps>

apps/v4/content/docs/rtl/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "RTL",
+  "pages": ["index", "next", "vite", "start"]
+}