跳到内容
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