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 2.35.0 (2026-08-07)

See changelog

What's new

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

Version 2.34.2 (2026-07-30)

Features

• dhl-button: apply soft hover transition to all variants
• dhl-modal: new fixedHeader and fixedFooter props

Bug fixes

• stencil-library: add missing events

Version 2.34.1 (2026-07-27)

Features

• dhl-input-addon: support default selected option via value

Bug fixes

• dhl-dropdown: emit dhlChange when clear button is clicked
• dhl-input-field: fixed label offset when initial value was set
• dhl-popover: fixed setAttribute error
• dhl-selection-control-group: fixed getAttribute error
• stencil-library: prevent errors on getAttribute & setAttribute

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