Langkau ke kandungan
Yuva untuk shadcn/uiMenu

Yuva untuk shadcn/ui

Komponen React untuk sembang langsung, perbincangan halaman dokumentasi dan pendaftaran senarai mel, disalin ke projek shadcn/ui anda.

Pendaftar Yuva ialah set komponen dan hook yang disalin oleh CLI shadcn ke projek anda. Ia menggunakan tema anda, berhubung dengan Yuva melalui klien useyuva dan anda bebas menyuntingnya.

Keperluan

  • Projek yang sudah menggunakan shadcn/ui, dengan React dan Tailwind CSS.
  • Saluran sembang Yuva dan kunci awamnya (yuva_pk_…).

Sediakan saluran

  1. Dalam panel Yuva, buka Tetapan, peti masuk anda, Saluran, dan tambah saluran sembang.
  2. Tambah setiap origin yang akan memaparkan komponen sebagai origin yang dibenarkan: tapak anda dan pelayan pembangunan anda.
  3. Salin kunci awam saluran. Ia bukan rahsia.
  4. Untuk perbincangan, tetapkan mod perbincangan saluran kepada moderated atau open. Untuk borang langganan, tambah senarai mel awam.

Beri kunci dan alamat pelayan Yuva anda kepada komponen, contohnya dalam persekitaran:

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

Tambah item pertama anda

Pasang blok sembang, kemudian paparkannya:

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}
    />
  )
}

Item

Semua item dalam pendaftar, dikumpulkan seperti bar sisi.

Blok

Komponen

Hook