---
name: arabic-rtl-ui
description: Build Arabic and RTL (Right-to-Left) user interfaces with proper typography, layout mirroring, and bilingual support. Use when creating Arabic UIs, RTL layouts, or bilingual Arabic/English applications.
---
# Arabic RTL UI Skill
## Purpose
Create professional Arabic and Right-to-Left (RTL) user interfaces with proper typography, layout mirroring, and seamless bilingual support.
## RTL Fundamentals
### HTML Direction
```html
```
### Dynamic Direction (Bilingual)
```tsx
// React with next-intl or similar
function App() {
const { locale } = useLocale();
const dir = locale === 'ar' ? 'rtl' : 'ltr';
return (
{children}
);
}
```
## Arabic Typography
### Recommended Fonts
```css
/* Arabic Fonts - Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Tajawal:wght@400;500;700&family=Almarai:wght@400;700&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap');
:root {
/* Modern, clean Arabic fonts */
--font-arabic-primary: 'Cairo', 'Segoe UI', sans-serif;
--font-arabic-secondary: 'Tajawal', sans-serif;
--font-arabic-display: 'Noto Kufi Arabic', sans-serif;
/* For mixed Arabic/English content */
--font-bilingual: 'Cairo', 'Inter', sans-serif;
}
/* Arabic text styling */
.arabic-text {
font-family: var(--font-arabic-primary);
line-height: 1.8; /* Arabic needs more line height */
letter-spacing: 0; /* No letter spacing for Arabic */
}
```
### Font Size Adjustments
```css
/* Arabic text often needs slightly larger sizes */
[dir="rtl"] {
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.375rem; /* 22px */
--text-2xl: 1.75rem; /* 28px */
--text-3xl: 2.25rem; /* 36px */
}
```
## Tailwind RTL Configuration
### tailwind.config.js
```js
module.exports = {
theme: {
extend: {
fontFamily: {
arabic: ['Cairo', 'Tajawal', 'sans-serif'],
display: ['Noto Kufi Arabic', 'sans-serif'],
},
},
},
plugins: [
require('tailwindcss-rtl'), // RTL plugin
],
};
```
### RTL Utilities
```html
```
## Layout Patterns
### Navigation (RTL)
```tsx
function ArabicNavbar() {
return (
);
}
```
### Sidebar (RTL)
```tsx
function ArabicSidebar() {
return (
);
}
function SidebarItem({ icon, label, href }) {
return (
{icon}
{label}
);
}
```
### Data Table (RTL)
```tsx
function ArabicOrdersTable({ orders }) {
return (
| رقم الطلب |
العميل |
المبلغ |
الحالة |
التاريخ |
الإجراءات |
{orders.map((order) => (
| {order.id} |
{order.customer} |
{order.amount} د.ك |
|
{order.date} |
|
))}
);
}
```
### Form (RTL)
```tsx
function ArabicOrderForm() {
return (
);
}
```
## Status Badges (Arabic)
```tsx
const statusLabels = {
pending: 'قيد الانتظار',
processing: 'قيد التحضير',
ready: 'جاهز',
delivered: 'تم التوصيل',
cancelled: 'ملغي',
};
const statusColors = {
pending: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
processing: 'bg-blue-500/10 text-blue-500 border-blue-500/20',
ready: 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20',
delivered: 'bg-green-500/10 text-green-500 border-green-500/20',
cancelled: 'bg-red-500/10 text-red-500 border-red-500/20',
};
function StatusBadge({ status }) {
return (
{statusLabels[status]}
);
}
```
## Numbers and Dates
### Arabic Numerals (Optional)
```tsx
// Convert to Arabic numerals
function toArabicNumerals(num) {
const arabicNumerals = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
return String(num).replace(/[0-9]/g, d => arabicNumerals[d]);
}
// Format currency (Kuwaiti Dinar)
function formatCurrency(amount) {
return new Intl.NumberFormat('ar-KW', {
style: 'currency',
currency: 'KWD',
}).format(amount);
}
// Format date
function formatDate(date) {
return new Intl.DateTimeFormat('ar-KW', {
year: 'numeric',
month: 'long',
day: 'numeric',
}).format(new Date(date));
}
```
## Language Switcher
```tsx
function LanguageSwitcher() {
const { locale, setLocale } = useLocale();
return (
);
}
```
## Common Arabic UI Terms
| English | Arabic |
|---------|--------|
| Dashboard | لوحة التحكم |
| Orders | الطلبات |
| Customers | العملاء |
| Products | المنتجات |
| Reports | التقارير |
| Settings | الإعدادات |
| Search | بحث |
| Add New | إضافة جديد |
| Edit | تعديل |
| Delete | حذف |
| Save | حفظ |
| Cancel | إلغاء |
| Submit | إرسال |
| Loading | جاري التحميل |
| Error | خطأ |
| Success | نجاح |
| Total | الإجمالي |
| Date | التاريخ |
| Status | الحالة |
| Actions | الإجراءات |
## Instructions
1. **Set document direction**: Use `dir="rtl"` on html or container
2. **Choose Arabic fonts**: Cairo, Tajawal, or Almarai
3. **Use logical properties**: `ps-`, `pe-`, `ms-`, `me-` instead of `pl-`, `pr-`
4. **Mirror icons**: Flip directional icons (arrows, chevrons)
5. **Handle mixed content**: Numbers and English stay LTR
6. **Test thoroughly**: Check all alignments and spacing