واجهات من الطراز الأول.مبنية لـ Next.js.
مكوّنات متقنة تساعدك على البناء أسرع. تُعرض على الخادم أولًا مع React 19 وTailwind CSS v4، بالعربية والإنجليزية من الشيفرة نفسها.
npm i topclassui@beta zod- TopClass UI
- نظرة عامة
- المكوّنات
- الأيقونات
- السمات
- الإعدادات
المكوّنات
46 مكوّنًا، 3 أنواع
عرض 1 إلى 7 من 46
ما الذي يميّزها
ثلاثة أشياء تحصل عليها من اليوم الأول
كل مثال في هذه الصفحة مكوّن حقيقي، ولكل واحد صفحته في التوثيق.
JavaScript أقل
5 من 6 مكوّنات في هذه البطاقة لا تضيف أي JavaScript إلى صفحتك. وحده مربع الحوار يضيف.
الفاتورة TC-2041
مدفوعةصدرت في 12 سبتمبر 2026
1,240.00 ر.س
client - Dialogالإطار المصمت يحدّد ما يُعرض على الخادم.
- يُعرض على الخادم
- 0 KB
- يعمل في المتصفح
- لم يُقس الحجم بعد
شجرة المكوّنات
IconCardBadgeSeparatorButtonDialog
5 على الخادم، 0 KB لكل منها · 1 في المتصفح
العربية مضمّنة
النموذج نفسه بالإنجليزية والعربية. التخطيط والأيقونات والأرقام تنعكس وحدها.
dir="ltr"dir="rtl"كل مثال، 6 صفحات
3 أوضاع × 2 اتجاه، مفحوصة في متصفح حقيقي.
أيقونات الأسهم تنقلب، والعدسة المكبّرة لا تنقلب. المكوّنات تستخدم أدوات منطقية مثل ps- وpe- وinset-s- وtext-start، ولا تستخدم left أو right أبدًا.
مختبرة، لا موعودة
كل بوابة فحص تعمل قبل كل إصدار، في متصفح حقيقي، على كل مثال لكل مكوّن.
- 2826 صفحة يفحصها axe
- 2826 صفحة تُقاس فيها الأهداف بحد 24 px
- 2826 صفحة يُفحص فيها ظهور حلقة التركيز
- 390 زوجًا لونيًا بتباين AA
السمات
فاتح، أو داكن، أو وضعك الخاص
السمة كتلة CSS صغيرة واحدة. بدّل الأوضاع، أو أضف ألوان علامتك، دون لمس أي مكوّن.
فاتح
data-theme="light"داكن
data-theme="dark"محيط
data-theme="ocean"بالأرقام
ما بداخلها
كل شيء معدود، ولا شيء مقرّب.
- 46مكوّنًا
- 84أيقونة، 16 منها تنعكس تلقائيًا في العربية
- 6صفحات لكل مثال، في كل وضع واتجاه
- 0 KBJavaScript يضيفه مكوّن يُعرض على الخادم
الفهرس
46 مكوّنًا، بتخطيط واحد متّسق
كل شارة تحمل رمزًا. S يُعرض على الخادم ولا يضيف JavaScript. C يعمل في المتصفح. Sp يُعرض على الخادم مع جزء تفاعلي صغير واحد.
- خادمButton
- مقسومTag
- خادمKbd
- متصفحSegmentedControl
- خادمInput
- مقسومTextarea
- متصفحSelect
- متصفحCombobox
- متصفحCheckbox
- متصفحRadioGroup
- متصفحSwitch
- متصفحSlider
- متصفحNumberField
- متصفحOtpField
- متصفحDatePicker
- متصفحFileUpload
- مقسومRating
- خادمBadge
- مقسومAvatar
- خادمAvatarGroup
- خادمCard
- خادمSeparator
- خادمSkeleton
- مقسومCodeBlock
- مقسومTable
- متصفحTreeView
- خادمTimeline
- خادمStepper
- خادمAlert
- متصفحToast
- مقسومBanner
- خادمProgress
- خادمSpinner
- خادمEmptyState
- متصفحDialog
- متصفحDrawer
- متصفحPopover
- متصفحTooltip
- متصفحDropdown
- متصفحCommand
- مقسومNavbar
- مقسومSidebar
- مقسومTabs
- مقسومAccordion
- خادمBreadcrumb
- خادمPagination
التثبيت
استيراد واحد لكل مكوّن
ثبّت الحزمة مرة واحدة، ثم استورد المكوّنات التي تستخدمها فقط.
استورد من الحزمة
import { Button } from 'topclassui/button'استورد ما تستخدمه فقط. لا يصل شيء آخر إلى حزمتك.
npm i topclassui@beta zodما تحتاج إليه
ثلاثة أشياء، بإصداراتها الحالية
إذا كان مشروعك يعمل بهذه، فهو يعمل بـ TopClass UI.
- 15+Next.jsموجّه التطبيقات. مكوّنات الخادم وإجراءات الخادم تأتي من هنا.
- 19+Reactref خاصية عادية والنموذج يقبل إجراءً. لا يعمل أي إصدار أقدم.
- 4.2+Tailwind CSSيُضبط من CSS بثلاثة أسطر استيراد. لا ملف إعدادات.