Passer au contenu
Yuvashadcn
Yuva pour shadcn/uiMenu

Yuva pour shadcn/ui

Des composants React pour le chat en direct, les discussions sur les pages de documentation et l'inscription aux listes de diffusion, copiés dans votre projet shadcn/ui.

Le registre Yuva est un ensemble de composants et de hooks que la CLI shadcn copie dans votre projet. Ils utilisent votre thème, parlent à Yuva via le client useyuva, et vous pouvez les modifier.

Prérequis

  • Un projet qui utilise déjà shadcn/ui, avec React et Tailwind CSS.
  • Un canal de chat Yuva et sa clé publique (yuva_pk_…).

Configurer un canal

  1. Dans le panneau Yuva, ouvrez Paramètres, votre boîte de réception, Canaux, puis ajoutez un canal de chat.
  2. Ajoutez comme origine autorisée chaque origine qui affichera les composants : votre site et votre serveur de développement.
  3. Copiez la clé publique du canal. Ce n'est pas un secret.
  4. Pour les discussions, réglez le mode de discussion du canal sur moderated ou open. Pour le formulaire d'inscription, ajoutez une liste de diffusion publique.

Donnez la clé et l'adresse de votre serveur Yuva aux composants, par exemple dans l'environnement :

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

Ajoutez votre premier élément

Installez le bloc de chat, puis affichez-le :

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

Éléments

Tous les éléments du registre, regroupés comme dans la barre latérale.

Blocs

Composants

Hooks

Suivant →Yuva chat