Vai al contenuto
Yuvashadcn
Yuva per shadcn/uiMenu

Yuva per shadcn/ui

Componenti React per chat dal vivo, discussioni nelle pagine di documentazione e iscrizione alle mailing list, copiati nel tuo progetto shadcn/ui.

Il registro Yuva è un insieme di componenti e hook che la CLI di shadcn copia nel tuo progetto. Usano il tuo tema, parlano con Yuva tramite il client useyuva e sono tuoi da modificare.

Requisiti

  • Un progetto che usa già shadcn/ui, con React e Tailwind CSS.
  • Un canale chat Yuva e la sua chiave pubblica (yuva_pk_…).

Configura un canale

  1. Nel pannello Yuva apri Impostazioni, la tua casella, Canali e aggiungi un canale chat.
  2. Aggiungi come origine consentita ogni origine che mostrerà i componenti: il tuo sito e il tuo server di sviluppo.
  3. Copia la chiave pubblica del canale. Non è un segreto.
  4. Per le discussioni, imposta la modalità discussioni del canale su moderated o open. Per il modulo di iscrizione, aggiungi una mailing list pubblica.

Passa la chiave e l'indirizzo del tuo server Yuva ai componenti, per esempio nell'ambiente:

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

Aggiungi il tuo primo elemento

Installa il blocco chat, poi renderizzalo:

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

Elementi

Tutti gli elementi del registro, raggruppati come nella barra laterale.

Blocchi

Componenti

Hook

Avanti →Yuva chat