پیش‌نمایش وزارت

آماده توسعه

پروژه با پشته پایدار پیکربندی شده است. توسعه قابلیت‌ها را در src/ شروع کنید.

۲۵ مرداد ۱۴۰۵ · ۱٬۲۸۰ رکورد نمونه

فناوری‌های نصب‌شده

همهٔ providerها در layout ریشه متصل شده‌اند.

Next.js 16 (App Router)
Tailwind CSS v4
shadcn/ui
Redux Toolkit
TanStack Query
TanStack Form
Axios
Zod

Sample

نمونه سریع از کامپوننت‌ها

یک پیش‌نمایش کوچک برای استفاده همزمان از `Alert`، `Input`، `Textarea`، `Select`، `Radio Group`، `Input OTP` و سایر کامپوننت‌های تعاملی

اطلاعیه سیستم

این بخش فقط برای نمایش نحوه کنار هم قرار گرفتن کامپوننت‌های UI اضافه شده است.

عنوان

توضیحات

دریافت اعلان‌های ایمیلی

انتخاب نقش (Combobox)

انتخاب واحد (Searchable Select)

میزان صدا (Slider)۶۰%

بازه قیمت (Range Slider)۲۵ – ۷۵

روش اطلاع‌رسانی (Radio Group)

ایمیل

پیامک

هر دو

کد یکبار مصرف (Input OTP)

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

بازه گزارش (Toggle Group)

تاریخ (Date Picker)

بازه تاریخ (Range Picker)

زمان (Time Picker)

ساعت

دقیقه

زمان انتخاب شده:

۰۹:۰۰

Sample

Sheet

پنل کشویی برای فرم‌ها و جزئیات — از هر چهار جهت قابل باز شدن است

Sample

Dialog

پنجره مودال برای فرم‌ها، جزئیات و تعاملات عمومی

Sample

Tabs

سازمان‌دهی محتوا در تب‌های پیش‌فرض و خطی

تنظیمات پروفایل، اطلاعات تماس و ترجیحات حساب کاربری خود را در این بخش مدیریت کنید.

Sample

Spinner و Progress

نمونه‌ای از وضعیت بارگذاری و نمایش پیشرفت عملیات

Spinner

Spinner در دکمه و نشان

در حال بارگذاری

Progress

Progress با برچسب

پیشرفت آپلود

لیست آپلود فایل

گزارش-ماهانه.pdf۲ دقیقه

لیست-کارکنان.xlsx۴۵ ثانیه

قرارداد-پروژه.docx۵ دقیقه

تصویر-پروفایل.jpgتکمیل شد

Sample

Accordion

بخش‌های تاشو برای پرسش‌های متداول و نمایش محتوای چندبخشی

بله. فونت پیدا، جهت راست‌به‌چپ و اجزای بومی‌سازی‌شده مثل تقویم جلالی و انتخابگر زمان فارسی در پروژه پشتیبانی می‌شوند.

Sample

Data Table

جدول داده با مرتب‌سازی، فیلتر و صفحه‌بندی

شناسه		واحد	وضعیت	مبلغ (ریال)
REQ-1001	درخواست مرخصی	منابع انسانی	تایید شده	—
REQ-1002	خرید تجهیزات	فناوری اطلاعات	در انتظار	۱۲٬۵۰۰٬۰۰۰
REQ-1003	ماموریت کاری	مالی	رد شده	۳٬۲۰۰٬۰۰۰

صفحه 1 از 2

مستندات shadcn مستندات TanStack Form نمونه سایدبار

ورود

اعتبارسنجی با TanStack Form و Zod و رابط shadcn/ui

آماده توسعه

آیا این رابط کاربری برای زبان فارسی مناسب است؟

چگونه می‌توانم کامپوننت‌های جدید اضافه کنم؟

آیا از حالت تاریک پشتیبانی می‌شود؟