DirectionProvider
Tells the components that the text reads right to left, so sliders, tabs, toolbars and popups follow it. Use it with dir on an element, for Arabic, Hebrew, Persian or Urdu.
Installation
Set up Camaleo once (Installation), then import it. It is Base UI's DirectionProvider, re-exported.
import { DirectionProvider } from "@camaleo/react";You need two things, and they do different jobs:
dir="rtl"on an element (usually<html>, withlang) flips the layout: text alignment, flex and grid order, and every logical property in the skins.<DirectionProvider direction="rtl">tells the components' JavaScript: which arrow key moves forward, which end a slider starts from, and which side a popup aligns to. The browser can't tell them.
Anatomy
It renders no element: it only puts the direction in React context. The dir attribute is yours to set.
Examples
The Arabic and Hebrew texts are short sample strings (Save, Cancel, Settings…). Have a native speaker review your real copy.
Sliders start on the right
Focus each slider and press the arrows. In RTL the fill grows from the right, Arrow Left raises the value and Arrow Right lowers it, so the key matches the movement.
כללי
Tabs flip their arrow keys
The first tab sits on the right. Arrow Left moves to the next tab; Home and End still go to the first and the last.
Menus in a right-to-left section
Open it. Up and Down don't change. The popup renders in <body>, so pass it dir; it lines up with the trigger's right edge once <html> has dir="rtl".
Welcome back
You have three new messages.
Switch direction at runtime
Flip the switch. Change the provider, dir and lang together, and mirror icons that mean "forward" or "back".
Your changes were saved.
تم حفظ التغييرات.
Logical properties in your CSS
Write padding-inline-start and border-inline-start, not left and right. The same note then works in both directions without a second stylesheet.
رقم الطلب: #A-4821
Left-to-right content inside
Emails, phone numbers and codes read left to right. Give their inputs dir="ltr", and wrap embedded values in <bdi> so they don't reorder the sentence.
In context
Whole pieces of UI in right-to-left languages, in the skin you picked.
الإعدادات
סיכום הזמנה
- סכום ביניים
- ₪240
- משלוח
- חינם
- סה״כ
- ₪240
عوامل التصفية
Guidelines
The label, the fill and the arrow keys all agree.
It fills from the right, yet Arrow Right raises the value and a click lands on the mirrored spot.
البريد الوارد12
margin-inline-start keeps the gap between the word and the badge in any direction.
البريد الوارد12
The space lands on the far side and the badge touches the word.
Props
It renders no element, so it takes no other props. Set dir and lang on an element yourself.
Styling hooks
There is nothing to style on the provider itself. The skins use logical properties throughout, so they follow dir; target it when you need a rule for one direction only.
Attributes
Tokens it reads
/* mirror directional icons in right-to-left pages */
:dir(rtl) .icon-forward {
scale: -1 1;
}Accessibility
- The provider has no element and takes no focus. Screen readers learn the direction and language from dir and lang on your elements.
- Set lang next to dir, so screen readers read Arabic or Hebrew with the right voice.
- Popups render in <body>. Set dir on <html> for a fully RTL page, or pass dir to the popup inside a right-to-left section.
- Mirror icons that point forward or back. Leave alone the ones that don't, like play, check or a clock.