نصب و راه‌اندازی

نحوه نصب وابستگی‌ها و ساختاردهی پروژه با راد

شروع سریع

برای شروع سریع، فقط یک دستور کافی است:

npx @quark-lab/rad-ui init

این دستور پروژه شما را شناسایی کرده و تنظیمات لازم را انجام می‌دهد.

راهنمای گام‌به‌گام

پیش‌نیازها

قبل از نصب راد، مطمئن شوید که موارد زیر را نصب کرده‌اید:

React 18 یا بالاتر
Tailwind CSS 3.x یا 4.x
Node.js 16 یا بالاتر

نکته: راد با تمام مدیران بسته (npm, pnpm, yarn, bun) سازگار است.

راه‌اندازی پروژه

دستور زیر را در ریشه پروژه خود اجرا کنید:

npx @quark-lab/rad-ui init

این دستور از شما چند سوال می‌پرسد:

انتخاب تم

یکی از ۵ تم فارسی را انتخاب کنید: کاهگل، فیروزه، لاجورد، پسته، یا انار

مسیر کامپوننت‌ها

مسیری که می‌خواهید کامپوننت‌ها در آن ذخیره شوند (پیش‌فرض: src/components/ui)

نسخه Tailwind

نسخه Tailwind CSS شما به صورت خودکار شناسایی می‌شود (v3 یا v4)

فایل‌های ایجاد شده:

rad-ui.json - فایل پیکربندی
src/app/globals.css - متغیرهای تم
src/lib/utils.ts - توابع کمکی

افزودن کامپوننت

حالا می‌توانید کامپوننت‌های مورد نیاز خود را اضافه کنید:

npx @quark-lab/rad-ui add button

این دستور:

کامپوننت را دانلود می‌کند
وابستگی‌های داخلی را به صورت خودکار نصب می‌کند
بسته‌های npm مورد نیاز را اضافه می‌کند

مثال استفاده:

import { Button } from "@/components/ui/button";

export default function MyComponent() {
  return <Button>کلیک کنید</Button>;
}

پیکربندی

فایل rad-ui.json تنظیمات پروژه شما را نگه می‌دارد:

{
  "theme": "kahgel",
  "tailwindVersion": "v3",
  "paths": {
    "components": "src/components/ui",
    "utils": "src/lib/utils.ts"
  },
  "aliases": {
    "@": "./src"
  }
}

تنظیمات Tailwind

راد با هر دو نسخه Tailwind CSS v3 و v4 سازگار است. برای پشتیبانی از RTL، پلاگین زیر را نصب کنید:

npm install tailwindcss-rtl

سپس در tailwind.config.ts اضافه کنید:

module.exports = {
  plugins: [
    require('tailwindcss-rtl'),
  ],
}

مراحل بعدی

حالا که راد را نصب کردید، می‌توانید کامپوننت‌ها را کاوش کنید: