본문으로 건너뛰기
Yuvashadcn
shadcn/ui용 Yuva메뉴

shadcn/ui용 Yuva

실시간 채팅, 문서 페이지 토론, 메일링 리스트 가입을 위한 React 컴포넌트로, shadcn/ui 프로젝트에 복사됩니다.

Yuva 레지스트리는 shadcn CLI가 프로젝트에 복사하는 컴포넌트와 훅의 모음입니다. 여러분의 테마를 사용하고, useyuva 클라이언트로 Yuva와 통신하며, 자유롭게 수정할 수 있습니다.

요구 사항

  • 이미 shadcn/ui를 사용하는 프로젝트(React 및 Tailwind CSS 포함).
  • Yuva 채팅 채널과 그 공개 키(yuva_pk_…).

채널 설정

  1. Yuva 패널에서 설정, 받은 편지함, 채널을 차례로 열고 채팅 채널을 추가하세요.
  2. 컴포넌트를 표시할 모든 오리진(사이트와 개발 서버)을 허용된 오리진으로 추가하세요.
  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}
    />
  )
}

항목

레지스트리의 모든 항목을 사이드바처럼 묶었습니다.

블록

구성 요소

훅

다음 →Yuva chat