Skip to main content

Atomic Design

Inspired by Atomic Design principles, our UI Kit is built in layers.

What that means is you can quickly get started by using just one component and keep combining even more components that will give you an entire prebuilt UI.

But you can also go down layers as your need for customization evolves.

Atomic Design Illustration

Check out the Components page to see the full list of grouped components.


Our topmost, easiest to use layer.

An example is the DyteMeeting component you saw in the Quickstart page.

Implement quickly with just a few lines of code!

<dyte-meeting id="my-meeting"></dyte-meeting>

const init = async () => {
const meeting = await DyteClient.init({
authToken: '',
roomName: '',
defaults: {
audio: true,
video: true,

document.getElementById('my-meeting').meeting = meeting;


Now going down layers for more customization.


Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input, image or a button.

Design tokens such as brand colors, font, spacing are also part of atoms.

<dyte-button>Primary Button (Default)</dyte-button>
<dyte-button variant="secondary">Secondary button</dyte-button>
<dyte-button variant="danger">Danger button</dyte-button>
<dyte-button variant="ghost">Ghost button</dyte-button>


Things start getting more interesting and tangible when we start combining atoms together.

Here is the Notification component which uses the Button component and animates a notification for you!

<dyte-notification id="my-notification"></dyte-notification>

document.getElementById('my-notification').notification = {
id: 'any-identifier-for-this-notification',
message: 'Vaibhav says Hi!',
image: '',
button: {
text: 'Say Hi Back',
variant: 'secondary',
onClick: () => alert('Hey!'),


Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Render a participants grid, in a single line of code with DyteGrid.

This component will handle all Participant Tiles, Screenshare Views, Plugins.

<dyte-grid id="my-grid"></dyte-grid>

// load meeting
document.getElementById('my-grid').meeting = meeting;

Tight integration with our Core SDK

You don't need to handle all the participants, screenshares, plugins. You just pass the Core SDK meeting object.

It takes all the data on its own, listens to all the events and calls every method it needs to call on its own.