सामग्री पर जाएँ
Yuvashadcn
shadcn/ui के लिए Yuvaमेन्यू

shadcn/ui के लिए Yuva

लाइव चैट, डॉक्यूमेंटेशन पेज की चर्चाओं और मेलिंग लिस्ट साइन-अप के लिए React कंपोनेंट, जो आपके shadcn/ui प्रोजेक्ट में कॉपी हो जाते हैं।

Yuva रजिस्ट्री कंपोनेंट और hooks का एक सेट है जिसे shadcn CLI आपके प्रोजेक्ट में कॉपी करता है। ये आपकी थीम इस्तेमाल करते हैं, useyuva क्लाइंट के ज़रिए Yuva से बात करते हैं, और इन्हें बदलना आपके हाथ में है।

आवश्यकताएँ

  • एक प्रोजेक्ट जो पहले से shadcn/ui इस्तेमाल करता हो, React और Tailwind CSS के साथ।
  • एक Yuva चैट चैनल और उसकी सार्वजनिक कुंजी (yuva_pk_…)।

चैनल सेट करें

  1. Yuva पैनल में सेटिंग, अपना इनबॉक्स, चैनल खोलें और एक चैट चैनल जोड़ें।
  2. हर उस origin को अनुमत origin के रूप में जोड़ें जो कंपोनेंट दिखाएगा: आपकी साइट और आपका डेवलपमेंट सर्वर।
  3. चैनल की सार्वजनिक कुंजी कॉपी करें। यह गोपनीय नहीं है।
  4. चर्चाओं के लिए चैनल का चर्चा मोड moderated या open रखें। सब्सक्राइब फ़ॉर्म के लिए एक सार्वजनिक मेलिंग लिस्ट जोड़ें।

कुंजी और अपने Yuva सर्वर का पता कंपोनेंट को दें, जैसे एनवायरनमेंट में:

.env.local
NEXT_PUBLIC_YUVA_SERVER=https://support.example.com
NEXT_PUBLIC_YUVA_CHANNEL=yuva_pk_xxxxxxxxxxxxxxxx

अपना पहला आइटम जोड़ें

चैट ब्लॉक इंस्टॉल करें, फिर उसे रेंडर करें:

Shell
npx shadcn@latest add https://useyuva.com/r/yuva-chat.json
tsx
import { YuvaChat } from "@/components/yuva-chat"

export function Support() {
  return (
    <YuvaChat
      server={process.env.NEXT_PUBLIC_YUVA_SERVER}
      channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
    />
  )
}

आइटम

रजिस्ट्री के सभी आइटम, साइडबार की तरह समूहबद्ध।

ब्लॉक

घटक

Hooks

अगला →Yuva chat