RitlaEnglishافحص مجانًا
التوثيق

البدء مع كنز

كيف تُثبَّت المكونات، وكيف تنتقل الرموز من Figma إلى الكود، والقواعد التي يتبعها كل مكوّن في الاتجاه من اليمين.

البداية

يصلك كنز بثلاث طرق من مصدر واحد: المكونات على هذا الموقع معاينات حيّة، وملف Figma للمصممين، وكود React للمطورين. ابدأ بالمكوّن الذي تحتاجه، وبدّل معاينته إلى العربية، واقرأ ملاحظات الاتجاه قبل أي شيء آخر.

المكونات ›

التثبيت

يُثبَّت كنز عبر أداة shadcn كمصدر تملكه. يُفتح الوصول إلى السجل مع الإطلاق، وهذه هي الأوامر التي سيستخدمها.

  1. 1. هيّئ الثيم مرة واحدة قريبًا

    npx shadcn@latest init https://ritla.app/r/style.json

  2. 2. سجّل النطاق @ritla في components.json

    components.json
    {
  "registries": {
    "@ritla": "https://ritla.app/r/{name}.json"
  }
}

  3. 3. أضف المكونات

    npx shadcn@latest add @ritla/phone-input @ritla/card-details @ritla/button

رموز التصميم

اسم الصنف هو مسار المتغير في Figma دون مجموعته العليا، فيتحدث المصمم والمطور بالاسم نفسه.

متغير Figmaمتغير CSSصنف Tailwind
background/surface/lowest--kanz-background-surface-lowestbg-surface-lowest
text/gray/txt-primary--kanz-text-gray-txt-primarytext-gray-txt-primary
border/gray/soft--kanz-border-gray-softborder-gray-soft
space-16--kanz-space-16p-16, gap-16, ms-16
radius/8--kanz-radius-8rounded-8, rounded-s-8
body-14--kanz-…text-body-14

مبادئ الاتجاه

  • خصائص منطقية فقط: ms وme وps وpe وstart وend وtext-start. أي صنف باتجاه فيزيائي خطأ.
  • الأسهم وعلامات التوجيه والتنقل وأشرطة التقدم والمنزلقات ومسارات التنقل تنعكس.
  • أزرار الوسائط والساعات وعلامات الصح والشعارات ومحاور الأرقام في الرسوم وأرقام الهواتف والكود لا تنعكس أبدًا.
  • الأرقام الغربية والهندية مدعومة معًا، وتُحدَّد مرة واحدة في المزوّد.
  • لا تسقط العربية أبدًا إلى خط لاتيني، ولا يُضاف تباعد بين حروفها.
  • النص الذي قد يصل بأي من اللغتين يأخذ dir="auto"، وأرقام الهواتف والرموز والمعرّفات تُعزل من اليسار إلى اليمين.