Перейти до вмісту
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