کامپوننت‌های فارسی، برای توسعه‌دهنده‌ها و وایب‌کدرها.
ابزارهای هوش مصنوعی و کتابخانه‌های انگلیسی به انگلیسی فکر می‌کنن: فونت Inter می‌گذارن، اعداد را لاتین می‌نویسن و دکمه را چپ‌چین می‌کنن. وایب‌فارسی یک رجیستری از کامپوننت‌های React + Tailwind هست. همه‌شون از پایه راست‌چین هستن و فونت، اعداد فارسی، تومان و تقویم شمسی داخل خودشون هست.
وایب‌فارسی پکیج npm نیست. فایل هر کامپوننت داخل پروژه‌تون نوشته میشه و از همان لحظه مال شماست. هر کامپوننت دو خروجی داره: کد TypeScript که در پروژه می‌گذارید، و یک پرامپت انگلیسی که قوانین راست‌چین و فارسی داخلشه و به Cursor یا Claude می‌دید. سرور MCP هم داره تا ادیتور خودش این قوانین و کدها را بخونه و لازم نباشه چیزی یادآوری کنید.
سایت و مستندات: vibefarsi.ir
Next.js و Vite · Tailwind v4 · بدون وابستگی اضافه · رایگان و متن‌باز
Persian RTL components for React + Tailwind. Copy the file, run
npx vibefarsi add, or let Cursor / Claude Code pull it over MCP. The rest of this README is in Persian; the commands are not.
- راست‌چین واقعی. چیدمان و آیکون‌ها از پایه راست‌چین طراحی شدن، چون یک
dirروی کل صفحه کافی نیست. فقط از ویژگی‌های منطقی CSS استفاده میشه (مثلاًtext-startبه‌جایtext-left). - تایپوگرافی فارسی. وزن فونت و ارتفاع خط برای فارسی تنظیم شده و
letter-spacingهم حروف را از هم جدا نمی‌کنه. - اعداد و تقویم شمسی. اعداد فارسی، جداکننده‌ی هزارگان، تومان و تاریخ شمسی همه داخل خود کامپوننت هستن. هفته از شنبه شروع میشه.
- رنگ از توکن. هر رنگ از یک متغیر CSS می‌آد. تم تیره پیش‌فرضه و با یک دستور عوضش می‌کنید.
روی یک پروژه‌ی Next.js یا Vite که Tailwind v4 داره:
npx vibefarsi@latest initinit یک‌بار اجرا میشه و این‌ها را می‌نویسه:
lang="fa" dir="rtl"روی<html>، در Next.js داخلapp/layout.tsxو در Vite داخلindex.html- فونت Vazirmatn، در Next.js با
next/font/googleوapp/fonts.ts، و در بقیه‌ی پروژه‌ها با import از Google Fonts داخل CSS - توکن‌های تم گرافیت و نگاشت Tailwind در
globals.css lib/utils.ts(اعداد فارسی،formatToman،cn) وlib/jalali.ts(تبدیل شمسی) از رجیستری- قوانین مدل: یک بلوک فشرده از قوانین فارسی و کرافت رابط داخل
AGENTS.md، خط@AGENTS.mdدرCLAUDE.md، و دو راهنمای کاملagents-md-persianوui-craft-rulesدرdocs/تا Claude Code، Codex و Cursor از همان اول با راست‌چین، اعداد فارسی، توکن‌ها و اندازه‌های درست شروع کنن vibefarsi.jsonو مسیر@/*در tsconfig
بعد کامپوننت‌ها را اضافه کنید:
npx vibefarsi add button calendar price
npx vibefarsi listوابستگی‌های رجیستری خودشون می‌آن (calendar خودش lib/jalali.ts را می‌آوره) و پکیج‌های npm لازم نصب میشن. مقصد فایل‌ها:
| نوع | مسیر |
|---|---|
| کامپوننت | components/ui |
| بلاک | components/blocks |
| نمودار | components/charts |
| تقویم | components/calendar |
| انیمیشن | components/animations |
| پس‌زمینه | components/backgrounds |
| قالب | components/templates |
| تم | app/globals.css |
| مهارت | .claude/skills/<slug>/SKILL.md (راهنماها در docs/) |
فلگ‌های پرکاربرد:
| فلگ | کار |
|---|---|
--font iransans |
اگر IRANSans-Reg.woff در پوشه‌ی fonts یا public باشه، همان را به‌جای Vazirmatn وصل می‌کنه |
--theme saffron |
تم دیگری به‌جای گرافیت. بعداً هم می‌تونید با npx vibefarsi add saffron عوضش کنید |
--registry <url> |
رجیستری دیگری، مثلاً http://localhost:3000/r وقتی روی خود مخزن کار می‌کنید |
--dry-run |
فقط نشون میده چه فایل‌هایی نوشته میشن و چیزی را تغییر نمیده |
--overwrite |
فایل‌های موجود را جایگزین می‌کنه |
--no-install |
پکیج‌های npm را نصب نمی‌کنه |
نصب دستی هم ممکنه: فایل را از سایت کپی کنید و globals.css را طبق مستندات تنظیم کنید.
سرور MCP وایب‌فارسی قوانین طراحی فارسی و کد کامپوننت‌ها را مستقیم به Cursor، Claude Code و Codex میده. یک‌بار آدرس https://vibefarsi.ir/mcp را اضافه کنید و بعد مثل همیشه پرامپت بدید.
{
"mcpServers": {
"vibefarsi": {
"url": "https://vibefarsi.ir/mcp"
}
}
}| ادیتور | کجا |
|---|---|
| Cursor | .cursor/mcp.json در پروژه، یا افزودن به Cursor |
| Claude Code | claude mcp add --transport http vibefarsi https://vibefarsi.ir/mcp |
| Codex | codex mcp add vibefarsi --url https://vibefarsi.ir/mcp |
اگر بخواید سرور روی سیستم خودتون اجرا بشه: npx -y @vibefarsi/mcp.
ابزارهایی که مدل در اختیار داره:
| ابزار | کار |
|---|---|
get_design_rules |
قوانین راست‌چین، فونت، اعداد و توکن‌ها |
search_registry |
جست‌وجو بین کامپوننت‌ها، به فارسی یا انگلیسی |
get_component |
کد و پرامپت همان کامپوننت، با وابستگی‌هاش |
get_theme |
توکن‌های رنگ و شعاع گوشه‌ی هر تم |
scaffold_page |
از توضیح صفحه، یک ترکیب آماده می‌سازه |
یک پرامپت معمولی مثل «یک صفحه‌ی پرداخت با خلاصه‌ی سبد و فرم آدرس بساز» این مسیر را می‌ره:
get_design_rules()
scaffold_page("صفحه‌ی پرداخت")
get_component(["input", "price", "button"])
خروجی همان بار اول درسته: فونت پروژه، چیدمان راست‌چین، مبلغ‌ها با اعداد فارسی و تومان، و رنگ‌ها از توکن‌های تم، نه رنگ دلخواه مدل.
| بخش | تعداد | شامل |
|---|---|---|
| کامپوننت‌ها | ۶۸ | دکمه، فرم، جدول داده، تقویم شمسی، شماره‌ی موبایل، کد تأیید، شماره‌ی شبا، قیمت به تومان |
| بلاک‌ها | ۸ | هیرو، ویژگی‌ها، ردیف قیمت، پرسش‌های متداول، آمار، نظر مشتریان، کارت ورود، فراخوان پایانی |
| نمودارها | ۱۵ | خطی، ناحیه‌ای، میله‌ای، ترکیبی، دایره‌ای، گیج، راداری، پراکندگی، نقشه‌ی حرارتی تقویم شمسی، قیف، نقشه‌ی درختی، آبشاری و شمعی، همه بدون کتابخانه |
| تقویم | ۱۰ | تقویم رویداد با نمای ماه، هفته، روز و فهرست، نمای سال، تعطیلات رسمی ایران با تاریخ قمری، انتخاب نوبت، گانت و برنامه‌ی شیفت |
| انیمیشن‌ها | ۳۹ | انیمیشن با CSS و React، بدون کتابخانه‌ی اضافه |
| پس‌زمینه‌ها | ۴۴ | الگو و نور کم‌کنتراست که متن روشون خوانا می‌مونه |
| قالب‌ها | ۲۴ | صفحه‌های کامل، از همین کامپوننت‌ها |
| سیستم‌های طراحی | ۶ | گرافیت (پیش‌فرض)، فیروزه، زعفران، انار، لاجورد، کاغذ (روشن) |
| مهارت‌ها | ۱۰ | فایل‌های SKILL.md برای Claude Code، Cursor و Codex: فارسی محاوره‌ای و رسمی، متن رابط کاربری، رابط راست‌چین، تقویم شمسی، اعتبارسنجی ایرانی، سئوی فارسی، و دو راهنما برای CLAUDE.md و تایپوگرافی |
سایت، رجیستری، CLI و سرور MCP همه در همین مخزن هستن. همه‌چیز از پوشه‌ی registry می‌آد. سایت همان فایل‌ها را نشون میده و مسیر /r هم همان‌ها را به CLI و MCP میده.
برای PR، جزئیات استک، چیزهایی که عمداً نداریم، و چک‌لیست مشارکت در CONTRIBUTING.md هست.
| بخش | ابزار |
|---|---|
| سایت / رجیستری | Next.js ۱۶ · React ۱۹ · TypeScript · Tailwind v۴ |
| آیکون رجیستری | فقط lucide-react (تقریباً همیشه) |
| سایت | shiki برای هایلایت کد · zod |
| MCP | @modelcontextprotocol/server · پکیج @vibefarsi/mcp (Node ۲۰+) |
| CLI | TypeScript خالص · پکیج vibefarsi روی npm |
| استقرار | Liara · پورت ۳۰۰۰ |
انیمیشن‌ها با CSS و React هستن؛ Framer Motion و GSAP داخل رجیستری نمی‌آد. تقویم و اعتبارسنجی ایرانی هم داخل lib/ خود مخزنه، نه پکیج جدا.
registry/ ui/ blocks/ charts/ calendar/ animations/ backgrounds/ templates/ themes/ skills/
lib/registry/ names, descriptions, prompts, catalog builder
app/r/ GET /r (catalog) GET /r/{type}/{slug}.json (item)
packages/cli/ npx vibefarsi
mcp/ @vibefarsi/mcp
app/ components/ the site
npm install
npm run dev # site + registry at http://localhost:3000اجرای CLI از سورس:
npm run build:cli
npm run vibefarsi -- init --cwd ../my-app --registry http://localhost:3000/rاجرای سرور MCP از سورس:
npm install --prefix mcp
npm run mcp # stdio server via tsx
npm run mcp:smokeسرور MCP رجیستری را از VIBEFARSI_URL می‌خونه (پیش‌فرض https://vibefarsi.ir). برای رجیستری محلی آن را روی http://localhost:3000 بگذارید. VIBEFARSI_ROOT هم برای وقتیه که فایل‌های رجیستری جای دیگری باشن.
روی npm هر دو پکیج هست: npx vibefarsi و npx -y @vibefarsi/mcp. دستورهای بالا برای وقتیه که روی سورس همین مخزن کار می‌کنید.
MIT. پلن پولی نداریم و هیچ کامپوننتی قفل نیست. می‌خوایم ساختن یک رابط فارسی خوب، کار ساده‌ای باشه.
برای مشارکت و جزئیات استک: CONTRIBUTING.md.