perf: optimize build-registry script for ~3.4x faster builds

- Add parallel style building with concurrency limiter (6 concurrent)
- Cache registry imports to avoid duplicate validations
- Pre-load all style maps in parallel
- Process files within each style concurrently
- Batch prettier formatting into single call at end
- Parallelize cleanup of temp files and directories
- Parallelize RTL example generation
- Add build timing output

Reduces build time from ~33s to ~10s.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -11,6 +11,7 @@ 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"
@@ -38,7 +39,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="hidden items-center gap-2 px-[calc(--spacing(2.5))] pb-1 md:flex md:flex-col md:items-start">
+      <div className="--md:flex hidden items-center gap-2 px-[calc(--spacing(2.5))] pb-1 md:flex-col md:items-start">
         <HugeiconsIcon
           icon={Settings05Icon}
           className="size-4"
@@ -75,6 +76,7 @@ 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, menuAccent, menuColor, radius },
+    { style, theme, font, baseColor, direction, menuAccent, menuColor, radius },
     setSearchParams,
   ] = useDesignSystemSearchParams({
     shallow: true, // No need to go through the server…
@@ -166,6 +166,13 @@ 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

@@ -0,0 +1,122 @@
+"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)/hooks/use-locks.tsx

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

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

@@ -14,6 +14,7 @@ import {
   BASE_COLORS,
   BASES,
   DEFAULT_CONFIG,
+  DIRECTIONS,
   iconLibraries,
   MENU_ACCENTS,
   MENU_COLORS,
@@ -22,6 +23,7 @@ import {
   THEMES,
   type BaseColorName,
   type BaseName,
+  type DirectionValue,
   type FontValue,
   type IconLibraryName,
   type MenuAccentValue,
@@ -52,6 +54,9 @@ 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),

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

@@ -1,9 +1,18 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/base/ui/button"
 
 import { cn } from "@/lib/utils"
+import {
+  LanguageProvider,
+  LanguageSelector,
+  useLanguageContext,
+  useTranslation,
+  type Translations,
+} from "@/components/language-selector"
+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"
 
 export function ComponentPreviewTabs({
   className,
@@ -14,6 +23,8 @@ export function ComponentPreviewTabs({
   component,
   source,
   sourcePreview,
+  direction = "ltr",
+  styleName,
   ...props
 }: React.ComponentProps<"div"> & {
   previewClassName?: string
@@ -23,8 +34,11 @@ export function ComponentPreviewTabs({
   component: React.ReactNode
   source: React.ReactNode
   sourcePreview?: React.ReactNode
+  direction?: "ltr" | "rtl"
+  styleName?: string
 }) {
   const [isMobileCodeVisible, setIsMobileCodeVisible] = React.useState(false)
+  const base = styleName?.split("-")[0]
 
   return (
     <div
@@ -35,53 +49,153 @@ export function ComponentPreviewTabs({
       )}
       {...props}
     >
-      <div data-slot="preview">
+      {direction === "rtl" ? (
-        <div
+        <LanguageProvider defaultLanguage="ar">
-          data-align={align}
+          <RtlLanguageSelector />
-          data-chromeless={chromeLessOnMobile}
+          <PreviewWrapper
-          className={cn(
+            align={align}
-            "preview flex h-72 w-full justify-center p-10 data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start data-[chromeless=true]:h-auto data-[chromeless=true]:p-0",
+            chromeLessOnMobile={chromeLessOnMobile}
-            previewClassName
+            previewClassName={previewClassName}
-          )}
-        >
-          {component}
-        </div>
-        {!hideCode && (
-          <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"
           >
-            {isMobileCodeVisible ? (
+            <DirectionProviderWrapper base={base}>
-              source
+              {component}
-            ) : (
+            </DirectionProviderWrapper>
-              <div className="relative">
+          </PreviewWrapper>
-                {sourcePreview}
+        </LanguageProvider>
-                <div className="absolute inset-0 flex items-center justify-center pb-4">
+      ) : (
-                  <div
+        <DirectionProviderWrapper base={base} dir="ltr">
-                    className="absolute inset-0"
+          <PreviewWrapper
-                    style={{
+            align={align}
-                      background:
+            chromeLessOnMobile={chromeLessOnMobile}
-                        "linear-gradient(to top, var(--color-code), color-mix(in oklab, var(--color-code) 60%, transparent), transparent)",
+            previewClassName={previewClassName}
-                    }}
+            dir="ltr"
-                  />
+          >
-                  <Button
+            {component}
-                    type="button"
+          </PreviewWrapper>
-                    size="sm"
+        </DirectionProviderWrapper>
-                    variant="outline"
+      )}
-                    className="bg-background text-foreground dark:bg-background dark:text-foreground hover:bg-muted dark:hover:bg-muted relative z-10"
+      {!hideCode && (
-                    onClick={() => {
+        <div
-                      setIsMobileCodeVisible(true)
+          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"
-                    View Code
+        >
-                  </Button>
+          {isMobileCodeVisible ? (
-                </div>
+            source
+          ) : (
+            <div className="relative">
+              {sourcePreview}
+              <div className="absolute inset-0 flex items-center justify-center pb-4">
+                <div
+                  className="absolute inset-0"
+                  style={{
+                    background:
+                      "linear-gradient(to top, var(--color-code), color-mix(in oklab, var(--color-code) 60%, transparent), transparent)",
+                  }}
+                />
+                <Button
+                  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"
+                  onClick={() => {
+                    setIsMobileCodeVisible(true)
+                  }}
+                >
+                  View Code
+                </Button>
               </div>
-            )}
+            </div>
-          </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+const directionTranslations: Translations<Record<string, never>> = {
+  en: {
+    dir: "ltr",
+    values: {},
+  },
+  ar: {
+    dir: "rtl",
+    values: {},
+  },
+  he: {
+    dir: "rtl",
+    values: {},
+  },
+}
+
+function RtlLanguageSelector() {
+  const context = useLanguageContext()
+  // This component is always rendered inside LanguageProvider when direction === "rtl".
+  // so context should always be available.
+  if (!context) {
+    return null
+  }
+  return (
+    <LanguageSelector
+      value={context.language}
+      onValueChange={context.setLanguage}
+    />
+  )
+}
+
+function PreviewWrapper({
+  align,
+  chromeLessOnMobile,
+  previewClassName,
+  dir: explicitDir,
+  children,
+}: {
+  align: "center" | "start" | "end"
+  chromeLessOnMobile: boolean
+  previewClassName?: string
+  dir?: "ltr" | "rtl"
+  children: React.ReactNode
+}) {
+  // useTranslation handles the case when there's no LanguageProvider context.
+  // It will fall back to local state with defaultLanguage.
+  const translation = useTranslation(directionTranslations, "ar")
+  const dir = explicitDir ?? translation.dir
+
+  return (
+    <div data-slot="preview" dir={dir}>
+      <div
+        data-align={align}
+        data-chromeless={chromeLessOnMobile}
+        className={cn(
+          "preview relative flex h-72 w-full justify-center p-10 data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start data-[chromeless=true]:h-auto data-[chromeless=true]:p-0",
+          previewClassName
         )}
+      >
+        {children}
       </div>
     </div>
   )
 }
+
+function DirectionProviderWrapper({
+  base,
+  dir: explicitDir,
+  children,
+}: {
+  base?: string
+  dir?: "ltr" | "rtl"
+  children: React.ReactNode
+}) {
+  // useTranslation handles the case when there's no LanguageProvider context.
+  // It will fall back to local state with defaultLanguage.
+  const translation = useTranslation(directionTranslations, "ar")
+  const dir = explicitDir ?? translation.dir
+
+  if (base === "base") {
+    return (
+      <BaseDirectionProvider direction={dir}>{children}</BaseDirectionProvider>
+    )
+  }
+
+  return <RadixDirectionProvider dir={dir}>{children}</RadixDirectionProvider>
+}

apps/v4/components/component-preview.tsx

@@ -14,6 +14,8 @@ export function ComponentPreview({
   hideCode = false,
   chromeLessOnMobile = false,
   styleName = "new-york-v4",
+  direction = "ltr",
+  caption,
   ...props
 }: React.ComponentProps<"div"> & {
   name: string
@@ -24,9 +26,18 @@ export function ComponentPreview({
   type?: "block" | "component" | "example"
   chromeLessOnMobile?: boolean
   previewClassName?: string
+  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") {
-    return (
+    const content = (
       <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-xl border md:-mx-1">
         <Image
           src={`/r/styles/new-york-v4/${name}-light.png`}
@@ -47,6 +58,19 @@ export function ComponentPreview({
         </div>
       </div>
     )
+
+    if (finalCaption) {
+      return (
+        <figure className="flex flex-col gap-4">
+          {content}
+          <figcaption className="text-muted-foreground text-center text-sm">
+            {finalCaption}
+          </figcaption>
+        </figure>
+      )
+    }
+
+    return content
   }
 
   const Component = getRegistryComponent(name, styleName)
@@ -63,7 +87,7 @@ export function ComponentPreview({
     )
   }
 
-  return (
+  const content = (
     <ComponentPreviewTabs
       className={className}
       previewClassName={previewClassName}
@@ -86,9 +110,27 @@ export function ComponentPreview({
         />
       }
       chromeLessOnMobile={chromeLessOnMobile}
+      direction={direction}
+      styleName={styleName}
       {...props}
     />
   )
+
+  if (finalCaption) {
+    return (
+      <figure
+        data-hide-code={hideCode}
+        className="flex flex-col data-[hide-code=true]:gap-4"
+      >
+        {content}
+        <figcaption className="text-muted-foreground -mt-8 text-center text-sm data-[hide-code=true]:mt-0">
+          {finalCaption}
+        </figcaption>
+      </figure>
+    )
+  }
+
+  return content
 }
 
 function DynamicComponent({

apps/v4/components/docs-sidebar.tsx

@@ -32,6 +32,10 @@ const TOP_LEVEL_SECTIONS = [
     name: "Directory",
     href: "/docs/directory",
   },
+  {
+    name: "RTL",
+    href: "/docs/rtl",
+  },
   {
     name: "MCP Server",
     href: "/docs/mcp",
@@ -91,6 +95,12 @@ export function DocsSidebar({
                       <Link href={href}>
                         <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
                         {name}
+                        {PAGES_NEW.includes(href) && (
+                          <span
+                            className="flex size-2 rounded-full bg-blue-500"
+                            title="New"
+                          />
+                        )}
                       </Link>
                     </SidebarMenuButton>
                   </SidebarMenuItem>

apps/v4/components/language-selector.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+import { cn } from "@/lib/utils"
+
+export type Language = "en" | "ar" | "he"
+
+export type Direction = "ltr" | "rtl"
+
+export type Translations<
+  T extends Record<string, string> = Record<string, string>,
+> = Record<
+  Language,
+  {
+    dir: Direction
+    values: T
+  }
+>
+
+export const languageOptions = [
+  { value: "en", label: "English" },
+  { value: "ar", label: "Arabic (العربية)" },
+  { value: "he", label: "Hebrew (עברית)" },
+] as const
+
+type LanguageContextType = {
+  language: Language
+  setLanguage: (language: Language) => void
+}
+
+const LanguageContext = React.createContext<LanguageContextType | undefined>(
+  undefined
+)
+
+export function LanguageProvider({
+  children,
+  defaultLanguage = "ar",
+}: {
+  children: React.ReactNode
+  defaultLanguage?: Language
+}) {
+  const [language, setLanguage] = React.useState<Language>(defaultLanguage)
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage }}>
+      {children}
+    </LanguageContext.Provider>
+  )
+}
+
+export function useLanguageContext() {
+  const context = React.useContext(LanguageContext)
+  return context
+}
+
+export function useTranslation<T extends Record<string, string>>(
+  translations: Translations<T>,
+  defaultLanguage: Language = "ar"
+) {
+  const context = useLanguageContext()
+  const [localLanguage, setLocalLanguage] =
+    React.useState<Language>(defaultLanguage)
+
+  const language = context?.language ?? localLanguage
+  const setLanguage = context?.setLanguage ?? setLocalLanguage
+
+  const { dir, values: t } = translations[language]
+  return { language, setLanguage, dir, t }
+}
+
+export interface LanguageSelectorProps {
+  value: Language
+  onValueChange: (value: Language) => void
+}
+
+export function LanguageSelector({
+  value,
+  onValueChange,
+  className,
+}: LanguageSelectorProps & {
+  className?: string
+}) {
+  return (
+    <Select
+      items={languageOptions}
+      value={value}
+      onValueChange={(value) => onValueChange(value as Language)}
+    >
+      <SelectTrigger
+        size="sm"
+        className={cn("absolute top-4 right-4 z-50 w-36", className)}
+        dir="ltr"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent
+        dir="ltr"
+        className="data-closed:animate-none data-open:animate-none"
+      >
+        <SelectGroup>
+          {languageOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}

apps/v4/components/mobile-nav.tsx

@@ -30,6 +30,10 @@ const TOP_LEVEL_SECTIONS = [
     name: "Directory",
     href: "/docs/directory",
   },
+  {
+    name: "RTL",
+    href: "/docs/rtl",
+  },
   {
     name: "MCP Server",
     href: "/docs/mcp",

apps/v4/content/docs/(root)/meta.json

@@ -6,6 +6,7 @@
     "components-json",
     "theming",
     "[Dark Mode](/docs/dark-mode)",
+    "[RTL](/docs/rtl)",
     "[CLI](/docs/cli)",
     "monorepo",
     "typography",

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

@@ -0,0 +1,94 @@
+---
+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/components/base/accordion.mdx

@@ -137,6 +137,17 @@ Wrap the `Accordion` in a `Card` component.
   previewClassName="*:data-[slot=accordion]:max-w-sm h-[435px]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="accordion-rtl"
+  direction="rtl"
+  previewClassName="h-96"
+/>
+
 ## API Reference
 
 See the [Base UI](https://base-ui.com/react/components/accordion#api-reference) documentation for more information.

apps/v4/content/docs/components/base/alert-dialog.mdx

@@ -146,6 +146,17 @@ Use the `AlertDialogAction` component to add a destructive action button to the
   previewClassName="h-56"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="alert-dialog-rtl"
+  direction="rtl"
+  previewClassName="h-56"
+/>
+
 ## API Reference
 
 ### size

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

@@ -109,6 +109,17 @@ You can customize the alert colors by adding custom classes such as `bg-amber-50
   previewClassName="h-auto sm:h-72 p-6"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="alert-rtl"
+  direction="rtl"
+  previewClassName="h-auto sm:h-72 p-6"
+/>
+
 ## API Reference
 
 ### Alert

apps/v4/content/docs/components/base/aspect-ratio.mdx

@@ -79,6 +79,17 @@ A portrait aspect ratio component using the `ratio={9 / 16}` prop. This is usefu
   previewClassName="h-96"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="aspect-ratio-rtl"
+  direction="rtl"
+  previewClassName="h-96"
+/>
+
 ## API Reference
 
 ### AspectRatio

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

@@ -129,6 +129,17 @@ You can use the `Avatar` component as a trigger for a dropdown menu.
 
 <ComponentPreview styleName="base-nova" name="avatar-dropdown" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="avatar-rtl"
+  direction="rtl"
+  previewClassName="h-72"
+/>
+
 ## API Reference
 
 ### Avatar

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

@@ -85,6 +85,12 @@ You can customize the colors of a badge by adding custom classes such as `bg-gre
 
 <ComponentPreview styleName="base-nova" name="badge-colors" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="badge-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Badge

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

@@ -116,6 +116,17 @@ To use a custom link component from your routing library, you can use the `rende
 
 <ComponentPreview styleName="base-nova" name="breadcrumb-link" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="breadcrumb-rtl"
+  direction="rtl"
+  previewClassName="p-2"
+/>
+
 ## API Reference
 
 ### Breadcrumb

apps/v4/content/docs/components/base/button-group.mdx

@@ -148,6 +148,16 @@ Use with a `Popover` component.
 
 <ComponentPreview styleName="base-nova" name="button-group-popover" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="button-group-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 ### ButtonGroup

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

@@ -143,6 +143,12 @@ Remember to set the `nativeButton` prop to `false` if you're returning an elemen
 
 <ComponentPreview styleName="base-nova" name="button-render" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="button-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Button

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

@@ -501,6 +501,17 @@ 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).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="calendar-rtl"
+  direction="rtl"
+  previewClassName="h-96"
+/>
+
 ## API Reference
 
 See the [React DayPicker](https://react-day-picker.js.org) documentation for more information on the `Calendar` component API.

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

@@ -99,6 +99,17 @@ Add an image before the card header to create a card with an image.
   previewClassName="h-[32rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="card-rtl"
+  direction="rtl"
+  previewClassName="h-[30rem]"
+/>
+
 ## API Reference
 
 ### Card

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

@@ -285,6 +285,17 @@ export function Example() {
   previewClassName="sm:h-[32rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="carousel-rtl"
+  direction="rtl"
+  previewClassName="h-80 sm:h-[32rem]"
+/>
+
 ## 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/checkbox.mdx

@@ -122,6 +122,17 @@ Use multiple fields to create a checkbox list.
   previewClassName="p-4 md:p-8"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="checkbox-rtl"
+  direction="rtl"
+  previewClassName="h-80"
+/>
+
 ## API Reference
 
 See the [Base UI](https://base-ui.com/react/components/checkbox#api-reference) documentation for more information.

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

@@ -118,6 +118,16 @@ Use nested collapsibles to build a file tree.
   previewClassName="h-[36rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="collapsible-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 See the [Base UI](https://base-ui.com/react/components/collapsible#api-reference) documentation for more information.

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

@@ -256,6 +256,12 @@ You can add an addon to the combobox by using the `InputGroupAddon` component in
 
 <ComponentPreview styleName="base-nova" name="combobox-input-group" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="combobox-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI](https://base-ui.com/react/components/combobox#api-reference) documentation for more information.

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

@@ -120,6 +120,18 @@ Scrollable command menu with multiple items.
 
 <ComponentPreview styleName="base-nova" name="command-scrollable" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="command-rtl"
+  direction="rtl"
+  align="start"
+  previewClassName="h-[24.5rem]"
+/>
+
 ## API Reference
 
 See the [cmdk](https://github.com/dip/cmdk) documentation for more information.

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

@@ -135,6 +135,16 @@ Control submenu placement with side and align props.
 
 <ComponentPreview styleName="base-nova" name="context-menu-sides" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="context-menu-rtl"
+  direction="rtl"
+/>
+
 ## 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/date-picker.mdx

@@ -95,3 +95,13 @@ A date picker component with a time input field for selecting a time.
 This component uses the `chrono-node` library to parse natural language dates.
 
 <ComponentPreview styleName="base-nova" name="date-picker-natural-language" />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="date-picker-rtl"
+  direction="rtl"
+/>

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

@@ -111,6 +111,12 @@ Long content can scroll while the header stays in view.
 
 <ComponentPreview styleName="base-nova" name="dialog-scrollable-content" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="dialog-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI](https://base-ui.com/react/components/dialog#api-reference) documentation for more information.

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

@@ -108,6 +108,12 @@ You can combine the `Dialog` and `Drawer` components to create a responsive dial
 
 <ComponentPreview styleName="base-nova" name="drawer-dialog" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="drawer-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Vaul documentation](https://vaul.emilkowal.ski/getting-started) for the full API reference.

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

@@ -160,6 +160,16 @@ A richer example combining groups, icons, and submenus.
 
 <ComponentPreview styleName="base-nova" name="dropdown-menu-complex" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="dropdown-menu-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 See the [Base UI documentation](https://base-ui.com/react/components/dropdown-menu) for the full API reference.

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

@@ -127,6 +127,12 @@ You can add an `InputGroup` component to the `EmptyContent` component.
   previewClassName="h-96 p-0"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="empty-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Empty

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

@@ -162,6 +162,17 @@ Stack `Field` components with `FieldGroup`. Add `FieldSeparator` to divide them.
   previewClassName="h-96"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="field-rtl"
+  direction="rtl"
+  previewClassName="h-[800px] p-6 md:h-[850px]"
+/>
+
 ## Responsive Layout
 
 - **Vertical fields:** Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.

apps/v4/content/docs/components/base/hover-card.mdx

@@ -120,6 +120,17 @@ Use the `side` and `align` props on `HoverCardContent` to control placement.
   previewClassName="h-[22rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="hover-card-rtl"
+  direction="rtl"
+  previewClassName="h-80"
+/>
+
 ## API Reference
 
 See the [Base UI](https://base-ui.com/react/components/hover-card#api-reference) documentation for more information.

apps/v4/content/docs/components/base/input-group.mdx

@@ -191,6 +191,17 @@ Here's an example of a custom resizable textarea from a third-party library.
   previewClassName="h-56"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-group-rtl"
+  direction="rtl"
+  previewClassName="h-[30rem]"
+/>
+
 ## API Reference
 
 ### InputGroup

apps/v4/content/docs/components/base/input-otp.mdx

@@ -142,6 +142,12 @@ Use `REGEXP_ONLY_DIGITS_AND_CHARS` to accept both letters and numbers.
   previewClassName="h-[30rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="input-otp-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [input-otp](https://input-otp.rodz.dev) documentation for more information.

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

@@ -188,3 +188,14 @@ A full form example with multiple inputs, a select, and a button.
   name="input-form"
   previewClassName="h-[32rem]"
 />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-rtl"
+  direction="rtl"
+  previewClassName="*:max-w-xs"
+/>

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

@@ -161,6 +161,12 @@ Use the `render` prop to render the item as a link. The hover and focus states w
 
 <ComponentPreview styleName="base-nova" name="item-dropdown" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="item-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Item

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

@@ -79,6 +79,12 @@ You can use the `Kbd` component inside a `InputGroupAddon` component to display
 
 <ComponentPreview styleName="base-nova" name="kbd-input-group" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="kbd-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Kbd

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

@@ -10,6 +10,12 @@ 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.

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

@@ -112,6 +112,12 @@ Use `MenubarSub`, `MenubarSubTrigger`, and `MenubarSubContent` for nested menus.
 
 <ComponentPreview styleName="base-nova" name="menubar-icons" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="menubar-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Menubar](https://base-ui.com/react/components/menubar#api-reference) documentation.

apps/v4/content/docs/components/base/native-select.mdx

@@ -95,6 +95,16 @@ Use `aria-invalid` to show validation errors and the `data-invalid` attribute to
 - Use `NativeSelect` for native browser behavior, better performance, or mobile-optimized dropdowns.
 - Use `Select` for custom styling, animations, or complex interactions.
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="native-select-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 ### NativeSelect

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

@@ -37,7 +37,7 @@ npx shadcn@latest add navigation-menu
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @base-ui-components/react
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
@@ -108,6 +108,17 @@ export function NavigationMenuDemo() {
 }
 ```
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="navigation-menu-rtl"
+  direction="rtl"
+  previewClassName="h-96"
+/>
+
 ## API Reference
 
 See the [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#api-reference) documentation for more information.

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

@@ -127,3 +127,9 @@ const PaginationLink = ({...props }: ) => (
 **Note:** We are making updates to the cli to automatically do this for you.
 
 </Callout>
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="pagination-rtl" direction="rtl" />

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

@@ -99,6 +99,12 @@ A popover with form fields inside.
 
 <ComponentPreview styleName="base-nova" name="popover-form" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="popover-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Popover](https://base-ui.com/react/components/popover#api-reference) documentation.

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

@@ -76,6 +76,12 @@ A progress bar that can be controlled by a slider.
 
 <ComponentPreview styleName="base-nova" name="progress-controlled" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="progress-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Progress](https://base-ui.com/react/components/progress#api-reference) documentation.

apps/v4/content/docs/components/base/radio-group.mdx

@@ -104,6 +104,16 @@ Use `aria-invalid` on `RadioGroupItem` and `data-invalid` on `Field` to show val
 
 <ComponentPreview styleName="base-nova" name="radio-group-invalid" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="radio-group-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 See the [Base UI Radio Group](https://base-ui.com/react/components/radio-group#api-reference) documentation.

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

@@ -92,6 +92,12 @@ Use the `withHandle` prop on `ResizableHandle` to show a visible handle.
 
 <ComponentPreview styleName="base-nova" name="resizable-handle" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="resizable-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) documentation.

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

@@ -78,4 +78,16 @@ Use `ScrollBar` with `orientation="horizontal"` for horizontal scrolling.
 
 ## API Reference
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="scroll-area-rtl"
+  direction="rtl"
+/>
+
+## API Reference
+
 See the [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area#api-reference) documentation.

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

@@ -117,6 +117,12 @@ Add the `data-invalid` attribute to the `Field` component and the `aria-invalid`
 
 <ComponentPreview styleName="base-nova" name="select-invalid" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="select-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Select](https://base-ui.com/react/components/select#api-reference) documentation.

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

@@ -82,6 +82,12 @@ Horizontal separators between list items.
 
 <ComponentPreview styleName="base-nova" name="separator-list" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="separator-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Separator](https://base-ui.com/react/components/separator#api-reference) documentation.

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

@@ -5,12 +5,12 @@ base: base
 component: true
 ---
 
-<figure className="flex flex-col gap-4">
+<ComponentPreview
-  <ComponentPreview styleName="base-nova" name="sidebar-demo" type="block" />
+  styleName="base-nova"
-  <figcaption className="text-center text-sm text-gray-500">
+  name="sidebar-demo"
-    A sidebar that collapses to icons.
+  type="block"
-  </figcaption>
+  caption="A sidebar that collapses to icons."
-</figure>
+/>
 
 Sidebars are one of the most complex components to build. They are central
 to any application and often contain a lot of moving parts.

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

@@ -78,3 +78,9 @@ import { Skeleton } from "@/components/ui/skeleton"
 ### Table
 
 <ComponentPreview styleName="base-nova" name="skeleton-table" />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="skeleton-rtl" direction="rtl" />

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

@@ -92,6 +92,12 @@ Use the `disabled` prop to disable the slider.
 
 <ComponentPreview styleName="base-nova" name="slider-disabled" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="slider-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Slider](https://base-ui.com/react/components/slider#api-reference) documentation.

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

@@ -105,3 +105,9 @@ Add a spinner to a badge to indicate a loading state. Remember to use the `data-
 ### Empty
 
 <ComponentPreview styleName="base-nova" name="spinner-empty" />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="spinner-rtl" direction="rtl" />

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

@@ -92,6 +92,12 @@ Use the `size` prop to change the size of the switch.
 
 <ComponentPreview styleName="base-nova" name="switch-sizes" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="switch-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Switch](https://base-ui.com/react/components/switch#api-reference) documentation.

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

@@ -104,3 +104,9 @@ You can use the `<Table />` component to build more complex data tables. Combine
 See the [Data Table](/docs/components/data-table) documentation for more information.
 
 You can also see an example of a data table in the [Tasks](/examples/tasks) demo.
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="table-rtl" direction="rtl" />

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

@@ -95,6 +95,17 @@ Use `orientation="vertical"` for vertical tabs.
 
 <ComponentPreview styleName="base-nova" name="tabs-icons" />
 
+## RTL
+
+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]"
+/>
+
 ## API Reference
 
 See the [Base UI Tabs](https://base-ui.com/react/components/tabs#api-reference) documentation.

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

@@ -98,3 +98,9 @@ Pair with `Button` to create a textarea with a submit button.
   name="textarea-button"
   previewClassName="*:max-w-xs"
 />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="textarea-rtl" direction="rtl" />

apps/v4/content/docs/components/base/toggle-group.mdx

@@ -96,6 +96,16 @@ Use `orientation="vertical"` for vertical toggle groups.
 
 <ComponentPreview styleName="base-nova" name="toggle-group-disabled" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="toggle-group-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 See the [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group#api-reference) documentation.

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

@@ -33,7 +33,7 @@ npx shadcn@latest add toggle
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @base-ui-components/react
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
@@ -84,6 +84,12 @@ Use the `size` prop to change the size of the toggle.
 
 <ComponentPreview styleName="base-nova" name="toggle-disabled" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="toggle-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Toggle](https://base-ui.com/react/components/toggle#api-reference) documentation.

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

@@ -33,7 +33,7 @@ npx shadcn@latest add tooltip
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @base-ui-components/react
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
@@ -89,6 +89,12 @@ Show a tooltip on a disabled button by wrapping it with a span.
 
 <ComponentPreview styleName="base-nova" name="tooltip-disabled" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="base-nova" name="tooltip-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Base UI Tooltip](https://base-ui.com/react/components/tooltip#api-reference) documentation.

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

@@ -137,6 +137,17 @@ Wrap the `Accordion` in a `Card` component.
   previewClassName="*:data-[slot=accordion]:max-w-sm h-[32rem] md:h-[28rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="accordion-rtl"
+  direction="rtl"
+  previewClassName="h-96"
+/>
+
 ## API Reference
 
 See the [Radix UI](https://www.radix-ui.com/primitives/docs/components/accordion#api-reference) documentation for more information.

apps/v4/content/docs/components/radix/alert-dialog.mdx

@@ -146,6 +146,17 @@ Use the `AlertDialogAction` component to add a destructive action button to the
   previewClassName="h-56"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="alert-dialog-rtl"
+  direction="rtl"
+  previewClassName="h-56"
+/>
+
 ## API Reference
 
 ### size

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

@@ -113,6 +113,17 @@ You can customize the alert colors by adding custom classes such as `bg-amber-50
   previewClassName="h-auto sm:h-72 p-6"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="alert-rtl"
+  direction="rtl"
+  previewClassName="h-auto sm:h-72 p-6"
+/>
+
 ## API Reference
 
 ### Alert

apps/v4/content/docs/components/radix/aspect-ratio.mdx

@@ -82,6 +82,17 @@ A portrait aspect ratio component using the `ratio={9 / 16}` prop. This is usefu
   previewClassName="h-96"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="aspect-ratio-rtl"
+  direction="rtl"
+  previewClassName="h-96"
+/>
+
 ## API Reference
 
 ### AspectRatio

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

@@ -145,6 +145,17 @@ You can use the `Avatar` component as a trigger for a dropdown menu.
 
 <ComponentPreview styleName="radix-nova" name="avatar-dropdown" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="avatar-rtl"
+  direction="rtl"
+  previewClassName="h-72"
+/>
+
 ## API Reference
 
 ### Avatar

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

@@ -81,6 +81,12 @@ You can customize the colors of a badge by adding custom classes such as `bg-gre
 
 <ComponentPreview styleName="radix-nova" name="badge-colors" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="badge-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Badge

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

@@ -110,6 +110,17 @@ To use a custom link component from your routing library, you can use the `asChi
 
 <ComponentPreview styleName="radix-nova" name="breadcrumb-link" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="breadcrumb-rtl"
+  direction="rtl"
+  previewClassName="p-2"
+/>
+
 ## API Reference
 
 ### Breadcrumb

apps/v4/content/docs/components/radix/button-group.mdx

@@ -148,6 +148,16 @@ Use with a `Popover` component.
 
 <ComponentPreview styleName="radix-nova" name="button-group-popover" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="button-group-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 ### ButtonGroup

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

@@ -141,6 +141,12 @@ You can use the `asChild` prop on `<Button />` to make another component look li
 
 <ComponentPreview styleName="radix-nova" name="button-aschild" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="button-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Button

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

@@ -501,6 +501,17 @@ 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).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="calendar-rtl"
+  direction="rtl"
+  previewClassName="h-96"
+/>
+
 ## API Reference
 
 See the [React DayPicker](https://react-day-picker.js.org) documentation for more information on the `Calendar` component API.

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

@@ -99,6 +99,17 @@ Add an image before the card header to create a card with an image.
   previewClassName="h-[32rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="card-rtl"
+  direction="rtl"
+  previewClassName="h-[30rem]"
+/>
+
 ## API Reference
 
 ### Card

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

@@ -285,6 +285,17 @@ export function Example() {
   previewClassName="sm:h-[32rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="carousel-rtl"
+  direction="rtl"
+  previewClassName="h-80 sm:h-[32rem]"
+/>
+
 ## 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/checkbox.mdx

@@ -122,6 +122,17 @@ Use multiple fields to create a checkbox list.
   previewClassName="p-4 md:p-8"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="checkbox-rtl"
+  direction="rtl"
+  previewClassName="h-80"
+/>
+
 ## API Reference
 
 See the [Radix UI](https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference) documentation for more information.

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

@@ -122,6 +122,16 @@ Use nested collapsibles to build a file tree.
   previewClassName="h-[36rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="collapsible-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 See the [Radix UI](https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference) documentation for more information.

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

@@ -254,7 +254,13 @@ You can trigger the combobox from a button or any other component by using the `
 
 You can add an addon to the combobox by using the `InputGroupAddon` component inside the `ComboboxInput`.
 
-<ComponentPreview styleName="base-nova" name="combobox-input-group" />
+<ComponentPreview styleName="radix-nova" name="combobox-input-group" />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="combobox-rtl" direction="rtl" />
 
 ## API Reference
 

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

@@ -120,6 +120,18 @@ Scrollable command menu with multiple items.
 
 <ComponentPreview styleName="radix-nova" name="command-scrollable" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="command-rtl"
+  direction="rtl"
+  align="start"
+  previewClassName="h-[24.5rem]"
+/>
+
 ## API Reference
 
 See the [cmdk](https://github.com/dip/cmdk) documentation for more information.

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

@@ -135,6 +135,16 @@ 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).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="context-menu-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 See the [Radix UI](https://www.radix-ui.com/docs/primitives/components/context-menu#api-reference) documentation for more information.

apps/v4/content/docs/components/radix/date-picker.mdx

@@ -93,3 +93,13 @@ A date picker component with a time input field for selecting a time.
 This component uses the `chrono-node` library to parse natural language dates.
 
 <ComponentPreview styleName="radix-nova" name="date-picker-natural-language" />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="date-picker-rtl"
+  direction="rtl"
+/>

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

@@ -111,6 +111,12 @@ Long content can scroll while the header stays in view.
 
 <ComponentPreview styleName="radix-nova" name="dialog-scrollable-content" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="dialog-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Radix UI](https://www.radix-ui.com/docs/primitives/components/dialog#api-reference) documentation for more information.

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

@@ -108,6 +108,12 @@ You can combine the `Dialog` and `Drawer` components to create a responsive dial
 
 <ComponentPreview styleName="radix-nova" name="drawer-dialog" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="drawer-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Vaul documentation](https://vaul.emilkowal.ski/getting-started) for the full API reference.

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

@@ -163,6 +163,16 @@ A richer example combining groups, icons, and submenus.
 
 <ComponentPreview styleName="radix-nova" name="dropdown-menu-complex" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="dropdown-menu-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 See the [Radix UI documentation](https://www.radix-ui.com/docs/primitives/components/dropdown-menu) for the full API reference.

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

@@ -127,6 +127,12 @@ You can add an `InputGroup` component to the `EmptyContent` component.
   previewClassName="h-96 p-0"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="empty-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Empty

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

@@ -162,6 +162,17 @@ Stack `Field` components with `FieldGroup`. Add `FieldSeparator` to divide them.
   previewClassName="h-96"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="field-rtl"
+  direction="rtl"
+  previewClassName="h-[800px] p-6 md:h-[850px]"
+/>
+
 ## Responsive Layout
 
 - **Vertical fields:** Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.

apps/v4/content/docs/components/radix/hover-card.mdx

@@ -118,6 +118,17 @@ Use the `side` and `align` props on `HoverCardContent` to control placement.
   previewClassName="h-[22rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="hover-card-rtl"
+  direction="rtl"
+  previewClassName="h-80"
+/>
+
 ## API Reference
 
 See the [Radix UI](https://www.radix-ui.com/docs/primitives/components/hover-card#api-reference) documentation for more information.

apps/v4/content/docs/components/radix/input-group.mdx

@@ -191,6 +191,17 @@ Here's an example of a custom resizable textarea from a third-party library.
   previewClassName="h-56"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="input-group-rtl"
+  direction="rtl"
+  previewClassName="h-[30rem]"
+/>
+
 ## API Reference
 
 ### InputGroup

apps/v4/content/docs/components/radix/input-otp.mdx

@@ -142,6 +142,12 @@ Use `REGEXP_ONLY_DIGITS_AND_CHARS` to accept both letters and numbers.
   previewClassName="h-[30rem]"
 />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="input-otp-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [input-otp](https://input-otp.rodz.dev) documentation for more information.

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

@@ -188,3 +188,14 @@ A full form example with multiple inputs, a select, and a button.
   name="input-form"
   previewClassName="h-[32rem]"
 />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="input-rtl"
+  direction="rtl"
+  previewClassName="*:max-w-xs"
+/>

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

@@ -163,6 +163,12 @@ Use the `asChild` prop to render the item as a link. The hover and focus states
 
 <ComponentPreview styleName="radix-nova" name="item-dropdown" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="item-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Item

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

@@ -79,6 +79,12 @@ You can use the `Kbd` component inside a `InputGroupAddon` component to display
 
 <ComponentPreview styleName="radix-nova" name="kbd-input-group" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="kbd-rtl" direction="rtl" />
+
 ## API Reference
 
 ### Kbd

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

@@ -10,6 +10,12 @@ 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.

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

@@ -112,6 +112,12 @@ Use `MenubarSub`, `MenubarSubTrigger`, and `MenubarSubContent` for nested menus.
 
 <ComponentPreview styleName="radix-nova" name="menubar-icons" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="menubar-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Radix UI Menubar](https://www.radix-ui.com/docs/primitives/components/menubar#api-reference) documentation.

apps/v4/content/docs/components/radix/native-select.mdx

@@ -95,6 +95,16 @@ Use `aria-invalid` to show validation errors and the `data-invalid` attribute to
 - Use `NativeSelect` for native browser behavior, better performance, or mobile-optimized dropdowns.
 - Use `Select` for custom styling, animations, or complex interactions.
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="native-select-rtl"
+  direction="rtl"
+/>
+
 ## API Reference
 
 ### NativeSelect

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

@@ -105,6 +105,17 @@ export function NavigationMenuDemo() {
 }
 ```
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="navigation-menu-rtl"
+  direction="rtl"
+  previewClassName="h-96"
+/>
+
 ## API Reference
 
 See the [Radix UI Navigation Menu](https://www.radix-ui.com/docs/primitives/components/navigation-menu#api-reference) documentation for more information.

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

@@ -127,3 +127,13 @@ const PaginationLink = ({...props }: ) => (
 **Note:** We are making updates to the cli to automatically do this for you.
 
 </Callout>
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="pagination-rtl"
+  direction="rtl"
+/>

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

@@ -99,6 +99,12 @@ A popover with form fields inside.
 
 <ComponentPreview styleName="radix-nova" name="popover-form" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="popover-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Radix UI Popover](https://www.radix-ui.com/docs/primitives/components/popover#api-reference) documentation.

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

@@ -76,6 +76,12 @@ A progress bar that can be controlled by a slider.
 
 <ComponentPreview styleName="radix-nova" name="progress-controlled" />
 
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="progress-rtl" direction="rtl" />
+
 ## API Reference
 
 See the [Radix UI Progress](https://www.radix-ui.com/docs/primitives/components/progress#api-reference) documentation.