@connectycube/react-ui-kit

@connectycube/react-ui-kit (BETA)

Simple React UI Kit generator with TSX/JSX support

This package can be used both as a React component library and as a CLI generator to scaffold new components in your projects.

📦 Installation

npm install @connectycube/react-ui-kit

or, if using yarn:

yarn add @connectycube/react-ui-kit

⚛️ Usage as a Library

You can import pre-built UI components directly from the package:

import { LocalStream } from '@connectycube/react-ui-kit';

export function App() {
  return (
    <div className="p-4">
      ...
      <LocalStream id="my-local-stream" stream={stream} ... />
    </div>
  );
}

🛠️ Usage as a Generator (CLI)

You can generate new components in your project using the CLI:

npx @connectycube/react-ui-kit@beta add local-stream

This will:

• Prompt prefer TypeScript or JavaScript language
• Copy components and utilities to src/components/connectycube-ui
• Ask to install specified dependencies if needed

📚 Available Components

Coming soon...

Component	Description
alert-dialog	gets "triggerElement" prop to call dialog with title, description, and confirm/cancel buttons
attachment	defines a URL with mimeType to show image/video/audio/file/failed content; has onReady callback to notify about video/image size measurement is ready
avatar	with online and presence statuses, has fallback icon/text
badge	a badge with variants; similar to shadcn-ui badge
button	a button with variants; the same as shadcn-ui button
chat-bubble	includes <ChatBubbleMessage .../> that is a left/right-sided wrapper with/without avatar, with/without title, includes last sent status and time, usually obtains "attachment", "linkify-text", "link-preview" as children; and includes <ChatBubbleInfo .../> for system/information text with icon
chat-input	auto-size textarea with onSend, onDraft, onTyping, onHeightGrow callbacks and pending state
chat-list	from "virtua" for chat history; has file-picker wrapper for drag-and-drop files; supports quick-actions before a messaging starts; has onScrollStartReached, onScrollEndReached, onListCreate, onListGrow, onListReset callbacks; can react on the chat-input's onHeightGrow with "textareaMeasurement" prop; supports prepending batch messages with loading state
checkbox	the same as shadcn-ui checkbox
dialog-item	basically, it's an element for "dialog-list"; has avatar, name, last-message text, unread badge count, last message status, last message time, and visual selection
dialog-list	from "virtua" for dialog-items; has onScrollStartReached and onScrollEndReached callbacks, loading state, and pending state with skeletons of dialog-items
dismiss-layer	to manage the open/close state of any modal by clicking outside or pressing Esc
file-picker	to chose accepted files, and wrapper component for drag-and-drop accepted files; has onSelectFile and onInvalidFile callbacks
formatted-date	displays the date in a readable format; simple to use "distanceToNow" for message in chat history; supports "language" prop with English (en), Ukrainian (ua), and Greek (el)
input	the same as shadcn-ui input
label	the same as shadcn-ui label
link-preview	displays favicon, title, description, and banner image; uses "thin" prop to be smaller; has onReady callback to notify about image size measurement is ready
linkify-text	displays text with highlighted links; can display skeleton rows in pending state; switching the pending from "true" to "false" calls onReady callback
placeholder-text	renders title or titles in rows in the center of any view; has absolute position
presence	presence status with badge icon and label; can be 'available', 'busy', 'away', 'unknown'
quick-actions	title, description, and an array of strings (actions display as buttons); click on any action calls onAction callback with own text
search	a styled and animated input component with onSearch and onCancel callbacks
spinner	animated-loader; has "loader" and "circle" types (default is "loader"); the "layout" prop (absolute/centered/overlay/flow) defines its position in a view
status-call	define a colorized icon related to call status ('reject', 'notAnswer', 'hungUp', or 'cancel')
status-indicator	displays colorized statuses; statuses and colors defines by config; shows tooltip on mouse over a status
status-sent	shows message's status icon that defines from status like 'wait', 'sent', 'read', or 'lost'
stream-view	local-stream-view, remote-stream-view and fullscreen-stream-view with pip stream
switch	the same as shadcn-ui switch

🧩 Contributing

See CONTRIBUTING.md for guidelines on adding new components.

💌 Questions & support

If you have questions or issues, open a GitHub Issue
or join our Discord community.

💬 Community

• Blog
• X (twitter)@ConnectyCube
• Facebook
• Medium
• YouTube

Want to support our team:

🪪 License

Apache 2.0