RTL

shadcn/ui components have first-class support for right-to-left (RTL) layouts. Text alignment, positioning, and directional styles automatically adapt for languages like Arabic, Hebrew, and Persian. When you install components, the CLI automatically transforms physical positioning classes to logical equivalents, so your components work seamlessly in both LTR and RTL contexts.

Getting Started

How it works

When you add components with rtl: true set in your components.json, the shadcn CLI automatically transforms classes and props to be RTL compatible:

Physical positioning classes like left-* and right-* are converted to logical equivalents like start-* and end-*.
Directional props are updated to use logical values.
Text alignment and spacing classes are adjusted accordingly.
Supported icons are automatically flipped using rtl:rotate-180.

Supported Styles

Automatic RTL transformation via the CLI is only available for projects created using shadcn create with the new styles (base-nova, radix-nova, etc.). For other styles, see the Migration Guide.

Font Recommendations

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"

const notoSansArabic = Noto_Sans_Arabic({
  subsets: ["arabic"],
  variable: "--font-sans",
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ar" dir="rtl">
      <body className={notoSansArabic.variable}>
        {children}
      </body>
    </html>
  )
}

import "@fontsource/noto-sans-arabic"

function App() {
  return (
    <div dir="rtl" style={{ fontFamily: "Noto Sans Arabic, sans-serif" }}>
      {/* Your app */}
    </div>
  )
}

Animations

The CLI also handles animation classes, automatically transforming physical directional animations to their logical equivalents. For example, slide-in-from-right becomes slide-in-from-end. This ensures animations like dropdowns, popovers, and tooltips animate in the correct direction based on the document’s text direction.

There is a known issue with the tw-animate-css library where the logical slide utilities are not working as expected. For now, make sure you pass in the dir prop to portal elements.

showLineNumbers

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent dir="rtl">
    <div>Content</div>
  </PopoverContent>
</Popover>

showLineNumbers

<Tooltip>
  <TooltipTrigger>Open</TooltipTrigger>
  <TooltipContent dir="rtl">
    <div>Content</div>
  </TooltipContent>
</Tooltip>

Migrating existing components

If you have existing components installed before enabling RTL, you can migrate them using the CLI as follows:

Get Started

Installation

Customization

Guides

Integrations

Getting Started

How it works

Supported Styles

Font Recommendations

Animations

Migrating existing components

​Getting Started

​How it works

​Supported Styles

​Font Recommendations

​Animations

​Migrating existing components

Getting Started

How it works

Supported Styles

Font Recommendations

Animations

Migrating existing components