badanibex
badanibex
نظام تصميم مكتمل يجمع Design Tokens، 60+ مكون UI، Figma Kit جاهز للتسليم، Dark/Light Mode، RTL-first، CSS Variables، وTailwind Plugin في حزمة واحدة جاهزة للإنتاج.
ألوان، خطوط، مسافات، راديوس، ظلال، وانتقالات - كلها CSS Variables قابلة للتخصيص في ثوانٍ.
أزرار، حقول، كروت، نماذج، قوائم، مودال، Toast، Badge، Spinner - RTL-first من الأساس.
ملف Figma منظّم بـ Auto Layout، Variants، وComponent Properties. جاهز للتسليم للعميل.
Plugin Tailwind رسمي + CSS خالص + ESM module + TypeScript types. ثلاث طرق للتكامل.
تبديل تلقائي بـ data-theme أو prefers-color-scheme. كل Token له قيمة في الوضعين.
README شاملة، أمثلة كود لكل مكون، وصفحة معاينة تفاعلية تعرض جميع المكونات مباشرة.
Button, Input, Select, Checkbox, Radio, Toggle, Textarea، وكل عناصر النماذج بـ states كاملة.
Card, Modal, Drawer, Tabs, Accordion، وعناصر التخطيط القابلة للتركيب.
Toast, Alert, Badge, Spinner, Progress Bar، وجميع عناصر إشعار المستخدم.
Navbar, Sidebar, Breadcrumb, Pagination، وعناصر الملاحة RTL-ready.
أضف tokens.css في مشروعك وابدأ باستخدام المتغيرات فوراً دون أي إعداد إضافي.
CSS خالص، Tailwind Plugin، أو ESM module - حسب stack مشروعك.
انسخ كلاسات المكون المطلوب من صفحة المعاينة وألصقه في مشروعك. جاهز للعمل.
افتح ملف Figma، عدّل الألوان عبر Styles، واستخدم المكونات مباشرة في التصميم.
سهان DS نظام تصميم عربي شامل مصمّم خصيصاً لفرق التطوير والتصميم التي تبني منتجات رقمية باللغة العربية. يأتي النظام بكل ما تحتاجه من الأساس: Design Tokens تغطي الألوان والخطوط والمسافات والظلال، وأكثر من 60 مكون UI جاهز للإنتاج، وملف Figma منظّم، ودعم Dark/Light Mode من الكود وليس من الإضافة.
معظم أنظمة التصميم المتاحة - سواء MUI أو Ant Design أو Shadcn - صُمِّمت للاتجاه LTR أولاً ثم أُضيف RTL لاحقاً كإضافة ثانوية. النتيجة: مكونات تبدو "معكوسة" بدلاً من أن تبدو طبيعية، وTokens لا تأخذ في الاعتبار عرض الحروف العربية، وFigma files لا تدعم النصوص العربية بشكل صحيح.
سهان DS بُني RTL-first: كل مكون اختُبر أولاً بالعربية، والـ Tokens مُعايَرة على نصوص عربية حقيقية، والـ Figma file يتعامل مع الخطوط العربية بـ Auto Layout صحيح.
Tokens هي المتغيرات التي تربط قرار التصميم بالكود مباشرة. في سهان DS تجد:
الرقم 60 يعني أن أي صفحة في مشروعك يمكن بناؤها من مكونات جاهزة دون كتابة CSS من الصفر:
النظام مُصمَّم لثلاثة أنواع من المستخدمين:
الترخيص يسمح بالاستخدام في عدد غير محدود من المشاريع التجارية والشخصية - مدى الحياة دون رسوم متكررة.
ترخيص مدى الحياة - Design Tokens + 60 مكون + Figma Kit - $69 بدلاً من $129