Getting Started

FaraUI یک کتابخانه‌ی کامپوننت React، نوشته‌شده با TypeScript و آماده برای پروژه‌های فارسی/راست‌چین است.

Installation

npm install fara-ui

Setup

پس از نصب، فایل استایل سراسری کتابخانه را یک‌بار در ریشه‌ی پروژه‌ی خودت (مثلاً در main.tsx یا App.tsx) import کن:

import "fara-ui/styles.css";

این فایل شامل متغیرهای طراحی (رنگ، فاصله، گردی گوشه‌ها و ...) و استایل تمام کامپوننت‌هاست. کافی است فقط یک‌بار، در نقطه‌ی ورود اصلی برنامه، اضافه شود — نیازی نیست در هر فایلی که از یک کامپوننت FaraUI استفاده می‌کنی دوباره import شود.

Usage

بعد از این مرحله، هر کامپوننت را مستقیماً از fara-ui import کن:

import { Button } from "fara-ui";

function App() {
  return <Button>ثبت‌ نام</Button>;
}

برای دیدن لیست کامل کامپوننت‌ها و نمایش تعاملی هرکدام، از منوی کناری استفاده کن.

Theming

تمام رنگ‌ها، فاصله‌ها و گردی گوشه‌های کامپوننت‌ها از طریق CSS custom properties (متغیرهای --fara-*) تعریف شده‌اند، مثل:

--fara-color-primary
--fara-color-secondary
--fara-color-success

برای شخصی‌سازی، نیازی به تغییر کد کتابخانه نیست — کافی است در فایل CSS خودت همان متغیر را دوباره تعریف کنی:

:root {
  --fara-color-primary: #16a34a;
}

نکته‌ی مهم: این override باید بعد از fara-ui/styles.css import شود، چون هر دو با یک specificity یکسان روی :root تعریف شده‌اند و در CSS، آخرین تعریف برنده‌ی cascade است:

import "fara-ui/styles.css";
import "./my-brand-theme.css";