📦 التثبيت والاستخدام السريع
يمكنك تضمين ملف الـ CSS والـ JS مباشرة في مشروعك بدون أي حزم إضافية:
<!-- Sanad UI RTL Design System -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/reda1472/arabic-rtl-components@main/dist/sanad-ui.css">
<script src="https://cdn.jsdelivr.net/gh/reda1472/arabic-rtl-components@main/dist/sanad-ui.js"></script>
1. الأزرار ومجموعات الأزرار (Buttons & Groups)
<button class="snd-btn snd-btn-primary">زر رئيسي</button>
<button class="snd-btn snd-btn-secondary">زر ثانوي</button>
<button class="snd-btn snd-btn-outline">زر مفرغ</button>
<button class="snd-btn snd-btn-danger">زر تحذيري</button>
2. الشارات وحالات التنبيه (Badges & Pills)
جديد (Primary)
مكتمل (Success)
قيد المراجعة (Warning)
ملغي (Danger)
● متصل الآن (Pill)
<span class="snd-badge snd-badge-primary">جديد</span>
<span class="snd-badge snd-badge-success snd-badge-pill">مكتمل</span>
3. حقول الإدخال والنماذج (Form Controls)
<div class="snd-form-group">
<label class="snd-label">الاسم الكامل</label>
<input type="text" class="snd-input" placeholder="اكتب اسمك...">
</div>
4. تنبيهات النظام (Alerts & Notifications)
ℹ️ تم تحديث إعدادات النظام بنجاح.
✓ تم حفظ التغييرات وتأكيد الطلب.
⚠️ يرجى التحقق من صحة البريد الإلكتروني المدخل.
⛔ حدث خطأ أثناء الاتصال بقاعدة البيانات.
<div class="snd-alert snd-alert-success">✓ تم حفظ التغييرات بنجاح.</div>
5. البطاقات والحاويات (Cards & Widgets)
بطاقة إحصائيات
مباشر
+24.8%
معدل نمو الأداء والمبيعات هذا الشهر