Ugrás a tartalomra
Yuvashadcn
Yuva a shadcn/ui-hozMenü

Yuva a shadcn/ui-hoz

React-komponensek élő csevegéshez, dokumentációs oldalak beszélgetéseihez és levelezőlistákra feliratkozáshoz, a shadcn/ui-projektedbe másolva.

A Yuva-regiszter komponensek és hookok készlete, amelyeket a shadcn CLI a projektedbe másol. A te témádat használják, a useyuva klienssel beszélnek a Yuvával, és szabadon szerkesztheted őket.

Követelmények

  • Egy projekt, amely már használ shadcn/ui-t, Reacttel és Tailwind CSS-sel.
  • Egy Yuva csevegőcsatorna és a nyilvános kulcsa (yuva_pk_…).

Csatorna beállítása

  1. A Yuva panelen nyisd meg a Beállítások, a postaládád és a Csatornák részt, és adj hozzá egy csevegőcsatornát.
  2. Add hozzá engedélyezett originként mindazokat, amelyek megjelenítik a komponenseket: a webhelyedet és a fejlesztői szerveredet.
  3. Másold ki a csatorna nyilvános kulcsát. Nem titok.
  4. Beszélgetésekhez állítsd a csatorna beszélgetési módját moderated vagy open értékre. A feliratkozó űrlaphoz adj hozzá egy nyilvános levelezőlistát.

Add át a kulcsot és a Yuva-szervered címét a komponenseknek, például a környezetben:

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

Add hozzá az első elemedet

Telepítsd a csevegőblokkot, majd rendereld:

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

Elemek

A regiszter összes eleme, az oldalsáv szerint csoportosítva.

Blokkok

Összetevők

Hooks

Következő →Yuva chat