跳到內容
Yuvashadcn
適用於 shadcn/ui 的 Yuva選單

適用於 shadcn/ui 的 Yuva

用於即時聊天、文件頁面討論與郵寄清單訂閱的 React 元件，會複製到你的 shadcn/ui 專案中。

Yuva 登錄庫是一組元件和 hooks，由 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}
    />
  )
}

項目

登錄庫中的所有項目，依側邊欄方式分組。

區塊

元件

Hooks

下一頁 →Yuva chat