سَهان DS
التنقل

Design Tokens

متغيرات CSS تشكّل الهوية البصرية الكاملة للنظام.

brand-600
brand-500
brand-400
brand-300
brand-200
success
warning
error
info
--s-bg
--s-surface
--s-fg

الأزرار

خمسة variants وثلاثة أحجام.

<button class="s-btn s-btn-primary">أساسي</button>
<button class="s-btn s-btn-outline">حدودي</button>
<button class="s-btn s-btn-lg">كبير</button>

Badges

علامات دلالية ملوّنة.

ابتدائي نجاح تحذير خطأ محايد

Avatars

صور رمزية بأحجام متعددة.

أح م فص

حقول الإدخال

Input مع placeholder وstate كاملة.

Select

قائمة منسدلة أصلية.

Cards

بطاقات بـ header وbody وfooter.

عنوان البطاقة

محتوى البطاقة يظهر هنا، يمكن وضع أي عنصر بداخله.

م
محمد علي
مطور واجهة أمامية

بطاقة قابلة للتفاعل - مرّر المؤشر لترى التأثير.

Tabs

تبويبات مع محتوى قابل للتبديل.

محتوى التبويب الأول
محتوى التبويب الثاني
محتوى التبويب الثالث

Accordion

أقسام قابلة للطي.

أضف tokens.css ثم components.css في مشروعك وابدأ الاستخدام مباشرة.
نعم، يتوفر Tailwind Plugin رسمي يمكن تثبيته كـ preset.
نعم، عبر data-theme="dark" على عنصر الجذر.

Alerts

إشعارات دلالية بأربعة أنواع.

ℹ️

هذه معلومة مفيدة للمستخدم.

✅

تمت العملية بنجاح.

⚠️

تحقق من البيانات قبل المتابعة.

❌

حدث خطأ غير متوقع، يرجى المحاولة مرة أخرى.

Toasts

إشعارات مؤقتة في الزاوية.

Spinners

مؤشرات التحميل.

Progress Bar

شرائط التقدم.

Skeleton

حالة التحميل الوهمية.

Pagination

تنقل بين الصفحات.

Table

جداول منسّقة تماماً.

الاسمالدورالحالة
محمد عليمطورنشط
سارة أحمدمصممنشط
خالد حسنمديرمعلّق