TanStack Start

Install Direction Component

Install it from shadcn/ui right away. Make sure it installs base-ui components.

pnpm dlx shadcn@latest add direction

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:

src/routes/__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:

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

Import the font in your styles.css:

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