snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

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

@@ -0,0 +1,107 @@
+---
+title: Vite
+description: Create a new Vite project with RTL support.
+---
+
+<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
+
+**Starting a new project?** Use [shadcn/create](/create?template=vite&base=base&rtl=true) for a fully configured Vite app with custom themes, Base UI or Radix, and icon libraries.
+
+</Callout>
+
+<Steps>
+
+### Create Project
+
+Create a new project using the `--rtl` flag and the `vite` template.
+
+**You can skip this step if you have already created a project using [shadcn/create](/create?template=vite&base=base&rtl=true).**
+
+```bash
+npx shadcn@latest create --template vite --rtl
+```
+
+This will create a `components.json` file with the `rtl: true` flag.
+
+```json title="components.json" showLineNumbers {4}
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rtl": true
+}
+```
+
+### Add DirectionProvider
+
+Add the `dir="rtl"` and `lang="ar"` attributes to the `html` tag in your `index.html`. Update `lang="ar"` to your target language.
+
+```html title="index.html" showLineNumbers {2}
+<!doctype html>
+<html lang="ar" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+```
+
+Then wrap your app with the `DirectionProvider` component with the `direction="rtl"` prop in your `main.tsx`:
+
+```tsx title="src/main.tsx" showLineNumbers {4,12-13}
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+
+import { DirectionProvider } from "@/components/ui/direction"
+
+import App from "./App"
+
+import "./index.css"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <DirectionProvider direction="rtl">
+      <App />
+    </DirectionProvider>
+  </StrictMode>
+)
+```
+
+### Add Font
+
+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.
+
+Install the font using [Fontsource](https://fontsource.org/fonts/noto-sans-arabic):
+
+```bash
+npm install @fontsource-variable/noto-sans-arabic
+```
+
+Import the font in your `index.css`:
+
+```css title="src/index.css" showLineNumbers {4,7}
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/noto-sans-arabic";
+
+@theme inline {
+  --font-sans: "Noto Sans Arabic Variable", sans-serif;
+}
+```
+
+For other languages, eg. Hebrew, you can use `@fontsource-variable/noto-sans-hebrew`.
+
+### Add Components
+
+You are now ready to add components to your project. The CLI will take care of handling RTL support for you.
+
+```bash
+npx shadcn@latest add item
+```
+
+</Steps>