نصب

React

پکیج کامپوننت‌ها و استایل‌ها را نصب کنید:

فایل CSS را یک‌بار در ریشهٔ برنامه وارد کنید و جهت صفحه را راست‌به‌چپ قرار دهید:

// main.tsx یا app/layout.tsx
import "@kashi-ui/css";

<html lang="fa" dir="rtl">

حالا کامپوننت‌ها آمادهٔ استفاده‌اند:

import { Button } from "@kashi-ui/react";

export function Example() {
  return <Button variant="primary">ثبت‌نام</Button>;
}

کاشی با React نسخهٔ ۱۸ و بالاتر کار می‌کند و با Next.js، Vite و Remix سازگار است.

HTML و فریم‌ورک‌های دیگر

برای Vue، Svelte، Angular یا HTML ساده، فقط پکیج CSS لازم است:

یا بدون نصب، از CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kashi-ui/css/dist/kashi.css">

سپس از کلاس‌ها استفاده کنید. نمونهٔ HTML هر کامپوننت در صفحهٔ همان کامپوننت آمده است.

<button class="k-btn k-btn--primary">ثبت‌نام</button>

وارد کردن بخشی از CSS

اگر فقط به چند کامپوننت نیاز دارید، فایل‌ها را جداگانه وارد کنید. ترتیب مهم است: توکن‌ها، فونت و پایه، سپس کامپوننت‌ها.

@import "@kashi-ui/css/tokens.css";
@import "@kashi-ui/css/font.css";
@import "@kashi-ui/css/base.css";
@import "@kashi-ui/css/components/button.css";
@import "@kashi-ui/css/components/input.css";

فایل‌های جداگانه در Cascade Layer قرار ندارند. اگر به اولویت لایه‌ها نیاز دارید، از فایل کامل kashi.css استفاده کنید.

تم روشن

تم پیش‌فرض تیره است. برای تم روشن، ویژگی data-theme را روی هر عنصری بگذارید؛ زیرشاخهٔ آن عنصر روشن می‌شود.

<html lang="fa" dir="rtl" data-theme="light">