خوش آمدید

سیستم طراحی پرتو

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

سه اصل پایه

فارسی اول

از ابتدا برای فارسی طراحی شده، نه ترجمه‌شده از انگلیسی. فونت یکان بخ Variable، قرارگیری صحیح اجزا در RTL با CSS Logical Properties، و نمایش اعداد فارسی از طریق OpenType — نه با JavaScript.

آگاه از دامنه

کامپوننت‌ها دانش دامنهٔ پایش شبکه‌های اجتماعی را کدگذاری می‌کنند: شش سطح نرخ تعامل (عالی تا ضعیف)، پنج دسته اینفلوئنسر (نانو تا مگا)، نشان‌های هفت پلتفرم اجتماعی، و تحلیل سه‌گانه احساسات.

دسترسی‌پذیر و RTL-Native

CSS Logical Properties در سراسر کتابخانه، حداقل WCAG AA، پریمیتیوهای Radix UI، و ناوبری کامل با صفحه‌کلید.

دامنه

پرتو سه لایه دارد: مبانی طراحی (توکن‌ها، تم‌ها، فونت، رقم‌ها، راست‌به‌چپ، تقویم جلالی) برای هر سطح، کامپوننت‌ها برای اپ‌های React 19، و لایهٔ برنامه (قاب محصول، قالب‌های صفحه) فقط برای برنامه‌های داده‌ای. پیش از نصب، دامنهٔ سیستم طراحی را ببینید تا بدانید سطح شما کدام لایه‌ها را می‌گیرد.

شروع سریع

pnpm add @partodata/ui
# اختیاری — فقط اگر سوییچ تم لازم دارید:
pnpm add next-themes

استایل‌ها با یک import در CSS اصلی اپلیکیشن اضافه می‌شوند:

/* app/globals.css */
@import 'tailwindcss';
@import '@partodata/ui/tailwind.css';

import { Button, Card, CardContent, CardHeader, CardTitle } from '@partodata/ui'

export default function Page() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>عنوان کارت</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="primary">شروع کنید</Button>
      </CardContent>
    </Card>
  )
}

برای راه‌اندازی کامل، راهنمای نصب و راه‌اندازی را مطالعه کنید.

مسیر یادگیری

محتوای مستندات

دو تم آماده