رفتن به محتوای اصلی
v0.3.0
منو

Kashi Design System · v0.3.0

زیرساخت طراحی برای محصولات فارسیدسترس‌پذیر، مقیاس‌پذیر و متن‌باز.

کاشی کامپوننت‌ها، توکن‌ها و الگوهایی را فراهم می‌کند که تیم‌ها برای ساخت رابط‌های راست‌به‌چپِ سازگار و قابل‌اعتماد به آن نیاز دارند؛ از استارتاپ تا سازمان.

شروع کنیدمستندات کامپوننت‌ها
npm i @kashi-ui/react @kashi-ui/css
کامپوننت آماده
۱۱
توکن طراحی
۱۶۴
انطباق با WCAG 2.2
AA
وابستگی زمان اجرا در هستهٔ CSS
۰

پیش‌نمایش زنده

@kashi-ui/react

اعلان‌ها

تیم طراحی

فعال۱۲ پروژه

تغییرات ذخیره شد

نسخهٔ جدید برای همهٔ اعضا قابل‌مشاهده است.

اصول

برای تیم‌هایی ساخته شده که کیفیت برایشان مذاکره‌پذیر نیست

پشتیبانی

یک سیستم، هر پشته‌ای

ظاهر کامپوننت‌ها یک‌بار در CSS تعریف می‌شود و هر فریم‌ورک فقط لایهٔ نازکی روی آن است. نقشهٔ راه شفاف است: آنچه آماده است و آنچه در راه است.

بسترپکیجوضعیت
React@kashi-ui/reactآماده
HTML و CSS@kashi-ui/cssآماده
Vue، Svelte، Angular@kashi-ui/cssآماده
ابزارهای فارسی (تاریخ شمسی، کد ملی، کارت)@kashi-ui/persianآماده
Web Components@kashi-ui/elementsدر نقشهٔ راه
CLI (افزودن کامپوننت)npx kashi-ui addدر نقشهٔ راه

تم‌پذیری

برند شما، در یک خط کد

رنگ اصلی برند را بدهید؛ کاشی طیف یازده‌پله‌ای را می‌سازد و همهٔ کامپوننت‌ها هماهنگ می‌شوند. روی این صفحه امتحان کنید:

راهنمای سفارشی‌سازی
import { createTheme } from "@kashi-ui/tokens";

const css = createTheme({
  brand: "#0fa89b",
  radius: 1.5,
  density: 0.875,
});
عکس سپنتا پویا

سازنده

ساخته‌شده توسط سپنتا پویا

طراح ارشد محصول و منتور تجربهٔ کاربری

طراح ارشد محصول در Partnerz و مدیر طراحی پیشین Pattern، با بیش از هفت سال تجربه در طراحی محصول، همکاری با تیم‌های میان‌رشته‌ای و منتورینگ طراحان تجربهٔ کاربری. کاشی را ساخت تا تیم‌های فارسی‌زبان به ابزار طراحی‌ای هم‌سطح با بهترین دیزاین‌سیستم‌های دنیا دسترسی داشته باشند.

آمادهٔ ساختن هستید؟

نصب در یک خط. مستندات کامل برای هر کامپوننت، با نمونهٔ React و HTML.

راهنمای نصبمشارکت در GitHub (در پنجرهٔ جدید)