کتابخانه کامپوننتها
تمامی کامپوننتها، آیکونها و عناصر UI پروژه در یک صفحه تعاملی
توکنهای طراحی
رنگها، شعاعهای گوشه، و سایههای تعریفشده در سیستم طراحی
رنگهای سمانتیک
Background
--background
Foreground
--foreground
Primary
--primary
Primary FG
--primary-foreground
Secondary
--secondary
Muted
--muted
Muted FG
--muted-foreground
Accent
--accent
Destructive
--destructive
Border
--border
Card
--card
Popover
--popover
شعاع گوشه (Border Radius)
سایه (Shadow)
تایپوگرافی
سطوح متنی، وزنها، و رنگهای تعریفشده
اندازههای متن
text-2xs (10px)نمونه متن فارسی — Sample Texttext-xs (12px)نمونه متن فارسی — Sample Texttext-sm (14px)نمونه متن فارسی — Sample Texttext-base (16px)نمونه متن فارسی — Sample Texttext-lg (18px)نمونه متن فارسی — Sample Texttext-xl (20px)نمونه متن فارسی — Sample Texttext-2xl (24px)نمونه متن فارسی — Sample Texttext-3xl (30px)نمونه متن فارسی — Sample Texttext-4xl (36px)نمونه متن فارسی — Sample Textوزنهای فونت
نمونه متن
font-lightنمونه متن
font-normalنمونه متن
font-mediumنمونه متن
font-semiboldنمونه متن
font-boldنمونه متن
font-extraboldرنگهای متن
foregroundmuted-foregroundprimarydestructiveemerald-600دکمهها
تمامی واریانتها و اندازههای دکمه
واریانتها
اندازهها
حالتهای ویژه
فرمها
کنترلهای ورودی و انتخاب
Input & Textarea
Select
Checkbox & RadioGroup
Checkbox
RadioGroup
Switch & Slider
Switch
Slider — مقدار: 40
InputOTP
کد یکبارمصرف
بازخورد
Badge، Alert، Spinner، Progress، Skeleton
Badge
Alert
اطلاعات
خطا
Spinner & Progress
Spinner
Progress — 65%
Skeleton
نمایش داده
Card، Avatar، Table، ScrollArea، Separator
Card
محتوای اصلی کارت در این بخش قرار میگیرد.
Avatar
Table
| نام | دستهبندی | فالوور | تعامل |
|---|---|---|---|
| example_page | محتوا | 284K | 3.7% |
| news_account | خبری | 1.2M | 1.2% |
| lifestyle_ig | سبک زندگی | 560K | 4.1% |
Separator & ScrollArea
Separator — Horizontal
بالا
پایین
ScrollArea
ناوبری
Tabs، Breadcrumb، Pagination، Toggle
Tabs — واریانتها
variant="solid"
variant="underline"
variant="pills"
Breadcrumb
Toggle & ToggleGroup
Pagination
لایههای رویهای
Dialog، Sheet، Popover، Tooltip، DropdownMenu
Dialog
Sheet
Popover & Tooltip
DropdownMenu
استپرها
Stepper، DotStepper، ProgressStepper — تعاملی
Stepper — افقی (تعاملی)
مرحله فعال: 1 از 3 — اطلاعات پایه
DotStepper
مرحله 1 از 3
ProgressStepper
نمودارها
LineChart، BarChart، PieChart — با دادههای نمونه
LineChart — روند زمانی
BarChart — دستهبندی
PieChart — توزیع
کامپوننتهای پروژه
PostCard، PageCard، SectionHeader، SourceContextCard
PostCard
این یک متن نمونه برای کپشن پست است که برای نمایش قابلیتهای PostCard استفاده میشود.
یک پست تصویری ساده بدون نرخ تعامل.
پست اسلایدی با کپشن کوتاه.
PageCard
آموزش کدنویسی و برنامهنویسی به زبان ساده
SectionHeader
عنوان بخش نمونه
این یک SectionHeader نمونه است که در اکثر صفحات تحلیل استفاده میشود
صفحات برتر
آیکونها
Lucide React icons و Icon component پروژه
Lucide Icons (در پروژه استفاده شده)
Icon component (UI.Icons)
از طریق <Icon name="..." /> در پروژه استفاده میشود: