Vite - Shadcn Ui — ContextQMD

Starting a new project? Use shadcn/create 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.

bash

npx shadcn@latest create --template vite --rtl

This will create a components.json file with the rtl: true flag.

json

{
  "$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

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

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 is a great font family for this and it pairs well with Inter and Geist.

Install the font using Fontsource:

bash

npm install @fontsource-variable/noto-sans-arabic

Import the font in your index.css:

css

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