@zencomms/ui-react

React components for ZenComms: video, voice, chat, dialer, screen-pop, virtual office.

Install

pnpm add @zencomms/ui-react

Required peer: Tailwind v4

@zencomms/ui-react ships unbundled CSS — consumers must have Tailwind CSS v4 in their own build pipeline. ZenComms does not pre-compile utility classes; your Tailwind pipeline scans ui-react's compiled output and includes only the classes you actually use.

This keeps the bundle small, lets you override design tokens, and ensures ui-react components inherit your app's Tailwind plugins and variants.

Usage

Import the stylesheet once at your application entry point (e.g. app/layout.tsx, src/main.tsx, pages/_app.tsx):

import '@zencomms/ui-react/styles.css';

That file contains:

• @import "tailwindcss"; — pulls in your Tailwind v4 runtime
• @source "../dist/**/*.js"; — tells Tailwind to scan ui-react's compiled components for utility classes
• @theme { --color-zc-* ... } — ZenComms design tokens exposed as CSS vars

Then import components from the appropriate entry:

import { CommsProvider } from '@zencomms/ui-react';
import { ZenVideo } from '@zencomms/ui-react/video';
import { ZenChat } from '@zencomms/ui-react/chat';
import { ZenDialer } from '@zencomms/ui-react/dialer';
import { VirtualOffice } from '@zencomms/ui-react/office';

Theme tokens

All tokens are exposed as --zc-* CSS custom properties and automatically mirrored onto LiveKit's --lk-* variables for consistent theming across @livekit/components-react primitives.

| Token | Purpose | | --- | --- | | --color-zc-primary | Primary brand color | | --color-zc-bg | Background | | --color-zc-fg | Foreground text | | --color-zc-muted | Muted surface | | --color-zc-border | Border | | --color-zc-accent | Accent surface | | --color-zc-ring | Focus ring | | --radius-zc | Default border radius |

Overriding tokens

Override any token in your own CSS after importing ui-react styles:

@import '@zencomms/ui-react/styles.css';

:root {
  --color-zc-primary: oklch(0.6 0.2 190);
  --radius-zc: 0.5rem;
}

Dark mode tokens are auto-applied via @media (prefers-color-scheme: dark).

Entries

| Entry | Exports | | --- | --- | | @zencomms/ui-react | CommsProvider, shared hooks | | @zencomms/ui-react/video | ZenVideo | | @zencomms/ui-react/voice | voice UI primitives | | @zencomms/ui-react/chat | ZenChat | | @zencomms/ui-react/chat/e2ee | E2EE chat wrapper | | @zencomms/ui-react/dialer | ZenDialer | | @zencomms/ui-react/screen-pop | ScreenPop | | @zencomms/ui-react/office | VirtualOffice |

License

MIT