इंस्टॉलेशन

आपके पास shadcn/ui सेट किया हुआ प्रोजेक्ट होना चाहिए। अगर नए सिरे से शुरू कर रहे हैं:

npx shadcn@latest init

1. रजिस्ट्री जोड़ें

components.json के registries फ़ील्ड में goodui जोड़ें:

{
  "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 बदले बिना

हर मुफ़्त ब्लॉक अपने पूरे URL से भी इंस्टॉल होता है:

npx shadcn@latest add https://goodui.dev/r/resource-timeline.json

ब्लॉक इस्तेमाल करें

import ResourceTimeline from "@/components/goodui/resource-timeline"

export default function Page() {
  return <ResourceTimeline />
}

ब्लॉक क्लाइंट कंपोनेंट हैं, जिनका डेमो डेटा फ़ाइल के ऊपर रखा है। उस डेटा की जगह अपना डेटा लगाएँ।