پرتوپرتو

خوش آمدید

دیزاین سیستم پرتو — کتابخانه کامپوننت فارسی‌محور برای پلتفرم‌های سوشال لیسنینگ و افکارسنجی

دیزاین سیستم پرتو

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

۹۸+

کامپوننت

۷

نمودار

۸

هوک

۱۸

الگوی UI


سه اصل پایه

فارسی اول

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

آگاه از دامنه

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

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

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


شروع سریع

pnpm add @parto-system-design/ui next-themes
import { Button, Card, CardContent, CardHeader, CardTitle } from '@parto-system-design/ui'
import '@parto-system-design/ui/styles.css'

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

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


مسیر یادگیری


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

بخشمحتوا
نصبراه‌اندازی در پروژه Next.js، Tailwind، و تم‌ها
رنگ‌هاسیستم رنگ‌بندی سمانتیک با دو تم
تایپوگرافیفونت یکان بخ Variable و سلسله‌مراتب متنی
تم‌بندیدو تم آماده و نحوه سفارشی‌سازی
فارسی‌محور بودنCSS Logical Properties، اعداد فارسی، آیکون‌های جهت‌دار
مفاهیم دامنهاینفلوئنسر، نرخ تعامل، احساسات، و پلتفرم‌ها
توکن‌های طراحیمرجع کامل CSS variables با نمایش بصری زنده
هوک‌هاابزارهای React برای RTL، ریسپانسیو، و تم

دو تم آماده

تممکانیزمکاربرد
روشن (Light):root — پیش‌فرضمحیط‌های روزانه
تاریک (Dark)کلاس .dark روی <html>داشبورد، محیط شبانه