مقدمه

کامپوننت‌های متحرک React، آماده استفاده در پروژه‌های واقعی.

Tarhak (طرحک) مجموعه‌ای رایگان از کامپوننت‌های متحرک برای React است؛ از تب و دکمه تا کارت، گالری و تعاملات مختلف.

هر کامپوننت را با یک دستور به پروژه اضافه می‌کنید و کد آن داخل پروژه خودتان قرار می‌گیرد. می‌توانید هر بخش را آزادانه تغییر دهید.

چرا طرحک؟

طرحک برای ساخت رابط‌هایی ساخته شده که فقط ظاهر خوبی ندارند، بلکه به تعامل کاربر هم واکنش نشان می‌دهند.

کلیک، hover، جابه‌جایی، حذف، کشیدن و تغییر وضعیت، با انیمیشن‌هایی که برای همان تعامل طراحی شده‌اند.

کامپوننت‌ها با React، Motion و Tailwind CSS ساخته شده‌اند.

کد کاملاً در اختیار شماست

طرحک یک پکیج بسته نیست.

کامپوننت را انتخاب کنید و با CLI به پروژه اضافه کنید. از آن لحظه، کد داخل پروژه خودتان است.

می‌توانید:

• ظاهر را تغییر دهید
• انیمیشن را تغییر دهید
• سرعت و رفتار را تنظیم کنید
• پراپ‌ها را تغییر دهید
• بخش‌های اضافی را حذف کنید
• کامپوننت را مطابق نیاز خودتان بازنویسی کنید

برای تغییر کامپوننت‌ها لازم نیست منتظر آپدیت کتابخانه بمانید.

نصب

طرحک از Registry مربوط به FarsiUI استفاده می‌کند.

افزودن Registry

در فایل components.json:

{

  "registries": {

    "@tarhak": "https://tarhak.ir/r/{name}.json"

  }

}

نصب یک کامپوننت

npx farsiui@latest add @tarhak/discrete-tabs

با pnpm، yarn و bun هم می‌توانید نصب کنید:

pnpm dlx farsiui@latest add @tarhak/discrete-tabs

yarn dlx farsiui@latest add @tarhak/discrete-tabs

bunx --bun farsiui@latest add @tarhak/discrete-tabs

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

npx farsiui@latest add @tarhak/delete-button @tarhak/status-button

پروژه شما باید React و Tailwind داشته باشد. وابستگی‌های موردنیاز هر کامپوننت هنگام نصب اضافه می‌شوند.

انیمیشن باید کاربرد داشته باشد

هدف طرحک اضافه کردن حرکت به هر بخش از رابط کاربری نیست.

انیمیشن‌ها برای چیزهایی مثل:

• بازخورد تعامل
• تغییر وضعیت
• جابه‌جایی
• حذف و اضافه شدن
• کشیدن و مرتب کردن
• نمایش وضعیت انتظار

استفاده می‌شوند.

اگر یک حرکت چیزی به تجربه کاربر اضافه نکند، دلیلی برای وجودش ندارد.

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

در صفحه مرور می‌توانید کامپوننت‌ها را ببینید، تعامل آن‌ها را امتحان کنید و وارد صفحه هر کامپوننت شوید.

هر صفحه شامل:

• پیش‌نمایش زنده
• دستور نصب
• سورس کامپوننت

است.

برای پروژه‌های واقعی

طرحک برای زمانی است که می‌خواهید بدون ساختن هر تعامل از صفر، سریع‌تر به یک رابط کاربری کامل برسید.

کامپوننت‌ها را اضافه کنید، با طراحی خودتان هماهنگ کنید و هر قسمت را که لازم دارید تغییر دهید.

رایگان

طرحک رایگان است و قرار است رایگان بماند.

اگر کامپوننتی به کارتان می‌آید، آن را به پروژه‌تان اضافه کنید و مطابق نیاز خودتان تغییر دهید.

برای سؤال، پیشنهاد یا همکاری می‌توانید از صفحه تماس با ما در ارتباط باشید.