التثبيت

اضبط مشروعك مرة واحدة، ثم أضف الكتلة بأمر واحد.

شغّل الأمر init أولًا

شغّل الأمر init مرة واحدة في كل مشروع، قبل إضافة أول كتلة. يكتب الأمر الملف components.json الذي يقرؤه كل أمر add، ويضيف الدالة المساعدة cn التي تستوردها الكتل، ويثبّت المظهر.

bash
npx @smicolon/fasla-ui@latest init

لطبقات المظهر وضبط المشروع يدويًا، راجع صفحة التثبيت في قسم المكوّنات.

ثبّت كتلة

يكتب الأمر add الكتلة في components/blocks/، ويثبّت معها المكوّنات التي تستخدمها، مثل accordion، tabs، والحزم التي تستوردها، فلا تحتاج إلى إضافتها واحدًا واحدًا.

bash
npx @smicolon/fasla-ui@latest add faq-classic-centered

ويثبّت الأمر npx shadcn@latest add الكتلة بالطريقة نفسها، من رابطها في السجل:

npx shadcn@latest add https://fasla.smicolon.com/r/faq-classic-centered.json

CSS للكتل ذات السطح المعكوس

يضيف كلا الأمرين add ربط الرموز المعكوسة الذي تحتاجه الكتلة ذات السطح المعكوس. وإذا ثبّتّ إحداها يدويًا في Tailwind 4، فأضف هذه الأسطر الثلاثة إلى كتلة @theme inline في ملف الأنماط:

css
--color-background-inverse: var(--background-inverse, var(--foreground));
--color-foreground-inverse: var(--foreground-inverse, var(--background));
--color-muted-foreground-inverse: var(--muted-foreground-inverse, color-mix(in oklab, var(--background) 75%, var(--foreground)));

راجع الرموز المعكوسة لطريقة الإضافة في Tailwind 3، ولشرح القيم البديلة وضبط ألوانك أنت.