Vite

Starting a new project? Use JGuang UI installation 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 JGuang UI installation.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

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

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

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.

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

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:

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

Import the font in your index.css:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

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.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.