Ir para o conteúdo
Yuvashadcn
Yuva para shadcn/uiMenu

Yuva para shadcn/ui

Componentes React para chat ao vivo, discussões em páginas de documentação e inscrição em listas de e-mail, copiados para o seu projeto shadcn/ui.

O registro do Yuva é um conjunto de componentes e hooks que a CLI do shadcn copia para o seu projeto. Eles usam o seu tema, falam com o Yuva pelo cliente useyuva e são seus para editar.

Requisitos

  • Um projeto que já usa shadcn/ui, com React e Tailwind CSS.
  • Um canal de chat do Yuva e sua chave pública (yuva_pk_…).

Configure um canal

  1. No painel do Yuva, abra Configurações, sua caixa de entrada, Canais e adicione um canal de chat.
  2. Adicione como origem permitida cada origem que vai mostrar os componentes: seu site e seu servidor de desenvolvimento.
  3. Copie a chave pública do canal. Ela não é um segredo.
  4. Para discussões, defina o modo de discussões do canal como moderated ou open. Para o formulário de inscrição, adicione uma lista de e-mail pública.

Passe a chave e o endereço do seu servidor Yuva aos componentes, por exemplo no ambiente:

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

Adicione seu primeiro item

Instale o bloco de chat e depois renderize-o:

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

Itens

Todos os itens do registro, agrupados como na barra lateral.

Blocos

Componentes

Hooks

Próximo →Yuva chat