Every SDAIA UI component works in Arabic. A right-to-left screen is not just text aligned to the right: the whole layout is mirrored, so the start of the page, the reading order and the direction of movement all begin on the right.
Set dir="rtl" and lang="ar" on the <html> element. Components read the direction they inherit, so you don't need to pass dir to each one.
// app/layout.tsx (Next.js) export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="ar" dir="rtl"> <body>{children}</body> </html> ); }
dir mirrors the layout. lang picks the screen reader voice, hyphenation and fonts, and some CSS builds use it to mirror spacing (see the note below).dir?: 'ltr' | 'rtl'. Pass it only for an area whose direction differs from the page, such as an Arabic form inside an English page.rtl?: boolean. It is deprecated: use dir="rtl" instead. When both are set, dir wins.dir, a component follows the direction of the page.Write layout code with logical utilities (start and end) instead of physical ones (left and right). Logical utilities flip with the direction; physical ones don't.
| Use | Instead of |
|---|---|
| ps-*, pe-* (padding start/end) | pl-*, pr-* |
| ms-*, me-* (margin start/end) | ml-*, mr-* |
| start-*, end-* (position) | left-*, right-* |
| text-start, text-end | text-left, text-right |
| border-s, border-e, rounded-s, rounded-e | border-l, border-r, rounded-l, rounded-r |
// Mirrors automatically <div className="ps-4 me-2 text-start border-s">…</div> // Stays on the left in both directions — avoid for layout <div className="pl-4 mr-2 text-left border-l">…</div>
Some CSS build pipelines (for example Next.js with older browser targets) turn logical properties into rules keyed on the lang attribute. In those builds, dir="rtl" alone does not mirror spacing; the element also needs lang="ar". Setting both on <html> avoids the problem.
| Mirror | Keep as is |
|---|---|
| Page layout, navigation and sidebars | Logos, brand marks and flags |
| Back, forward, next and previous arrows (use flipOnRtl) | Play, pause and other media icons |
| Progress bars, sliders and steppers | Media timelines and time codes (12:30 / 45:00) |
| Chart time axes and the order of categories | Numbers, phone numbers, IDs and amounts |
| Table column order and text alignment | Code, commands, URLs and email addresses |
| Breadcrumbs, pagination and tabs | Check marks, clocks, and icons of real objects |
The components already follow this table. Code Snippet keeps code left-to-right, the media players keep the play icon and the time readout left-to-right, charts mirror their x-axis, and the Date Picker swaps the Left and Right arrow keys so they follow the reading direction.
Arabic text often contains English words, numbers and codes. The browser handles most of this, but help it where the order matters:
dir="ltr". Add lang="en" too.dir="auto" for user-generated text whose language you don't know, such as names and comments.// An English code sample inside an Arabic page <div dir="ltr" lang="en"> <CodeSnippet … /> </div> // A component that must stay right-to-left inside an English page <DatePicker dir="rtl" locale="ar-SA" calendar="hijri" labels={arabicDateLabels} />
locale you pass. With locale="ar-SA" they show Eastern Arabic digits (٠–٩); pass ar-SA-u-nu-latn to keep Western digits.// Western digits in Arabic text new Intl.NumberFormat('ar-SA-u-nu-latn').format(12500.75); // "12,500.75" new Intl.NumberFormat('ar-SA').format(12500.75); // "١٢٬٥٠٠٫٧٥" (Eastern Arabic digits)
The Date Picker supports the Hijri calendar (Umm al-Qura) and the Gregorian calendar with the calendar prop. The default is hijri.
<DatePicker calendar="hijri" /> // Hijri only (default) <DatePicker calendar="hijri-gregorian" /> // Hijri first, Gregorian shown too <DatePicker calendar="gregorian" /> // Gregorian only <DatePicker calendar="gregorian-hijri" /> // Gregorian first, Hijri shown too
locale="ar-SA" to the Date Picker for Arabic month and day names, and labels for its button and field labels (Cancel, Submit, Start date…). Without labels, those strings stay in English.html has dir="rtl" and lang="ar".
No physical left/right utilities in layout code.
Directional icons point the right way; media and brand icons are not mirrored.
Tab order and arrow keys follow the reading direction.
Numbers, codes and English words read in the right order.
Dates show the expected calendar and Arabic month names.
Checked in light and dark themes, on desktop and phone.