First-class RTL support

The kit has first-class RTL support for Arabic, Hebrew, Persian (Farsi) and Urdu. There is no second stylesheet and no RTL build. The same CSS follows the direction of the page, because every component is written with logical properties (inline start and end) instead of left and right.

Switch direction

Set dir="rtl" and a lang on the <html> element. Use lang="ar" for Arabic, lang="he" for Hebrew, lang="fa" for Persian and lang="ur" for Urdu.

<html lang="ar" dir="rtl">

A single section can switch on its own, such as an Arabic panel in an English page:

<section lang="he" dir="rtl">...</section>

Components inside the section follow its direction. Menus, popovers and dropdowns align to the section’s own direction, so they open toward the correct side.

What mirrors on its own

Spacing, padding, borders and alignment, because components use logical properties.
Arrows and markers the kit draws itself: the breadcrumb chevron, the pagination arrows, select and dropdown carets and the accordion marker.
Menus, popovers and dropdowns open toward the correct side.
Where things dock: the drawer opens at the inline end, which is the left edge in RTL, and the toast region corner follows the reading direction.
Tables: sticky first and last columns, their edge shadows, the selected-row bar and truncation ellipsis follow the direction.
Motion: when you opt in with animated, slides come from the component’s own edge.

Your own directional icons

Icons are yours, so the kit cannot know which ones point somewhere. Add wu-mirror to back, next and arrow icons. It flips the element in RTL and does nothing in left to right. Leave symmetric icons (a search lens, a gear) alone, and keep logos and clocks unmirrored.

LTR

RTL

<button class="wu-btn" type="button"><svg class="wu-mirror" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M10 3 5 8l5 5" fill="none" stroke="currentColor" stroke-width="2"/></svg>Back</button>

Mixed content

Emails, URLs, product codes and numbers run left to right inside right-to-left text. Two habits keep them readable:

Wrap an inline name or value of unknown direction in <bdi>, so its direction cannot disturb the text around it.
Give inputs for emails, URLs and codes dir="ltr", and keep them aligned to the start of the field.

تمت دعوة Sara Ahmed (QA) إلى فريق المشروع.

البريد الإلكتروني

<div lang="ar" dir="rtl" class="flex col gap-3">
  <p class="wu-text">تمت دعوة <bdi>Sara Ahmed (QA)</bdi> إلى فريق المشروع.</p>
  <div class="wu-field">
    <label class="wu-field-label" for="rtl-mixed-email">البريد الإلكتروني</label>
    <input class="wu-input" id="rtl-mixed-email" type="email" dir="ltr" value="[email protected]">
  </div>
</div>

Screens in Arabic and Hebrew

Two screens built only from kit classes. The first is an Arabic settings form; the second is a Hebrew table with a toolbar and pagination.

Arabic: account settings

إعدادات الحساب

الاسم الكامل

البريد الإلكتروني

اللغة

إشعارات البريد الإلكتروني

<section class="wu-panel" lang="ar" dir="rtl" aria-labelledby="rtl-ar-title">
  <header class="wu-panel-header">
    <h3 class="wu-panel-title" id="rtl-ar-title">إعدادات الحساب</h3>
  </header>
  <div class="wu-panel-body flex col gap-4">
    <div class="wu-field">
      <label class="wu-field-label" for="rtl-ar-name">الاسم الكامل</label>
      <input class="wu-input" id="rtl-ar-name" type="text" value="سارة أحمد" required>
    </div>
    <div class="wu-field">
      <label class="wu-field-label" for="rtl-ar-email">البريد الإلكتروني</label>
      <input class="wu-input" id="rtl-ar-email" type="email" dir="ltr" value="[email protected]">
    </div>
    <div class="wu-field">
      <label class="wu-field-label" for="rtl-ar-lang">اللغة</label>
      <select class="wu-select" id="rtl-ar-lang">
        <option selected>العربية</option>
        <option>עברית</option>
        <option>English</option>
      </select>
    </div>
    <label class="wu-toggle">
      <input class="wu-toggle-input" type="checkbox" role="switch" checked>
      <span class="wu-toggle-label">إشعارات البريد الإلكتروني</span>
    </label>
  </div>
  <footer class="wu-panel-footer">
    <button class="wu-btn" type="button">إلغاء</button>
    <button class="wu-btn brand" type="submit">حفظ التغييرات</button>
  </footer>
</section>

Hebrew: invoices

חשבוניות הרבעון
חשבונית	לקוח	סטטוס	סכום
INV-1042	דנה לוי	שולם	1,200.00
INV-1043	בן כהן	טיוטה	86.50
INV-1044	חן וייס	באיחור	12,940.00

<div lang="he" dir="rtl" class="flex col gap-3">
  <div class="wu-toolbar">
    <div class="wu-input-affix sm">
      <span class="wu-input-prefix"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg></span>
      <input class="wu-input" type="text" aria-label="חיפוש חשבוניות" placeholder="חיפוש חשבוניות">
    </div>
    <button class="wu-btn sm" type="button">ייצוא</button>
    <div class="wu-toolbar-end">
      <button class="wu-btn brand sm" type="button">חשבונית חדשה</button>
    </div>
  </div>
  <table class="wu-table striped hover">
    <caption>חשבוניות הרבעון</caption>
    <thead>
      <tr><th scope="col">חשבונית</th><th scope="col">לקוח</th><th scope="col">סטטוס</th><th scope="col" class="wu-table-num">סכום</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">INV-1042</th><td>דנה לוי</td><td><span class="wu-badge success">שולם</span></td><td class="wu-table-num">1,200.00</td></tr>
      <tr><th scope="row">INV-1043</th><td>בן כהן</td><td><span class="wu-badge">טיוטה</span></td><td class="wu-table-num">86.50</td></tr>
      <tr><th scope="row">INV-1044</th><td>חן וייס</td><td><span class="wu-badge danger">באיחור</span></td><td class="wu-table-num">12,940.00</td></tr>
    </tbody>
  </table>
  <nav class="wu-pagination" aria-label="דפי חשבוניות">
    <ul class="wu-pagination-list">
      <li><button class="wu-btn wu-pagination-prev" type="button" disabled>הקודם</button></li>
      <li><button class="wu-btn" type="button" aria-current="page">1</button></li>
      <li><button class="wu-btn" type="button">2</button></li>
      <li><button class="wu-btn wu-pagination-next" type="button">הבא</button></li>
    </ul>
  </nav>
</div>

Notes

The Arabic and Hebrew copy in these demos has not been reviewed by native speakers yet. Treat it as sample text.
The kit ships no fonts. Persian and Urdu often look best in a typeface made for them (Urdu in a Nastaliq style), which you load yourself.
Mixed text such as emails and numbers needs the <bdi> and dir="ltr" habits above. The browser cannot guess every case.

Pages with a right-to-left demo

Breadcrumb, data table, drawer, dropdown, input group, pagination, popover, progress, sidebar, table, tabs, toast and topbar. For installing the kit, see Install and download.