Dyte UI Kit

Monorepo for all of Dyte's UI Kit packages.

The Dyte UI Kit is a comprehensive library of UI components and utilities designed to simplify the development of video conferencing applications. This repository serves as the core of the Dyte UI Kit, providing a wide range of functionality that can be easily integrated into web-based applications.

Here is a short description for all the packages:

Path	Description
packages/core	The main source code for all Stencil components. You will write code primarily in this directory.
packages/react	The React UI Kit wrapper package
packages/angular	The Angular UI Kit wrapper package
packages/vue	The Vue UI Kit wrapper package

The most important parts of this repository are the …/components directory, which contains the core UI components, and the …/utils directory, which provides a collection of utility functions and classes that support the UI components.

Components

• UI Elements: Components like DyteButton, DyteSwitch, DyteSpinner, DyteTooltip, and DyteIcon provide basic UI building blocks.
• Meeting Controls: Components like DyteCameraToggle, DyteMicToggle, DyteScreenShareToggle, DyteRecordingToggle, and DyteFullscreenToggle allow users to control various aspects of the meeting.
• Participant Management: Components like DyteParticipant, DyteParticipantTile, DyteParticipantsToggle, and DyteParticipantsViewerList handle the display and management of meeting participants.
• Chat and Messaging: Components like DyteChat, DyteChatComposerUi, DyteChatMessagesUi, DyteFileMessage, and DyteTextMessage provide chat and messaging functionality.
• Breakout Rooms: Components like DyteBreakoutRoomManager, DyteBreakoutRoomParticipants, and DyteBreakoutRoomsToggle enable the creation and management of breakout rooms.
• Transcripts and AI: Components like DyteAi, DyteAiChat, DyteAiHome, and DyteTranscript integrate AI-powered features such as transcription and chat assistance.
• Layouts and Grids: Components like DyteGrid, DyteMixedGrid, DyteSimpleGrid, and DyteSpotlightGrid provide different layout options for displaying participants and content.
• Modals and Dialogs: Components like DyteConfirmationModal, DyteDialog, DyteOverlayModal, and DyteSettingsToggle handle various types of modals and dialogs.
• Notifications and Indicators: Components like DyteNetworkIndicator, DyteRecordingIndicator, and DyteNotifications display network, recording, and notification status.
• Miscellaneous: Components like DyteLogo, DyteClock, DyteCounter, and DyteDebugger provide additional utility and debugging functionality

Dev Guide

Installation

npm i

Run

npm run dev

Contributing

To get started, you need to first make changes in the packages/core directory. You can find the code for each component in packages/core/src/components.

You need to cd into packages/core directory and run npm start.

After your changes are made, you need to cd to the root and then run npm run build, so that the wrapper code also gets updated.

Wrapper code gets updated in the following cases:

• New component is added
• Component props are changed

This is anyway run in the release action, but it is a good practise to keep the source up-to-date.