Direction

A provider that sets the text direction (ltr or rtl) for all Radix UI components within its subtree. Useful for internationalised applications that support right-to-left languages such as Arabic, Hebrew, or Persian.

Installation

1. Install the dependency:


npm install @radix-ui/react-direction

2. Copy and paste the following code into your project:


// components/ui/direction.tsx
"use client"
 
import * as React from "react"
import { Direction as DirectionPrimitive } from "@radix-ui/react-direction"
 
type Direction = "ltr" | "rtl"
 
interface DirectionProviderProps {
  children: React.ReactNode
  dir: Direction
}
 
function DirectionProvider({ children, dir }: DirectionProviderProps) {
  return (
    <DirectionPrimitive dir={dir}>
      {children}
    </DirectionPrimitive>
  )
}
 
export { DirectionProvider }
export type { Direction }

Usage

Wrap your app (or a subtree) with DirectionProvider and pass the desired direction:


// 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 dir="rtl">
          {children}
        </DirectionProvider>
      </body>
    </html>
  )
}

All Radix UI primitives (dropdowns, popovers, tooltips, etc.) nested inside will automatically adapt their animations and positioning to the specified direction.

RTL-specific adjustments

Some components need a dir prop passed directly when used inside a portal, as portal-rendered content is not always a descendant of the provider in the DOM tree:


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

The same applies to Tooltip, DropdownMenu, Select, Sheet, and other overlay components.

API Reference

DirectionProvider

Prop	Type	Default	Description
`dir`	`"ltr" \| "rtl"`	—	The text direction to apply to all child Radix primitives.
`children`	`React.ReactNode`	—	The subtree to provide direction to.