Hoppa till innehållet
Yuvashadcn
Yuva för shadcn/uiMeny

Yuva för shadcn/ui

React-komponenter för livechatt, diskussioner på dokumentationssidor och anmälan till e-postlistor, kopierade in i ditt shadcn/ui-projekt.

Yuva-registret är en uppsättning komponenter och hooks som shadcn CLI kopierar in i ditt projekt. De använder ditt tema, pratar med Yuva via useyuva-klienten och är dina att redigera.

Krav

  • Ett projekt som redan använder shadcn/ui, med React och Tailwind CSS.
  • En Yuva-chattkanal och dess publika nyckel (yuva_pk_…).

Ställ in en kanal

  1. Öppna Inställningar, din inkorg och Kanaler i Yuva-panelen och lägg till en chattkanal.
  2. Lägg till varje origin som ska visa komponenterna som tillåten origin: din webbplats och din utvecklingsserver.
  3. Kopiera kanalens publika nyckel. Den är inte hemlig.
  4. För diskussioner sätter du kanalens diskussionsläge till moderated eller open. För anmälningsformuläret lägger du till en publik e-postlista.

Ge komponenterna nyckeln och adressen till din Yuva-server, till exempel i miljön:

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

Lägg till ditt första element

Installera chattblocket och rendera det sedan:

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

Element

Alla element i registret, grupperade som i sidofältet.

Block

Komponenter

Hooks

Nästa →Yuva chat