التثبيت

ثبّت فاصلة في مشروعك واضبطها في خطوات قليلة.

المتطلبات

مكتبة React بالإصدار 18 أو أحدث
إطار Tailwind CSS بالإصدار 3.4 أو أحدث
لغة TypeScript، وهي موصى بها

ثبّت بأداة الأوامر (CLI)

أسهل طريقة لإضافة المكوّنات هي الحزمة @smicolon/cli، وتحتاج إلى خطوتين.

1. هيّئ فاصلة مرة واحدة في كل مشروع. يكتب هذا الأمر الملف components.json، الذي يقرؤه كل أمر add:

npx @smicolon/cli init

2. أضف مكوّنًا:

npx @smicolon/cli add button

أو أضف عدة مكوّنات دفعة واحدة:

npx @smicolon/cli add card input badge

اعرض كل ما يقدّمه السجل (registry):

npx @smicolon/cli list

ثبّت يدويًا

يمكنك أيضًا نسخ المكوّنات مباشرة من الشيفرة المصدرية.

1. ثبّت الاعتماديات (dependency):

npm install class-variance-authority clsx tailwind-merge framer-motion

2. أضف الدالة المساعدة cn إلى مشروعك:

// lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

3. انسخ الشيفرة المصدرية لكل مكوّن من صفحته.

اضبط Tailwind

اربط الـ tokens الدلالية بقسم theme في إعدادات Tailwind. والـ token قيمة تصميم محفوظة باسم، مثل primary للون الأساسي. تصدّر الحزمة المجموعة كاملة، مغلّفة مسبقًا لتبقى معدِّلات الشفافية (opacity modifier) تعمل:

// tailwind.config.ts
import { tailwindSemanticColors } from "@smicolon/fasla-ui/tokens"

module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: tailwindSemanticColors,
    },
  },
}

بعد ذلك، عرّف متغيرات CSS المقابلة بألوان كاملة بصيغة hex أو oklch، على :root للوضع الفاتح، وعلى .dark للوضع الداكن. ربط الـ token بقيمة var(--primary) وحدها يبدو صحيحًا، لكنه يُسقط معدِّلات الشفافية (opacity modifier) في Tailwind دون تنبيه، فلا ينتج bg-primary/10 أي قاعدة. لذلك تغلّف الخريطة المُصدَّرة كل token بالدالة color-mix().