Next.js

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

Wrap your application with the DirectionProvider component with the direction="rtl" prop.

Then add the dir="rtl" and lang="ar" attributes to the html tag. Update lang="ar" to your target language.

app/layout.tsx

import { DirectionProvider } from "@/components/ui/direction"
export default function RootLayout({  children,}: {  children: React.ReactNode}) {  return (    <html lang="ar" dir="rtl">      <body>        <DirectionProvider direction="rtl">{children}</DirectionProvider>      </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 (Our default font).

app/layout.tsx

import { Noto_Sans_Arabic } from "next/font/google"
import { DirectionProvider } from "@/components/ui/direction"
const fontSans = Noto_Sans_Arabic({  subsets: ["arabic"],  variable: "--font-sans",})
export default function RootLayout({  children,}: {  children: React.ReactNode}) {  return (    <html lang="ar" dir="rtl" className={fontSans.variable}>      <body>        <DirectionProvider direction="rtl">{children}</DirectionProvider>      </body>    </html>  )}

For other languages, eg. Hebrew, you can use the Noto_Sans_Hebrew font.