تثبيت الحزمة

خطوتان فقط. ثبّت الحزمة، ثم أضف المكوّنات التي تحتاج إليها.

اختر إطار العمل

الخطوات نفسها في كل إطار عمل.

الطرفية

npm i topclassui@beta zod

الطرفية

npm i topclassui@beta zod

الطرفية

npm i topclassui@beta zod

التثبيت

استخدم مدير الحزم الذي تعمل به أصلًا.

npm

npm i topclassui@beta zod

pnpm

pnpm add topclassui@beta zod

yarn

yarn add topclassui@beta zod

bun

bun add topclassui@beta zod

الاعتماديات النظيرة

ثلاث اعتماديات، وهي موجودة في مشروعك من قبل.

الحزمة, النطاق, سبب الحاجة إليها
الحزمة	النطاق	سبب الحاجة إليها
`react`	`^19.0.0`	المكوّنات مكتوبة لـ React 19، حيث `ref` خاصية عادية
`react-dom`	`^19.0.0`	السبب نفسه
`tailwindcss`	`^4.2.0`	الأصناف المساعدة `inset-s-*` تحتاج إلى Tailwind 4.2 أو أحدث

دعم أطر العمل

المستوى يعني مدى تغطية الميزات، لا مستوى الجودة.

إطار العمل, المستوى, ما الذي يتغيّر
إطار العمل	المستوى	ما الذي يتغيّر
Next.js 15 أو 16 مع App Router	1	لا شيء. هذا هو الإعداد المرجعي: مكوّنات الخادم لا تضيف أي JavaScript، و`Icon` يعمل بالاسم، وإجراءات الخادم (Server Actions) متاحة
تطبيق صفحة واحدة مع Vite	2	لا عرض على الخادم. كل مكوّن تستخدمه يدخل في حزمة المتصفح، و`Icon` يُستورد من `icon-registry`

React من دون Next.js

كل شيء يعمل كما هو. ثلاثة أشياء فقط تتغيّر.

لا عرض على الخادم، لذلك يُشحن كل مكوّن تستخدمه داخل حزمة تطبيقك. استورد Icon من topclassui/icon-registry وسجّل الأيقونات التي تستخدمها مرة واحدة. والصق سكربت السمة في index.html يدويًا، كما تشرح صفحة المزوّد.

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

src/icons.ts

// once per app
import { registerIcons } from 'topclassui/icon-registry'
import { caretDown } from 'topclassui/icons/caret-down'

registerIcons({ 'caret-down': caretDown })

التاليمدخل CSS