التثبيت
تحتاج إلى مشروع مُعدّ فيه shadcn/ui. إن كنت تبدأ من الصفر:
npx shadcn@latest init1. أضف السجل
أضف goodui إلى حقل registries في components.json:
components.json
{
"registries": {
"@goodui": "https://goodui.dev/r/{name}.json"
}
}2. ثبّت الكتل
npx shadcn@latest add @goodui/resource-timelineيثبّت CLI الكتلة ومكونات shadcn التي تستخدمها وأي حزم npm. يمكنك أيضًا البحث في السجل من الطرفية:
npx shadcn@latest search @goodui
npx shadcn@latest view @goodui/kpi-cardsبدون تعديل components.json
كل كتلة مجانية تُثبَّت أيضًا من رابطها الكامل:
npx shadcn@latest add https://goodui.dev/r/resource-timeline.jsonاستخدم كتلة
app/schedule/page.tsx
import ResourceTimeline from "@/components/goodui/resource-timeline"
export default function Page() {
return <ResourceTimeline />
}الكتل مكونات عميل وبياناتها التجريبية في أعلى الملف. استبدل تلك البيانات ببياناتك.