مقدّمة
تقدّم فاصلة مجموعة مكوّنات قابلة لإعادة الاستخدام، تنسخها وتلصقها في تطبيقك. وهي ليست مكتبة مكوّنات تقليدية، فالشيفرة لك وتعدّلها كما تشاء.
الميزات
- 42+ مكوّنًا بين مكوّنات أساسية وتأثيرات
- إتاحة الوصول (accessibility) مدروسة من البداية، ومنها التنقّل بلوحة المفاتيح
- حركة سلسة بمكتبة Framer Motion، تحترم إعداد تقليل الحركة
- TypeScript في الشيفرة كلها، مع أنواع كاملة
- الوضع الداكن مدعوم دون أي إعداد
- قابلة للتخصيص بسهولة، لأنها مبنية على Tailwind CSS
فئات المكوّنات
المكوّنات الأساسية
زر (Button)أضف مكوّن زر بخمسة أنماط وثلاثة ألوان دلالية وأربعة أحجام وشكلين للزوايا، مع حالة تحميل ورابط تحته خط دائمًا.زر الأيقونة (Icon Button)أضف زر أيقونة مربّعًا بأربعة أنماط وثلاثة ألوان دلالية وأربعة أحجام وشكلين للزوايا، مع تحذير إذا لم يكن له اسم يقرؤه قارئ الشاشة.حقل الإدخال (Input)استخدم مكوّن حقل الإدخال (Input) لإدخال النص، مع حالات التحقق والأيقونات وحلقة تركيز واضحة، وتخصيص سهل عبر Tailwind.حقل الإدخال الرقمي (Input Number)أضف مكوّن حقل الإدخال الرقمي (Input Number) لإدخال الأعداد، مع أزرار زيادة وإنقاص بخمسة تخطيطات، وحدّين أدنى وأعلى، وأرقام لاتينية في اللغتين.حقل الرمز (OTP Input)أضف حقل الرمز (OTP Input) لإدخال رموز التحقق، بخانة لكل رقم مع الملء التلقائي من الرسائل النصية واللصق وأربعة تخطيطات، ويمتلئ من اليمين في الصفحات العربية.بطاقة (Card)ركّب مكوّن بطاقة (Card) من أجزاء جاهزة تراعي إتاحة الوصول (accessibility): الرأس والعنوان والوصف والمحتوى والتذييل.شارة (Badge)اعرض حالات وتسميات قصيرة بمكوّن شارة (Badge)، بأنماط (variant) قابلة لإعادة الاستخدام وألوان دلالية من Tailwind.هيكل التحميل (Skeleton)اعرض عناصر نائبة أثناء التحميل بمكوّن هيكل التحميل (Skeleton)، للنصوص والصور الرمزية والبطاقات وأي تخطيط آخر.صورة رمزية (Avatar)مثّل الأشخاص بمكوّن صورة رمزية (Avatar): صورة شخصية أو أحرف أولى أو أيقونة بديلة، بثلاثة أحجام، مع إطار ونقطة حالة اختياريين.مؤشر الحالة (Status Indicator)اعرض حالة الاتصال بمكوّن مؤشر الحالة (Status Indicator): متصل أو غائب أو مشغول أو غير متصل، باسم يتبع لغة الصفحة.خانة الاختيار (Checkbox)أضف مكوّن خانة الاختيار (Checkbox) للاختيارات الثنائية، مع التحكم بالحالة وتسمية واضحة ودعم لوحة المفاتيح.زر الاختيار (Radio)أضف مكوّن زر الاختيار (Radio) ليحدّد المستخدم خيارًا واحدًا من مجموعة خيارات. يأتي بنمطين (variant): بسيط، وبطاقة بإطار، ويدعم الكتابة العربية واتجاهها بالكامل.مفتاح التبديل (Switch)استخدم مكوّن مفتاح التبديل (Switch) لإعدادات التشغيل والإيقاف، مع التحكم بالحالة ودعم لوحة المفاتيح ومؤشر مرئي واضح.حقل الاختيار (Select)أنشئ مكوّن حقل الاختيار (Select) لاختيار خيار واحد أو عدة خيارات، مع شارات وتسميات ودعم لوحة المفاتيح والاتجاه من اليمين إلى اليسار.تقويم (Calendar)أضف مكوّن تقويم لاختيار يوم أو مدة على ما يصل إلى ثلاثة أشهر، مع قائمتين للشهر والسنة، وأسماء الأشهر بالعربية، وأسبوع يبدأ يوم السبت في الصفحات العربية.منتقي التاريخ (Date Picker)أنشئ حقلًا للتاريخ يفتح تقويمًا لاختيار يوم أو مدة، مع تسمية ونص مساعد وأربعة أحجام ودعم لوحة المفاتيح والاتجاه من اليمين إلى اليسار.قائمة منسدلة (Dropdown Menu)أضف مكوّن قائمة منسدلة للإجراءات، مع أيقونات واختصارات وصفوف اختيار ومفاتيح تبديل وقوائم فرعية، وينعكس تلقائيًا في الصفحات العربية.منطقة النص (Textarea)أضف مكوّن منطقة النص (Textarea) لكتابة نص من عدة أسطر يزداد ارتفاعه مع النص، مع تسمية ونص مساعد وعدّاد للأحرف وحالات التحقق.علامات التبويب (Tabs)نظّم المحتوى المترابط بمكوّن علامات التبويب (Tabs)، مع قوائم وأزرار ولوحات تتنقّل بينها بلوحة المفاتيح.تلميح (Tooltip)أضف مكوّن تلميح بستة أنماط، مع سهم ووصف وأيقونة أو صورة رمزية، في أي جهة من العنصر، وينعكس تلقائيًا في الصفحات العربية.تنبيه (Alert)اعرض رسائل الأخبار والإرشاد والنجاح والتحذير والأخطاء بمكوّن تنبيه بثلاثة أنواع، مع زر إجراء وزر إغلاق، وينعكس تلقائيًا في الصفحات العربية.التنقّل بين الصفحات (Pagination)تنقّل بين صفحات القوائم الطويلة بمكوّن مبني على الزر، بثلاثة أنماط وأربعة أحجام ونقاط ثلاث للصفحات المحذوفة، وينعكس تلقائيًا في الصفحات العربية.شريط التقدم (Progress)اعرض نسبة إنجاز المهام بمكوّن شريط التقدم، بثلاثة أحجام مع تسمية اختيارية للنسبة المئوية، ويمتلئ من بداية السطر في الصفحات العربية.مؤشر الخطوات (Steps)اعرض تقدّم المستخدم في عملية من عدة خطوات بمكوّن مؤشر الخطوات، بخطوات مكتملة وحالية وقادمة، في صف أو عمود، وينعكس في الصفحات العربية.الأكورديون (Accordion)أضف مكوّن أكورديون بأربعة أنماط، مع سهم أو علامة زائد، وعنصر مفتوح واحد أو أكثر، وينعكس تلقائيًا في الصفحات العربية.حوار التنبيه (Alert Dialog)اطلب من المستخدم تأكيد إجراء أو إلغاءه بمكوّن حوار التنبيه، مع نمط للإجراءات الخطرة وأيقونة ومحتوى إضافي، وينعكس تلقائيًا في الصفحات العربية.نافذة منبثقة (Dialog)اجمع مدخلات المستخدم دون مغادرة الصفحة بمكوّن النافذة المنبثقة، بثلاثة أحجام وزرّي رجوع وإغلاق ومحتوى يتمرّر، وينعكس تلقائيًا في الصفحات العربية.مسار التنقّل (Breadcrumb)اعرض موقع الصفحة بمكوّن مسار التنقّل، بفاصل سهم أو شرطة مائلة وأيقونات اختيارية ومسار مختصر، وينعكس تلقائيًا في الصفحات العربية.لوحة منزلقة (Sheet)أضف لوحة تنزلق من أي حافة للشاشة: من الأعلى أو الأسفل، أو من البداية والنهاية اللتين تتبعان اتجاه القراءة، وتنعكس تلقائيًا في الصفحات العربية.شريط تحديد القيمة (Slider)اختر قيمة أو نطاقًا من القيم بسحب مقبض على مسار، بثلاثة أحجام مع دعم كامل للوحة المفاتيح، ويمتلئ المسار من بداية السطر في الصفحات العربية.شريط جانبي (Sidebar)أضف إلى تطبيقك شريطًا جانبيًا للتنقّل ينطوي إلى أيقونات، مع مجموعات من الروابط وعناصر فرعية وتلميحات ودعم كامل للعربية.حقل الاختيار بالبحث (Combobox)أنشئ مكوّن حقل الاختيار بالبحث (Combobox) لاختيار خيار واحد أو عدة خيارات، مع عناصر تحكم تراعي إتاحة الوصول (accessibility).عارض الشرائح (Carousel)ابنِ مكوّن عارض الشرائح (Carousel) على خاصية CSS scroll-snap، مع مؤشرات الشرائح وتحكم بالحالة ودعم كامل للعربية دون أي شيفرة إضافية.عارض المحتوى (Content Carousel)اعرض البطاقات في مكوّن عارض المحتوى (Content Carousel) بسهمي تنقّل، ومن بطاقة إلى ثلاث بطاقات في العرض الواحد، مع تحكم كامل من لوحة المفاتيح.
التأثيرات
زر اللمعان (Shimmer Button)اجذب الانتباه إلى أزرار الإجراء الرئيسية بتأثير زر اللمعان (Shimmer Button)، بحركة لمعان تحترم إعداد تقليل الحركة.تدرّج متحرك (AnimatedGradient)أضف خلفية بتأثير تدرّج متحرك (AnimatedGradient) إلى الأقسام الرئيسية والبطاقات، بحركة سلسة قابلة للضبط.ظهور النص (TextReveal)أظهر النص حرفًا حرفًا بتأثير ظهور النص (TextReveal)، مع عناصر تحكم بالحركة ودعم تقليل الحركة.شعاع الإطار (BorderBeam)أبرز البطاقات والحاويات بتأثير شعاع الإطار (BorderBeam)، وهو شعاع متحرك قابل للضبط يدور حول الإطار.بقعة الضوء (Spotlight)أنشئ خلفيات تتبع المؤشر في واجهاتك بتأثير بقعة الضوء (Spotlight)، مع التحكم بالتوهج وموضعه.نص الآلة الكاتبة (Typewriter Text)حرّك النصوص بتأثير نص الآلة الكاتبة (Typewriter Text)، لرسائل المنتج والعناوين والعروض التوضيحية.بطاقة متوهجة (Glow Card)ابنِ بطاقات تفاعلية بتأثير بطاقة متوهجة (Glow Card)، مع توهج يتبع المؤشر ومحتوى متعدد الطبقات.