Next.js

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

Create Project

Create a new project using the --rtl flag and the next 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

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.

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 and Geist.

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.

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.