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:

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:

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