Introduction to Vanilla JS UI Kit
Dyte's UI Kit is a prebuilt design library of UI components that makes it easy to integrate video and voice calls into any app or website within minutes.
To learn more about web components, see Web Components Overview.
The Anatomy of UI Kit
The UI Kit is a design library of prebuilt UI components built on top of the core SDKs. Core SDK handles all the low-level media and network handling parts of a meeting and exposes simpler APIs to use. You can create a meeting object using the web-core components and pass it to the UI Kit components.
- Uses a layered design structure, allowing you to start with one prebuilt component and slowly add further layers as the needs evolve.
How to Use UI Kit?
Dyte's UI Kit offers a couple of ways to get started with your live video and voice calling applications.
- Use prebuilt components: You can use prebuilt
dyte-meetingcomponent to create your meeting quickly. With this component, you don't have to handle all the states, dialogs, and other aspects of managing the application. This loads your preset and renders the UI based on it. For more information, see UI Kit Quickstart.
- Build your own UI: Dyte also offers the flexibility to build your own UI using various individual components. This offers limitless customization options, ranging from colors and font to spacing, participant tiles, screen share views, logo, height, width and more, you can tailor the UI to fit your exact needs. See Build you own UI section.
Here are the browser requirements:
- Chrome (or Chromium based) 74+
- Firefox 78+
- Opera 64+
- Safari 12+
- Edge 79+
- iOS (Safari) 12.1+
- iOS (Non-Safari) 15+
The entire UI has a small <500KB bundle size. If you use individual components, the size will be even smaller.
- Dyte UI Kit is built using web components that make use of Shadow DOM. This isolates the styling of each component, and the CSS on your page does not interfere with component styling.
- Each component uses design tokens in conjunction with CSS variables for styling. This makes the customization super simple and easy. Other than the design tokens, we've also attempted to improve the customization options, with features like Internationalisation (i18n) and Icon Packs Support.
- In addition, we've also focused on accessibility (a11y) so that users can
easily navigate through the UI without having to move their mouse across the
screen. For example, closing dialogues with the
Escapekey and navigating through visual elements with the