داده‌های ایرانی
پلاک، شبا، کد ملی؛ آماده و معتبرسنجی‌شده
ورودی‌هایی که ساختار داده‌های ایرانی را می‌شناسند، ارقام فارسی و انگلیسی را می‌پذیرند و خطا را به زبان کاربر می‌گویند.
مستندات۱۲ ب ۳۴۵ ایران ۶۷
تازهدر فهرست رسمی رجیستری‌های shadcn
زیرساخت طراحی یکپارچه برای محصولات فارسی.
کامپوننت‌ها، توکن‌ها و کیت فیگمای راست‌به‌چپ و دسترس‌پذیر، از یک منبع. همراه با ابزارهایی که فقط یک محصول ایرانی لازم دارد: تقویم شمسی، کد ملی، شبا و پلاک.
npm i @kashi-ui/react @kashi-ui/css۳۳ ستاره (در پنجرهٔ جدید)۲٬۴۲۱ کلون از GitHub
- کامپوننت
- ۶۷
- آیکون در شش سبک
- ۴۵۰۰
- توکن طراحی
- ۱۸۰
- جفت‌رنگ AA
- ۸۲٪۱۰۰
- تقویم شمسیپنجشنبه ۷ آبان ۱۴۰۵
- شبا معتبرIR06 0170 0000 …
- پلاک خودرو۱۲ ب ۳۴۵ — ۶۷
- کنتراستWCAG 2.2 AA
داشبورد فروش
آبان ۱۴۰۵
فروش
۱۸۴٬۵۰۰٬۰۰۰تومان
۱۲٫۴٪ افزایشنسبت به ماه قبل
سفارش‌ها
۱٬۲۸۴
۸٪ افزایشنسبت به ماه قبل
نرخ مرجوعی
۱٫۸٪
۰٫۶٪ کاهشبهتر از ماه قبل
آخرین سفارش‌ها
| مشتری | شهر | وضعیت | مبلغ |
|---|---|---|---|
| مریم کریمی | تهران | پرداخت‌شده | ۳٬۹۰۰٬۰۰۰ |
| علی رضایی | اصفهان | در انتظار | ۱٬۲۵۰٬۰۰۰ |
| نگار صادقی | شیراز | پرداخت‌شده | ۶۲۰٬۰۰۰ |
| رضا نوری | تبریز | ناموفق | ۴۸۰٬۰۰۰ |
پنل بالا یک نمونهٔ زنده است و فقط با کامپوننت‌های کاشی ساخته شده؛ فیلترها و بازهٔ زمانی کار می‌کنند.
با هر نسخهٔ کاشی، این‌ها تضمین است
- WCAG 2.2 AAکنتراست در هر بیلد
- SemVerیادداشت برای هر نسخه
- MITرایگان، حتی تجاری
- React · Tailwindو HTML و CSS خالص
- CI خودکارتست روی هر تغییر
- Figmaهم‌خوان با کد
۰۱قابلیت‌ها
ساخته‌شده برای فارسی، نه ترجمه‌شده
هر چیزی که یک محصول فارسی از روز اول لازم دارد، به شکل کامپوننت آماده و تست‌شده. هر بخش را باز کنید و نمونهٔ زنده‌اش را ببینید.
تقویم جلالی
تاریخ و بازهٔ شمسی، بدون کتابخانهٔ جانبی
تبدیل دقیق برای سال‌های ۱۳۰۰ تا ۱۵۰۰، انتخاب بازه، ماه و تعطیلات رسمی.
مستنداتراستبهچپ
یک کد، هر دو جهت
همهٔ استایل‌ها با Logical Properties نوشته شده‌اند؛ محصول دوزبانه بدون فورک کردن کامپوننت‌ها.
مستنداتدسترسپذیری
شرط بیلد، نه وعده
کنتراست همهٔ جفت‌رنگ‌ها در هر دو تم بررسی می‌شود و بیلدی که رد شود منتشر نمی‌شود. الگوهای ARIA، فوکوس و صفحه‌کلید در همهٔ کامپوننت‌ها.
مستنداتتمپذیری
برند شما، در یک خط کد
یک رنگ بدهید؛ کاشی طیف یازده‌پله‌ای را می‌سازد و همهٔ کامپوننت‌ها هماهنگ می‌شوند. همین‌جا امتحان کنید:
مستنداتimport { createTheme } from "@kashi-ui/tokens";
const css = createTheme({
brand: "#0fa89b",
radius: 1.5,
density: 0.875,
});۰۲هوش مصنوعی
کاشی در دستیار هوش مصنوعی شما
Claude، Cursor و Copilot با سرور MCP کاشی مستندات هر کامپوننت، ۴۵۰۰ آیکون، توکن‌ها و ابزارهای فارسی را مستقیم می‌خوانند و کدی می‌نویسند که همان بار اول اجرا می‌شود؛ بدون حدس زدن prop ها.
- روی کامپیوتر خودتان اجرا می‌شود؛ بدون کلید API
- همان مستندات سایت، با هر نسخه به‌روز
- کد ملی، شبا، تاریخ شمسی و تم برند هم به‌عنوان ابزار
claude mcp add kashi -- npx -y @kashi-ui/mcp۰۳آیکون‌ها
۴۵۰۰ آیکون، شش سبک، یک زبان بصری
از فلش و فرم تا سماور و بادگیر؛ همه روی شبکهٔ ۲۰×۲۰ و با همان گوشه‌های نرم کامپوننت‌ها. هر آیکون در شش سبک هست و با یک prop عوض می‌شود.
- آیکون
- ۴۵۰۰
- سبک
- ۶
- دسته
- ۷۱
۰۴پلتفرم
یک پلتفرم، از فیگما تا تولید
کاشی لایه‌لایه ساخته شده: هر تیم فقط همان بخشی را برمی‌دارد که لازم دارد، و همه از یک منبع توکن تغذیه می‌شوند.
- طراحی
Kashi UI Kitپلاگین فیگماحدود ۲۷۰ Variable و بیش از ۷۰ کامپوننت، مستقیم از روی همین کد. - پایه
@kashi-ui/tokensCSS · JSON · JSرنگ، فاصله، تایپوگرافی و سایه؛ یک منبع حقیقت برای طراحی و کد. - استایل
@kashi-ui/cssCSS خالصاستایل همهٔ کامپوننت‌ها در Cascade Layer؛ برای هر فریم‌ورکی. - کامپوننت
@kashi-ui/reactReact · TypeScript۶۷ کامپوننت دسترس‌پذیر با تایپ کامل و برچسب‌های فارسی. - کامپوننت
@kashi-ui/elementsWeb Componentsفیلدهای فارسی، تقویم شمسی، فرم نشانی، نقشهٔ ایران، جدول داده و منو برای Vue، Svelte، Angular و HTML.
ماژول‌های فارسی و دارایی‌ها
@kashi-ui/persianبدون وابستگیتاریخ شمسی، ارقام فارسی و اعتبارسنجی کد ملی، کارت و شبا.@kashi-ui/iconsReact · SVG۴۵۰۰ آیکون در شش سبک، هماهنگ با زبان بصری کاشی.@kashi-ui/bank-logosCC0لوگوی SVG ۴۰ بانک و ۱۰ درگاه پرداخت ایران.@kashi-ui/tailwindTailwind 3 · 4رنگ‌ها، فونت، گردی و سایههای کاشی به‌شکل کلاس‌های Tailwind، همگام با تم.
۰۵برای سازمان‌ها
برای تیم‌هایی که در مقیاس می‌سازند
چند محصول، چند تیم و یک زبان طراحی. کاشی طوری ساخته شده که بدون بازنویسی وارد محصول فعلی شود و سال‌ها قابل نگه‌داری بماند.
چندبرندی با یک کتابخانه
هر محصول یا زیربرند رنگ و شعاع خودش را با createTheme می‌گیرد؛ کامپوننت‌ها یکی می‌مانند و به‌روزرسانی یک‌جا انجام می‌شود.
مهاجرت تدریجی، بدون بازنویسی
استایل‌ها در Cascade Layer هستند و CSS فعلی شما همیشه برنده است؛ می‌شود صفحه‌به‌صفحه و پکیج‌به‌پکیج جلو رفت.
یک زبان طراحی برای همهٔ پشته‌ها
تیم‌های React از کامپوننت‌ها استفاده می‌کنند و بقیه از همان CSS و توکن‌ها؛ وب، پنل داخلی و سایت معرفی یک‌شکل می‌شوند.
نگه‌داری شفاف و بلندمدت
نسخه‌گذاری معنایی، یادداشت انتشار برای هر تغییر و تاریخچهٔ کامل نسخه‌ها؛ تغییر ناسازگار همیشه اعلام می‌شود.
طراحی و کد از یک منبع
کیت فیگما مستقیم از روی همین کد ساخته و با CSS زنده مقایسه می‌شود؛ تحویل طرح به توسعه بدون ترجمه.
پشتیبانی مستقیم
برای ارزیابی، راه‌اندازی یا سفارشی‌سازی در سازمانتان، مستقیم با نگه‌دارندهٔ کاشی در تماس باشید.
۰۶کیفیت و نگه‌داری
کیفیت در فرایند ساخت، نه در وعده
هر تغییر در کاشی از یک مسیر خودکار می‌گذرد. چیزی که این مسیر را رد نکند، به دست تیم شما نمی‌رسد.
کنتراست AA در هر بیلد
۸۲ جفت‌رنگ در تم تیره و روشن بررسی می‌شود؛ بیلدِ رد‌شده منتشر نمی‌شود.
الگوهای دسترس‌پذیر
نقش‌ها و ویژگی‌های ARIA، مدیریت فوکوس و کار کامل با صفحه‌کلید، با تست خودکار.
نسخه‌گذاری معنایی
انتشار با Changesets و یادداشت تغییر برای هر پکیج؛ تغییر ناسازگار همیشه اعلام می‌شود.
هم‌خوانی فیگما و کد
پلاگین فیگما در CI ساخته و با CSS زنده مقایسه می‌شود؛ طراحی و کد از هم جدا نمی‌افتند.
CI روی هر تغییر
هر Pull Request بیلد، تست و بررسی محتوای پکیج‌ها را پشت سر می‌گذارد.
لایسنس MIT
استفادهٔ تجاری و داخلی بدون محدودیت؛ لوگوی بانک‌ها با CC0 و فونت با OFL.
Sepantapouya/Kashimain
npm ciنصب قفل‌شدهbuild۶ پکیج و بررسی کنتراست WCAGtestتوکن‌ها، فارسی، آیکون‌ها، Reactfigma:testهم‌خوانی پلاگین با CSSdocsبیلد سایت مستنداتpackبررسی محتوای پکیج‌ها
۰۷مقایسه
کاشی در کنار دیزاین‌سیستم‌های جهانی
بر اساس مستندات عمومی هر پروژه؛ با صداقت دربارهٔ جایی که کاشی بهترین انتخاب نیست.
| قابلیت | کاشی | shadcn/ui | MUI | Ant Design |
|---|---|---|---|---|
| راست‌به‌چپ پیش‌فرض | ||||
| تقویم و تاریخ شمسی | ||||
| کد ملی، شبا، کارت و پلاک | ||||
| فونت فارسی همراه پکیج | ||||
| استفاده بدون React | ||||
| بررسی خودکار کنتراست | ||||
| اکوسیستم و جامعه |
- دارد
- بخشی یا با تنظیم
- ندارد
- اعلام نشده
۰۸متن‌باز
ساخته‌شده در فضای باز، با همراهی شما
کد، نقشهٔ راه و همهٔ تصمیم‌ها در GitHub است. عددهای زیر زنده از خود GitHub می‌آیند؛ ستاره‌ها لحظه‌ای و کلون‌ها روزانه.
- ستاره در GitHub
- ۳۳
- کلون از ابتدا
- ۲٬۴۲۱
- کلون‌کنندهٔ یکتا، ۱۴ روز
- ۶۹۷
- نسخهٔ منتشرشده
- ۲۸
زنده از GitHub · ستاره‌ها لحظه‌ای، کلون‌ها روزانه
حمایت از کاشی
کاشی رایگان است، اما ساختنش هزینه دارد
طراحی، کدنویسی، تست دسترس‌پذیری و نگه‌داری مداوم کاشی با هزینهٔ شخصی انجام می‌شود. اگر کاشی به کار تیمتان آمده، با حمایت مالی به ادامهٔ آن کمک کنید.
برای حمایت، در تلگرام به @sepantapouya_ux پیام بدهید.
۰۹پرسش‌های رایج
پیش از انتخاب کاشی
پاسخ پرسش‌هایی که تیم‌ها معمولاً پیش از استفاده می‌پرسند. پرسش دیگری دارید؟ در تلگرام بپرسید (در پنجرهٔ جدید).
استفاده از کاشی در محصول تجاری آزاد است؟
بله. کاشی با لایسنس MIT منتشر می‌شود و استفادهٔ تجاری و داخلی، تغییر و توزیع آن بدون محدودیت آزاد است. لوگوی بانک‌ها با CC0 و فونت وزیرمتن با OFL منتشر شده‌اند.
تغییرات ناسازگار چطور اعلام می‌شود؟
همهٔ پکیج‌ها با نسخه‌گذاری معنایی (SemVer) و Changesets منتشر می‌شوند و هر نسخه یادداشت انتشار دارد. تاریخچهٔ کامل در صفحهٔ نسخه‌ها هست.
بدون React هم می‌شود از کاشی استفاده کرد؟
بله. استایل همهٔ کامپوننت‌ها در @kashi-ui/css با CSS خالص است و فیلدهای فارسی، تقویم شمسی، فرم نشانی، نقشهٔ ایران، جدول داده، منو و پنجره در @kashi-ui/elements به‌شکل وب کامپوننت هستند؛ با یک خط script در Vue، Svelte، Angular، وردپرس یا HTML ساده کار می‌کنند.
با Next.js و ابزارهای فعلی ما سازگار است؟
کامپوننت‌ها با React نسخهٔ ۱۸ و بالاتر کار می‌کنند و با Next.js، Vite و Remix سازگارند. استایل‌ها در Cascade Layer هستند و با CSS فعلی پروژه تداخل نمی‌کنند. اگر Tailwind دارید، پریست @kashi-ui/tailwind رنگ‌ها و توکن‌های کاشی را به‌شکل کلاس‌های Tailwind در اختیارتان می‌گذارد.
می‌توانیم برند خودمان را اعمال کنیم؟
بله. با یک رنگ، createTheme طیف یازده‌پله‌ای برند را می‌سازد و همهٔ کامپوننت‌ها هماهنگ می‌شوند. شعاع گوشه‌ها، تراکم و فونت هم قابل تنظیم است و همین تم در کیت فیگما هم اعمال می‌شود.
برای راه‌اندازی در سازمان پشتیبانی دارید؟
گزارش مشکل و پیشنهاد در GitHub بررسی می‌شود. برای ارزیابی، راه‌اندازی یا سفارشی‌سازی سازمانی، در تلگرام مستقیم با نگه‌دارندهٔ کاشی صحبت کنید.
شروع در سه قدم
محصول فارسی بعدی‌تان را با کاشی بسازید.
بدون پیکربندی، بدون افزونهٔ RTL و بدون بستهٔ تاریخ جداگانه. رایگان و متن‌باز با لایسنس MIT.
نصب
دو پکیج: کامپوننت‌های React و استایل‌ها؛ یا کد خودِ کامپوننت‌ها با shadcn.
npm i @kashi-ui/react @kashi-ui/cssیک خط CSS
استایل‌ها در Cascade Layer هستند، پس CSS خودتان همیشه برنده است.
import "@kashi-ui/css";بسازید
برچسب‌ها، پیام‌ها و ارقام از پیش فارسی‌اند؛ دسترس‌پذیری هم.
<DatePicker label="تاریخ تولد" />