مواد پر جائیں
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