Logo

Right-to-Left (RTL) Support

Right-to-Left (RTL) is a text direction used by languages such as Arabic, Hebrew, Persian, and Urdu. The Blok design system provides automatic RTL support based on the user's browser language preference. When an RTL language is detected, the entire UI layout flips horizontally - sidebars move to the opposite side, text aligns to the right, and navigation elements flip direction. Code blocks always remain LTR for readability.

Supported RTL Languages

The following languages are automatically detected as RTL:

ar
Arabic
he
Hebrew
fa
Persian/Farsi
ur
Urdu
yi
Yiddish
ji
Yiddish (alternative)
ku
Kurdish
ps
Pashto
sd
Sindhi

Note: Any language not in this list defaults to LTR (Left-to-Right).

Installation

Install the required dependency from your command line:

npm install @radix-ui/react-direction

Direction Utilities

Create utility functions for detecting RTL languages and getting the browser language:

Direction Provider

The DirectionProvider wraps your app to provide global reading direction. It enables all Radix UI primitives to inherit the global reading direction.

API Reference

PropTypeDefault
dir"ltr" | "rtl"No default value

Implementation

To implement RTL support in your application, wrap your app with the DirectionProvider component:

The provider automatically detects the browser language and sets the appropriate direction. You can also use the useDirection() hook in your components to access the current direction:

How to Add RTL Support

  1. Install the dependency (see Installation section above)
  2. Create direction utilities (optional, for automatic detection):

    Create a utility file to detect RTL languages and get browser language. See src/lib/direction-utils.ts for reference.

  3. Wrap your app with DirectionProvider:

    In your root layout, wrap your application with the DirectionProvider component (see Implementation section above).

  4. Use the useDirection hook:

    In components that need to adapt to RTL, use the useDirection() hook from @radix-ui/react-direction (see Examples section below).

Examples

Basic Usage

Using the Hook in Components

Keeping Code Blocks LTR

Code blocks should always remain LTR for readability: