Zum Inhalt springen
Yuvashadcn
Yuva für shadcn/uiMenü

Yuva für shadcn/ui

React-Komponenten für Live-Chat, Diskussionen auf Dokumentationsseiten und die Anmeldung zu Mailinglisten, kopiert in Ihr shadcn/ui-Projekt.

Die Yuva-Registry ist eine Sammlung von Komponenten und Hooks, die die shadcn-CLI in Ihr Projekt kopiert. Sie nutzen Ihr Theme, sprechen über den useyuva-Client mit Yuva und gehören Ihnen zum Bearbeiten.

Voraussetzungen

  • Ein Projekt, das bereits shadcn/ui nutzt, mit React und Tailwind CSS.
  • Ein Yuva-Chatkanal und sein öffentlicher Schlüssel (yuva_pk_…).

Kanal einrichten

  1. Öffnen Sie im Yuva-Panel Einstellungen, Ihren Posteingang, Kanäle und fügen Sie einen Chatkanal hinzu.
  2. Tragen Sie jede Origin, die die Komponenten zeigt, als erlaubte Origin ein: Ihre Website und Ihren Entwicklungsserver.
  3. Kopieren Sie den öffentlichen Schlüssel des Kanals. Er ist kein Geheimnis.
  4. Stellen Sie für Diskussionen den Diskussionsmodus des Kanals auf moderated oder open. Für das Anmeldeformular fügen Sie eine öffentliche Mailingliste hinzu.

Geben Sie den Schlüssel und die Adresse Ihres Yuva-Servers an die Komponenten, zum Beispiel über die Umgebung:

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

Fügen Sie Ihr erstes Element hinzu

Installieren Sie den Chat-Block und rendern Sie ihn:

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

Elemente

Jedes Element der Registry, gruppiert wie in der Seitenleiste.

Blöcke

Komponenten

Hooks

Als Nächstes →Yuva chat