Rasmus Aabergمؤسس، BrandBuddyكان وجود الفريق إلى جانبي لا يُقدَّر بثمن. من التوجيه التقني إلى مناقشة الأفكار وتطويرها، أحدثت خبرتهم وملاحظاتهم فرقًا حقيقيًا.
كتل ومكوّنات وقوالب،
بالعربية أولًا
الاتجاه خاصية في كل مكوّن من مكوّنات فاصلة. قاعدة React واحدة وملف Figma واحد، والعربية والإنجليزية جاهزتان معًا في يوم الإطلاق.
أو
يُبنى منتج من مكوّنات فاصلة، ثم ينقلب إلى العربية بخاصية واحدة، ويتحوّل إلى الوضع الداكن، ويتكيّف مع سطح المكتب والجهاز اللوحي والجوال، ثم تظهر مكتبة الكتل وسطر الأوامر.
خط Cairo توأم مطابق لخط Geist.
لكل درجة في السلّم الإنجليزي توأم عربي بالحجم والوزن نفسيهما. وحده ارتفاع السطر يزيد، لتأخذ النقاط والحروف الصاعدة مساحتها.
GeistالإنجليزيةCairoالعربية
text-5xl48 / 600 / 58text-5xl48 / 600 / 72
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-4xl36 / 600 / 44text-4xl36 / 600 / 60
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-2xl24 / 600 / 32text-2xl24 / 600 / 40
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-base16 / 400 / 24text-base16 / 400 / 28
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-sm14 / 400 / 20text-sm14 / 400 / 24
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-xs12 / 500 / 16text-xs12 / 500 / 20
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
يشترك كل صف في خط أساس واحد. اقلب الصفحة فيتبادل العمودان مكانيهما، ويبقى الخط كما هو.
ما ينعكس، وما لا ينعكس.
تتبع فاصلة القواعد التي يتوقعها القارئ العربي. اختر قاعدة، أو اسحب الخط لتقارن بين الإنجليزية والعربية.
الأسهم وعلامات التوجيه تنعكس. تشير إلى الجهة التي يتقدّم نحوها القارئ.
42 مكوّنًا، مجانية ومفتوحة المصدر.
المكوّنات الأساسية والتأثيرات الحركية في الحزمة مفتوحة المصدر، كلٌّ منها بالعربية والإنجليزية، وباتجاهي الكتابة، وبالمظهرين الفاتح والداكن.
- الأكورديون
- تنبيه
- حوار التنبيه
- صورة رمزية
- شارة
- مسار التنقّل
- زر
- تقويم
- بطاقة
- عارض الشرائح
- خانة الاختيار
- حقل الاختيار بالبحث
- عارض المحتوى
- منتقي التاريخ
- نافذة منبثقة
- قائمة منسدلة
- شعار فاصلة
- حقل الإدخال
- حقل الإدخال الرقمي
- حقل الرمز
- التنقّل بين الصفحات
- شريط التقدم
- زر الاختيار
- حقل الاختيار
- لوحة منزلقة
- شريط جانبي
- هيكل التحميل
- شريط تحديد القيمة
- أيقونات التواصل الاجتماعي
- مؤشر الحالة
- مؤشر الخطوات
- مفتاح التبديل
- علامات التبويب
- منطقة النص
- تلميح
- تدرّج متحركتأثير
- شعاع الإطارتأثير
- بطاقة متوهجةتأثير
- زر اللمعانتأثير
- بقعة الضوءتأثير
- ظهور النصتأثير
- نص الآلة الكاتبةتأثير
TypeScript. نواة بترخيص MIT. مبنية على مكوّنات shadcn/ui الأساسية.npx @smicolon/fasla-ui@latest add button → components/ui/button.tsx
العربية، من أول سطر في الشيفرة.
العربية لغة إطلاق، لا ترجمة لاحقة.
تطلق فرق المنتجات في المنطقة منتجاتها باللغتين من اليوم الأول، بالمكوّنات نفسها. لا ملف تصميم ثانيًا، ولا إعادة بناء معكوسة بعد الإطلاق.
Storybook
استكشف المكوّنات في Storybook(يفتح في علامة تبويب جديدة)رموز التصميم نفسها في الجهتين.
يعرض مكوّن Figma ومكوّن React الخصائص نفسها، مربوطةً برموز التصميم نفسها. غيّر أي خاصية في اللوحة، وسيتبعها الزر وسطر JSX معًا. وتعمل كل المكوّنات بالطريقة نفسها في Storybook.
ButtonFigma
الاتجاه
النمط
الحجم
المكوّن مباشرةًReact
- background
- --primary
- height
- 36px
- padding-inline
- 16px
- radius
- rounded-md
- font
- font-arabic
// components/ui/button.tsx
<Button variant="default" size="default" dir="rtl">متابعة {<ArrowRight />}</Button>
ما تحصل عليه
كل ما يحتاجه منتج ثنائي اللغة من اليوم الأول، في شيفرة يمكنك قراءتها.
جدار المحبة
ما يقوله الناس عن العمل مع الفريق الذي يقف وراء فاصلة.
Rasmus Aabergمؤسس، BrandBuddy
اتخذ هذا المشروع منعطفات كثيرة بالنسبة لي بسبب تعقيده، وأنا ممتن لهم لأنهم ساعدوني على إيجاد طريق للمضي قدمًا نحو وضع إطار عمل! كان التواصل مع الفريق سهلًا، وبذلوا جهدًا إضافيًا لمساعدتي في عطلة نهاية الأسبوع حين كنت أواجه صعوبة. سأوصي بهم بالتأكيد لأي شخص آخر في المستقبل. شكرًا مرة أخرى!
5.0
Claudio Kantnerالمؤسس والرئيس التنفيذي، Pafindaأدّى الفريق دورًا حاسمًا في تشكيل المنتج الأولي (MVP) لدى Pafinda. وازنت خبرتهم وتوجيههم الاستراتيجي بين طموحاتنا وميزانيتنا وجدولنا الزمني، وعزّزت فهمنا للصورة كاملة. أوصي بشدة بخدمات الفريق في استشارات تقنية المعلومات.
5.0
السلبيات: تكلفتهم مرتفعة. الإيجابيات: يتقنون عملهم. تحصل على ما تدفع مقابله. لا أظن أن محمد قادر على أداء عمل سيئ. بعد تجربة مطوّرين مختلفين على هذا الموقع، من المريح حقًا العمل مع من يقدّم عملًا عالي الجودة وفق معايير الصناعة. مأخذي الحقيقي الوحيد أن الفريق كان ينقصه بعض المعرفة في تنفيذ الخرائط، لكنهم لم يحتسبوا وقت التعلّم. عمومًا، أنا راضٍ عن الموقع. إنه ما تصوّرته وأكثر قليلًا. سأعمل مع محمد في المستقبل.
5.0
أودّ أن أبرز ما يتميز به فريقهم من عفوية استثنائية ومرونة واستجابة سريعة
5.0
فريق رائع من الأشخاص. أصغى الفريق إلى ما أردناه، وتواصل معنا جيدًا، وتجاوب بإيجابية حين غيّرنا التصميم في منتصف الطريق! أوصي بأندرس ووكالته بكل ثقة. نحن راضون جدًا عن العمل الذي أنجزوه لنا.
5.0
تعاملت مع عدة مطوّرين مختلفين على Upwork، وأستطيع أن أقول بصدق إن محمد وفريقه كانوا الأفضل! أوصي بهم بشدة، وسأتعامل معهم مجددًا بلا شك!
5.0
Zayad Abeyaشريك مؤسس، Piamotechأنا سعيد للغاية برحلة التحوّل مع الفريق. صاغوا هويتنا على الإنترنت، وسلّموا موقعًا مذهلًا ولوحة إدارة عملية. كانت خبرتهم وإبداعهم عنصرًا أساسيًا في ابتكار حل رقمي يعكس هويتنا بصدق. لا يمكن أن نكون أسعد من ذلك، ونتطلع إلى تعاون مستقبلي.
5.0
Mahmoud Darweashمستشار، 1Uniغيّرت الشراكة مع الفريق نهجنا في التعليم العالي. أنشأوا منصة مدعومة بالذكاء الاصطناعي سهّلت اختيار الجامعات والتقديم إليها. وأحدث نظامهم «لغة الجسد الرقمية للطالب» (SDBL) ثورة في فهمنا لسلوك الطلاب. أوصي بشدة بالتعامل مع الفريق لحلولهم البرمجية المتميزة.
5.0
أبدوا التزامًا قويًا بضمان أمان التطبيق وامتثاله لجميع لوائح البيانات
5.0
كان العمل مع أندرس ومع الفريق رائعًا على مدى العام الماضي. يتحلّون بالنزاهة والالتزام بالعمل، وتواصلهم ممتاز، وفي نهاية المطاف سلّموا منتجًا رائعًا. واجهنا بالطبع بعض التحديات في التصميم والتخطيط، لكنها موجودة في كل المشاريع. أمور كثيرة لم أضعها في الحسبان، وأخرى أوقعتنا في متاعب على طول الطريق. وطوال ذلك كان أندرس بارعًا في إدارة المشروع، وكان واضحًا بشأن ما يشمله الاتفاق وما يُعدّ متطلبًا جديدًا نضيفه. كان من السهل أن أفهم ما ألتزم به وكيف تتغير الميزانية. لم أجد عليهم مأخذًا، وسأواصل العمل معهم بالتأكيد لتطوير النظام الذي بنيناه باستمرار.
5.0
أبهرني عمل الفريق في مراجعة الواجهة الأمامية لمنصة SaaS الخاصة بنا! كانت خبرتهم وتواصلهم من الطراز الأول، وسيكون الأثر على منصتنا هائلًا. مكاسب سريعة ومقترحات تحسين طويلة المدى، كلها قابلة للتنفيذ وسُلّمت بسرعة! ⚡️ كانت الجودة استثنائية مقارنة بالوقت المبذول. لا أستطيع أن أوصي بهم بما يكفي!
5.0
الفريق مثال رائع على وكالة تطوير من الطراز الأول. تواصل ممتاز، ووثيقة تصميم البرمجيات (SDD) التي قدّموها كانت واضحة تمامًا منذ اليوم الأول. كان أندرس ومحمد متاحين فورًا لأي سؤال، وجودة التطوير بمستوى المؤسسات الكبرى. كان مشروعي معقدًا جدًا، وأنجزوه بسهولة. أنصح الجميع بشدة بالعمل معهم.
5.0
كانوا عازمين على إنجاز المشروع على النحو الصحيح من المرة الأولى.
5.0
أسئلة
أسئلة
في محلّها.
لديك سؤال آخر؟ اسألنا على GitHub
فاصلة نظام تصميم ومكتبة مكوّنات React ثنائية اللغة من Smicolon. يأتي كل مكوّن بالعربية والإنجليزية، ومن اليمين إلى اليسار ومن اليسار إلى اليمين، وبالمظهرين الفاتح والداكن.
فاصلة مبنية على مكوّنات shadcn/ui الأساسية وتحافظ على فكرة نسخ الشيفرة إلى مشروعك. الفرق هو الاتجاه: دعم RTL وسلّم الخطوط العربية جزء من كل مكوّن منذ أول commit.
لا. تستخدم الشاشة العربية المكوّنات نفسها التي تستخدمها الشاشة الإنجليزية مع تغيير خاصية واحدة: Direction = RTL. وينعكس التخطيط والأيقونات والمسافات تلقائيًا.
نعم. النواة مرخّصة بـ MIT ومجانية دائمًا للمشاريع الشخصية والتجارية. أما Pro فبـ 149 يورو و Team بـ 349 يورو، بدفعة واحدة ووصول دائم إلى الكتل والقوالب المميزة وملف Figma. اطّلع على الخطط.
شغّل أمر init مرة واحدة، ثم أضف المكوّنات واحدًا تلو الآخر. تنسخ أداة CLI شيفرة كل مكوّن إلى مستودعك، فتعدّلها كأي ملف كتبته بنفسك.
نعم. ملف Figma هو المرجع الأساسي ويستخدم الرموز نفسها التي يستخدمها الكود، فيبقى قرار المصمّم وما يبنيه المطوّر قرارًا واحدًا.
خط Geist للإنجليزية وخط Cairo للعربية على سلّمين متطابقين. ويستخدم النص العربي الأرقام الغربية، وتبقى أسماء العلامات والمصطلحات التقنية بالحروف اللاتينية.
هذا ما نعمل عليه. لكل مكوّن قواعد محتوى واضحة في توثيقه، فيستطيع الوكيل اختيار المكوّن المناسب وملأه دون أن يكسر التصميم.
ابدأ مجانًا، وادفع مرة واحدة للمزيد.
النواة مرخّصة بـ MIT لأي مشروع. وتضيف خطة Pro وخطة Team ترخيصًا تجاريًا للكتل المميزة والقوالب وملف Figma.
مفتوح المصدر
€0مجاني دائمًا
لكل من يبدأ مع فاصلة.
- مستخدمون ومشاريع بلا حدود
- استخدام تجاري بترخيص MIT
- جميع المكوّنات الـ42 بالاتجاهين
- أداة CLI تنسخ الشيفرة إلى مشروعك
- دعم المجتمع على GitHub
- غير مشمول: الكتل والقوالب المميزة
- غير مشمول: ملف Figma الخاص بفاصلة
Pro
الأفضل قيمة€149دفعة واحدة
للمصممين والمطوّرين الأفراد.
- مستخدم واحد
- مشاريع تجارية بلا حدود
- كل ما في الخطة المفتوحة
- جميع الكتل والقوالب المميزة
- ملف Figma الخاص بفاصلة
- وصول دائم وتحديثات مجانية
- دعم خلال 48 ساعة عمل
Team
€349دفعة واحدة
لفرق المنتجات المتنامية.
- حتى 10 مقاعد
- مشاريع تجارية بلا حدود
- كل ما في Pro
- ملف Figma لكل مقعد
- وصول دائم وتحديثات مجانية
- دعم ذو أولوية خلال 24 ساعة عمل
دفعة واحدة، ووصول دائم، ومشاريع بلا حدود.
$ npx @smicolon/
أمر واحد يُعدّ مشروعك. أضف المكوّنات حين تحتاجها، واحتفظ بكل سطر.
أو دع وكيلك ينفّذ ذلك
الصق هذا الأمر في وكيل البرمجة لديك لتثبيت فاصلة.
Set up Fasla in this project. Fasla is an Arabic-first, RTL-ready React component library built on shadcn/ui and Tailwind CSS (docs: https://fasla.smicolon.com). 1. Check that this is a React (18 or 19) and Tailwind CSS (3.4 or 4) project, such as Next.js or Vite, and tell me what you find. 2. Ask me which theme I want: "fasla" (Fasla's own colours, for a project without colours of its own) or "brand" (keep my project's colours). Then initialize without prompts: run `npx @smicolon/fasla-ui@latest init --yes --path src/components --style default --theme <my choice>` (use `--path components` if the project has no src folder; `--path` is the components folder and the CLI adds `ui` itself). Never wait for interactive prompts. If you get an error that lists flags, add them and run again: nothing is written on that error. Then read the "What init did" list and tell me what changed. 3. Run `npx @smicolon/fasla-ui@latest list`, then add the components I ask for, for example `npx @smicolon/fasla-ui@latest add button --yes`, and import them from the path the CLI prints. 4. Fasla copies component source into my project, so I can edit the files freely. 5. Use CSS logical properties (margin-inline-start, not margin-left) and keep both LTR and RTL working. Set dir="rtl" on the root for Arabic pages. 6. Do not change my existing components unless I ask, and show me your plan before you install anything. Ask me which components I want first.