@dubai-design-system/components-js

v3.12.16

Published

4 days ago

JavaScript package for the Digital Dubai Design System, offering reusable, customizable components for seamless integration into web applications

0High
0Medium
0Low

dda-saleh

datacell_usama

cx-lab

Framework-agnostic web components built with StencilJS as part of the Dubai Design System (DDA). Use them in any HTML, JavaScript, or TypeScript project — no dependency on React, Angular, or Vue.

Framework wrappers are also available: @dubai-design-system/components-react, @dubai-design-system/components-vue, and @dubai-design-system/components-angular.

Key features

Lightweight & fast — native Web Components with lazy loading.
Customizable — aligned with Dubai Design System branding, with light and dark themes.
Framework-agnostic — works in plain HTML or with any framework.
Accessible & responsive — follows accessibility best practices.

Setup

1. Add the icon fonts

DDA components use Material Icons and Material Symbols. Add both inside your <head> tag:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">

2. Load the components

Option A — CDN (no build step). Add this script to your HTML, replacing X.X.X with the latest published version. Always pin an exact version in the CDN URL — unversioned jsdelivr URLs resolve each file independently, so the loader and its chunks can come from different package versions, which breaks rendering:

<script type="module">
  import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@dubai-design-system/[email protected]/loader/index.es2017.js";

  defineCustomElements();
</script>

Option B — npm with a bundler (Vite, Rollup). Install the package:

npm i @dubai-design-system/components-js

Then import the self-registering build for each component you use:

// each import automatically defines its custom element
import '@dubai-design-system/components-js/dist/components/dda-button.js';
import '@dubai-design-system/components-js/dist/components/dda-header.js';

⚠️ With Vite or plain Rollup, do not use the lazy loader (@dubai-design-system/components-js/loader). Its computed dynamic imports cannot be statically analyzed by these bundlers, so component chunks are missing from the build (404 on dda-*.entry.js) and components never render. The CDN approach and Angular's builder are unaffected.

3. Use the components

<dda-button
  button_color="default-primary"
  start_icon="sentiment_satisfied"
  end_icon="arrow_forward"
  button_id="button"
  aria_label="button"
  onclick="console.log('clicked')"
>Button</dda-button>

Available components

dda-button, dda-dropdown, dda-modal, dda-card, dda-header, and more.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme