streemo-ui-kit-web

Production-ready React TypeScript UI kit for the Streemo ecosystem: design tokens, theme system, base components, chat UI, and video call UI.

Install

npm install streemo-ui-kit-web react react-dom

Setup

1. Import styles (e.g. in your root). Base styles are required; chat and call styles only if you use those components:

import 'streemo-ui-kit-web/styles.css'
// If using chat UI:
import 'streemo-ui-kit-web/chat/styles.css'
// If using call UI:
import 'streemo-ui-kit-web/call/styles.css'

2. Wrap your app with StreemoThemeProvider (optional but recommended):

import { createTheme, StreemoThemeProvider } from 'streemo-ui-kit-web/theme'

const theme = createTheme({
  mode: 'light',
  tokens: {
    colors: { primary: '#6C63FF' },
    radius: { md: 12 },
  },
})

<StreemoThemeProvider theme={theme}>
  <App />
</StreemoThemeProvider>

Imports

Root (main components + theme):

import { Button, Card, Input, Modal } from 'streemo-ui-kit-web'

Theme:

import { createTheme, StreemoThemeProvider, useTheme } from 'streemo-ui-kit-web/theme'

Chat:

import {
  ChatLayout,
  MessageList,
  MessageBubble,
  MessageInput,
  TypingIndicator,
} from 'streemo-ui-kit-web/chat'

Video call:

import {
  CallLayout,
  ParticipantGrid,
  ParticipantTile,
  CallControlsBar,
} from 'streemo-ui-kit-web/call'

Hooks & types:

import { useChatScroll, useParticipantLayout } from 'streemo-ui-kit-web/hooks'
import type { Message, Participant, Theme } from 'streemo-ui-kit-web/types'

Commands

• npm run build — build the library (output in dist/)
• npm run dev — watch build
• npm run demo — run the demo/playground (Vite)
• npm run storybook — run Storybook (port 6006)
• npm run build-storybook — build static Storybook
• npm run clean — remove dist/
• npm run version — apply changesets and bump version
• npm run release — publish to npm (after version)

Project structure

streemo-ui-kit-web/
  src/
    theme/          — createTheme, StreemoThemeProvider, tokens
    types/          — Message, Participant, Theme, etc.
    components/ui/   — Button, Input, Card, Modal, …
    chat/           — ChatLayout, MessageList, MessageInput, …
    call/           — CallLayout, ParticipantGrid, CallControlsBar, …
    hooks/          — useChatScroll, useParticipantLayout
    styles.css      — theme-aware base + component styles
    index.ts
    theme/index.ts
    chat/index.ts
    call/index.ts
    ui/index.ts
    hooks/index.ts
    types/index.ts
  demo/             — Vite app for development preview
  dist/             — build output (ESM + d.ts + styles.css)

License

Proprietary / Streemo.