Vanilla JS

DDA with Web Components

This is a step-by-step guide to use vanilla web components.

Setup

For version above 3.11.0

First, import the package script and CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/dist/dda/dda.css" />
<script type="module">
        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/loader/index.js';
        defineCustomElements();
</script>

For Versions older the 3.11.0

First, import the package script and CSS:

<script type="module">
        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@latest/loader/index.js';
        defineCustomElements();
</script>

Next, add the material-icons package which is the icon package used by DDA:

Start by adding the material-icons package inside the <head> tag

You should now be able to use DDA components:

PreviousFont FamilyNextReact

Last updated