DHL User Interface Library

Browse componentsHow to use?

Build sustainable solutions with our agnostic web componentsFor developers

Design consistent, on-brand DHL experiencesFor designers

Help shape the future of DHL's design systemContribution

What's newVersion 3.0.3 (2026-08-25)

See changelog

What's new

Version 3.0.3 (2026-08-25)

Features

• dhl-date: add format prop for predefined date formats
• dhl-table: emit dhlTableSortChange, add manualSort prop
• tokens: Delivery Arabic & Delivery Vietnamese fonts added, introduced dedicated font-family tokens: --dui-font-family-arabic & --dui-font-family-vietnamese

Bug fixes

• dhl-accordion: soloExpandable fixed
• dhl-alert: fixed displaying link on initial render
• dhl-country-select: fixed issue with option selection
• dhl-dropdown: expose combobox semantics to screen readers
• dhl-dropdown: fixed issues with label and placeholder

Version 3.0.2 (2026-08-25)

Features

• dhl-date: add format prop for predefined date formats
• dhl-table: emit dhlTableSortChange, add manualSort prop
• tokens: Delivery Arabic & Delivery Vietnamese fonts added, introduced dedicated font-family tokens: --dui-font-family-arabic & --dui-font-family-vietnamese

Bug fixes

• dhl-accordion: soloExpandable fixed
• dhl-alert: fixed displaying link on initial render
• dhl-country-select: fixed issue with option selection
• dhl-dropdown: expose combobox semantics to screen readers
• dhl-dropdown: fixed issues with label and placeholder

Version 2.35.0 (2026-08-07)

Features

• dhl-autocomplete-field: expose item-content slot on options
• dhl-date: added dataMaskPii prop for PII masking
• dhl-select: added menuListPosition prop to set position for options menu list
• stencil-library: new component created: dhl-skeleton:
• dhl-table: per-cell/header slots, built-in pagination, i18n

Bug fixes

• dhl-accordion: fixed hover effect and focus styling
• dhl-action-bar: position of the clear button
• dhl-autocomplete-field: wrap custom slot options, no overlap
• dhl-country-select: fixed NI flag
• dhl-date: emit dhlChange once and on invalid range

See changelog

Built for modernDHL product teams

We've kept our tech stack minimal, so you can focus on building.

70+Components

44+Teams using DUIL

43.7kFigma instances

Accessibility
out of the box.Every component ships WCAG 2.1 AA compliant, with full keyboard navigation and ARIA support built in, so your team can build inclusive experiences without extra effort.

Keyboard navigationNavigate every element without a mouse

Focus managementGuide users to the right interactive element

Screen reader supportEnsure content is announced clearly

a11y checklist

Need a token?Don't be shy and requestRequest token

Address verification
required

We were unable to verify the delivery address for your shipment. Please review the recipient details and confirm the correct address to ensure successful delivery.

CancelConfirm

Route

From

To

Notify recipient by SMSSend delivery updates to the recipient's mobile number

70+ building block
componentsA comprehensive UI library built for DHL digital products. Assemble consistent, accessible experiences using ready-to-use components aligned with DHL brand standards.

ActionsButtons, links, and interactive controls

NavigationMenus, tabs, breadcrumbs, and wayfinding

InputsText fields, dropdowns, checkboxes, and pickers

System feedbackAlerts, toasts, modals, and notifications

ContentCards, tables, lists, and data display

Component overview

Community & toolsConnect, contribute, and collaborate with the DHL Design System team.

Stay connectedTeams channel

Report bugs & request featuresGitHub

Design assets & componentsFigma library

Interactive component docsStorybook