Перейти к содержимому
Yuvashadcn
Yuva для shadcn/uiМеню

Yuva для shadcn/ui

React-компоненты для живого чата, обсуждений на страницах документации и подписки на рассылки, скопированные в ваш проект shadcn/ui.

Реестр Yuva — это набор компонентов и хуков, которые CLI shadcn копирует в ваш проект. Они используют вашу тему, общаются с Yuva через клиент useyuva, и вы можете их менять.

Требования

  • Проект, который уже использует shadcn/ui, с React и Tailwind CSS.
  • Чат-канал Yuva и его публичный ключ (yuva_pk_…).

Настройте канал

  1. В панели Yuva откройте «Настройки», свой ящик и «Каналы» и добавьте чат-канал.
  2. Добавьте каждый origin, где будут показаны компоненты, как разрешённый: ваш сайт и сервер разработки.
  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