کامپوننت‌ها، توکن‌ها و الگوهای راست‌به‌چپ و دسترس‌پذیر، به‌همراه ابزارهایی که فقط یک محصول ایرانی لازم دارد: تقویم شمسی، کد ملی، شبا، پلاک و بیشتر.
npm i @kashi-ui/react @kashi-ui/cssداشبورد فروش
آبان ۱۴۰۵
فروش
۱۸۴٬۵۰۰٬۰۰۰تومان
سفارش‌ها
۱٬۲۸۴
نرخ مرجوعی
۱٫۸٪
آخرین سفارش‌ها
| مشتری | شهر | وضعیت | مبلغ |
|---|---|---|---|
| مریم کریمی | تهران | پرداخت‌شده | ۳٬۹۰۰٬۰۰۰ |
| علی رضایی | اصفهان | در انتظار | ۱٬۲۵۰٬۰۰۰ |
| نگار صادقی | شیراز | پرداخت‌شده | ۶۲۰٬۰۰۰ |
| رضا نوری | تبریز | ناموفق | ۴۸۰٬۰۰۰ |
پنل بالا یک نمونهٔ زنده است و فقط با کامپوننت‌های کاشی ساخته شده؛ فیلترها و بازهٔ زمانی کار می‌کنند.
۰۱پلتفرم
کاشی لایه‌لایه ساخته شده: هر تیم فقط همان بخشی را برمی‌دارد که لازم دارد، و همه از یک منبع توکن تغذیه می‌شوند.
Kashi UI Kitپلاگین فیگماحدود ۲۷۰ Variable و بیش از ۷۰ کامپوننت، مستقیم از روی همین کد.@kashi-ui/tokensCSS · JSON · JSرنگ، فاصله، تایپوگرافی و سایه؛ یک منبع حقیقت برای طراحی و کد.@kashi-ui/cssCSS خالصاستایل همهٔ کامپوننت‌ها در Cascade Layer؛ برای هر فریم‌ورکی.@kashi-ui/reactReact · TypeScript۶۴ کامپوننت دسترس‌پذیر با تایپ کامل و برچسب‌های فارسی.۰۲قابلیت‌ها
هر چیزی که یک محصول فارسی از روز اول لازم دارد، به شکل کامپوننت آماده و تست‌شده. هر بخش را باز کنید و نمونهٔ زنده‌اش را ببینید.
ورودی‌هایی که ساختار داده‌های ایرانی را می‌شناسند، ارقام فارسی و انگلیسی را می‌پذیرند و خطا را به زبان کاربر می‌گویند.
مستندات داده‌های ایرانیتبدیل دقیق برای سالهای ۱۳۰۰ تا ۱۵۰۰، انتخاب بازه، ماه و تعطیلات رسمی.
مستندات تقویم جلالیهمهٔ استایل‌ها با Logical Properties نوشته شدهاند؛ محصول دوزبانه بدون فورک کردن کامپوننت‌ها.
مستندات راستبهچپکنتراست همهٔ جفترنگها در هر دو تم بررسی می‌شود و بیلدی که رد شود منتشر نمی‌شود. الگوهای ARIA، فوکوس و صفحه‌کلید در همهٔ کامپوننت‌ها.
مستندات دسترسپذیرییک رنگ بدهید؛ کاشی طیف یازده‌پله‌ای را می‌سازد و همهٔ کامپوننت‌ها هماهنگ می‌شوند. همین‌جا امتحان کنید:
مستندات تم‌پذیریimport { createTheme } from "@kashi-ui/tokens";
const css = createTheme({
brand: "#0fa89b",
radius: 1.5,
density: 0.875,
});۰۳آیکون‌ها
از فلش و فرم تا سماور و بادگیر؛ همه روی شبکهٔ ۲۰×۲۰ و با همان گوشه‌های نرم کامپوننت‌ها. هر آیکون در شش سبک هست و با یک prop عوض می‌شود.
۰۴کیفیت و نگه‌داری
هر تغییر در کاشی از یک مسیر خودکار می‌گذرد. چیزی که این مسیر را رد نکند، به دست تیم شما نمی‌رسد.
۸۲ جفت‌رنگ در تم تیره و روشن بررسی می‌شود؛ بیلدِ رد‌شده منتشر نمی‌شود.
نقش‌ها و ویژگی‌های ARIA، مدیریت فوکوس و کار کامل با صفحه‌کلید، با تست خودکار.
انتشار با Changesets و یادداشت تغییر برای هر پکیج؛ تغییر ناسازگار همیشه اعلام می‌شود.
پلاگین فیگما در CI ساخته و با CSS زنده مقایسه می‌شود؛ طراحی و کد از هم جدا نمی‌افتند.
هر Pull Request بیلد، تست و بررسی محتوای پکیج‌ها را پشت سر می‌گذارد.
استفادهٔ تجاری و داخلی بدون محدودیت؛ لوگوی بانک‌ها با CC0 و فونت با OFL.
npm ciنصب قفل‌شدهbuild۶ پکیج و بررسی کنتراست WCAGtestتوکن‌ها، فارسی، آیکون‌ها، Reactfigma:testهم‌خوانی پلاگین با CSSdocsبیلد سایت مستنداتpackبررسی محتوای پکیج‌ها۰۵مقایسه
بر اساس مستندات عمومی هر پروژه؛ با صداقت دربارهٔ جایی که کاشی بهترین انتخاب نیست.
| قابلیت | کاشی | shadcn/ui | MUI | Ant Design |
|---|---|---|---|---|
| راست‌به‌چپ پیش‌فرض | ||||
| تقویم و تاریخ شمسی | ||||
| کد ملی، شبا، کارت و پلاک | ||||
| فونت فارسی همراه پکیج | ||||
| استفاده بدون React | ||||
| بررسی خودکار کنتراست | ||||
| اکوسیستم و جامعه |
۰۶شروع
بدون پیکربندی، بدون افزونهٔ RTL و بدون بستهٔ تاریخ جداگانه.
دو پکیج: کامپوننت‌های React و استایل‌ها. فونت وزیرمتن همراه است.
npm i @kashi-ui/react @kashi-ui/cssاستایل‌ها در Cascade Layer هستند، پس CSS خودتان همیشه برنده است.
import "@kashi-ui/css";برچسب‌ها، پیام‌ها و ارقام از پیش فارسی‌اند؛ دسترس‌پذیری هم.
<DatePicker label="تاریخ تولد" />
حمایت از کاشی
طراحی، کدنویسی، تست دسترس‌پذیری و نگه‌داری مداوم کاشی با هزینهٔ شخصی انجام می‌شود. اگر کاشی به کار تیمتان آمده، با حمایت مالی به ادامهٔ آن کمک کنید.
برای حمایت، در تلگرام به @sepantapouya_ux پیام بدهید.
رایگان و متن‌باز با لایسنس MIT. مستندات کامل برای هر کامپوننت، با نمونهٔ React و HTML.