---
title: Vite
description: Create a new Vite project with RTL support.
---
**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.
### 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}
Vite App
```
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(
)
```
### 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
```