@dytesdk/ui-kit
TypeScript icon, indicating that this package has built-in type declarations

1.66.1 • Public • Published

Logo

UI Kit by dyte

A set of UI components to truly customize your meeting UI
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

Getting Started

There are separate UI Kit packages for React and Angular because they don't fully support Web Components natively yet. Check out the links to the packages below

React UI Kit · Angular UI Kit

First, you will need to install the ui-kit along with the web-core package:

npm i @dytesdk/ui-kit @dytesdk/web-core

The web-core package is the package which handles all the low level logic required for a meeting by interating with our servers. Use it to create a meeting object, which you can pass along to the UI Kit components.

Usage

You'll need to initialize a meeting object first.

const meeting = await DyteClient.init({
  roomName: '<room-name>',
  authToken: '<auth-token>',
  defaults: {
    video: true,
    audio: true,
  },
});

You can now pass this object to most of the components, like so (with Vanilla JS, HTML):

<!-- Load the component -->
<dyte-meeting id="my-meeting"></dyte-meeting>

<script>
  const init = async () => {
    const meeting = await DyteClient.init({
      authToken: '<auth-token>',
      roomName: '<room-name>',
      defaults: {
        video: true,
        audio: true,
      },
    });

    const meetingEl = document.getElementById('my-meeting');
    meetingEl.meeting = meeting;
  };

  init();
</script>

About

ui-kit is created & maintained by Dyte, Inc. You can find us on Twitter - @dyte_io or write to us at dev [at] dyte.io.

The names and logos for Dyte are trademarks of Dyte, Inc.

We love open source software! See our other projects and our products.

Readme

Keywords

none

Package Sidebar

Install

npm i @dytesdk/ui-kit

Weekly Downloads

8,296

Version

1.66.1

License

none

Unpacked Size

19.1 MB

Total Files

1370

Last publish

Collaborators

  • dyteindia