@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