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.