خوش آمدید
دیزاین سیستم پرتو — کتابخانه کامپوننت فارسیمحور برای پلتفرمهای سوشال لیسنینگ و افکارسنجی
دیزاین سیستم پرتو
پرتو یک سیستم طراحی هدفمند است، نه یک کتابخانه 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-themesimport { 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، و تمها
۲
آشنایی با پایهها
رنگها، تایپوگرافی، فضابندی، و آیکونها
۳
کامپوننتها را کاوش کنید
عمومی، ورودیها، نمایش داده، بازخورد، چیدمان، ناوبری
۴
بلاکها و الگوها
صفحات آمادهی SaaS — کپی، paste، و شروع کنید
محتوای مستندات
| بخش | محتوا |
|---|---|
| نصب | راهاندازی در پروژه Next.js، Tailwind، و تمها |
| رنگها | سیستم رنگبندی سمانتیک با دو تم |
| تایپوگرافی | فونت یکان بخ Variable و سلسلهمراتب متنی |
| تمبندی | دو تم آماده و نحوه سفارشیسازی |
| فارسیمحور بودن | CSS Logical Properties، اعداد فارسی، آیکونهای جهتدار |
| مفاهیم دامنه | اینفلوئنسر، نرخ تعامل، احساسات، و پلتفرمها |
| توکنهای طراحی | مرجع کامل CSS variables با نمایش بصری زنده |
| هوکها | ابزارهای React برای RTL، ریسپانسیو، و تم |
دو تم آماده
| تم | مکانیزم | کاربرد |
|---|---|---|
| روشن (Light) | :root — پیشفرض | محیطهای روزانه |
| تاریک (Dark) | کلاس .dark روی <html> | داشبورد، محیط شبانه |