コンテンツへスキップ
Yuvashadcn
shadcn/ui 向け Yuvaメニュー

shadcn/ui 向け Yuva

ライブチャット、ドキュメントページのディスカッション、メーリングリスト登録のための React コンポーネントを、shadcn/ui プロジェクトにコピーします。

Yuva レジストリは、shadcn CLI がプロジェクトにコピーするコンポーネントとフックの集まりです。あなたのテーマを使い、useyuva クライアント経由で Yuva と通信し、自由に編集できます。

必要なもの

  • すでに shadcn/ui を使っているプロジェクト（React と Tailwind CSS 付き）。
  • Yuva のチャットチャネルとその公開キー（yuva_pk_…）。

チャネルを設定する

  1. Yuva のパネルで「設定」、受信トレイ、「チャネル」の順に開き、チャットチャネルを追加します。
  2. コンポーネントを表示するすべてのオリジン（サイトと開発サーバー）を許可オリジンとして追加します。
  3. チャネルの公開キーをコピーします。秘密ではありません。
  4. ディスカッションを使う場合は、チャネルのディスカッションモードを moderated または open にします。登録フォームを使う場合は、公開メーリングリストを追加します。

キーと Yuva サーバーのアドレスをコンポーネントに渡します。たとえば環境変数で次のようにします。

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

最初の項目を追加する

チャットブロックをインストールして、表示します。

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

項目

レジストリのすべての項目を、サイドバーと同じようにグループ化しています。

ブロック

コンポーネント

フック

次へ →Yuva chat