---
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>
