RTL

Right-to-left support for Another UI components.

Another UI components work in right-to-left layouts. Text alignment, positioning and directional styles adapt for languages like Arabic, Hebrew and Persian.

تسجيل الدخول إلى حسابك

أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك

A card component in RTL mode.

Turn on RTL in components.json

Add "rtl": true to your components.json. Components you add after this use logical classes, so left-* becomes start-*, right-* becomes end-*, and directional animations like slide-in-from-right become slide-in-from-end.

components.json

{
  "rtl": true
}

Add the Direction component


pnpm dlx shadcn@latest add https://anotherui.dev/r/direction.json

Set the direction

Add dir="rtl" and your language to the html tag, then wrap your app in DirectionProvider.

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>
  )
}

In Vite, set dir and lang on the html tag in index.html and wrap <App /> in src/main.tsx the same way.

Pick a font

Use a font that supports your language. Noto has Arabic, Hebrew and Persian families that pair well with most sans fonts.

Icons

Arrows and carets that point a direction should flip. Add rtl:rotate-180 to them.

<ArrowRightIcon weight="bold" className="rtl:rotate-180" />

Portals

Popovers, tooltips and menus render in a portal. If one slides in from the wrong side, pass dir to its content.

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

Components to check by hand

These components need a small manual change for RTL. See the RTL section on each page.

Dark Mode llms.txt

On This Page

Turn on RTL in components.json Add the Direction component Set the direction Pick a font Icons Portals Components to check by hand