Getting Started

Installation

As a prerequisite, ensure you are using the following environment:

• node version: 18.13.0
• npm version: 8.19.3

To install the library, run the following command:

npm

npm install @dhl-official/ui-libraries

Yarn

yarn add @dhl-official/ui-libraries

pnpm

pnpm add @dhl-official/ui-libraries

info

The DUIL is not available in Artifactory.

Framework Setup

React

Import DUIL Custom Elements

To install the DUIL into your React application, import the following into your application entry-point:

import "@dhl-official/ui-libraries/duil-styles-all.css";
import { defineCustomElements } from "@dhl-official/ui-libraries/stencil-library/loader";

Ensure the defineCustomElements() function is called after ReactDOM.render() so that all DUIL custom elements are defined and registered in the browser's Custom Elements registry before they are used within the React components.

Example usage in React with Vite

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "@dhl-official/ui-libraries/duil-styles-all.css";
import { defineCustomElements } from "@dhl-official/ui-libraries/stencil-library/loader";
  
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
  <App />
</React.StrictMode>
);
defineCustomElements();

You should now be able to use DUIL components as following within your React application:

<DhlButton>Button</DhlButton>

Vue

Import DUIL Custom Elements

To install the DUIL into your Vue application, import the following into your application entry-point:

import "@dhl-official/ui-libraries/duil-styles-all.css";
import { defineCustomElements } from "@dhl-official/ui-libraries/stencil-library/loader";

Ensure the defineCustomElements() function is called after createApp(App).mount('#app') so that all DUIL custom elements are defined and registered in the browser's Custom Elements registry before they are used within the Vue application.

Example usage in Vue with Vite

import { createApp } from 'vue';
import App from './App.vue';
import "@dhl-official/ui-libraries/duil-styles-all.css";
import { defineCustomElements } from "@dhl-official/ui-libraries/stencil-library/loader";
  
createApp(App).mount('#app');
  
defineCustomElements();

You should now be able to use DUIL components as following within your Vue application:

<DhlButton>Button</DhlButton>

Angular

Enable Custom Elements

To install the DUIL into your Angular application, first enable custom element schemas within app.module.ts. Import CUSTOM_ELEMENTS_SCHEMA from @angular/core and add it to the schemas array as shown below:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component'; 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Import DUIL Custom Elements

Ensure the defineCustomElements() function is called before the app is loaded (entry point usually found in main.ts) so that all DUIL custom elements are defined and registered in the browsers Custom Elements registry.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { defineCustomElements } from '@dhl-official/ui-libraries/stencil-library/loader';
import { AppModule } from './app/app.module';
 
defineCustomElements();
 
platformBrowserDynamic()
  .bootstrap(AppModule)
  .catch((err) => console.error(err));

Install Styles

To install the component styles, navigate to angular.jsonand add the following to the styles array:

"styles": [
    "node_modules/@dhl-official/ui-libraries/duil-styles-all.css"
  ]

You should now be able to use DUIL components as following within your Angular application:

<dhl-button>Button</dhl-button>

Troubleshooting

If you require installation support or have feedback on the installation documentaton, please contact us via the getting help page.

Known issues

If you are a Vue user, in some instances the .prop attribute is needed for certain properties e.g:

<DhlText size="sm" :isParagraph="isParagraph">Text</DhlText>

should be

<DhlText size="sm" :isParagraph.prop="isParagraph">Text</DhlText>