TanStack Start

Starting a new project? Use JGuang UI installation for a fully configured TanStack Start app with custom themes, Base UI or Radix, and icon libraries.

Create Project

Create a new project using the --rtl flag and the start 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. Update lang="ar" to your target language.

Then wrap your app with the DirectionProvider component with the direction="rtl" prop in your __root.tsx:

import { DirectionProvider } from "@/components/ui/direction"

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <html lang="ar" dir="rtl">
      <head>
        <Meta />
      </head>
      <body>
        <DirectionProvider direction="rtl">{children}</DirectionProvider>
        <Scripts />
      </body>
    </html>
  )
}

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