İçeriğe geç
Yuvashadcn
shadcn/ui için YuvaMenü

shadcn/ui için Yuva

Canlı sohbet, dokümantasyon sayfası tartışmaları ve e-posta listesi kaydı için, shadcn/ui projenize kopyalanan React bileşenleri.

Yuva kayıt defteri, shadcn CLI'nin projenize kopyaladığı bir bileşen ve hook takımıdır. Temanızı kullanır, useyuva istemcisi üzerinden Yuva ile konuşur ve düzenlemek size kalır.

Gereksinimler

  • Zaten shadcn/ui kullanan, React ve Tailwind CSS'li bir proje.
  • Bir Yuva sohbet kanalı ve herkese açık anahtarı (yuva_pk_…).

Kanal kurulumu

  1. Yuva panelinde Ayarlar, gelen kutunuz, Kanallar yolunu izleyip bir sohbet kanalı ekleyin.
  2. Bileşenleri gösterecek her kaynağı izinli kaynak olarak ekleyin: sitenizi ve geliştirme sunucunuzu.
  3. Kanalın herkese açık anahtarını kopyalayın. Gizli değildir.
  4. Tartışmalar için kanalın tartışma modunu moderated ya da open yapın. Abonelik formu için herkese açık bir e-posta listesi ekleyin.

Anahtarı ve Yuva sunucunuzun adresini bileşenlere verin, örneğin ortam değişkenlerinde:

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

İlk öğenizi ekleyin

Sohbet bloğunu kurun, sonra çizdirin:

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

Öğeler

Kayıt defterindeki her öğe, kenar çubuğundaki gibi gruplanmış.

Bloklar

Bileşenler

Hook'lar

Sıradaki →Yuva chat