Saltar al contenido
Yuvashadcn
Yuva para shadcn/uiMenú

Yuva para shadcn/ui

Componentes de React para chat en vivo, debates en páginas de documentación y suscripción a listas de correo, copiados en tu proyecto de shadcn/ui.

El registro de Yuva es un conjunto de componentes y hooks que la CLI de shadcn copia en tu proyecto. Usan tu tema, hablan con Yuva mediante el cliente useyuva y puedes editarlos.

Requisitos

  • Un proyecto que ya usa shadcn/ui, con React y Tailwind CSS.
  • Un canal de chat de Yuva y su clave pública (yuva_pk_…).

Configura un canal

  1. En el panel de Yuva, abre Ajustes, tu bandeja, Canales y añade un canal de chat.
  2. Añade como origen permitido cada origen que mostrará los componentes: tu sitio y tu servidor de desarrollo.
  3. Copia la clave pública del canal. No es un secreto.
  4. Para los debates, pon el modo de debates del canal en moderated u open. Para el formulario de suscripción, añade una lista de correo pública.

Pasa la clave y la dirección de tu servidor de Yuva a los componentes, por ejemplo en el entorno:

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

Añade tu primer elemento

Instala el bloque de chat y luego renderízalo:

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

Elementos

Todos los elementos del registro, agrupados como en la barra lateral.

Bloques

Componentes

Hooks

Siguiente →Yuva chat