Skip to content
Yuvashadcn
Yuva for shadcn/uiMenu

Yuva for shadcn/ui

React components for live chat, documentation page discussions and mailing list sign-up, copied into your shadcn/ui project.

The Yuva registry is a set of components and hooks that the shadcn CLI copies into your project. They use your theme and talk to Yuva through the useyuva client, and they are yours to edit.

Requirements

  • A project that already uses shadcn/ui, with React and Tailwind CSS.
  • A Yuva chat channel and its public key (yuva_pk_…).

Set up a channel

  1. In the Yuva panel, open Settings, your inbox, Channels, and add a chat channel.
  2. Add every origin that will show the components as an allowed origin: your site and your development server.
  3. Copy the channel's public key. It is not a secret.
  4. For discussions, set the channel's discussions mode to moderated or open. For the subscribe form, add a public mailing list.

Give the key and the address of your Yuva server to the components, for example in the environment:

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

Add your first item

Install the chat block, then render it:

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

Items

Every item in the registry, grouped like the sidebar.

Blocks

Components

Hooks

Next →Yuva chat