مقدمه

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

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

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

چرا طرحَک؟

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

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

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

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

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

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

می‌توانید:

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

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

نصب

ساده‌ترین راه — CLI طرحَک (رجیستری را خودش در components.json می‌نویسد):

npx @tarhak/cli@latest add discrete-tabs

چند کامپوننت:

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

با pnpm / yarn / bun:

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

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

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

پروژه باید React و Tailwind داشته باشد و یک‌بار با FarsiUI آماده شده باشد (npx farsiui@latest init). لازم نیست farsiui را به‌عنوان dependency نگه دارید.

اگر فقط رجیستری را می‌خواهید:

npx @tarhak/cli@latest init

MCP برای ایجنت

راهنمای اتصال Cursor، Claude Code، Codex و OpenCode فقط در صفحهٔ MCP است.

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

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

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

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

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

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

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

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

هر صفحه شامل:

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

است.

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

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

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

رایگان

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

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